feat: add rudimentary link to resource in dashboard

opengovsg · Jul 19, 2024 · 007d256 · 007d256
1 parent 9cccb01
commit 007d256
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/apps/studio/src/features/dashboard/components/ResourceTable/ResourceTable.tsx b/apps/studio/src/features/dashboard/components/ResourceTable/ResourceTable.tsx
@@ -1,5 +1,5 @@
 import type { PaginationState } from "@tanstack/react-table"
-import { useState } from "react"
+import { useMemo, useState } from "react"
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -19,12 +19,14 @@ type ResourceTableData = RouterOutput["page"]["list"][number]
 
 const columnsHelper = createColumnHelper<ResourceTableData>()
 
-const columns = [
+const getColumns = ({ siteId }: ResourceTableProps) => [
   columnsHelper.accessor("title", {
     minSize: 300,
     header: () => <TableHeader>Title</TableHeader>,
     cell: ({ row }) => (
       <TitleCell
+        siteId={siteId}
+        id={row.original.id}
         title={row.original.title}
         permalink={`/${row.original.permalink}`}
         type={row.original.type}
@@ -54,6 +56,10 @@ export const ResourceTable = ({
   siteId,
   resourceId,
 }: ResourceTableProps): JSX.Element => {
+  const columns = useMemo(
+    () => getColumns({ siteId, resourceId }),
+    [siteId, resourceId],
+  )
   const { data: resources } = trpc.page.list.useQuery(
     {
       siteId,

diff --git a/apps/studio/src/features/dashboard/components/ResourceTable/TitleCell.tsx b/apps/studio/src/features/dashboard/components/ResourceTable/TitleCell.tsx
@@ -1,18 +1,34 @@
+import { useMemo } from "react"
+import NextLink from "next/link"
 import { HStack, Icon, Text, VStack } from "@chakra-ui/react"
 import { BiFileBlank, BiFolder } from "react-icons/bi"
 
 import type { ResourceTableData } from "./types"
 
-export type TitleCellProps = Pick<
-  ResourceTableData,
-  "title" | "permalink" | "type"
->
+export interface TitleCellProps
+  extends Pick<ResourceTableData, "title" | "permalink" | "type" | "id"> {
+  siteId: number
+}
 
 export const TitleCell = ({
   title,
   permalink,
   type,
+  siteId,
+  id,
 }: TitleCellProps): JSX.Element => {
+  const linkToResource = useMemo(() => {
+    const resourceType = `${type.toLowerCase()}s`
+    return {
+      pathname: "/sites/[siteId]/[resourceType]/[id]",
+      query: {
+        siteId,
+        resourceType,
+        id,
+      },
+    }
+  }, [id, siteId, type])
+
   return (
     <HStack align="center" spacing="0.625rem">
       <Icon
@@ -21,7 +37,13 @@ export const TitleCell = ({
         color="base.content.strong"
       />
       <VStack spacing="0.25rem" align="start">
-        <Text title={title ?? ""} textStyle="subhead-2" noOfLines={1}>
+        <Text
+          as={NextLink}
+          href={linkToResource}
+          title={title}
+          textStyle="subhead-2"
+          noOfLines={1}
+        >
           {title}
         </Text>
         <Text