From bc79566d6d9caaa053e9245187123b6a701fe448 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Fri, 19 Jul 2024 18:30:05 +0800 Subject: [PATCH] feat: properly update page and site config in preview renderer --- .../CreatePageWizardContext.tsx | 1 + .../CreatePageModal/PreviewLayout.tsx | 37 ++++++++++++++++- .../editing-experience/components/Preview.tsx | 41 ++++++++++++++----- .../sites/[siteId]/pages/[pageId]/index.tsx | 17 +++++--- .../src/server/modules/page/page.router.ts | 5 ++- .../src/server/modules/site/site.service.ts | 23 ++--------- 6 files changed, 85 insertions(+), 39 deletions(-) diff --git a/apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx b/apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx index 9e9178d1b9..33c2d18a77 100644 --- a/apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx +++ b/apps/studio/src/features/editing-experience/components/CreatePageModal/CreatePageWizardContext.tsx @@ -102,6 +102,7 @@ const useCreatePageWizardContext = ({ } return { + siteId, currentStep, formMethods, handleCreatePage, diff --git a/apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx b/apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx index bcc30fda4a..6ed80e0f0c 100644 --- a/apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx +++ b/apps/studio/src/features/editing-experience/components/CreatePageModal/PreviewLayout.tsx @@ -1,5 +1,7 @@ +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" @@ -7,7 +9,33 @@ 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 ( { // Key used to reset the scroll to the top whenever layout changes key={currentLayout} > - + )} diff --git a/apps/studio/src/features/editing-experience/components/Preview.tsx b/apps/studio/src/features/editing-experience/components/Preview.tsx index f7d991ec92..d46267b2bd 100644 --- a/apps/studio/src/features/editing-experience/components/Preview.tsx +++ b/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 +} + +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 ( { setDrawerState({ @@ -51,7 +52,13 @@ function EditPage(): JSX.Element { {/* TODO: the version here should be obtained from the schema */} {/* and not from the page */} - + ) diff --git a/apps/studio/src/server/modules/page/page.router.ts b/apps/studio/src/server/modules/page/page.router.ts index eeb5fec27c..46f82e5a86 100644 --- a/apps/studio/src/server/modules/page/page.router.ts +++ b/apps/studio/src/server/modules/page/page.router.ts @@ -77,6 +77,7 @@ 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({ @@ -84,14 +85,14 @@ export const pageRouter = router({ 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 diff --git a/apps/studio/src/server/modules/site/site.service.ts b/apps/studio/src/server/modules/site/site.service.ts index d5b25a83b7..027521ca0d 100644 --- a/apps/studio/src/server/modules/site/site.service.ts +++ b/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