From f20fbabba4ec43be4d3e00d1d581fa81acd902e0 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 18:59:54 +0800
Subject: [PATCH] feat(playground): implement terminal state management and
 update Run component for structured message handling

---
 src/app/playground/components/button/run.tsx  | 14 +++++++++++---
 src/app/playground/layout/terminal/result.tsx |  6 +++++-
 src/store/useTerminalStore.ts                 |  9 +++++++++
 src/types/terminal.ts                         |  8 ++++++++
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 src/store/useTerminalStore.ts
 create mode 100644 src/types/terminal.ts

diff --git a/src/app/playground/components/button/run.tsx b/src/app/playground/components/button/run.tsx
index 9257c25..15d465a 100644
--- a/src/app/playground/components/button/run.tsx
+++ b/src/app/playground/components/button/run.tsx
@@ -1,20 +1,28 @@
 "use client";
 
 import { Play } from "lucide-react";
+import { runCode } from "@/actions/docker/run";
 import { Button } from "@/components/ui/button";
 import { useEditorStore } from "@/store/useEditorStore";
+import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function Run() {
   const { language, code } = useEditorStore();
+  const { setType, setMessage } = useTerminalStore();
 
   return (
     <div className="inline-flex -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse">
       <Button
         className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
         variant="outline"
-        onClick={() => {
-          console.log("Run language:", language);
-          console.log("Run code:", code);
+        onClick={async () => {
+          if (language && code) {
+            const result = runCode(language, code);
+            setType((await result).type);
+            setMessage((await result).message);
+          } else {
+            console.error("Language or code is null");
+          }
         }}
       >
         <Play
diff --git a/src/app/playground/layout/terminal/result.tsx b/src/app/playground/layout/terminal/result.tsx
index aad7f0f..c95af08 100644
--- a/src/app/playground/layout/terminal/result.tsx
+++ b/src/app/playground/layout/terminal/result.tsx
@@ -1,5 +1,9 @@
+"use client";
+
 import { Message } from "./components/message";
+import { useTerminalStore } from "@/store/useTerminalStore";
 
 export default function ResultPage() {
-  return <Message type="info" message="This is a message" />;
+  const { type, message } = useTerminalStore();
+  return <>{type && message && <Message type={type} message={message} />}</>;
 }
diff --git a/src/store/useTerminalStore.ts b/src/store/useTerminalStore.ts
new file mode 100644
index 0000000..71d872b
--- /dev/null
+++ b/src/store/useTerminalStore.ts
@@ -0,0 +1,9 @@
+import { create } from "zustand";
+import { TerminalState } from "@/types/terminal";
+
+export const useTerminalStore = create<TerminalState>((set) => ({
+  type: null,
+  message: null,
+  setType: (type) => set({ type }),
+  setMessage: (message) => set({ message }),
+}));
diff --git a/src/types/terminal.ts b/src/types/terminal.ts
new file mode 100644
index 0000000..2043084
--- /dev/null
+++ b/src/types/terminal.ts
@@ -0,0 +1,8 @@
+import { MessageType } from "@/app/playground/layout/terminal/components/message";
+
+export interface TerminalState {
+  type: MessageType | null;
+  message: string | null;
+  setType: (type: MessageType) => void;
+  setMessage: (message: string) => void;
+}