fix(collection-links): prevent stale data on gsib (#1668)

seaerchin · web-flow · commit 9bfb02894037 · 2025-11-19T17:28:38.000+08:00
* chore: refactor to use links

* chore: refactor to use formbuilder

* chore: swap over to schemas

* chore: tidy up pr

* chore: swap to use currentdate

* chore: increase threshold

revert later zz

* chore: fix collection links being unable to pubilsh

- this is because the publish button takes a `isDisabled` prop
- the navbar then passes in `linkAtom.ref` which we never set
diff --git a/apps/studio/src/features/editing-experience/atoms.ts b/apps/studio/src/features/editing-experience/atoms.ts
@@ -1,26 +1,5 @@
-import type { LinkRefPageSchema } from "@opengovsg/isomer-components"
-import type { Static } from "@sinclair/typebox"
-import { format } from "date-fns"
 import { atom } from "jotai"
 
 import type { ResourceItemContent } from "~/schemas/resource"
 
 export const moveResourceAtom = atom<null | ResourceItemContent>(null)
-
-export type CollectionLinkProps = Static<typeof LinkRefPageSchema> & {
-  title: string
-}
-
-export const linkAtom = atom<CollectionLinkProps>({
-  ref: "",
-  description: "",
-  date: format(new Date(), "dd/mm/yyyy"),
-  category: "",
-  title: "",
-})
-
-// NOTE: We need this because this atom takes in the value
-// for the ref when the link itself is saved.
-// This is strictly used for validation to see
-// if we should allow the `Publish`
-export const linkRefAtom = atom("")
diff --git a/apps/studio/src/features/editing-experience/components/EditLinkPreview.tsx b/apps/studio/src/features/editing-experience/components/EditLinkPreview.tsx
@@ -1,24 +1,24 @@
 import type { IsomerSitemap } from "@opengovsg/isomer-components"
+import { useMemo } from "react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
-import { useAtomValue } from "jotai"
 
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { editLinkSchema } from "~/pages/sites/[siteId]/links/[linkId]"
+import { CollectionLinkProps } from "~/schemas/collection"
 import { trpc } from "~/utils/trpc"
-import { linkAtom } from "../atoms"
 import PreviewWithoutSitemap from "./PreviewWithoutSitemap"
 import { ViewportContainer } from "./ViewportContainer"
 
-export const EditCollectionLinkPreview = (): JSX.Element => {
-  const {
-    description: summary,
-    date,
-    title,
-    category,
-    ref,
-    image,
-    tagged,
-  } = useAtomValue(linkAtom)
+const currentDate = new Date().toString()
+
+interface EditCollectionLinkPreviewProps {
+  link: CollectionLinkProps
+  title: string
+}
+export const EditCollectionLinkPreview = ({
+  link,
+  title,
+}: EditCollectionLinkPreviewProps): JSX.Element => {
   const { linkId, siteId } = useQueryParse(editLinkSchema)
   const [permalink] = trpc.page.getFullPermalink.useSuspenseQuery(
     {
@@ -38,43 +38,49 @@ export const EditCollectionLinkPreview = (): JSX.Element => {
     siteId,
   })
 
-  const parentPermalink = permalink.split("/").slice(0, -1).join("/")
-  const parentTitle = parent?.title || ResourceType.Collection
+  const parentPermalink = useMemo(
+    () => permalink.split("/").slice(0, -1).join("/"),
+    [permalink],
+  )
+  const parentTitle = useMemo(
+    () => parent?.title || ResourceType.Collection,
+    [parent?.title],
+  )
 
-  const siteMap = {
-    id: "root",
-    permalink: "/",
-    lastModified: "2024-10-14T07:05:08.803Z",
-    layout: "homepage",
-    title: "An Isomer Site",
-    summary: "",
-    children: [
-      {
-        id: "collection",
-        permalink: parentPermalink,
-        lastModified: "02 May 2023",
-        layout: "collection",
-        title: parentTitle,
+  const siteMap = useMemo(
+    () =>
+      ({
+        id: "root",
+        permalink: "/",
+        lastModified: currentDate,
+        layout: "homepage",
+        title: "An Isomer Site",
         summary: "",
-        collectionPagePageProps: { tagCategories },
         children: [
           {
-            id: "9999999",
-            title,
-            image,
-            date,
-            ref,
-            summary: summary ?? "",
-            layout: "link",
-            permalink,
-            lastModified: new Date().toString(),
-            category,
-            tagged,
+            id: "collection",
+            permalink: parentPermalink,
+            lastModified: currentDate,
+            layout: "collection",
+            title: parentTitle,
+            summary: "",
+            collectionPagePageProps: { tagCategories },
+            children: [
+              {
+                id: "9999999",
+                title,
+                summary: link.description ?? "",
+                layout: "link",
+                permalink,
+                lastModified: currentDate,
+                ...link,
+              },
+            ],
           },
         ],
-      },
-    ],
-  } satisfies IsomerSitemap
+      }) satisfies IsomerSitemap,
+    [parentPermalink, parentTitle, tagCategories, link, permalink, title],
+  )
 
   return (
     <ViewportContainer siteId={siteId}>
diff --git a/apps/studio/src/features/editing-experience/components/LinkEditNavbar.tsx b/apps/studio/src/features/editing-experience/components/LinkEditNavbar.tsx
@@ -7,14 +7,12 @@ import {
   Text,
 } from "@chakra-ui/react"
 import { Breadcrumb } from "@opengovsg/design-system-react"
-import { useAtomValue } from "jotai"
 
 import { ADMIN_NAVBAR_HEIGHT } from "~/constants/layouts"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { editLinkSchema } from "~/pages/sites/[siteId]/links/[linkId]"
 import { getResourceSubpath } from "~/utils/resource"
 import { trpc } from "~/utils/trpc"
-import { linkRefAtom } from "../atoms"
 import PublishButton from "./PublishButton"
 
 interface NavigationBreadcrumbsProps {
@@ -96,7 +94,6 @@ const NavigationBreadcrumbs = ({
 
 export const LinkEditNavbar = (): JSX.Element => {
   const { linkId, siteId } = useQueryParse(editLinkSchema)
-  const ref = useAtomValue(linkRefAtom)
 
   return (
     <Flex
@@ -117,7 +114,7 @@ export const LinkEditNavbar = (): JSX.Element => {
 
       {linkId && siteId && (
         <Flex justifyContent={"end"} alignItems={"center"} flex={1}>
-          <PublishButton pageId={linkId} siteId={siteId} isDisabled={!ref} />
+          <PublishButton pageId={linkId} siteId={siteId} />
         </Flex>
       )}
     </Flex>
diff --git a/apps/studio/src/features/editing-experience/components/LinkEditorDrawer.tsx b/apps/studio/src/features/editing-experience/components/LinkEditorDrawer.tsx
@@ -1,22 +1,20 @@
 import type { Static } from "@sinclair/typebox"
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import { Box, Flex, Text, VStack } from "@chakra-ui/react"
 import { Button, useToast } from "@opengovsg/design-system-react"
 import { LAYOUT_PAGE_MAP } from "@opengovsg/isomer-components"
-import { useAtom, useSetAtom } from "jotai"
 import isEmpty from "lodash/isEmpty"
 import isEqual from "lodash/isEqual"
 import { z } from "zod"
 
-import type { CollectionLinkProps } from "../atoms"
 import { BRIEF_TOAST_SETTINGS } from "~/constants/toast"
 import { useIsUserIsomerAdmin } from "~/hooks/useIsUserIsomerAdmin"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { ADMIN_ROLE } from "~/lib/growthbook"
+import { CollectionLinkProps } from "~/schemas/collection"
 import { ajv } from "~/utils/ajv"
 import { safeJsonParse } from "~/utils/safeJsonParse"
 import { trpc } from "~/utils/trpc"
-import { linkAtom, linkRefAtom } from "../atoms"
 import { ActivateRawJsonEditorMode } from "./ActivateRawJsonEditorMode"
 import { ErrorProvider, useBuilderErrors } from "./form-builder/ErrorProvider"
 import FormBuilder from "./form-builder/FormBuilder"
@@ -162,31 +160,19 @@ const DrawerState = (
   }
 }
 
-export const LinkEditorDrawer = () => {
+interface LinkEditorDrawerProps {
+  link: CollectionLinkProps
+  setLink: (link: CollectionLinkProps) => void
+  initialLinkState: IsomerLinkSchema
+}
+export const LinkEditorDrawer = ({
+  initialLinkState,
+  link,
+  setLink,
+}: LinkEditorDrawerProps) => {
   const { linkId, siteId } = useQueryParse(editLinkSchema)
-  const [data, setLinkAtom] = useAtom(linkAtom)
   const utils = trpc.useUtils()
   const toast = useToast()
-  const setLinkRef = useSetAtom(linkRefAtom)
-
-  const [{ content, title }] =
-    trpc.collection.readCollectionLink.useSuspenseQuery(
-      {
-        linkId,
-        siteId,
-      },
-      {
-        refetchOnWindowFocus: false,
-      },
-    )
-
-  useEffect(() => {
-    setLinkAtom({
-      ...(content.page as CollectionLinkProps),
-      title,
-    })
-    setLinkRef((content.page as CollectionLinkProps).ref)
-  }, [content, setLinkAtom, setLinkRef, title])
 
   const { mutate, isPending } =
     trpc.collection.updateCollectionLink.useMutation({
@@ -201,21 +187,14 @@ export const LinkEditorDrawer = () => {
       },
     })
 
-  const savedPageState = {
-    ...(content.page as CollectionLinkProps),
-    title,
-  }
-  const handleChange = (data: IsomerLinkSchema) =>
-    setLinkAtom(data as CollectionLinkProps)
-
   return (
     <ErrorProvider>
       <DrawerState
-        savedPageState={savedPageState}
-        previewPageState={data}
+        savedPageState={initialLinkState}
+        previewPageState={link}
         isLoading={isPending}
-        handleChange={handleChange}
-        handleSaveChanges={() => mutate({ siteId, linkId, ...data })}
+        handleChange={(data) => setLink(data)}
+        handleSaveChanges={() => mutate({ siteId, linkId, ...link })}
       />
     </ErrorProvider>
   )
diff --git a/apps/studio/src/features/editing-experience/components/PreviewWithoutSitemap.tsx b/apps/studio/src/features/editing-experience/components/PreviewWithoutSitemap.tsx
@@ -32,9 +32,11 @@ const FakeLink = forwardRef<HTMLAnchorElement, PropsWithChildren<unknown>>(
   ),
 )
 
+const defaultLastModified = new Date().toISOString()
+
 function SuspendablePreview({
   permalink,
-  lastModified = new Date().toISOString(),
+  lastModified = defaultLastModified,
   siteId,
   overrides = {},
   siteMap,
diff --git a/apps/studio/src/features/editing-experience/components/PublishButton.tsx b/apps/studio/src/features/editing-experience/components/PublishButton.tsx
@@ -36,7 +36,6 @@ interface PublishButtonProps extends ButtonProps {
 const SuspendablePublishButton = ({
   pageId,
   siteId,
-  isDisabled,
   ...rest
 }: PublishButtonProps): JSX.Element => {
   const gb = useGrowthBook()
@@ -118,7 +117,7 @@ const SuspendablePublishButton = ({
                   <Button
                     variant="solid"
                     size="sm"
-                    isDisabled={!isChangesPendingPublish || isDisabled}
+                    isDisabled={!isChangesPendingPublish}
                     isLoading={isPending}
                     borderRightRadius={
                       enableScheduledPublishing ? 0 : undefined
@@ -148,9 +147,7 @@ const SuspendablePublishButton = ({
                           icon={<Icon as={BiChevronDown} boxSize="1rem" />}
                           size="sm"
                           variant="solid"
-                          isDisabled={
-                            !isChangesPendingPublish || isDisabled || isPending
-                          }
+                          isDisabled={!isChangesPendingPublish || isPending}
                           borderLeftRadius={0}
                         />
                         <MenuList>
diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsCategoryControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsCategoryControl.tsx
@@ -4,11 +4,9 @@ import { useFeatureValue } from "@growthbook/growthbook-react"
 import { and, rankWith, schemaMatches } from "@jsonforms/core"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { FormLabel, SingleSelect } from "@opengovsg/design-system-react"
-import { useSetAtom } from "jotai"
 
 import Suspense from "~/components/Suspense"
 import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
-import { linkAtom } from "~/features/editing-experience/atoms"
 import { collectionItemSchema } from "~/features/editing-experience/schema"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { CATEGORY_DROPDOWN_FEATURE_KEY } from "~/lib/growthbook"
@@ -62,26 +60,17 @@ export function JsonFormsCategoryControl({
   ...props
 }: ControlProps) {
   const { siteId } = useQueryParse(collectionItemSchema)
-  const setLink = useSetAtom(linkAtom)
   const { enabledSites } = useFeatureValue<{ enabledSites: string[] }>(
     CATEGORY_DROPDOWN_FEATURE_KEY,
     { enabledSites: [] },
   )
-  const handleChange: ControlProps["handleChange"] = (path, value: string) => {
-    props.handleChange(path, value)
-    setLink((prev) => ({ ...prev, category: value }))
-  }
 
   const isDropdownEnabled = enabledSites.includes(siteId.toString())
   return isDropdownEnabled ? (
     <FormControl isRequired={required} gap="0.5rem">
       <FormLabel description={description}>{label}</FormLabel>
       <Suspense fallback={<Skeleton />}>
-        <SuspendableJsonFormsCategoryControl
-          {...props}
-          label={label}
-          handleChange={handleChange}
-        />
+        <SuspendableJsonFormsCategoryControl {...props} label={label} />
       </Suspense>
     </FormControl>
   ) : (
@@ -90,7 +79,6 @@ export function JsonFormsCategoryControl({
       description={description}
       required={required}
       label={label}
-      handleChange={handleChange}
     />
   )
 }
diff --git a/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx
diff --git a/apps/studio/src/schemas/collection.ts b/apps/studio/src/schemas/collection.ts
