From 964f3cd0bc38f37923d5ed088f3886296fd6922b Mon Sep 17 00:00:00 2001
From: spicyzboss <supachai@spicyz.io>
Date: Fri, 29 Mar 2024 10:24:59 +0700
Subject: [PATCH] feat: load generated template

---
 apps/api/auth/src/main.ts                     | 23 +++++++++++--
 .../project/generated/[id]/index.tsx          | 32 +++++++++++++++++++
 libs/web/dashboard/editor/src/lib/editor.tsx  | 19 +++++++++--
 3 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/routes/dashboard/project/generated/[id]/index.tsx

diff --git a/apps/api/auth/src/main.ts b/apps/api/auth/src/main.ts
index 9e33524..860f394 100644
--- a/apps/api/auth/src/main.ts
+++ b/apps/api/auth/src/main.ts
@@ -1,6 +1,7 @@
 import { Hono } from 'hono';
 import { D1Database, R2Bucket } from '@cloudflare/workers-types';
 import { typeid } from 'typeid-js';
+import { cors } from 'hono/cors';
 
 interface ResponseWrapper<T, E> {
   data: T;
@@ -21,6 +22,8 @@ type Bindings = {
 
 const app = new Hono<{ Bindings: Bindings }>();
 
+app.use('*', cors());
+
 app.get('/users', async (c) => {
   const { oaid } = c.req.query();
   if (!oaid) return c.json(response(null, 'Bad request'));
@@ -412,9 +415,25 @@ app.get('/generates', async (c) => {
 });
 
 app.get('/generates/data', async (c) => {
-  const { projectId, id } = c.req.query();
+  const { id } = c.req.query();
+
+  const getProjectStatement = c.env.DB.prepare(`
+    SELECT
+      p.id,
+      p.user_id 'userId',
+      p.template_id 'templateId',
+      p.name,
+      p.created_at 'createdAt',
+      p.updated_at 'updatedAt'
+    FROM generate as g
+    JOIN project as p
+    ON (g.project_id = p.id)
+    WHERE g.id = ?1 AND p.deleted_at IS NULL
+  `);
+
+  const project = await getProjectStatement.bind(id).first<Project>();
 
-  const key = ['generates', projectId, id].join('/');
+  const key = ['generates', project.id, id].join('/');
 
   const objectRef = await c.env.BUCKET.get(key);
   const file = await objectRef.json();
diff --git a/apps/web/src/routes/dashboard/project/generated/[id]/index.tsx b/apps/web/src/routes/dashboard/project/generated/[id]/index.tsx
new file mode 100644
index 0000000..cef7f04
--- /dev/null
+++ b/apps/web/src/routes/dashboard/project/generated/[id]/index.tsx
@@ -0,0 +1,32 @@
+import { component$, $, useSignal, useOnDocument } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import { Editor } from '@producktivity/web-dashboard-editor';
+
+export default component$(() => {
+  const location = useLocation();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const template = useSignal<{ data: Record<string, any> }>();
+
+  const getGenerateData = $(async () => {
+    const query = new URLSearchParams({
+      id: location.params.id,
+    });
+
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/generates/data?${query.toString()}`, {
+      headers: {
+        'Access-Control-Allow-Origin': import.meta.env.VITE_API_URL,
+      },
+    });
+
+    template.value = await response.json();
+  });
+
+  useOnDocument('load', $(async () => {
+    await getGenerateData();
+  }));
+
+  if (!template.value) return <p>loading</p>;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <Editor id={location.params.id} withoutSidebar withoutToolbar initialTemplate={template.value.data as Record<string, any>} />;
+});
diff --git a/libs/web/dashboard/editor/src/lib/editor.tsx b/libs/web/dashboard/editor/src/lib/editor.tsx
index 59e245b..f3c5a27 100644
--- a/libs/web/dashboard/editor/src/lib/editor.tsx
+++ b/libs/web/dashboard/editor/src/lib/editor.tsx
@@ -13,7 +13,7 @@ export default component$((props: Props) => {
   useContextProvider(Frame, frameStore);
 
   // eslint-disable-next-line qwik/no-use-visible-task
-  useVisibleTask$(({ cleanup }) => {
+  useVisibleTask$(async ({ cleanup }) => {
     if (!editorRef.value || !containerRef.value) return;
 
     const frame = new Canvas(editorRef.value, {
@@ -21,6 +21,15 @@ export default component$((props: Props) => {
       height: containerRef.value.clientHeight,
     });
 
+    if (props.initialTemplate) {
+      console.log(props.initialTemplate);
+      await frame.loadFromJSON(JSON.stringify(props.initialTemplate), () => {
+        frame.renderAll();
+      });
+
+      console.log(frame.toObject());
+    }
+
     frameStore.frame = noSerialize(frame);
     frame.renderAll();
 
@@ -29,9 +38,9 @@ export default component$((props: Props) => {
 
   return (
     <Box width="full" height="full" direction="vertical">
-      <Toolbar />
+      {!props.withoutToolbar && <Toolbar />}
       <Box width="full" height="full" direction="horizontal">
-        <Sidebar />
+        {!props.withoutSidebar && <Sidebar />}
         <Box width="full" height="full" align="center">
           <Box ref={containerRef} style={{ height: 420, width: 595 }} variant="primary">
             <canvas id="editor" ref={editorRef} style={{ width: '100%', height: '100%' }} />
@@ -44,4 +53,8 @@ export default component$((props: Props) => {
 
 interface Props {
   id: string;
+  withoutSidebar?: boolean;
+  withoutToolbar?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialTemplate?: Record<string, any>;
 }