feat: finish db flow when creating page for site

apps/studio/src/features/editing-experience/components/PageCreateModal.tsx

@@ -1,6 +1,6 @@
 import type { UseDisclosureReturn } from "@chakra-ui/react"
-import type { z } from "zod"
 import { useEffect } from "react"
+import { useRouter } from "next/router"
 import {
   FormControl,
   FormHelperText,
@@ -23,6 +23,7 @@ import {
   ModalCloseButton,
 } from "@opengovsg/design-system-react"
 import { Controller } from "react-hook-form"
+import { z } from "zod"
 
 import { useZodForm } from "~/lib/form"
 import {
@@ -50,10 +51,17 @@ const clientCreatePageSchema = createPageSchema.omit({
 
 type ClientCreatePageSchema = z.input<typeof clientCreatePageSchema>
 
+const pageCreateQuerySchema = z.object({
+  siteId: z.coerce.number(),
+  resourceId: z.coerce.number().optional(),
+})
+
 export const PageCreateModal = ({
   isOpen,
   onClose,
 }: PageCreateModalProps): JSX.Element => {
+  const { query } = useRouter()
+  const { siteId, resourceId } = pageCreateQuerySchema.parse(query)
   const { mutate, isLoading } = trpc.page.createPage.useMutation({
     onSuccess: onClose,
     // TOOD: Error handling
@@ -63,8 +71,8 @@ export const PageCreateModal = ({
     mutate({
       ...values,
       // TODO: Add siteId to the form
-      siteId: 1,
-      folderId: 1,
+      siteId,
+      folderId: resourceId,
     })
   }
 

apps/studio/src/server/modules/page/page.router.ts

@@ -1,18 +1,12 @@
-import { type ContentPageSchemaType } from "@opengovsg/isomer-components"
+import { TRPCError } from "@trpc/server"
 
-import {
-  createPageSchema,
-  getEditPageSchema,
-  updatePageBlobSchema,
-  updatePageSchema,
-} from "~/schemas/page"
+import { createPageSchema, getEditPageSchema } from "~/schemas/page"
 import { protectedProcedure, router } from "~/server/trpc"
+import { db } from "../database"
 import {
   getFooter,
   getFullPageById,
   getNavBar,
-  updateBlobById,
-  updatePageById,
 } from "../resource/resource.service"
 import { getSiteConfig } from "../site/site.service"
 
@@ -154,9 +148,14 @@ export const pageRouter = router({
   }),
   readPageAndBlob: pageProcedure
     .input(getEditPageSchema)
-    .query(async ({ input, ctx }) => {
-      const { pageId } = input
-      const page = await getFullPageById(pageId)
+    .query(async ({ input: { pageId, siteId } }) => {
+      const page = await getFullPageById({ resourceId: pageId, siteId })
+      if (!page) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "Resource not found",
+        })
+      }
       const pageName: string = page.name
       const siteMeta = await getSiteConfig(page.siteId)
       const navbar = await getNavBar(page.siteId)
@@ -167,31 +166,46 @@ export const pageRouter = router({
         pageName,
         navbar,
         footer,
-        content: content as ContentPageSchemaType,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore type instantiation is excessively deep and possibly infinite
+        content,
         ...siteMeta,
       }
     }),
 
-  updatePage: pageProcedure
-    .input(updatePageSchema)
-    .mutation(async ({ input, ctx }) => {
-      await updatePageById({ ...input, id: input.pageId })
-
-      return input
-    }),
-
-  updatePageBlob: pageProcedure
-    .input(updatePageBlobSchema)
-    .mutation(async ({ input, ctx }) => {
-      await updateBlobById({ ...input, id: input.pageId })
-
-      return input
-    }),
-
   createPage: pageProcedure
     .input(createPageSchema)
-    .mutation(({ input, ctx }) => {
-      return { pageId: "" }
+    .mutation(async ({ input: { pageTitle, siteId, folderId } }) => {
+      // TODO: Validate whether folderId actually is a folder instead of a page
+      // TODO: Validate whether siteId is a valid site
+      // TODO: Validate user has write-access to the site
+      const resource = await db.transaction().execute(async (tx) => {
+        const blob = await tx
+          .insertInto("Blob")
+          .values({
+            content: {
+              page: { title: "" },
+              layout: "homepage",
+              content: [],
+              version: "0.1.0",
+            },
+          })
+          .returning("Blob.id")
+          .executeTakeFirstOrThrow()
+
+        const addedResource = await tx
+          .insertInto("Resource")
+          .values({
+            name: pageTitle,
+            siteId,
+            parentId: folderId,
+            blobId: blob.id,
+          })
+          .returning("Resource.id")
+          .executeTakeFirstOrThrow()
+        return addedResource
+      })
+
+      return { pageId: resource.id }
     }),
-  // TODO: Delete page stuff here
 })