Refactoring dualPanel slice into ui slice

ui2/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -14,11 +14,8 @@ import {useViewportSize} from "@mantine/hooks"
 import {IconHome, IconInbox, IconChevronDown} from "@tabler/icons-react"
 import classes from "./Breadcrumbs.module.css"
 
-import {
-  selectPanelNodesStatus,
-  selectCurrentFolderID
-} from "@/slices/dualPanel/dualPanel"
 import {updateBreadcrumb} from "@/features/ui/uiSlice"
+import {selectCurrentNodeID} from "@/features/ui/uiSlice"
 
 import type {PanelMode, NType, UserDetails} from "@/types"
 
@@ -37,8 +34,8 @@ export default function BreadcrumbsComponent({onClick, className}: Args) {
   const {height, width} = useViewportSize()
   const ref = useRef<HTMLDivElement>(null)
   const mode: PanelMode = useContext(PanelContext)
-  const nodesStatus = useAppSelector(s => selectPanelNodesStatus(s, mode))
-  const currentNodeID = useAppSelector(s => selectCurrentFolderID(s, mode))
+  //const nodesStatus = useAppSelector(s => selectPanelNodesStatus(s, mode))
+  const currentNodeID = useAppSelector(s => selectCurrentNodeID(s, mode))
 
   const {data, isLoading} = useGetFolderQuery(currentNodeID!)
 
@@ -81,7 +78,7 @@ export default function BreadcrumbsComponent({onClick, className}: Args) {
         <Breadcrumbs className={classes.breadcrumbs}>
           <RootItem itemId={items[0][0]} onClick={onRootElementClick} />
         </Breadcrumbs>
-        {nodesStatus == "loading" && <Loader size={"sm"} />}
+        {/*nodesStatus == "loading" && <Loader size={"sm"} />*/}
       </Group>
     )
   }
@@ -93,7 +90,7 @@ export default function BreadcrumbsComponent({onClick, className}: Args) {
         {links}
         <Anchor>{lastOne}</Anchor>
       </Breadcrumbs>
-      {nodesStatus == "loading" && <Loader size={"sm"} />}
+      {/*nodesStatus == "loading" && <Loader size={"sm"} />*/}
     </Group>
   )
 }

ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx

@@ -8,12 +8,12 @@ import {
   selectMainPanel,
   selectSecondaryPanel
 } from "@/slices/dualPanel/dualPanel"
-import {setCurrentNode} from "@/slices/dualPanel/dualPanel"
 import {selectCurrentUser} from "@/slices/currentUser"
 
 import type {PanelMode, User} from "@/types"
 
 import PanelContext from "@/contexts/PanelContext"
+import {currentNodeChanged} from "@/features/ui/uiSlice"
 
 export default function ToggleSecondaryPanel() {
   const mode: PanelMode = useContext(PanelContext)
@@ -36,14 +36,7 @@ export default function ToggleSecondaryPanel() {
       })
     )
     dispatch(
-      setCurrentNode({
-        node: {
-          id: folderId,
-          ctype: "folder",
-          breadcrumb: [[folderId, ".home"]]
-        },
-        panel: "secondary"
-      })
+      currentNodeChanged({id: folderId, ctype: "folder", panel: "secondary"})
     )
   }
 

ui2/src/components/SearchResults/SearchResults.tsx

@@ -12,13 +12,15 @@ import {
   selectSearchResultOpenItemTarget,
   selectSearchPagination,
   selectSearchQuery,
-  setCurrentNode,
   selectSearchPageSize,
   selectSearchPageNumber
 } from "@/slices/dualPanel/dualPanel"
 import ActionButtons from "./ActionButtons"
 import SearchResultItems from "./SearchResultItems"
-import {selectSearchContentHeight} from "@/features/ui/uiSlice"
+import {
+  currentNodeChanged,
+  selectSearchContentHeight
+} from "@/features/ui/uiSlice"
 import {NType, PanelMode} from "@/types"
 import classes from "./SearchResults.module.css"
 
