chore: fix typings

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/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)