From 5a25b4aeea7dee73dcdfbce5472062b72213cc30 Mon Sep 17 00:00:00 2001
From: Grzegorz <niebadz@gmail.com>
Date: Fri, 9 Aug 2024 13:42:33 +0200
Subject: [PATCH] feature(studio): clear tabs when example is inserted (#1204)

---
 .../components/button/InsertExampleButton.tsx |  6 ++--
 .../(website)/studio/src/store/snippets.ts    | 28 +++++++++----------
 .../studio/src/utils/validation/sleep.ts      |  2 ++
 3 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 apps/frontend/app/(website)/studio/src/utils/validation/sleep.ts

diff --git a/apps/frontend/app/(website)/studio/src/components/button/InsertExampleButton.tsx b/apps/frontend/app/(website)/studio/src/components/button/InsertExampleButton.tsx
index 12daa29d4..fd420d18e 100644
--- a/apps/frontend/app/(website)/studio/src/components/button/InsertExampleButton.tsx
+++ b/apps/frontend/app/(website)/studio/src/components/button/InsertExampleButton.tsx
@@ -9,14 +9,15 @@ import { buildDefaultCodemodSource, useModStore } from "@studio/store/mod";
 import { useSnippetsStore } from "../../store/snippets";
 
 const InsertExampleButton = () => {
-  const { engine, getSelectedEditors } = useSnippetsStore();
+  const { engine, getSelectedEditors, clearAll } = useSnippetsStore();
   const { setContent } = useModStore();
   return (
     <Tooltip
       trigger={
         <Button
           className="flex items-center justify-center px-0"
-          onClick={() => {
+          onClick={async () => {
+            await clearAll();
             getSelectedEditors().setBeforeSnippet(BEFORE_SNIPPET_DEFAULT_CODE);
             getSelectedEditors().setAfterSnippet(AFTER_SNIPPET_DEFAULT_CODE);
             setContent(buildDefaultCodemodSource(engine));
@@ -24,7 +25,6 @@ const InsertExampleButton = () => {
           size="xs"
           variant="ghost"
         >
-          {/* <KeyboardIcon className="h-4 w-4" /> */}
           <ExampleIcon />
           <span className="sr-only">Insert Example</span>
         </Button>
diff --git a/apps/frontend/app/(website)/studio/src/store/snippets.ts b/apps/frontend/app/(website)/studio/src/store/snippets.ts
index a323ffeaa..eaa06e27d 100644
--- a/apps/frontend/app/(website)/studio/src/store/snippets.ts
+++ b/apps/frontend/app/(website)/studio/src/store/snippets.ts
@@ -9,6 +9,7 @@ import {
 } from "@studio/store/utils/getSnippetInitialState";
 import type { TreeNode } from "@studio/types/tree";
 import { type RangeCommand, buildRanges } from "@studio/utils/tree";
+import { sleep } from "@studio/utils/validation/sleep";
 import { map, mapObjIndexed, omit, reduce, remove } from "ramda";
 import { parse } from "valibot";
 import { create } from "zustand";
@@ -164,24 +165,21 @@ export const useSnippetsStore = create<SnippetsState>((set, get) => ({
         editors,
       });
   },
-  clearAll: () => {
+  clearAll: async () => {
     set({
       selectedPairIndex: 0,
     });
-    setTimeout(
-      () =>
-        set({
-          editors: [
-            {
-              name: "Test 1",
-              before: getSnippetInitialState(),
-              after: getSnippetInitialState(),
-              output: getSnippetInitialState(),
-            },
-          ],
-        }),
-      100,
-    );
+    await sleep(1);
+    set({
+      editors: [
+        {
+          name: "Test 1",
+          before: getSnippetInitialState(),
+          after: getSnippetInitialState(),
+          output: getSnippetInitialState(),
+        },
+      ],
+    });
   },
   selectedPairIndex: 0,
   getAllNames: () => get().editors.map(({ name }) => name),
diff --git a/apps/frontend/app/(website)/studio/src/utils/validation/sleep.ts b/apps/frontend/app/(website)/studio/src/utils/validation/sleep.ts
new file mode 100644
index 000000000..a8c24f36c
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/src/utils/validation/sleep.ts
@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));