more nodes fetching into feature folder. Use RTK Query

ui2/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -16,16 +16,18 @@ import classes from "./Breadcrumbs.module.css"
 
 import {
   selectPanelBreadcrumbs,
-  selectPanelNodesStatus
+  selectPanelNodesStatus,
+  selectCurrentFolderID
 } from "@/slices/dualPanel/dualPanel"
 import {updateBreadcrumb} from "@/slices/sizes"
 
-import type {PanelMode, NType, UserDetails} from "@/types"
+import type {PanelMode, NType, UserDetails, FolderType} from "@/types"
 import type {RootState} from "@/app/types"
 
 import PanelContext from "@/contexts/PanelContext"
 import {selectCurrentUser} from "@/slices/currentUser"
 import {equalUUIDs} from "@/utils"
+import {useGetFolderQuery} from "@/features/nodes/apiSlice"
 
 type Args = {
   onClick: (node: NType) => void
@@ -40,10 +42,11 @@ export default function BreadcrumbsComponent({onClick, className}: Args) {
   const nodesStatus = useSelector((state: RootState) =>
     selectPanelNodesStatus(state, mode)
   )
+  const currentNodeID = useSelector((state: RootState) =>
+    selectCurrentFolderID(state, mode)
+  )
 
-  const items = useSelector<RootState>(state =>
-    selectPanelBreadcrumbs(state, mode)
-  ) as Array<[string, string]> | null | undefined
+  const {data, isLoading} = useGetFolderQuery(currentNodeID!)
 
   const onRootElementClick = (n: NType) => {
     onClick(n)
@@ -62,14 +65,15 @@ export default function BreadcrumbsComponent({onClick, className}: Args) {
     }
   }, [width, height])
 
-  if (!items) {
+  if (isLoading || !data) {
     return (
       <Skeleton width={"25%"} my="md">
         <Breadcrumbs>{["one", "two"]}</Breadcrumbs>
       </Skeleton>
     )
   }
 
+  const items = data.breadcrumb
   const links = items.slice(1, -1).map(i => (
     <Anchor key={i[0]} onClick={() => onClick({id: i[0], ctype: "folder"})}>
       {i[1]}

ui2/src/components/Commander/Commander.tsx

@@ -27,6 +27,7 @@ import PanelContext from "@/contexts/PanelContext"
 import drop_files from "@/components/modals/DropFiles"
 import {selectContentHeight} from "@/slices/sizes"
 import classes from "./Commander.module.scss"
+import {useGetPaginatedNodesQuery} from "@/features/nodes/apiSlice"
 
 export default function Commander() {
   const [dragOver, setDragOver] = useState<boolean>(false)
@@ -36,44 +37,44 @@ export default function Commander() {
   )
   const dispatch = useDispatch()
   const navigate = useNavigate()
-
-  const {data, status, error} = useSelector((state: RootState) =>
-    selectPanelNodes(state, mode)
+  const lastPageSize = useSelector((state: RootState) =>
+    selectLastPageSize(state, mode)
   )
   const currentNodeID = useSelector((state: RootState) =>
     selectCurrentFolderID(state, mode)
   )
+  const pageSize = useSelector((state: RootState) =>
+    selectCommanderPageSize(state, mode)
+  )
+  const [page, setPage] = useState<number>(1)
+
+  const {data, isLoading, isFetching, isError} = useGetPaginatedNodesQuery({
+    nodeID: currentNodeID!,
+    page_number: page,
+    page_size: pageSize
+  })
+
   const currentFolder = useSelector((state: RootState) =>
     selectCurrentFolder(state, mode)
   )
   const pagination = useSelector((state: RootState) =>
     selectPagination(state, mode)
   )
-  const lastPageSize = useSelector((state: RootState) =>
-    selectLastPageSize(state, mode)
-  )
-  const pageSize = useSelector((state: RootState) =>
-    selectCommanderPageSize(state, mode)
-  )
+
   const pageNumber = useSelector((state: RootState) =>
     selectCommanderPageNumber(state, mode)
   )
 
-  if (status === "loading" && !data) {
+  if (isLoading && !data) {
     return <div>Loading...</div>
   }
 
-  if (status === "failed") {
-    return <div>{error}</div>
+  if (isError) {
+    return <div>{`some error`}</div>
   }
 
   if (!data) {
-    return (
-      <div>
-        Data is null Error: {error}
-        Status: {status}
-      </div>
-    )
+    return <div>Data is null</div>
   }
 
   const onClick = (node: NType) => {
@@ -155,7 +156,7 @@ export default function Commander() {
     }).then(() => {})
   }
 
-  const nodes = data.map((n: NodeType) => (
+  const nodes = data.items.map((n: NodeType) => (
     <Node onClick={onClick} key={n.id} node={n} />
   ))
 
@@ -166,7 +167,11 @@ export default function Commander() {
       <>
         <Group>{nodes}</Group>
         <Pagination
-          pagination={pagination}
+          pagination={{
+            pageNumber: page,
+            pageSize: pageSize!,
+            numPages: data.num_pages
+          }}
           onPageNumberChange={onPageNumberChange}
           onPageSizeChange={onPageSizeChange}
           lastPageSize={lastPageSize}

ui2/src/features/api/slice.ts

@@ -40,6 +40,6 @@ export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: baseQuery,
   keepUnusedDataFor: 60,
-  tagTypes: ["Group", "User", "Tag"],
+  tagTypes: ["Group", "User", "Tag", "Node", "Folder"],
   endpoints: _ => ({})
 })

ui2/src/features/nodes/apiSlice.ts

@@ -0,0 +1,39 @@
+import {apiSlice} from "@/features/api/slice"
+import type {Paginated, FolderType, NodeType} from "@/types"
+
+export type PaginatedArgs = {
+  nodeID: string
+  page_number?: number
+  page_size?: number
+}
+
+import {PAGINATION_DEFAULT_ITEMS_PER_PAGES} from "@/cconstants"
+
+export const apiSliceWithNodes = apiSlice.injectEndpoints({
+  endpoints: builder => ({
+    getPaginatedNodes: builder.query<Paginated<NodeType>, PaginatedArgs | void>(
+      {
+        query: ({
+          nodeID,
+          page_number = 1,
+          page_size = PAGINATION_DEFAULT_ITEMS_PER_PAGES
+        }: PaginatedArgs) =>
+          `/nodes/${nodeID}/?page_number=${page_number}&page_size=${page_size}`,
+        providesTags: (
+          result = {page_number: 1, page_size: 1, num_pages: 1, items: []},
+          _error,
+          _arg
+        ) => [
+          "Node",
+          ...result.items.map(({id}) => ({type: "Node", id}) as const)
+        ]
+      }
+    ),
+    getFolder: builder.query<FolderType, string>({
+      query: folderID => `/folders/${folderID}`,
+      providesTags: (_result, _error, arg) => [{type: "Folder", id: arg}]
+    })
+  })
+})
+
+export const {useGetPaginatedNodesQuery, useGetFolderQuery} = apiSliceWithNodes

ui2/src/features/nodes/nodesSlice.ts

@@ -0,0 +1,4 @@
+import {apiSliceWithNodes} from "./apiSlice"
+
+export const selectFolderResult = (folderID: string) =>
+  apiSliceWithNodes.endpoints.getFolder.select(folderID)

ui2/src/pages/Folder.tsx

@@ -1,7 +1,7 @@
 import {LoaderFunctionArgs} from "react-router"
 
 import DualPanel from "@/components/DualPanel"
-import {fetchPaginatedNodes, setCurrentNode} from "@/slices/dualPanel/dualPanel"
+import {setCurrentNode} from "@/slices/dualPanel/dualPanel"
 
 import {getCurrentUser} from "@/utils"
 import {store} from "@/app/store"
@@ -30,13 +30,5 @@ export async function loader({params, request}: LoaderFunctionArgs) {
     })
   )
 
-  await store.dispatch(
-    fetchPaginatedNodes({
-      nodeId: folderId,
-      panel: "main",
-      urlParams: url.searchParams
-    })
-  )
-
   return {nodeId: folderId, urlParams: url.searchParams}
 }

ui2/src/pages/Home.tsx

@@ -17,11 +17,6 @@ export async function loader({params, request}: LoaderFunctionArgs) {
   const url = new URL(request.url)
   const user: User = await getCurrentUser()
   let folderId, breadcrumb
-  const state = store.getState()
-  const pageSize = state.dualPanel.mainPanel.commander?.lastPageSize
-  const urlParams = new URLSearchParams(
-    `page_number=1&page_size=${pageSize || INITIAL_PAGE_SIZE}`
-  )
 
   if (params.folderId) {
     folderId = params.folderId
@@ -38,9 +33,5 @@ export async function loader({params, request}: LoaderFunctionArgs) {
     })
   )
 
-  store.dispatch(
-    fetchPaginatedNodes({nodeId: folderId, panel: "main", urlParams: urlParams})
-  )
-
   return {folderId, urlParams: url.searchParams}
 }

ui2/src/pages/Inbox.tsx

@@ -1,13 +1,12 @@
 import {LoaderFunctionArgs} from "react-router"
 
 import DualPanel from "@/components/DualPanel"
-import {fetchPaginatedNodes, setCurrentNode} from "@/slices/dualPanel/dualPanel"
+import {setCurrentNode} from "@/slices/dualPanel/dualPanel"
 
 import {getCurrentUser} from "@/utils"
 import {store} from "@/app/store"
 
 import type {User} from "@/types"
-import {INITIAL_PAGE_SIZE} from "@/cconstants"
 
 export default function Home() {
   return <DualPanel />
@@ -17,11 +16,6 @@ export async function loader({params, request}: LoaderFunctionArgs) {
   const url = new URL(request.url)
   const user: User = await getCurrentUser()
   let folderId
-  const state = store.getState()
-  const pageSize = state.dualPanel.mainPanel.commander?.lastPageSize
-  const urlParams = new URLSearchParams(
-    `page_number=1&page_size=${pageSize || INITIAL_PAGE_SIZE}`
-  )
 
   if (params.folderId) {
     folderId = params.folderId
@@ -36,9 +30,5 @@ export async function loader({params, request}: LoaderFunctionArgs) {
     })
   )
 
-  await store.dispatch(
-    fetchPaginatedNodes({nodeId: folderId, panel: "main", urlParams: urlParams})
-  )
-
   return {folderId, urlParams: url.searchParams}
 }