From 549a544939230fdb39ecacd6843bbb0a92649cb9 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Thu, 15 Jun 2023 16:49:14 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ApiModal):=20add=20onValueChan?=
 =?UTF-8?q?ge=20prop=20to=20Tabs=20component=20to=20update=20activeTab=20s?=
 =?UTF-8?q?tate=20The=20activeTab=20state=20was=20previously=20a=20number,?=
 =?UTF-8?q?=20but=20it=20was=20causing=20a=20type=20error=20when=20passed?=
 =?UTF-8?q?=20as=20a=20prop=20to=20the=20TabsTrigger=20component.=20Changi?=
 =?UTF-8?q?ng=20it=20to=20a=20string=20fixed=20the=20issue.=20Additionally?=
 =?UTF-8?q?,=20the=20onValueChange=20prop=20was=20added=20to=20the=20Tabs?=
 =?UTF-8?q?=20component=20to=20update=20the=20activeTab=20state=20when=20a?=
 =?UTF-8?q?=20new=20tab=20is=20selected.=20=F0=9F=90=9B=20fix(ApiModal):?=
 =?UTF-8?q?=20change=20activeTab=20state=20from=20number=20to=20string=20t?=
 =?UTF-8?q?o=20fix=20type=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/ApiModal/index.tsx | 49 +++++++++++-----------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f03879a98..c3b821ac9 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -32,7 +32,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp } = useContext(PopUpContext);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState("0");
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
@@ -96,32 +96,33 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
-        <Tabs defaultValue={"0"} className="w-full h-full overflow-hidden text-center bg-muted rounded-md border">
+        <Tabs
+          defaultValue={"0"}
+          className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
+          onValueChange={(value) => setActiveTab(value)}
+        >
           <div className="flex items-center justify-between px-2">
+            <TabsList>
+              {tabs.map((tab, index) => (
+                <TabsTrigger value={index.toString()}>{tab.name}</TabsTrigger>
+              ))}
+            </TabsList>
+            <div className="float-right">
+              <button
+                className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
+                onClick={copyToClipboard}
+              >
+                {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
+                {isCopied ? "Copied!" : "Copy code"}
+              </button>
+            </div>
+          </div>
 
-          <TabsList>
-            {tabs.map((tab, index) => (
-              <TabsTrigger value={index.toString()}>{tab.name}</TabsTrigger>
-            ))}
-          </TabsList>
-                <div className="float-right">
-                  <button
-                    className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
-                    onClick={copyToClipboard}
-                  >
-                    {isCopied ? (
-                      <Check size={18} />
-                    ) : (
-                      <Clipboard size={15} />
-                    )}
-                    {isCopied ? "Copied!" : "Copy code"}
-                  </button>
-                </div>
-              </div>
-          
           {tabs.map((tab, index) => (
-            <TabsContent value={index.toString()} className="overflow-hidden w-full h-full px-4 pb-4 -mt-1">
-              
+            <TabsContent
+              value={index.toString()}
+              className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
+            >
               <SyntaxHighlighter
                 className="h-[400px] w-full overflow-auto"
                 language={tab.mode}