From 30342157d67ec4f725e4d4394091eed866b6d19b Mon Sep 17 00:00:00 2001 From: seaerchin <44049504+seaerchin@users.noreply.github.com> Date: Wed, 26 Jun 2024 15:04:01 +0800 Subject: [PATCH] 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 | 47 ++++++++++++++++--- .../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 ++-- .../server/modules/resource/resource.types.ts | 18 +------ .../src/server/modules/site/site.service.ts | 2 +- .../src/server/modules/site/site.types.ts | 19 +------- 9 files changed, 76 insertions(+), 63 deletions(-) diff --git a/apps/studio/prisma/seed.ts b/apps/studio/prisma/seed.ts index af1fc9f5f2..168dac32d4 100644 --- a/apps/studio/prisma/seed.ts +++ b/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,6 +51,33 @@ 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') @@ -57,11 +85,18 @@ async function main() { 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() 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 ( .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/resource/resource.types.ts b/apps/studio/src/server/modules/resource/resource.types.ts index 6e716271e5..f851c812f9 100644 --- a/apps/studio/src/server/modules/resource/resource.types.ts +++ b/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 { - items: NavbarItem[] -} - -export interface Footer { - name: string - contactUsLink?: string - feedbackFormLink?: string - privacyStatementLink?: string - termsOfUseLink?: string -} +export type Footer = IsomerSiteProps['footerItems'] 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) diff --git a/apps/studio/src/server/modules/site/site.types.ts b/apps/studio/src/server/modules/site/site.types.ts index 90edc2c7ad..7a366ce3f4 100644 --- a/apps/studio/src/server/modules/site/site.types.ts +++ b/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