From e65788a385cb25a57314cead34c72d284555cb06 Mon Sep 17 00:00:00 2001
From: seaerchin <jiachin@open.gov.sg>
Date: Tue, 25 Jun 2024 17:11:34 +0800
Subject: [PATCH] chore: fix typings

---
 .../editing-experience/components/Preview.tsx | 23 +++++++++++++------
 apps/studio/src/schemas/folder.ts             |  8 +++----
 apps/studio/src/schemas/page.ts               | 10 ++++----
 apps/studio/src/schemas/site.ts               |  2 +-
 .../modules/resource/resource.service.ts      | 10 ++++----
 .../src/server/modules/site/site.service.ts   |  2 +-
 6 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/apps/studio/src/features/editing-experience/components/Preview.tsx b/apps/studio/src/features/editing-experience/components/Preview.tsx
index 4084f28146..bea2cdd56d 100644
--- a/apps/studio/src/features/editing-experience/components/Preview.tsx
+++ b/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
diff --git a/apps/studio/src/schemas/folder.ts b/apps/studio/src/schemas/folder.ts
index bf8af787ad..428a632dd6 100644
--- a/apps/studio/src/schemas/folder.ts
+++ b/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),
 })
diff --git a/apps/studio/src/schemas/page.ts b/apps/studio/src/schemas/page.ts
index efe29e0161..bdade68faa 100644
--- a/apps/studio/src/schemas/page.ts
+++ b/apps/studio/src/schemas/page.ts
@@ -3,8 +3,8 @@ 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({
@@ -12,7 +12,7 @@ export const updatePageSchema = getEditPageSchema.extend({
   // 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(),
 })
diff --git a/apps/studio/src/schemas/site.ts b/apps/studio/src/schemas/site.ts
index 3ea6ad037d..17c80c6d8a 100644
--- a/apps/studio/src/schemas/site.ts
+++ b/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),
 })
diff --git a/apps/studio/src/server/modules/resource/resource.service.ts b/apps/studio/src/server/modules/resource/resource.service.ts
index 6dce68de39..6564fb66d1 100644
--- a/apps/studio/src/server/modules/resource/resource.service.ts
+++ b/apps/studio/src/server/modules/resource/resource.service.ts
@@ -21,10 +21,10 @@ 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')
@@ -32,7 +32,7 @@ export const getFullPageById = (id: string) => {
     .executeTakeFirstOrThrow()
 }
 
-export const getPageById = (id: string) => {
+export const getPageById = (id: number) => {
   return getById(id)
     .where('blobId', '!=', null)
     .selectAll()
@@ -40,7 +40,7 @@ export const getPageById = (id: string) => {
 }
 
 // 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)
diff --git a/apps/studio/src/server/modules/site/site.service.ts b/apps/studio/src/server/modules/site/site.service.ts
index a6ee0709cb..4abcf50b0b 100644
--- a/apps/studio/src/server/modules/site/site.service.ts
+++ b/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)