From 7033507679940731d80478e82b3a5be284f8e2da Mon Sep 17 00:00:00 2001
From: "CirnoV (Sickle)" <cirnov59@gmail.com>
Date: Thu, 18 Apr 2024 17:52:36 +0900
Subject: [PATCH] =?UTF-8?q?Try=20Request/Response=20=ED=83=AD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../endpoint/playground/try/ResExample.tsx    |  2 +-
 .../rest-api/endpoint/playground/try/Tabs.tsx |  9 ++-
 .../rest-api/endpoint/playground/try/Try.tsx  | 76 ++++++++++++-------
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx b/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx
index d790478a2..c4ed14309 100644
--- a/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx
+++ b/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx
@@ -2,7 +2,7 @@ import JsonViewer from "../../../editor/JsonViewer";
 import Card from "../Card";
 
 export interface ResExampleProps {
-  example: { [key: string]: unknown };
+  example: { [key: string]: unknown } | undefined;
 }
 
 export default function ResExample({ example }: ResExampleProps) {
diff --git a/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx b/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx
index 7b178a90a..f64b5c15e 100644
--- a/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx
+++ b/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx
@@ -1,4 +1,4 @@
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 import type React from "preact/compat";
 
 export interface Tab<Id extends string> {
@@ -8,10 +8,13 @@ export interface Tab<Id extends string> {
 }
 export interface TabsProps<Id extends string> {
   tabs: (Tab<Id> | false | 0)[];
+  tabIdSignal?: Signal<string | Id>;
 }
-export function Tabs<Id extends string>({ tabs }: TabsProps<Id>) {
+export function Tabs<Id extends string>({ tabs, tabIdSignal }: TabsProps<Id>) {
   const _tabs = tabs.filter(Boolean);
-  const currTabIdSignal = useSignal(_tabs[0]?.id || "");
+  const currTabIdSignal = tabIdSignal
+    ? tabIdSignal
+    : useSignal(_tabs[0]?.id || "");
   const currTabId = currTabIdSignal.value;
   const currTab = _tabs.find((tab) => tab.id === currTabId);
   return (
diff --git a/src/layouts/rest-api/endpoint/playground/try/Try.tsx b/src/layouts/rest-api/endpoint/playground/try/Try.tsx
index bbbb19a78..9181aca37 100644
--- a/src/layouts/rest-api/endpoint/playground/try/Try.tsx
+++ b/src/layouts/rest-api/endpoint/playground/try/Try.tsx
@@ -8,6 +8,7 @@ import Req from "./Req";
 import ReqSample from "./ReqSample";
 import ResComponent, { type Res } from "./Res";
 import ResExample from "./ResExample";
+import { Tabs } from "./Tabs";
 
 export interface TryProps {
   apiHost: string;
@@ -24,36 +25,57 @@ export default function Try(props: TryProps) {
   const harRequestSignal = useSignal<HarRequest | undefined>(undefined);
   const example =
     props.operation.responses?.["200"]?.content?.["application/json"]?.example;
+  const tabIdSignal = useSignal<"request" | "response">("request");
   return (
     <div
-      class={`grid flex-1 grid-rows-4 gap-3 ${
-        waiting ? "pointer-events-none opacity-50" : ""
-      }`}
+      class={`grid grid-rows-[auto_1fr] flex-1 gap-3 ${waiting ? "pointer-events-none opacity-50" : ""}`}
     >
-      <Req
-        {...props}
-        harRequestSignal={harRequestSignal}
-        execute={(fn) =>
-          void (async () => {
-            try {
-              waitingSignal.value = true;
-              resSignal.value = await fn();
-              errSignal.value = "";
-            } catch (err) {
-              errSignal.value = (err as Error).message;
-            } finally {
-              waitingSignal.value = false;
-            }
-          })()
-        }
-      />
-      {err ? (
-        <Err>{err}</Err>
-      ) : (
-        resSignal.value && <ResComponent resSignal={resSignal} />
-      )}
-      <ReqSample harRequestSignal={harRequestSignal} />
-      {example && <ResExample example={example} />}
+      <Tabs
+        tabIdSignal={tabIdSignal}
+        tabs={[
+          {
+            id: "request",
+            label: "request",
+            render: (key) => (
+              <div key={key} class="grid grid-rows-2 h-full gap-3">
+                <Req
+                  {...props}
+                  harRequestSignal={harRequestSignal}
+                  execute={(fn) =>
+                    void (async () => {
+                      try {
+                        waitingSignal.value = true;
+                        resSignal.value = await fn();
+                        errSignal.value = "";
+                      } catch (err) {
+                        errSignal.value = (err as Error).message;
+                      } finally {
+                        waitingSignal.value = false;
+                        tabIdSignal.value = "response";
+                      }
+                    })()
+                  }
+                />
+                <ReqSample harRequestSignal={harRequestSignal} />
+              </div>
+            ),
+          },
+          {
+            id: "response",
+            label: "response",
+            render: (key) => (
+              <div key={key} class="grid grid-rows-2 h-full gap-3">
+                {err ? (
+                  <Err>{err}</Err>
+                ) : (
+                  <ResComponent resSignal={resSignal} />
+                )}
+                <ResExample example={example} />
+              </div>
+            ),
+          },
+        ]}
+      ></Tabs>
     </div>
   );
 }