feat: properly update page and site config in preview renderer

apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx

@@ -102,6 +102,7 @@ const useCreatePageWizardContext = ({
   }
 
   return {
+    siteId,
     currentStep,
     formMethods,
     handleCreatePage,

apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx

@@ -1,13 +1,41 @@
+import { useMemo } from "react"
 import { Box, Flex, Stack, Text } from "@chakra-ui/react"
 import { useIsMobile } from "@opengovsg/design-system-react"
+import { format } from "date-fns"
 
 import Preview from "../Preview"
 import { LAYOUT_RENDER_DATA } from "./constants"
 import { useCreatePageWizard } from "./CreatePageWizardContext"
 
 export const PreviewLayout = (): JSX.Element => {
   const isMobile = useIsMobile()
-  const { layoutPreviewJson, currentLayout } = useCreatePageWizard()
+  const {
+    layoutPreviewJson,
+    currentLayout,
+    siteId,
+    formMethods: { watch },
+  } = useCreatePageWizard()
+
+  const currentPermalink = watch("permalink", "/")
+
+  const previewOverrides = useMemo(() => {
+    switch (currentLayout) {
+      case "article": {
+        return {
+          page: {
+            date: format(new Date(), "dd MMM yyyy"),
+          },
+        }
+      }
+      case "content": {
+        return {
+          page: {
+            lastModified: new Date().toString(),
+          },
+        }
+      }
+    }
+  }, [currentLayout])
 
   return (
     <Stack
@@ -44,7 +72,12 @@ export const PreviewLayout = (): JSX.Element => {
             // Key used to reset the scroll to the top whenever layout changes
             key={currentLayout}
           >
-            <Preview {...layoutPreviewJson} />
+            <Preview
+              overrides={previewOverrides}
+              siteId={siteId}
+              permalink={currentPermalink}
+              {...layoutPreviewJson}
+            />
           </Box>
         </Box>
       )}

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

@@ -1,34 +1,53 @@
-import type { IsomerSchema } from "@opengovsg/isomer-components"
+import type {
+  IsomerPageSchemaType,
+  IsomerSchema,
+} from "@opengovsg/isomer-components"
+import type { PartialDeep } from "type-fest"
 import { Skeleton } from "@chakra-ui/react"
 import { RenderEngine } from "@opengovsg/isomer-components"
+import { merge } from "lodash"
 
 import { withSuspense } from "~/hocs/withSuspense"
 import { trpc } from "~/utils/trpc"
 
-function SuspendablePreview(props: IsomerSchema) {
-  const [{ theme, isGovernment, sitemap, name }] =
-    trpc.site.getConfig.useSuspenseQuery({ id: 1 })
+type PreviewProps = IsomerSchema & {
+  permalink: string
+  siteId: number
+  overrides?: PartialDeep<IsomerPageSchemaType>
+}
+
+function SuspendablePreview({
+  permalink,
+  siteId,
+  overrides = {},
+  ...props
+}: PreviewProps) {
+  const [siteConfig] = trpc.site.getConfig.useSuspenseQuery({ id: siteId })
   const [{ content: footer }] = trpc.site.getFooter.useSuspenseQuery({
-    id: 1,
+    id: siteId,
   })
   const [{ content: navbar }] = trpc.site.getNavbar.useSuspenseQuery({
-    id: 1,
+    id: siteId,
+  })
+
+  const renderProps = merge(props, overrides, {
+    page: {
+      permalink,
+    },
   })
 
   return (
     <RenderEngine
-      {...props}
+      {...renderProps}
       site={{
-        siteName: name,
         // TODO: fixup all the typing errors
         // @ts-expect-error to fix when types are proper
         // TODO: dynamically generate sitemap
         siteMap: { title: "Home", permalink: "/", children: [] },
-        theme,
-        logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg",
-        isGovernment,
         environment: "production",
+        // TODO: Fetch from DB in the future
         lastUpdated: "3 Apr 2024",
+        ...siteConfig,
         navBarItems: navbar,
         footerItems: footer,
       }}

apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx

@@ -23,10 +23,11 @@ function EditPage(): JSX.Element {
   } = useEditorDrawerContext()
   const { pageId, siteId } = useQueryParse(editPageSchema)
 
-  const [{ content: page }] = trpc.page.readPageAndBlob.useSuspenseQuery({
-    pageId,
-    siteId,
-  })
+  const [{ content: page, permalink }] =
+    trpc.page.readPageAndBlob.useSuspenseQuery({
+      pageId,
+      siteId,
+    })
 
   useEffect(() => {
     setDrawerState({
@@ -51,7 +52,13 @@ function EditPage(): JSX.Element {
       <GridItem colSpan={2} overflow="scroll">
         {/* TODO: the version here should be obtained from the schema  */}
         {/* and not from the page */}
-        <Preview {...page} version="0.1.0" content={pageState} />
+        <Preview
+          siteId={siteId}
+          {...page}
+          permalink={permalink}
+          version="0.1.0"
+          content={pageState}
+        />
       </GridItem>
     </Grid>
   )

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

@@ -77,21 +77,22 @@ export const pageRouter = router({
   readPageAndBlob: protectedProcedure
     .input(getEditPageSchema)
     .query(async ({ input: { pageId, siteId } }) => {
+      // TODO: Return blob last modified so the renderer can show last modified
       const page = await getFullPageById({ resourceId: pageId, siteId })
       if (!page) {
         throw new TRPCError({
           code: "NOT_FOUND",
           message: "Resource not found",
         })
       }
-      const pageName = page.permalink
+      const permalink = page.permalink
       const siteMeta = await getSiteConfig(page.siteId)
       const navbar = await getNavBar(page.siteId)
       const footer = await getFooter(page.siteId)
       const { content } = page
 
       return {
-        pageName,
+        permalink,
         navbar,
         footer,
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

apps/studio/src/server/modules/site/site.service.ts

@@ -1,30 +1,15 @@
-import {
-  type IsomerGeneratedSiteProps,
-  type IsomerSiteConfigProps,
-} from "@opengovsg/isomer-components"
+import { type IsomerSiteConfigProps } from "@opengovsg/isomer-components"
 
 import { db, sql } from "../database"
 
 export const getSiteConfig = async (siteId: number) => {
-  const { config, name } = await db
+  const { config } = await db
     .selectFrom("Site")
     .where("id", "=", siteId)
-    .selectAll()
+    .select("Site.config")
     .executeTakeFirstOrThrow()
 
-  // TODO: add JSON parsing + validation
-  // at present, this is stored at JSONB inside our db.
-  // TODO: remove siteMap as it is a generated field
-  const { theme, isGovernment, sitemap } = config as IsomerSiteConfigProps & {
-    sitemap: IsomerGeneratedSiteProps["siteMap"]
-  }
-
-  return {
-    theme,
-    isGovernment,
-    sitemap,
-    name,
-  }
+  return config
 }
 
 // Note: This overwrites the full site config