@@ -63,8 +65,9 @@ export default function SearchResults() {
         })
       )
       dispatch(
-        setCurrentNode({
-          node: {id: item.id, ctype: "folder", breadcrumb: null},
+        currentNodeChanged({
+          id: item.id,
+          ctype: "folder",
           panel: targetPanel as PanelMode
         })
       )

ui2/src/components/Viewer/EditTitleButton.tsx

@@ -3,11 +3,10 @@ import {Tooltip, ActionIcon} from "@mantine/core"
 import {IconEdit} from "@tabler/icons-react"
 
 import {useSelector} from "react-redux"
-import {
-  selectSelectedNodes
-  //nodeUpdated,
-  //clearNodesSelection
-} from "@/slices/dualPanel/dualPanel"
+//import {} from // selectSelectedNodes
+//nodeUpdated,
+//clearNodesSelection
+;("@/slices/dualPanel/dualPanel")
 //import edit_node_title from "@/components/modals/EditNodeTitle"
 
 import type {RootState} from "@/app/types"
@@ -19,15 +18,14 @@ import PanelContext from "@/contexts/PanelContext"
 export default function EditTitleButton() {
   const mode: PanelMode = useContext(PanelContext)
   //const dispatch = useDispatch()
-  const selectedNodes = useSelector((state: RootState) =>
-    selectSelectedNodes(state, mode)
-  )
+  // const selectedNodes = useSelector((state: RootState) =>
+  //  selectSelectedNodes(state, mode)
+  // )
   const onEditNodeTitle = () => {
-    if (selectedNodes.length < 1) {
-      console.log("Error: no selected nodes")
-      return
-    }
-
+    // if (selectedNodes.length < 1) {
+    //  console.log("Error: no selected nodes")
+    //  return
+    // }
     //let node: NodeType = selectedNodes[0]
     /*
     edit_node_title(node)

ui2/src/components/Viewer/Viewer.tsx

@@ -5,14 +5,14 @@ import {useNavigate} from "react-router-dom"
 
 import {
   fetchPaginatedNodes,
-  setCurrentNode,
   selectLastPageSize
 } from "@/slices/dualPanel/dualPanel"
+
 import type {RootState} from "@/app/types"
 import type {PanelMode, NType} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
-import {selectContentHeight} from "@/features/ui/uiSlice"
+import {currentNodeChanged, selectContentHeight} from "@/features/ui/uiSlice"
 import ActionButtons from "./ActionButtons"
 import ThumbnailsToggle from "./ThumbnailsToggle"
 import Pages from "./Pages"
@@ -40,10 +40,7 @@ export default function Viewer() {
         })
       )
       dispatch(
-        setCurrentNode({
-          node: {id: node.id, ctype: "folder", breadcrumb: null},
-          panel: "secondary"
-        })
+        currentNodeChanged({id: node.id, ctype: "folder", panel: "secondary"})
       )
     } else if (mode == "main" && node.ctype == "folder") {
       navigate(`/folder/${node.id}`)

ui2/src/features/nodes/components/Commander.tsx

@@ -6,13 +6,13 @@ import {useAppSelector, useAppDispatch} from "@/app/hooks"
 import {useNavigate} from "react-router-dom"
 
 import {
-  setCurrentNode,
   selectLastPageSize,
-  selectCurrentFolderID,
   fetchPaginatedDocument,
   selectFilterText
 } from "@/slices/dualPanel/dualPanel"
 
+import {currentNodeChanged, selectCurrentNodeID} from "@/features/ui/uiSlice"
+
 import type {NType, NodeType, PanelMode} from "@/types"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import Pagination from "@/components/Pagination"
@@ -36,7 +36,7 @@ export default function Commander() {
   const dispatch = useAppDispatch()
   const navigate = useNavigate()
   const lastPageSize = useAppSelector(s => selectLastPageSize(s, mode))
-  const currentNodeID = useAppSelector(s => selectCurrentFolderID(s, mode))
+  const currentNodeID = useAppSelector(s => selectCurrentNodeID(s, mode))
   const [pageSize, setPageSize] = useState<number>(lastPageSize)
   const [page, setPage] = useState<number>(1)
   const filter = useAppSelector(s => selectFilterText(s, mode))
@@ -48,7 +48,11 @@ export default function Commander() {
   })
   const [uploadFiles, setUploadFiles] = useState<File[] | FileList>()
 
-  const {data: currentFolder} = useGetFolderQuery(currentNodeID!)
+  if (!currentNodeID) {
+    return <div>Loading...</div>
+  }
+
+  const {data: currentFolder} = useGetFolderQuery(currentNodeID)
 
   if (isLoading && !data) {
     return <div>Loading...</div>
@@ -65,10 +69,7 @@ export default function Commander() {
   const onClick = (node: NType) => {
     if (mode == "secondary" && node.ctype == "folder") {
       dispatch(
-        setCurrentNode({
-          node: {id: node.id, ctype: "folder", breadcrumb: null},
-          panel: "secondary"
-        })
+        currentNodeChanged({id: node.id, ctype: "folder", panel: "secondary"})
       )
     } else if (mode == "main" && node.ctype == "folder") {
       navigate(`/folder/${node.id}?page_size=${lastPageSize}`)

ui2/src/features/nodes/components/UploadButton.tsx

@@ -1,15 +1,22 @@
 import {useState} from "react"
 import {useAppSelector} from "@/app/hooks"
-import {FileButton, ActionIcon, Tooltip} from "@mantine/core"
+import {
+  FileButton,
+  ActionIcon,
+  Tooltip,
+  Skeleton,
+  Button,
+  Loader
+} from "@mantine/core"
 import {useDisclosure} from "@mantine/hooks"
 import {IconUpload} from "@tabler/icons-react"
 import {useContext} from "react"
 import PanelContext from "@/contexts/PanelContext"
 import {PanelMode} from "@/types"
-import {selectCurrentFolderID} from "@/slices/dualPanel/dualPanel"
 import {useGetFolderQuery} from "../apiSlice"
 
 import {DropFilesModal} from "./DropFiles"
+import {selectCurrentNodeID} from "@/features/ui/uiSlice"
 
 const MIME_TYPES = [
   "image/png",
@@ -22,8 +29,13 @@ export default function UploadButton() {
   const [opened, {open, close}] = useDisclosure(false)
   const [uploadFiles, setUploadFiles] = useState<File[]>()
   const mode: PanelMode = useContext(PanelContext)
-  const folderID = useAppSelector(s => selectCurrentFolderID(s, mode))
-  const {data: target} = useGetFolderQuery(folderID!)
+  const folderID = useAppSelector(s => selectCurrentNodeID(s, mode))
+
+  if (!folderID) {
+    return <Loader size={"xs"} />
+  }
+
+  const {data: target} = useGetFolderQuery(folderID)
 
   const onUpload = (files: File[]) => {
     if (!files) {

ui2/src/features/ui/uiSlice.ts

@@ -1,7 +1,7 @@
 import Cookies from "js-cookie"
 import {createSlice, PayloadAction} from "@reduxjs/toolkit"
 import type {RootState} from "@/app/types"
-import type {BooleanString, PanelMode} from "@/types"
+import type {BooleanString, CType, PanelMode} from "@/types"
 
 import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types"
 
@@ -55,10 +55,23 @@ interface SizesState {
   search?: SearchPanelSizes
 }
 
+interface CurrentNodeArgs {
+  id: string
+  ctype: CType
+  panel: PanelMode
+}
+
+interface CurrentNode {
+  id: string
+  ctype: CType
+}
+
 interface UIState {
   uploader: UploaderState
   navbar: NavBarState
   sizes: SizesState
+  currentNodeMain?: CurrentNode
+  currentNodeSecondary?: CurrentNode
 }
 
 const initialState: UIState = {
@@ -187,6 +200,20 @@ const uiSlice = createSlice({
           actionPanelHeight: action.payload
         }
       }
+    },
+    currentNodeChanged(state, action: PayloadAction<CurrentNodeArgs>) {
+      const payload = action.payload
+      if (payload.panel == "main") {
+        state.currentNodeMain = {
+          id: payload.id,
+          ctype: payload.ctype
+        }
+      } else {
+        state.currentNodeSecondary = {
+          id: payload.id,
+          ctype: payload.ctype
+        }
+      }
     }
   }
 })
@@ -197,7 +224,8 @@ export const {
   updateOutlet,
   updateActionPanel,
   updateSearchActionPanel,
-  updateBreadcrumb
+  updateBreadcrumb,
+  currentNodeChanged
 } = uiSlice.actions
 export default uiSlice.reducer
 
@@ -246,6 +274,22 @@ export const selectSearchContentHeight = (state: RootState) => {
   return height
 }
 
+export const selectCurrentNodeID = (state: RootState, mode: PanelMode) => {
+  if (mode == "main") {
+    return state.ui.currentNodeMain?.id
+  }
+
+  return state.ui.currentNodeSecondary?.id
+}
+
+export const selectCurrentNodeCType = (state: RootState, mode: PanelMode) => {
+  if (mode == "main") {
+    return state.ui.currentNodeMain?.ctype
+  }
+
+  return state.ui.currentNodeSecondary?.ctype
+}
+
 /* Load initial collapse state value from cookie */
 function initial_collapse_value(): boolean {
   const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString

ui2/src/pages/Document.tsx

@@ -1,11 +1,9 @@
 import {LoaderFunctionArgs} from "react-router"
 import DualPanel from "@/components/DualPanel"
-import {
-  fetchPaginatedDocument,
-  setCurrentNode
-} from "@/slices/dualPanel/dualPanel"
+import {fetchPaginatedDocument} from "@/slices/dualPanel/dualPanel"
 
 import {store} from "@/app/store"
+import {currentNodeChanged} from "@/features/ui/uiSlice"
 
 export default function Document() {
   return <DualPanel />
@@ -16,8 +14,9 @@ export async function loader({params, request}: LoaderFunctionArgs) {
   const documentId = params.documentId
 
   store.dispatch(
-    setCurrentNode({
-      node: {id: params.documentId!, ctype: "document", breadcrumb: null},
+    currentNodeChanged({
+      id: params.documentId!,
+      ctype: "document",
       panel: "main"
     })
   )

ui2/src/pages/Folder.tsx

@@ -1,7 +1,7 @@
 import {LoaderFunctionArgs} from "react-router"
 
 import DualPanel from "@/components/DualPanel"
-import {setCurrentNode} from "@/slices/dualPanel/dualPanel"
+import {currentNodeChanged} from "@/features/ui/uiSlice"
 
 import {getCurrentUser} from "@/utils"
 import {store} from "@/app/store"
@@ -24,10 +24,7 @@ export async function loader({params, request}: LoaderFunctionArgs) {
   }
 
   store.dispatch(
-    setCurrentNode({
-      node: {id: folderId, ctype: "folder", breadcrumb: null},
-      panel: "main"
-    })
+    currentNodeChanged({id: folderId, ctype: "folder", panel: "main"})
   )
 
   return {nodeId: folderId, urlParams: url.searchParams}