fix(dashboard): add ability to navigate between folders by double cli…

…cking
opengovsg · Jun 26, 2024 · 393d165 · 393d165
1 parent a43ad30
commit 393d165
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 67 deletions.
diff --git a/apps/studio/src/features/dashboard/DashboardTable.tsx b/apps/studio/src/features/dashboard/DashboardTable.tsx
@@ -16,7 +16,8 @@ import {
   Icon,
 } from '@chakra-ui/react'
 import { Pagination } from '@opengovsg/design-system-react'
-import { useState } from 'react'
+import { usePathname, useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import {
   BiHome,
   BiFileBlank,
@@ -25,59 +26,61 @@ import {
   BiDotsHorizontalRounded,
 } from 'react-icons/bi'
 import { MdOutlineHorizontalRule } from 'react-icons/md'
+import { trpc } from '~/utils/trpc'
 
-export const DashboardTable = (): JSX.Element => {
-  const dummyChildData: {
-    id: string
-    name: string
-    permalink: string
-    type: 'page' | 'folder'
-    status: 'folder' | 'draft' | 'published'
-    lastEditUser: string
-    lastEditDate: Date | 'folder'
-  }[] = [
-    {
-      id: '0001',
-      name: 'Test Page 1',
-      permalink: '/',
-      type: 'page',
-      status: 'draft',
-      lastEditUser: '[email protected]',
-      lastEditDate: new Date(),
-    },
-    {
-      id: '0003',
-      name: 'Test Folder 1',
-      permalink: '/testfolder1',
-      type: 'folder',
-      status: 'folder',
-      lastEditUser: 'folder',
-      lastEditDate: 'folder',
-    },
+// TODO: add loading state, probably not req for mvp
+
+export default function DashboardTable(): JSX.Element {
+  const router = useRouter()
+  const [pageNumber, onPageChange] = useState(1)
+  const [dataToDisplay, setDataToDisplay] = useState<
     {
-      id: '0002',
-      name: 'Test Page 2',
-      permalink: '/testpage2',
-      type: 'page',
-      status: 'published',
-      lastEditUser: '[email protected]',
-      lastEditDate: new Date(50000000000),
-    },
+      id: string
+      name: string
+      permalink: string
+      type: 'page' | 'folder'
+      status: 'draft' | 'published' | undefined
+      lastEditUser: string | undefined
+      lastEditDate: Date | undefined
+    }[]
+  >([])
+
+  const entriesPerPage = 6
+
+  let { siteId, resourceId } = useParams<{
+    siteId: string
+    resourceId: string
+  }>()
+
+  // console.log(siteId)
+  // console.log(resourceId)
+
+  const { data, error, isLoading } = trpc.folder.readFolder.useQuery(
     {
-      id: '0004',
-      name: 'Test Folder 2',
-      permalink: '/testfolder2',
-      type: 'folder',
-      status: 'folder',
-      lastEditUser: 'folder',
-      lastEditDate: 'folder',
+      siteId,
+      resourceId,
     },
-  ]
+    { enabled: !!resourceId },
+  )
 
-  const [pageNumber, onPageChange] = useState(1)
-  const [dataToDisplay, setDataToDisplay] = useState(dummyChildData)
+  useEffect(() => {
+    if (data) {
+      console.log(data)
+      setDataToDisplay(data.children)
+    }
+    // setLoading(isLoading)
+  }, [data])
 
-  const entriesPerPage = 6
+  // if (!resourceId) {
+  //   // todo: fetch data after setting up root folder trpc endpoint
+  // } else {
+  //   const { data } = await trpc.folder.readFolder
+  //     .useQuery({
+  //       siteId,
+  //       resourceId,
+  //     })
+  //     .setDataToDisplay(data)
+  // }
   return (
     <>
       <TableContainer
@@ -119,12 +122,18 @@ export const DashboardTable = (): JSX.Element => {
               )
               .map((element) => {
                 return (
-                  <Tr>
+                  // TODO: add doubleclick handler that handles navigating between folder.
+                  <Tr key={element.id}>
                     <Td w="min-content">
                       <Checkbox size="sm" w="fit-content" h="fit-content" />
                     </Td>
 
-                    <Td>
+                    <Td
+                      onDoubleClick={() =>
+                        router.push(`/${siteId}/dashboard/${element.id}`)
+                      }
+                      cursor="default"
+                    >
                       <HStack spacing="0.75rem">
                         {element.type === 'page' &&
                           element.permalink === '/' && (
@@ -149,20 +158,21 @@ export const DashboardTable = (): JSX.Element => {
                     </Td>
 
                     <Td>
-                      {element.type === 'page' && element.status == 'draft' && (
-                        <Badge
-                          variant="subtle"
-                          colorScheme="warning"
-                          borderRadius="50px"
-                        >
-                          <Icon
-                            as={BiSolidCircle}
-                            color="utility.feedback.warning"
-                            mr="0.25rem"
-                          />
-                          Draft
-                        </Badge>
-                      )}
+                      {element.type === 'page' &&
+                        element.status === 'draft' && (
+                          <Badge
+                            variant="subtle"
+                            colorScheme="warning"
+                            borderRadius="50px"
+                          >
+                            <Icon
+                              as={BiSolidCircle}
+                              color="utility.feedback.warning"
+                              mr="0.25rem"
+                            />
+                            Draft
+                          </Badge>
+                        )}
                       {element.type === 'page' &&
                         element.status == 'published' && (
                           <Badge
@@ -233,3 +243,4 @@ export const DashboardTable = (): JSX.Element => {
     </>
   )
 }
+// async function updateTableContent(siteId:string, resourceId:string|undefined, setDataToDisplay)
diff --git a/apps/studio/src/pages/dashboard/index.tsx → ...[siteId]/dashboard/[resourceId]/index.tsx b/apps/studio/src/pages/dashboard/index.tsx → ...[siteId]/dashboard/[resourceId]/index.tsx
@@ -3,20 +3,24 @@ import { Button } from '@opengovsg/design-system-react'
 import { HStack, VStack, Text } from '@chakra-ui/react'
 import { type NextPageWithLayout } from '~/lib/types'
 import _ from 'lodash'
-import { DashboardTable } from '~/features/dashboard/DashboardTable'
+import DashboardTable from '~/features/dashboard/DashboardTable'
 import PageCreateModal from '~/features/editing-experience/components/PageCreateModal'
+import React from 'react'
+import { usePathname, useRouter } from 'next/navigation'
 
-const Dashboard: NextPageWithLayout = () => {
+function Dashboard(): NextPageWithLayout {
   const {
     isOpen: isPageCreateModalOpen,
     onOpen: onPageCreateModalOpen,
     onClose: onpageCreateModalClose,
   } = useDisclosure()
+  const { asPath, pathname } = useRouter()
+  console.log(asPath)
   return (
     <VStack bgColor="#F3F5F7" w="100%" p="1.75rem" minH="100vh">
       <Text
         alignSelf="flex-start"
-        textColor="base.content.default"
+        textColor="ba`se.content.default"
         textStyle="h5"
       >
         My Pages

diff --git a/...studio/src/pages/dashboard/edit/index.tsx → ...c/pages/[siteId]/dashboard/edit/index.tsx b/...studio/src/pages/dashboard/edit/index.tsx → ...c/pages/[siteId]/dashboard/edit/index.tsx
diff --git a/apps/studio/src/pages/[siteId]/dashboard/index.tsx b/apps/studio/src/pages/[siteId]/dashboard/index.tsx
@@ -0,0 +1,4 @@
+import Dashboard from '~/pages/[siteId]/dashboard/[resourceId]/index'
+
+// TODO: This has a different layout, will have to implmenet the top/root level layout
+export default Dashboard