add breadcrumb (#402)

ui2/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,41 @@
+import {useSelector} from "react-redux"
+import {Breadcrumbs, Skeleton, Anchor} from "@mantine/core"
+
+import {selectPanelBreadcrumbs} from "@/slices/dualPanel"
+import type {PanelMode, NType} from "@/types"
+import type {RootState} from "@/app/types"
+
+type Args = {
+  mode: PanelMode
+  onClick: (node: NType) => void
+}
+
+export default function BreadcrumbsComponent({mode, onClick}: Args) {
+  const items = useSelector<RootState>(state =>
+    selectPanelBreadcrumbs(state, mode)
+  ) as Array<[string, string]> | null | undefined
+
+  if (!items) {
+    return (
+      <Skeleton width={"25%"} my="md">
+        <Breadcrumbs>{["one", "two"]}</Breadcrumbs>
+      </Skeleton>
+    )
+  }
+  console.log(items)
+  const links = items.slice(0, -1).map(i => (
+    <Anchor key={i[0]} onClick={() => onClick({id: i[0], ctype: "folder"})}>
+      {i[1]}
+    </Anchor>
+  ))
+  const lastOne = items[items.length - 1][1]
+
+  return (
+    <>
+      <Breadcrumbs>
+        {links}
+        {lastOne}
+      </Breadcrumbs>
+    </>
+  )
+}

ui2/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,3 @@
+import Breadcrumbs from "./Breadcrumbs"
+
+export default Breadcrumbs

ui2/src/components/Commander/Commander.tsx

@@ -12,7 +12,8 @@ import {
 } from "@/slices/dualPanel"
 
 import type {RootState} from "@/app/types"
-import type {NodeType, PanelMode} from "@/types"
+import type {NType, NodeType, PanelMode} from "@/types"
+import Breadcrumbs from "@/components/Breadcrumbs"
 
 type Args = {
   mode: PanelMode
@@ -42,7 +43,7 @@ export default function Commander({mode}: Args) {
     )
   }
 
-  const onClick = (node: NodeType) => {
+  const onClick = (node: NType) => {
     if (mode == "secondary" && node.ctype == "folder") {
       dispatch(
         fetchPaginatedNodes({
@@ -53,7 +54,7 @@ export default function Commander({mode}: Args) {
       )
       dispatch(
         setCurrentNode({
-          node: {id: node.id, ctype: "folder"},
+          node: {id: node.id, ctype: "folder", breadcrumb: null},
           panel: "secondary"
         })
       )
@@ -70,6 +71,7 @@ export default function Commander({mode}: Args) {
     return (
       <div>
         <FolderNodeActions mode={mode} />
+        <Breadcrumbs mode={mode} onClick={onClick} />
         <Group>{nodes}</Group>
       </div>
     )
@@ -78,6 +80,7 @@ export default function Commander({mode}: Args) {
   return (
     <div>
       <FolderNodeActions mode={mode} />
+      <Breadcrumbs mode={mode} onClick={onClick} />
       <Group>Empty</Group>
     </div>
   )

ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx

@@ -26,7 +26,13 @@ export default function ToggleSecondaryPanel({mode}: Args) {
 
   const onClick = () => {
     const folderId = user.home_folder_id
-    dispatch(openSecondaryPanel())
+    dispatch(
+      openSecondaryPanel({
+        id: folderId,
+        ctype: "folder",
+        breadcrumb: null
+      })
+    )
     dispatch(
       fetchPaginatedNodes({
         folderId,
@@ -36,7 +42,11 @@ export default function ToggleSecondaryPanel({mode}: Args) {
     )
     dispatch(
       setCurrentNode({
-        node: {id: folderId, ctype: "folder"},
+        node: {
+          id: folderId,
+          ctype: "folder",
+          breadcrumb: [[folderId, ".home"]]
+        },
         panel: "secondary"
       })
     )

ui2/src/pages/Folder.tsx

@@ -25,7 +25,7 @@ export async function loader({params, request}: LoaderFunctionArgs) {
 
   store.dispatch(
     setCurrentNode({
-      node: {id: folderId, ctype: "folder"},
+      node: {id: folderId, ctype: "folder", breadcrumb: null},
       panel: "main"
     })
   )

ui2/src/pages/Home.tsx

@@ -15,17 +15,19 @@ export default function Home() {
 export async function loader({params, request}: LoaderFunctionArgs) {
   const url = new URL(request.url)
   const user: User = await getCurrentUser()
-  let folderId
+  let folderId, breadcrumb
 
   if (params.folderId) {
     folderId = params.folderId
+    breadcrumb = null
   } else {
     folderId = user.home_folder_id
+    breadcrumb = [[folderId, ".home"]] as Array<[string, string]>
   }
 
   store.dispatch(
     setCurrentNode({
-      node: {id: folderId, ctype: "folder"},
+      node: {id: folderId, ctype: "folder", breadcrumb: breadcrumb},
       panel: "main"
     })
   )

ui2/src/pages/Inbox.tsx

@@ -25,7 +25,7 @@ export async function loader({params, request}: LoaderFunctionArgs) {
 
   store.dispatch(
     setCurrentNode({
-      node: {id: folderId, ctype: "folder"},
+      node: {id: folderId, ctype: "folder", breadcrumb: null},
       panel: "main"
     })
   )

ui2/src/slices/dualPanel.ts

@@ -12,10 +12,10 @@ import type {
   SliceState,
   NodeType,
   PanelMode,
-  NType,
   Paginated,
   NodeLoaderResponseType,
-  FolderType
+  FolderType,
+  CurrentNodeType
 } from "@/types"
 
 type NodeWithSpinner = {
@@ -27,7 +27,7 @@ type NodeWithSpinner = {
 }
 
 type SetCurrentNodeArgs = {
-  node: NType
+  node: CurrentNodeType
   panel: PanelMode
 }
 
@@ -37,7 +37,7 @@ type FolderAddedArgs = {
 }
 
 interface Commander {
-  currentNode: string | null
+  currentNode: CurrentNodeType | null
   pageSize: number
   pageNumber: number
   sort: string
@@ -57,9 +57,9 @@ interface DualPanelState {
   nodes: Array<NodeType>
 }
 
-function commanderInitialState(folderId: string | null): Commander {
+function commanderInitialState(node: CurrentNodeType | null): Commander {
   return {
-    currentNode: folderId,
+    currentNode: node,
     pageSize: 15,
     pageNumber: 1,
     sort: "-title",
@@ -129,13 +129,22 @@ const dualPanelSlice = createSlice({
         if (action.payload.node.ctype == "folder") {
           // commander
           if (state.mainPanel.commander) {
+            // preserve breadcrumb
+            const prevBreadcrumb =
+              state.mainPanel.commander.currentNode?.breadcrumb
             // just update commander's current node
-            state.mainPanel.commander.currentNode = action.payload.node.id
+            state.mainPanel.commander.currentNode = {
+              id: action.payload.node.id,
+              ctype: action.payload.node.ctype,
+              breadcrumb: prevBreadcrumb
+            }
           } else {
             // re-open commander
-            state.mainPanel.commander = commanderInitialState(
-              action.payload.node.id
-            )
+            state.mainPanel.commander = commanderInitialState({
+              id: action.payload.node.id,
+              ctype: "folder",
+              breadcrumb: null
+            })
           }
         } else {
           // viewer
@@ -157,9 +166,9 @@ const dualPanelSlice = createSlice({
         })
       }
     },
-    openSecondaryPanel(state) {
+    openSecondaryPanel(state, action: PayloadAction<CurrentNodeType>) {
       state.secondaryPanel = {
-        commander: commanderInitialState(null),
+        commander: commanderInitialState(action.payload),
         viewer: null
       }
     },
@@ -192,13 +201,21 @@ const dualPanelSlice = createSlice({
             error: null,
             data: newNodes
           }
+          if (state.mainPanel.commander.currentNode) {
+            state.mainPanel.commander.currentNode.breadcrumb =
+              action.payload.breadcrumb
+          }
         }
       } else if (state.secondaryPanel && state.secondaryPanel.commander) {
         state.secondaryPanel.commander.nodes = {
           status: "succeeded",
           error: null,
           data: newNodes
         }
+        if (state.secondaryPanel.commander.currentNode) {
+          state.secondaryPanel.commander.currentNode.breadcrumb =
+            action.payload.breadcrumb
+        }
       }
     })
   }
@@ -306,11 +323,26 @@ const selectSecondaryPanelNodes = (
 
 export const selectCurrentFolderID = (state: RootState, mode: PanelMode) => {
   if (mode == "main") {
-    return state.dualPanel.mainPanel.commander?.currentNode
+    return state.dualPanel.mainPanel.commander?.currentNode?.id
+  }
+
+  if (state.dualPanel.secondaryPanel?.commander) {
+    return state.dualPanel.secondaryPanel.commander.currentNode?.id
+  }
+
+  return null
+}
+
+export const selectPanelBreadcrumbs = (
+  state: RootState,
+  mode: PanelMode
+): Array<[string, string]> | null | undefined => {
+  if (mode == "main") {
+    return state.dualPanel.mainPanel.commander?.currentNode?.breadcrumb
   }
 
   if (state.dualPanel.secondaryPanel?.commander) {
-    return state.dualPanel.secondaryPanel.commander.currentNode
+    return state.dualPanel.secondaryPanel.commander.currentNode?.breadcrumb
   }
 
   return null

ui2/src/types.ts

@@ -14,6 +14,12 @@ export type OcrStatusEnum =
 
 export type CType = "folder" | "document"
 
+export type CurrentNodeType = {
+  id: string
+  ctype: CType
+  breadcrumb: Array<[string, string]> | null | undefined
+}
+
 export type CreateUser = {
   username: string
   email: string
@@ -101,6 +107,7 @@ export type NodeType = NType & {
   ocr_status: OcrStatusEnum
   ocr: boolean
   thumbnail_url: string | null
+  breadcrumb: Array<[string, string]>
 }
 
 export type BreadcrumbItemType = [string, string]