fix: tutorials

AElfProject · Nov 19, 2024 · 6f86035 · 6f86035
1 parent ecb8a04
commit 6f86035
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 88 deletions.
diff --git a/components/tutorial/generate-template-solidity.tsx b/components/tutorial/generate-template-solidity.tsx
@@ -4,6 +4,8 @@ import { Button } from "@/components/ui/button";
 import { db } from "@/data/db";
 import { usePathname } from "@/lib/use-pathname";
 import { mutate } from "swr";
+import { deleteExistingWorkspace, doesWorkspaceExist } from "./generate-template";
+import { useEffect } from "react";
 
 export default function GenerateTemplateSolidity({
   template = "solidity",
@@ -13,48 +15,63 @@ export default function GenerateTemplateSolidity({
   const pathname = usePathname();
 
   const onClick = async () => {
-    const response = window.confirm("This will reset the files, are you sure?");
+    const exists = await doesWorkspaceExist(pathname);
 
-    if (!response) return;
+    if (exists) {
+      const response = window.confirm("This will reset the files, are you sure?");
 
-    try {
-      await db.workspaces.delete(pathname);
-      await db.workspaces.add({
-        name: pathname,
-        template,
-        dll: "",
-      });
-
-      const templateData: { path: string; contents: string }[] = [
-        {
-          path: "src/HelloWorld.sol",
-          contents: `// SPDX-License-Identifier: MIT
-// compiler version must be greater than or equal to 0.8.24 and less than 0.9.0
-pragma solidity ^0.8.24;
+      if (!response) return;
+    }
 
-contract HelloWorld {
-    string public greet = "Hello World!";
-}
-`,
-        },
-      ];
-
-      await db.files.bulkDelete(
-        (await db.files.toArray())
-          .map((i) => i.path)
-          .filter((i) => i.startsWith(pathname + "/"))
-      );
-      await db.files.bulkAdd(
-        templateData.map(({ path, contents }) => ({
-          path: `${pathname}/${path}`,
-          contents,
-        }))
-      );
+    try {
+      await deleteExistingWorkspace(pathname);
+      await generateTemplateFiles(pathname, template);
       await mutate(`file-explorer-${pathname}`);
     } catch (err) {
       console.log(err);
     }
   };
 
+  useEffect(() => {
+    init(pathname, template);
+  }, [pathname, template]);
+
   return <Button onClick={onClick}>Generate Template</Button>;
 }
+
+async function init(pathname: string, template: string) {
+  const exists = await doesWorkspaceExist(pathname);
+  if (!exists) {
+    await generateTemplateFiles(pathname, template);
+    await mutate(`file-explorer-${pathname}`);
+  }
+}
+
+async function generateTemplateFiles(pathname: string, template: string) {
+  await db.workspaces.add({
+    name: pathname,
+    template,
+    dll: "",
+  });
+
+  const templateData: { path: string; contents: string }[] = [
+    {
+      path: "src/HelloWorld.sol",
+      contents: `// SPDX-License-Identifier: MIT
+// compiler version must be greater than or equal to 0.8.24 and less than 0.9.0
+pragma solidity ^0.8.24;
+
+contract HelloWorld {
+string public greet = "Hello World!";
+}
+`,
+    },
+  ];
+
+  await db.files.bulkAdd(
+    templateData.map(({ path, contents }) => ({
+      path: `${pathname}/${path}`,
+      contents,
+    }))
+  );
+}
diff --git a/components/tutorial/generate-template.tsx b/components/tutorial/generate-template.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { db } from "@/data/db";
 import { playgroundService } from "@/data/playground-service";
 import { usePathname } from "@/lib/use-pathname";
+import { useEffect } from "react";
 import { mutate } from "swr";
 
 export default function GenerateTemplate({
@@ -18,53 +19,84 @@ export default function GenerateTemplate({
   const pathname = usePathname();
 
   const onClick = async () => {
-    const response = window.confirm("This will reset the files, are you sure?");
+    const exists = await doesWorkspaceExist(pathname);
 
-    if (!response) return;
+    if (exists) {
+      const response = window.confirm("This will reset the files, are you sure?");
+
+      if (!response) return;
+    }
 
     try {
-      await db.workspaces.delete(pathname);
-      await db.workspaces.add({
-        name: pathname,
-        template,
-        dll: "",
-      });
-
-      const _templateData = await playgroundService.getTemplateData(
-        template,
-        name
-      );
-
-      const templateData = _templateData.map((i) => {
-        if (i.path.includes("hello_world_contract.proto")) {
-          return {
-            ...i,
-            path: i.path.replace(
-              "hello_world_contract.proto",
-              `${renameHelloWorldProto}.proto`
-            ),
-          };
-        }
-
-        return i;
-      });
-
-      await db.files.bulkDelete(
-        (await db.files.toArray())
-          .map((i) => i.path)
-          .filter((i) => i.startsWith(pathname + "/"))
-      );
-      await db.files.bulkAdd(
-        templateData.map(({ path, contents }) => ({
-          path: `${pathname}/${path}`,
-          contents,
-        }))
-      );
+      await deleteExistingWorkspace(pathname);
+      await generateTemplateFiles(pathname, name, template, renameHelloWorldProto);
       await mutate(`file-explorer-${pathname}`);
     } catch (err) {
       console.log(err);
     }
   };
 
+  useEffect(() => {
+    init(pathname, name, template, renameHelloWorldProto);
+  }, [pathname, name, template, renameHelloWorldProto]);
+
   return <Button onClick={onClick}>Generate Template</Button>;
 }
+
+async function init(pathname: string, name: string, template: string, renameHelloWorldProto: string) {
+  const exists = await doesWorkspaceExist(pathname);
+  if (!exists) {
+    await generateTemplateFiles(pathname, name, template, renameHelloWorldProto);
+    await mutate(`file-explorer-${pathname}`);
+  }
+}
+
+
+export async function doesWorkspaceExist(pathname: string) {
+  const workspace = await db.workspaces.get(pathname);
+
+  return !!workspace;
+}
+
+export async function deleteExistingWorkspace(pathname: string) {
+  await db.workspaces.delete(pathname);
+  await db.files.bulkDelete(
+    (await db.files.toArray())
+      .map((i) => i.path)
+      .filter((i) => i.startsWith(pathname + "/"))
+  );
+}
+
+async function generateTemplateFiles(pathname: string, name: string, template: string, renameHelloWorldProto: string) {
+  await db.workspaces.add({
+    name: pathname,
+    template,
+    dll: "",
+  });
+
+  const _templateData = await playgroundService.getTemplateData(
+    template,
+    name
+  );
+
+  const templateData = _templateData.map((i) => {
+    if (i.path.includes("hello_world_contract.proto")) {
+      return {
+        ...i,
+        path: i.path.replace(
+          "hello_world_contract.proto",
+          `${renameHelloWorldProto}.proto`
+        ),
+      };
+    }
+
+    return i;
+  });
+
+  await db.files.bulkAdd(
+    templateData.map(({ path, contents }) => ({
+      path: `${pathname}/${path}`,
+      contents,
+    }))
+  );
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -13,6 +13,30 @@ import HelloWorldSolidity from './tutorials/hello-world-solidity.mdx';
 import LotteryGame from './tutorials/lottery-game.mdx';
 import Todo from './tutorials/todo.mdx';
 import VoteContract from './tutorials/vote-contract.mdx';
+import {Component as Tutorial} from './routes/tutorial';
+
+const tutorials = [
+  {
+    path: 'hello-world',
+    component: HelloWorld,
+  },
+  {
+    path: 'hello-world-solidity',
+    component: HelloWorldSolidity,
+  },
+  {
+    path: 'lottery-game',
+    component: LotteryGame,
+  },
+  {
+    path: 'todo',
+    component: Todo,
+  },
+  {
+    path: 'vote-contract',
+    component: VoteContract,
+  },
+]
 
 const router = createBrowserRouter(createRoutesFromElements(<Route path="/" lazy={() => import('./routes/root')}>
   <Route path="" lazy={() => import('./routes/home')} errorElement={<ErrorPage />} />
@@ -21,21 +45,11 @@ const router = createBrowserRouter(createRoutesFromElements(<Route path="/" lazy
     <Route path="" element={<Editor />} />
   </Route>
   <Route path="tutorials" lazy={() => import('./routes/tutorials')} />
-  <Route path="tutorials/hello-world" lazy={() => import('./routes/workspace')}>
-    <Route path="" element={<HelloWorld />} />
-  </Route>
-  <Route path="tutorials/hello-world-solidity" lazy={() => import('./routes/workspace')}>
-    <Route path="" element={<HelloWorldSolidity />} />
-  </Route>
-  <Route path="tutorials/lottery-game" lazy={() => import('./routes/workspace')}>
-    <Route path="" element={<LotteryGame />} />
-  </Route>
-  <Route path="tutorials/todo" lazy={() => import('./routes/workspace')}>
-    <Route path="" element={<Todo />} />
-  </Route>
-  <Route path="tutorials/vote-contract" lazy={() => import('./routes/workspace')}>
-    <Route path="" element={<VoteContract />} />
-  </Route>
+  {tutorials.map(({ path, component: Component }) => (
+    <Route key={path} path={`tutorials/${path}`} lazy={() => import('./routes/workspace')}>
+      <Route path="" element={<Tutorial><Component /></Tutorial>} />
+    </Route>
+  ))}
   <Route path="deployments" lazy={() => import('./routes/deployments')} />
   <Route path="import" lazy={() => import('./routes/import')} />
   <Route path="share/:id" lazy={() => import('./routes/share')} />