feat(preview): connect preview to db (#231)

* chore: seed

update seed file

* chore: fix typings

* chore: cleanup

* chore: types

update site config types

apps/studio/prisma/seed.ts

@@ -8,6 +8,7 @@ import {
   type Navbar,
   type Footer,
 } from '~/server/modules/resource/resource.types'
+import { type IsomerSitemap } from '@opengovsg/isomer-components'
 import { db } from '../src/server/modules/database'
 
 const NAV_BAR_ITEMS: Navbar['items'] = [
@@ -50,18 +51,52 @@ const NAV_BAR_ITEMS: Navbar['items'] = [
   },
 ]
 
+const FOOTER_ITEMS = [
+  {
+    title: 'About us',
+    url: '/about',
+  },
+  {
+    title: 'Our partners',
+    url: '/partners',
+  },
+  {
+    title: 'Grants and programmes',
+    url: '/grants-and-programmes',
+  },
+  {
+    title: 'Contact us',
+    url: '/contact-us',
+  },
+  {
+    title: 'Something else',
+    url: '/something-else',
+  },
+  {
+    title: 'Resources',
+    url: '/resources',
+  },
+]
+
 async function main() {
   const { id } = await db
     .insertInto('Site')
     .values({
       name: 'Ministry of Trade and Industry',
       config: {
         theme: 'isomer-next',
-        sitemap: {
-          siblingTitles: [],
-          childrenTitles: [],
-          parentTitle: '',
-        },
+        siteName: 'MTI',
+        logoUrl: '',
+        search: undefined,
+        lastUpdated: '',
+        siteMap: {
+          title: 'Home',
+          permalink: '/',
+          children: [],
+          layout: 'content',
+          summary: 'something',
+          lastModified: '',
+        } satisfies IsomerSitemap,
         isGovernment: true,
       } satisfies SiteConfig,
     })
@@ -73,11 +108,11 @@ async function main() {
     .values({
       siteId: id,
       content: {
-        name: 'A foot',
         contactUsLink: '/contact-us',
         feedbackFormLink: 'https://www.form.gov.sg',
         privacyStatementLink: '/privacy',
         termsOfUseLink: '/terms-of-use',
+        siteNavItems: FOOTER_ITEMS,
       } satisfies Footer,
     })
     .execute()

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

@@ -2,8 +2,7 @@ import {
   type IsomerPageSchema,
   RenderEngine,
 } from '@opengovsg/isomer-components'
-import navBar from '../data/navbar.json'
-import footer from '../data/footer.json'
+import { trpc } from '~/utils/trpc'
 
 export interface PreviewProps {
   schema?: {
@@ -13,22 +12,32 @@ export interface PreviewProps {
     content: IsomerPageSchema['content']
   }
 }
+
 export default function Preview({ schema }: PreviewProps) {
   const renderSchema = schema!
+  const [{ theme, isGovernment, sitemap, name }] =
+    trpc.site.getConfig.useSuspenseQuery({ id: 1 })
+  const [{ content: footer }] = trpc.site.getFooter.useSuspenseQuery({
+    id: 1,
+  })
+  const [{ content: navbar }] = trpc.site.getNavbar.useSuspenseQuery({
+    id: 1,
+  })
 
   return (
     <RenderEngine
       site={{
-        siteName: 'Min of ZYX',
+        siteName: name,
+        // TODO: fixup all the typing errors
         // @ts-expect-error blah
+        // TODO: dynamically generate sitemap
         siteMap: { title: 'Home', permalink: '/', children: [] },
-        theme: 'isomer-next',
+        theme,
         logoUrl: 'https://www.isomer.gov.sg/images/isomer-logo.svg',
-        isGovernment: true,
+        isGovernment,
         environment: 'production',
         lastUpdated: '3 Apr 2024',
-        navBarItems: navBar,
-        // @ts-expect-error blah
+        navBarItems: navbar.items,
         footerItems: footer,
       }}
       // @ts-expect-error blah

apps/studio/src/schemas/folder.ts

@@ -8,12 +8,12 @@ export const createFolderSchema = z.object({
   folderTitle: z.string().max(MAX_FOLDER_TITLE_LENGTH),
   folderDescription: z.string().max(MAX_FOLDER_DESCRIPTION_LENGTH),
   permalink: z.string().max(MAX_FOLDER_PERMALINK_LENGTH),
-  siteId: z.string().min(1),
+  siteId: z.number().min(1),
   // Nullable for top level folder
-  parentFolderId: z.string().optional(),
+  parentFolderId: z.number().optional(),
 })
 
 export const readFolderSchema = z.object({
-  siteId: z.string().min(1),
-  resourceId: z.string().min(1),
+  siteId: z.number().min(1),
+  resourceId: z.number().min(1),
 })

apps/studio/src/schemas/page.ts

@@ -3,16 +3,16 @@ import { z } from 'zod'
 const PAGE_LAYOUTS = ['content'] as const
 
 export const getEditPageSchema = z.object({
-  pageId: z.string().min(1),
-  siteId: z.string().min(1),
+  pageId: z.number().min(1),
+  siteId: z.number().min(1),
 })
 
 export const updatePageSchema = getEditPageSchema.extend({
   // NOTE: We allow both to be empty now,
   // in which case this is a no-op.
   // We are ok w/ this because it doesn't
   // incur any db writes
-  parentId: z.string().min(1).optional(),
+  parentId: z.number().min(1).optional(),
   pageName: z.string().min(1).optional(),
 })
 
@@ -25,7 +25,7 @@ export const createPageSchema = z.object({
   pageTitle: z.string(),
   // TODO: add the actual layouts in here
   layout: z.enum(PAGE_LAYOUTS).default('content'),
-  siteId: z.string().min(1),
+  siteId: z.number().min(1),
   // NOTE: implies that top level pages are allowed
-  folderId: z.string().min(1).optional(),
+  folderId: z.number().min(1).optional(),
 })

apps/studio/src/schemas/site.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod'
 
 export const getConfigSchema = z.object({
-  id: z.string().min(1),
+  id: z.number().min(1),
 })

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

@@ -21,26 +21,26 @@ export const getFolders = () =>
     .execute()
 
 // NOTE: Base method for retrieving a resource - no distinction made on whether `blobId` exists
-const getById = (id: string) => db.selectFrom('Resource').where('id', '=', id)
+const getById = (id: number) => db.selectFrom('Resource').where('id', '=', id)
 
 // NOTE: Throw here to fail early if our invariant that a page has a `blobId` is violated
-export const getFullPageById = (id: string) => {
+export const getFullPageById = (id: number) => {
   return getById(id)
     .where('blobId', '!=', null)
     .innerJoin('Blob', 'blobId', 'Blob.id')
     .selectAll()
     .executeTakeFirstOrThrow()
 }
 
-export const getPageById = (id: string) => {
+export const getPageById = (id: number) => {
   return getById(id)
     .where('blobId', '!=', null)
     .selectAll()
     .executeTakeFirstOrThrow()
 }
 
 // TODO: should be selecting from new table
-export const getNavBar = async (siteId: string) => {
+export const getNavBar = async (siteId: number) => {
   const { content, ...rest } = await db
     .selectFrom('Navbar')
     .where('siteId', '=', siteId)
@@ -51,7 +51,7 @@ export const getNavBar = async (siteId: string) => {
   return { ...rest, content: content as Navbar }
 }
 
-export const getFooter = async (siteId: string) => {
+export const getFooter = async (siteId: number) => {
   const { content, ...rest } = await db
     .selectFrom('Footer')
     .where('siteId', '=', siteId)

apps/studio/src/server/modules/resource/resource.types.ts

@@ -2,20 +2,4 @@ import { type IsomerSiteProps } from '@opengovsg/isomer-components'
 
 export type Navbar = { items: IsomerSiteProps['navBarItems'] }
 
-export interface FooterItem {
-  title: string
-  url: string
-  description?: string
-}
-
-export interface Navbar extends Omit<NavbarItem, 'description'> {
-  items: NavbarItem[]
-}
-
-export interface Footer {
-  name: string
-  contactUsLink?: string
-  feedbackFormLink?: string
-  privacyStatementLink?: string
-  termsOfUseLink?: string
-}
+export type Footer = IsomerSiteProps['footerItems']

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

@@ -1,7 +1,7 @@
 import { db } from '../database'
 import { type SiteConfig } from './site.types'
 
-export const getSiteConfig = async (siteId: string) => {
+export const getSiteConfig = async (siteId: number) => {
   const { config, name } = await db
     .selectFrom('Site')
     .where('id', '=', siteId)

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

@@ -1,18 +1,3 @@
-export interface Sitemap {
-  parentTitle: string
-  childrenTitles: string[]
-  siblingTitles: string[]
-}
+import { type IsomerSiteProps } from '@opengovsg/isomer-components'
 
-export const SiteThemes = {
-  classic: 'isomer-classic',
-  next: 'isomer-next',
-} as const
-
-type SiteTheme = (typeof SiteThemes)[keyof typeof SiteThemes]
-
-export interface SiteConfig {
-  theme: SiteTheme
-  isGovernment?: boolean
-  sitemap: Sitemap
-}
+export type SiteConfig = Omit<IsomerSiteProps, 'navBarItems' | 'footerItems'>