Refactoring uploader 1 (#452)

ui2/src/app/App.tsx

@@ -13,10 +13,10 @@ import {
   selectCurrentUserStatus,
   selectCurrentUser
 } from "@/slices/currentUser"
-import {updateOutlet} from "@/slices/sizes"
+import {updateOutlet} from "@/features/ui/uiSlice"
 
 import "./App.css"
-import {selectNavBarWidth} from "@/slices/navBar"
+import {selectNavBarWidth} from "@/features/ui/uiSlice"
 import Uploader from "@/components/Uploader"
 
 function App() {

ui2/src/app/store.ts

@@ -3,28 +3,26 @@ import {apiSlice} from "@/features/api/slice"
 import authSliceReducer from "@/features/auth/slice"
 import currentUserReducer from "@/slices/currentUser"
 import dualPanelReducer from "@/slices/dualPanel/dualPanel"
-import navBarReducer from "@/slices/navBar"
 import tagsReducer from "@/features/tags/tagsSlice"
 import groupsReducer from "@/features/groups/groupsSlice"
 import usersReducer from "@/features/users/usersSlice"
 import nodesReducer from "@/features/nodes/nodesSlice"
+import uiReducer from "@/features/ui/uiSlice"
 import {uploaderReducer} from "@/slices/uploader"
-import sizesSliceReducer from "@/slices/sizes"
 import dragndropReducer from "@/slices/dragndrop"
 
 export const store = configureStore({
   reducer: {
     auth: authSliceReducer,
     currentUser: currentUserReducer,
     dualPanel: dualPanelReducer,
-    navBar: navBarReducer,
     tags: tagsReducer,
     groups: groupsReducer,
     users: usersReducer,
     uploader: uploaderReducer,
-    sizes: sizesSliceReducer,
     dragndrop: dragndropReducer,
     nodes: nodesReducer,
+    ui: uiReducer,
     [apiSlice.reducerPath]: apiSlice.reducer
   },
   middleware: getDefaultMiddleware =>

ui2/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -18,7 +18,7 @@ import {
   selectPanelNodesStatus,
   selectCurrentFolderID
 } from "@/slices/dualPanel/dualPanel"
-import {updateBreadcrumb} from "@/slices/sizes"
+import {updateBreadcrumb} from "@/features/ui/uiSlice"
 
 import type {PanelMode, NType, UserDetails} from "@/types"
 

ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx

@@ -6,15 +6,12 @@ import {
   openSecondaryPanel,
   closeSecondaryPanel,
   selectMainPanel,
-  selectSecondaryPanel,
-  selectLastPageSize
+  selectSecondaryPanel
 } from "@/slices/dualPanel/dualPanel"
-import {fetchPaginatedNodes, setCurrentNode} from "@/slices/dualPanel/dualPanel"
+import {setCurrentNode} from "@/slices/dualPanel/dualPanel"
 import {selectCurrentUser} from "@/slices/currentUser"
 
 import type {PanelMode, User} from "@/types"
-import {INITIAL_PAGE_SIZE} from "@/cconstants"
-import {RootState} from "@/app/types"
 
 import PanelContext from "@/contexts/PanelContext"
 
@@ -24,9 +21,6 @@ export default function ToggleSecondaryPanel() {
   const secondaryPanel = useSelector(selectSecondaryPanel)
   const user: User = useSelector(selectCurrentUser)
   const dispatch = useDispatch()
-  const lastPageSize = useSelector((state: RootState) =>
-    selectLastPageSize(state, mode)
-  )
 
   if (mainPanel) {
     // mainPanel is always there
@@ -41,15 +35,6 @@ export default function ToggleSecondaryPanel() {
         breadcrumb: null
       })
     )
-    dispatch(
-      fetchPaginatedNodes({
-        nodeId: folderId,
-        panel: "secondary",
-        urlParams: new URLSearchParams(
-          `page_number=1&page_size=${lastPageSize || INITIAL_PAGE_SIZE}`
-        )
-      })
-    )
     dispatch(
       setCurrentNode({
         node: {

ui2/src/components/Header/SidebarToggle.tsx

@@ -2,7 +2,7 @@ import {useDispatch} from "react-redux"
 import {IconMenu2} from "@tabler/icons-react"
 import {UnstyledButton} from "@mantine/core"
 
-import {toggleNavBar} from "@/slices/navBar"
+import {toggleNavBar} from "@/features/ui/uiSlice"
 
 export default function SidebarToggle() {
   const dispatch = useDispatch()

ui2/src/components/NavBar/NavBar.tsx

@@ -13,7 +13,7 @@ import {
   selectCurrentUserStatus,
   selectCurrentUserError
 } from "@/slices/currentUser.ts"
-import {selectNavBarCollapsed} from "@/slices/navBar"
+import {selectNavBarCollapsed} from "@/features/ui/uiSlice"
 
 import type {User} from "@/types.ts"
 

ui2/src/components/SearchResults/ActionButtons.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useDispatch} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
-import {updateSearchActionPanel} from "@/slices/sizes"
+import {updateSearchActionPanel} from "@/features/ui/uiSlice"
 
 import GoBackButton from "./GoBackButton"
 import OpenInOtherPanelCheckbox from "./OpenInOtherPanelCheckbox"

ui2/src/components/SearchResults/SearchResults.tsx

@@ -18,7 +18,7 @@ import {
 } from "@/slices/dualPanel/dualPanel"
 import ActionButtons from "./ActionButtons"
 import SearchResultItems from "./SearchResultItems"
-import {selectSearchContentHeight} from "@/slices/sizes"
+import {selectSearchContentHeight} from "@/features/ui/uiSlice"
 import {NType, PanelMode} from "@/types"
 import classes from "./SearchResults.module.css"
 

ui2/src/components/Uploader/uploader.tsx

@@ -1,6 +1,6 @@
 import {Dialog, List, Container} from "@mantine/core"
 import {useSelector, useDispatch} from "react-redux"
-import {selectOpened, selectFiles, closeUploader} from "@/slices/uploader"
+import {selectOpened, selectFiles, closeUploader} from "@/features/ui/uiSlice"
 import UploaderItem from "./uploaderItem"
 
 export default function Uploader() {

ui2/src/components/Viewer/ActionButtons.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useDispatch, useSelector} from "react-redux"
 import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
-import {updateActionPanel} from "@/slices/sizes"
+import {updateActionPanel} from "@/features/ui/uiSlice"
 import PanelContext from "@/contexts/PanelContext"
 import EditTitleButton from "./EditTitleButton"
 

ui2/src/components/Viewer/Viewer.tsx

@@ -12,7 +12,7 @@ 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 "@/slices/sizes"
+import {selectContentHeight} from "@/features/ui/uiSlice"
 import ActionButtons from "./ActionButtons"
 import ThumbnailsToggle from "./ThumbnailsToggle"
 import Pages from "./Pages"

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

@@ -20,7 +20,7 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import Pagination from "@/components/Pagination"
 import PanelContext from "@/contexts/PanelContext"
 import drop_files from "@/components/modals/DropFiles"
-import {selectContentHeight} from "@/slices/sizes"
+import {selectContentHeight} from "@/features/ui/uiSlice"
 import classes from "./Commander.module.scss"
 import {useGetPaginatedNodesQuery} from "@/features/nodes/apiSlice"
 

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

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useViewportSize} from "@mantine/hooks"
 import {useSelector, useDispatch} from "react-redux"
 import {selectSelectedNodeIds} from "@/slices/dualPanel/dualPanel"
-import {updateActionPanel} from "@/slices/sizes"
+import {updateActionPanel} from "@/features/ui/uiSlice"
 
 import type {RootState} from "@/app/types"
 import type {PanelMode} from "@/types"

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

@@ -1,12 +1,12 @@
-import {useSelector} from "react-redux"
+import {useAppSelector} from "@/app/hooks"
 import {FileButton, ActionIcon, Tooltip} from "@mantine/core"
 import {IconUpload} from "@tabler/icons-react"
 import drop_files from "@/components/modals/DropFiles"
 import {useContext} from "react"
 import PanelContext from "@/contexts/PanelContext"
-import {FolderType, PanelMode} from "@/types"
-import {RootState} from "@/app/types"
-import {selectCurrentFolder} from "@/slices/dualPanel/dualPanel"
+import {PanelMode} from "@/types"
+import {selectCurrentFolderID} from "@/slices/dualPanel/dualPanel"
+import {useGetFolderQuery} from "../apiSlice"
 
 const MIME_TYPES = [
   "image/png",
@@ -17,10 +17,8 @@ const MIME_TYPES = [
 
 export default function UploadButton() {
   const mode: PanelMode = useContext(PanelContext)
-  const target = useSelector(
-    (state: RootState) =>
-      selectCurrentFolder(state, mode) as FolderType | undefined
-  )
+  const folderID = useAppSelector(s => selectCurrentFolderID(s, mode))
+  const {data: target} = useGetFolderQuery(folderID!)
 
   const onUpload = (files: File[]) => {
     if (!files) {
@@ -31,7 +29,6 @@ export default function UploadButton() {
       console.error("Current folder is undefined")
       return
     }
-
     drop_files({source_files: files, target}).then(() => {})
   }