Load project framework and options on canvas

Web-Spinner-core · Dec 5, 2023 · 75e229b · 75e229b
1 parent 138a8be
commit 75e229b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 deletions.
diff --git a/apps/web/app/projects/[projectId]/canvas/layout.tsx b/apps/web/app/projects/[projectId]/canvas/layout.tsx
@@ -1,6 +1,7 @@
 import { auth } from "@clerk/nextjs";
 import { prisma } from "database";
 import { TitledHeader } from "~/components/header";
+import CanvasPage from "./page";
 
 interface Props {
   params: {
@@ -10,7 +11,6 @@ interface Props {
 }
 
 export default async function CanvasLayout({
-  children,
   params: { projectId },
 }: Props) {
   const { userId } = auth();
@@ -20,6 +20,9 @@ export default async function CanvasLayout({
       where: {
         id: projectId,
       },
+      include: {
+        repository: true,
+      },
     }),
     prisma.project.findMany({
       where: {
@@ -43,7 +46,7 @@ export default async function CanvasLayout({
         optionsPlaceholder="No projects found"
         selectedOption={currentProject.id}
       />
-      {children}
+      <CanvasPage project={currentProject} />
     </main>
   );
 }
diff --git a/apps/web/app/projects/[projectId]/canvas/page.tsx b/apps/web/app/projects/[projectId]/canvas/page.tsx
@@ -9,39 +9,17 @@ import {
   TabsList,
   TabsTrigger,
   Toaster,
-  useToast
+  useToast,
 } from "@ui/components";
 import Canvas from "@ui/components/canvas";
 import IconLabel from "@ui/components/icon-label";
 import clsx from "clsx";
-import {
-  GitBranchIcon,
-  GithubIcon,
-  Loader2
-} from "lucide-react";
+import { Project, Repository } from "database";
+import { GitBranchIcon, GithubIcon, Loader2 } from "lucide-react";
 import { useEffect, useReducer, useState } from "react";
 import { CopyBlock, nord } from "react-code-blocks";
 import { convertEditorToCode } from "~/lib/editorToCode";
 
-const projects = [
-  {
-    label: "My Journal",
-    value: "my_journal",
-  },
-  {
-    label: "Portfolio Website",
-    value: "portfolio_website",
-  },
-  {
-    label: "Sandbox",
-    value: "sandbox",
-  },
-];
-const repo = "gramliu/custom-journal";
-const branch = "main";
-const framework = "Next.js";
-const options = ["App Router"];
-
 interface ReducerState {
   [key: string]: string;
 }
@@ -63,12 +41,12 @@ function reducer(state: ReducerState, action: ReducerAction): ReducerState {
 }
 
 interface Props {
-  params: {
-    projectId: string;
+  project: Project & {
+    repository: Repository;
   };
 }
 
-export default function CanvasPage({ params: { projectId } }: Props) {
+export default function CanvasPage({ project }: Props) {
   const [editor, setEditor] = useState<Editor>();
   const [standaloneCode, setStandaloneCode] = useState<string>();
   const [loading, setLoading] = useState<boolean>(false);
@@ -109,10 +87,13 @@ export default function CanvasPage({ params: { projectId } }: Props) {
             "flex flex-col justify-self-center items-start gap-2"
           )}
         >
-          <IconLabel icon={<GithubIcon />} label={repo} />
+          <IconLabel
+            icon={<GithubIcon />}
+            label={project.repository.fullName}
+          />
           <div className="flex flex-row gap-2">
-            <Badge variant="secondary">{framework}</Badge>
-            {options.map((option) => (
+            <Badge variant="secondary">{project.framework}</Badge>
+            {project.frameworkOptions.map((option) => (
               <Badge variant="outline" key={`option_${option}`}>
                 {option}
               </Badge>
@@ -125,7 +106,7 @@ export default function CanvasPage({ params: { projectId } }: Props) {
             "flex flex-col justify-self-center items-start gap-2"
           )}
         >
-          <IconLabel icon={<GitBranchIcon />} label={branch} />
+          <IconLabel icon={<GitBranchIcon />} label={project.branch} />
         </div>
       </section>
       {/* Panels */}

diff --git a/packages/database/prisma/schema.prisma b/packages/database/prisma/schema.prisma
@@ -1,5 +1,5 @@
 generator client {
-  provider      = "prisma-client-js"
+  provider = "prisma-client-js"
 }
 
 datasource db {
@@ -44,13 +44,16 @@ model Page {
 model Project {
   id String @id @map("_id")
 
-  userId       String
-  name         String
-  
+  userId String
+  name   String
+
   repositoryId String     @unique
   repository   Repository @relation(fields: [repositoryId], references: [id])
   branch       String
 
+  framework        String
+  frameworkOptions String[]
+
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }