From cd921bcc3714743fd584ee23046c8d96fadd6060 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Fri, 6 Sep 2024 08:42:54 +0200 Subject: [PATCH 1/4] WIP: refactoring uploader --- ui2/src/app/store.ts | 2 + .../DualPanel/ToggleSecondaryPanel.tsx | 19 +---- ui2/src/components/Uploader/uploader.tsx | 2 +- .../nodes/components/UploadButton.tsx | 12 ++- ui2/src/features/ui/uiSlice.ts | 82 +++++++++++++++++++ 5 files changed, 92 insertions(+), 25 deletions(-) create mode 100644 ui2/src/features/ui/uiSlice.ts diff --git a/ui2/src/app/store.ts b/ui2/src/app/store.ts index 4b95d7ce9..c7bf5a002 100644 --- a/ui2/src/app/store.ts +++ b/ui2/src/app/store.ts @@ -8,6 +8,7 @@ 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" @@ -25,6 +26,7 @@ export const store = configureStore({ sizes: sizesSliceReducer, dragndrop: dragndropReducer, nodes: nodesReducer, + ui: uiReducer, [apiSlice.reducerPath]: apiSlice.reducer }, middleware: getDefaultMiddleware => diff --git a/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx b/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx index 047feafe4..3d8315e85 100644 --- a/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx +++ b/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: { diff --git a/ui2/src/components/Uploader/uploader.tsx b/ui2/src/components/Uploader/uploader.tsx index b1e97dba8..eb6231d9e 100644 --- a/ui2/src/components/Uploader/uploader.tsx +++ b/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() { diff --git a/ui2/src/features/nodes/components/UploadButton.tsx b/ui2/src/features/nodes/components/UploadButton.tsx index 78cdda77e..0a20ba2af 100644 --- a/ui2/src/features/nodes/components/UploadButton.tsx +++ b/ui2/src/features/nodes/components/UploadButton.tsx @@ -1,4 +1,4 @@ -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" @@ -6,7 +6,8 @@ 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 {selectCurrentFolderID} from "@/slices/dualPanel/dualPanel" +import {useGetFolderQuery} from "../apiSlice" const MIME_TYPES = [ "image/png", @@ -17,10 +18,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 +30,6 @@ export default function UploadButton() { console.error("Current folder is undefined") return } - drop_files({source_files: files, target}).then(() => {}) } diff --git a/ui2/src/features/ui/uiSlice.ts b/ui2/src/features/ui/uiSlice.ts new file mode 100644 index 000000000..ad0ea9e6f --- /dev/null +++ b/ui2/src/features/ui/uiSlice.ts @@ -0,0 +1,82 @@ +import {createSlice, PayloadAction} from "@reduxjs/toolkit" +import type {RootState} from "@/app/types" + +import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types" + +type UploaderState = { + opened: boolean + files: Array +} + +type UpdateFileStatusArg = { + item: { + source: NodeType | null + target: FolderType + file_name: string + } + status: FileItemStatus + error: string | null +} + +interface UIState { + uploader: UploaderState +} + +const initialState: UIState = { + uploader: { + opened: false, + files: [] + } +} + +const uiSlice = createSlice({ + name: "ui", + initialState, + reducers: { + closeUploader: state => { + state.uploader.opened = false + state.uploader.files = [] + }, + openUploader: state => { + state.uploader.opened = true + }, + updateFileItem: (state, action: PayloadAction) => { + const file_name = action.payload.item.file_name + const target_id = action.payload.item.target.id + const itemToAdd = { + status: action.payload.status, + error: action.payload.error, + file_name: action.payload.item.file_name, + source: action.payload.item.source, + target: action.payload.item.target + } + + const found = state.uploader.files.find( + i => i.file_name == file_name && i.target.id == target_id + ) + if (!found) { + state.uploader.files.push(itemToAdd) + state.uploader.opened = true + return + } + + const newItems = state.uploader.files.map(i => { + if (i.file_name == file_name && i.target.id == target_id) { + return itemToAdd + } else { + return i + } + }) + + state.uploader.files = newItems + state.uploader.opened = true + } + } +}) +export const {openUploader, closeUploader, updateFileItem} = uiSlice.actions +export default uiSlice.reducer + +export const selectOpened = (state: RootState): boolean => state.uploader.opened + +export const selectFiles = (state: RootState): Array => + state.uploader.files From 10bb169b357e2481d280287a422f989fde7f39c7 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Fri, 6 Sep 2024 08:53:07 +0200 Subject: [PATCH 2/4] move navbar inside ui slice --- ui2/src/app/App.tsx | 2 +- ui2/src/app/store.ts | 2 - ui2/src/components/Header/SidebarToggle.tsx | 2 +- ui2/src/components/NavBar/NavBar.tsx | 2 +- ui2/src/features/ui/uiSlice.ts | 72 ++++++++++++++++++-- ui2/src/slices/navBar.ts | 74 --------------------- 6 files changed, 70 insertions(+), 84 deletions(-) delete mode 100644 ui2/src/slices/navBar.ts diff --git a/ui2/src/app/App.tsx b/ui2/src/app/App.tsx index 8f253439c..0b74bc85d 100644 --- a/ui2/src/app/App.tsx +++ b/ui2/src/app/App.tsx @@ -16,7 +16,7 @@ import { import {updateOutlet} from "@/slices/sizes" import "./App.css" -import {selectNavBarWidth} from "@/slices/navBar" +import {selectNavBarWidth} from "@/features/ui/uiSlice" import Uploader from "@/components/Uploader" function App() { diff --git a/ui2/src/app/store.ts b/ui2/src/app/store.ts index c7bf5a002..3914aeb9e 100644 --- a/ui2/src/app/store.ts +++ b/ui2/src/app/store.ts @@ -3,7 +3,6 @@ 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" @@ -18,7 +17,6 @@ export const store = configureStore({ auth: authSliceReducer, currentUser: currentUserReducer, dualPanel: dualPanelReducer, - navBar: navBarReducer, tags: tagsReducer, groups: groupsReducer, users: usersReducer, diff --git a/ui2/src/components/Header/SidebarToggle.tsx b/ui2/src/components/Header/SidebarToggle.tsx index ec0f32495..0e8aba1cc 100644 --- a/ui2/src/components/Header/SidebarToggle.tsx +++ b/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() diff --git a/ui2/src/components/NavBar/NavBar.tsx b/ui2/src/components/NavBar/NavBar.tsx index 9d4945ebd..911263235 100644 --- a/ui2/src/components/NavBar/NavBar.tsx +++ b/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" diff --git a/ui2/src/features/ui/uiSlice.ts b/ui2/src/features/ui/uiSlice.ts index ad0ea9e6f..6a140dda5 100644 --- a/ui2/src/features/ui/uiSlice.ts +++ b/ui2/src/features/ui/uiSlice.ts @@ -1,12 +1,14 @@ +import Cookies from "js-cookie" import {createSlice, PayloadAction} from "@reduxjs/toolkit" import type {RootState} from "@/app/types" +import type {BooleanString} from "@/types" import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types" -type UploaderState = { - opened: boolean - files: Array -} +const COLLAPSED_WIDTH = 55 +const FULL_WIDTH = 160 +const NAVBAR_COLLAPSED_COOKIE = "navbar_collapsed" +const NAVBAR_WIDTH_COOKIE = "navbar_width" type UpdateFileStatusArg = { item: { @@ -18,14 +20,29 @@ type UpdateFileStatusArg = { error: string | null } +interface NavBarState { + collapsed: boolean + width: number +} + +interface UploaderState { + opened: boolean + files: Array +} + interface UIState { uploader: UploaderState + navbar: NavBarState } const initialState: UIState = { uploader: { opened: false, files: [] + }, + navbar: { + collapsed: initial_collapse_value(), + width: initial_width_value() } } @@ -70,13 +87,58 @@ const uiSlice = createSlice({ state.uploader.files = newItems state.uploader.opened = true + }, + toggleNavBar(state) { + if (state.navbar.collapsed) { + state.navbar.collapsed = false + state.navbar.width = FULL_WIDTH + Cookies.set(NAVBAR_COLLAPSED_COOKIE, "false") + Cookies.set(NAVBAR_WIDTH_COOKIE, `${FULL_WIDTH}`) + } else { + state.navbar.collapsed = true + state.navbar.width = COLLAPSED_WIDTH + Cookies.set(NAVBAR_COLLAPSED_COOKIE, "true") + Cookies.set(NAVBAR_WIDTH_COOKIE, `${COLLAPSED_WIDTH}`) + } } } }) -export const {openUploader, closeUploader, updateFileItem} = uiSlice.actions +export const {openUploader, closeUploader, updateFileItem, toggleNavBar} = + uiSlice.actions export default uiSlice.reducer export const selectOpened = (state: RootState): boolean => state.uploader.opened export const selectFiles = (state: RootState): Array => state.uploader.files + +export const selectNavBarCollapsed = (state: RootState) => + state.ui.navbar.collapsed +export const selectNavBarWidth = (state: RootState) => state.ui.navbar.width + +/* Load initial collapse state value from cookie */ +function initial_collapse_value(): boolean { + const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString + + if (collapsed == "true") { + return true + } + + return false +} + +/* Load initial width value from cookie */ +function initial_width_value(): number { + const width = Cookies.get(NAVBAR_WIDTH_COOKIE) + + if (width) { + const ret = parseInt(width) + if (ret > 0) { + return ret + } else { + return FULL_WIDTH + } + } + + return FULL_WIDTH +} diff --git a/ui2/src/slices/navBar.ts b/ui2/src/slices/navBar.ts deleted file mode 100644 index 6b436ae26..000000000 --- a/ui2/src/slices/navBar.ts +++ /dev/null @@ -1,74 +0,0 @@ -import {createSlice} from "@reduxjs/toolkit" -import Cookies from "js-cookie" -import {RootState} from "@/app/types" -import type {BooleanString} from "@/types" - -const COLLAPSED_WIDTH = 55 -const FULL_WIDTH = 160 -const NAVBAR_COLLAPSED_COOKIE = "navbar_collapsed" -const NAVBAR_WIDTH_COOKIE = "navbar_width" - -interface NavBar { - collapsed: boolean - width: number -} - -const initialState: NavBar = { - collapsed: initial_collapse_value(), - width: initial_width_value() -} - -const navBarSlice = createSlice({ - name: "navbar", - initialState, - reducers: { - toggleNavBar(state) { - if (state.collapsed) { - state.collapsed = false - state.width = FULL_WIDTH - Cookies.set(NAVBAR_COLLAPSED_COOKIE, "false") - Cookies.set(NAVBAR_WIDTH_COOKIE, `${FULL_WIDTH}`) - } else { - state.collapsed = true - state.width = COLLAPSED_WIDTH - Cookies.set(NAVBAR_COLLAPSED_COOKIE, "true") - Cookies.set(NAVBAR_WIDTH_COOKIE, `${COLLAPSED_WIDTH}`) - } - } - } -}) - -/* Load initial collapse state value from cookie */ -function initial_collapse_value(): boolean { - const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString - - if (collapsed == "true") { - return true - } - - return false -} - -/* Load initial width value from cookie */ -function initial_width_value(): number { - const width = Cookies.get(NAVBAR_WIDTH_COOKIE) - - if (width) { - const ret = parseInt(width) - if (ret > 0) { - return ret - } else { - return FULL_WIDTH - } - } - - return FULL_WIDTH -} - -export default navBarSlice.reducer - -export const {toggleNavBar} = navBarSlice.actions - -export const selectNavBarCollapsed = (state: RootState) => - state.navBar.collapsed -export const selectNavBarWidth = (state: RootState) => state.navBar.width From c7e3c192ad9cdd982e1b23556c3e2454d1049bb6 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Fri, 6 Sep 2024 09:05:45 +0200 Subject: [PATCH 3/4] move sizes slice into featuers/ui/uiSlice --- ui2/src/app/App.tsx | 2 +- ui2/src/app/store.ts | 2 - .../components/Breadcrumbs/Breadcrumbs.tsx | 2 +- .../SearchResults/ActionButtons.tsx | 2 +- .../SearchResults/SearchResults.tsx | 2 +- ui2/src/components/Viewer/ActionButtons.tsx | 2 +- ui2/src/components/Viewer/Viewer.tsx | 2 +- .../features/nodes/components/Commander.tsx | 2 +- .../FolderNodeActions/FolderNodeActions.tsx | 2 +- ui2/src/features/ui/uiSlice.ts | 135 ++++++++++++++++- ui2/src/slices/sizes.ts | 140 ------------------ 11 files changed, 140 insertions(+), 153 deletions(-) delete mode 100644 ui2/src/slices/sizes.ts diff --git a/ui2/src/app/App.tsx b/ui2/src/app/App.tsx index 0b74bc85d..3ad43539a 100644 --- a/ui2/src/app/App.tsx +++ b/ui2/src/app/App.tsx @@ -13,7 +13,7 @@ import { selectCurrentUserStatus, selectCurrentUser } from "@/slices/currentUser" -import {updateOutlet} from "@/slices/sizes" +import {updateOutlet} from "@/features/ui/uiSlice" import "./App.css" import {selectNavBarWidth} from "@/features/ui/uiSlice" diff --git a/ui2/src/app/store.ts b/ui2/src/app/store.ts index 3914aeb9e..3a31117be 100644 --- a/ui2/src/app/store.ts +++ b/ui2/src/app/store.ts @@ -9,7 +9,6 @@ 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({ @@ -21,7 +20,6 @@ export const store = configureStore({ groups: groupsReducer, users: usersReducer, uploader: uploaderReducer, - sizes: sizesSliceReducer, dragndrop: dragndropReducer, nodes: nodesReducer, ui: uiReducer, diff --git a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx b/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx index 3bd89f116..0f23d7d32 100644 --- a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/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" diff --git a/ui2/src/components/SearchResults/ActionButtons.tsx b/ui2/src/components/SearchResults/ActionButtons.tsx index f32e9fa55..ad7d5cf0d 100644 --- a/ui2/src/components/SearchResults/ActionButtons.tsx +++ b/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" diff --git a/ui2/src/components/SearchResults/SearchResults.tsx b/ui2/src/components/SearchResults/SearchResults.tsx index 9c69c5eff..9113327ad 100644 --- a/ui2/src/components/SearchResults/SearchResults.tsx +++ b/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" diff --git a/ui2/src/components/Viewer/ActionButtons.tsx b/ui2/src/components/Viewer/ActionButtons.tsx index 44661583d..bbfd4d77e 100644 --- a/ui2/src/components/Viewer/ActionButtons.tsx +++ b/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" diff --git a/ui2/src/components/Viewer/Viewer.tsx b/ui2/src/components/Viewer/Viewer.tsx index bf780fe60..0c7e68f45 100644 --- a/ui2/src/components/Viewer/Viewer.tsx +++ b/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" diff --git a/ui2/src/features/nodes/components/Commander.tsx b/ui2/src/features/nodes/components/Commander.tsx index 7a343ee9e..7a535dd6e 100644 --- a/ui2/src/features/nodes/components/Commander.tsx +++ b/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" diff --git a/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx b/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx index d12dcce03..b0ce6c773 100644 --- a/ui2/src/features/nodes/components/FolderNodeActions/FolderNodeActions.tsx +++ b/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" diff --git a/ui2/src/features/ui/uiSlice.ts b/ui2/src/features/ui/uiSlice.ts index 6a140dda5..275dbb7e6 100644 --- a/ui2/src/features/ui/uiSlice.ts +++ b/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} from "@/types" +import type {BooleanString, PanelMode} from "@/types" import type {FolderType, FileItemType, FileItemStatus, NodeType} from "@/types" @@ -10,6 +10,13 @@ const FULL_WIDTH = 160 const NAVBAR_COLLAPSED_COOKIE = "navbar_collapsed" const NAVBAR_WIDTH_COOKIE = "navbar_width" +const SMALL_BOTTOM_MARGIN = 13 /* pixles */ + +type DualArg = { + mode: PanelMode + value: number +} + type UpdateFileStatusArg = { item: { source: NodeType | null @@ -30,9 +37,28 @@ interface UploaderState { files: Array } +interface SearchPanelSizes { + actionPanelHeight: number +} + +// i.e Commander's panel, viewer's panel +interface PanelSizes { + actionPanelHeight: number + breadcrumbHeight: number +} + +interface SizesState { + outletTopMarginAndPadding: number + windowInnerHeight: number + main: PanelSizes + secondary?: PanelSizes + search?: SearchPanelSizes +} + interface UIState { uploader: UploaderState navbar: NavBarState + sizes: SizesState } const initialState: UIState = { @@ -43,6 +69,14 @@ const initialState: UIState = { navbar: { collapsed: initial_collapse_value(), width: initial_width_value() + }, + sizes: { + outletTopMarginAndPadding: 0, + windowInnerHeight: window.innerHeight, + main: { + actionPanelHeight: 0, + breadcrumbHeight: 0 + } } } @@ -100,11 +134,71 @@ const uiSlice = createSlice({ Cookies.set(NAVBAR_COLLAPSED_COOKIE, "true") Cookies.set(NAVBAR_WIDTH_COOKIE, `${COLLAPSED_WIDTH}`) } + }, + updateOutlet(state, action: PayloadAction) { + state.sizes.windowInnerHeight = window.innerHeight + state.sizes.outletTopMarginAndPadding = action.payload + }, + updateActionPanel(state, action: PayloadAction) { + const {value, mode} = action.payload + + state.sizes.windowInnerHeight = window.innerHeight + if (mode == "main") { + // main panel + state.sizes.main.actionPanelHeight = value + } else if (mode == "secondary") { + // secondary panel + if (state.sizes.secondary) { + state.sizes.secondary.actionPanelHeight = value + } else { + state.sizes.secondary = { + breadcrumbHeight: 0, + actionPanelHeight: value + } + } + } + }, + updateBreadcrumb(state, action: PayloadAction) { + const {value, mode} = action.payload + + state.sizes.windowInnerHeight = window.innerHeight + if (mode == "main") { + // main panel + state.sizes.main.breadcrumbHeight = value + } else if (mode == "secondary") { + // secondary panel + if (state.sizes.secondary) { + state.sizes.secondary.breadcrumbHeight = value + } else { + state.sizes.secondary = { + breadcrumbHeight: value, + actionPanelHeight: 0 + } + } + } + }, + updateSearchActionPanel(state, action: PayloadAction) { + state.sizes.windowInnerHeight = window.innerHeight + if (state.sizes.search) { + state.sizes.search.actionPanelHeight = action.payload + } else { + state.sizes.search = { + actionPanelHeight: action.payload + } + } } } }) -export const {openUploader, closeUploader, updateFileItem, toggleNavBar} = - uiSlice.actions +export const { + openUploader, + closeUploader, + updateFileItem, + toggleNavBar, + updateOutlet, + updateActionPanel, + updateSearchActionPanel, + updateBreadcrumb +} = uiSlice.actions export default uiSlice.reducer export const selectOpened = (state: RootState): boolean => state.uploader.opened @@ -116,6 +210,41 @@ export const selectNavBarCollapsed = (state: RootState) => state.ui.navbar.collapsed export const selectNavBarWidth = (state: RootState) => state.ui.navbar.width +export const selectContentHeight = (state: RootState, mode: PanelMode) => { + let height: number = state.ui.sizes.windowInnerHeight + + height -= state.ui.sizes.outletTopMarginAndPadding + + if (mode == "main") { + height -= state.ui.sizes.main.actionPanelHeight + height -= state.ui.sizes.main.breadcrumbHeight + } else if (mode == "secondary") { + if (state.ui.sizes.secondary) { + height -= state.ui.sizes.secondary.actionPanelHeight + height -= state.ui.sizes.secondary.breadcrumbHeight + } + } + + /* Let there be a small margin at the bottom of the viewport */ + height -= SMALL_BOTTOM_MARGIN + return height +} + +export const selectSearchContentHeight = (state: RootState) => { + let height: number = state.ui.sizes.windowInnerHeight + + height -= state.ui.sizes.outletTopMarginAndPadding + + if (state.ui.sizes.search) { + height -= state.ui.sizes.search.actionPanelHeight + } + + /* Let there be a small margin at the bottom of the viewport */ + height -= SMALL_BOTTOM_MARGIN + + return height +} + /* Load initial collapse state value from cookie */ function initial_collapse_value(): boolean { const collapsed = Cookies.get(NAVBAR_COLLAPSED_COOKIE) as BooleanString diff --git a/ui2/src/slices/sizes.ts b/ui2/src/slices/sizes.ts deleted file mode 100644 index 9be704bea..000000000 --- a/ui2/src/slices/sizes.ts +++ /dev/null @@ -1,140 +0,0 @@ -import {PanelMode} from "@/types" -import {createSlice, PayloadAction} from "@reduxjs/toolkit" -import {RootState} from "@/app/types" - -const SMALL_BOTTOM_MARGIN = 13 /* pixles */ - -type SearchPanelSizes = { - actionPanelHeight: number -} - -// i.e Commander's panel, viewer's panel -type PanelSizes = { - actionPanelHeight: number - breadcrumbHeight: number -} - -type Sizes = { - outletTopMarginAndPadding: number - windowInnerHeight: number - main: PanelSizes - secondary?: PanelSizes - search?: SearchPanelSizes -} - -type DualArg = { - mode: PanelMode - value: number -} - -const initialState: Sizes = { - outletTopMarginAndPadding: 0, - windowInnerHeight: window.innerHeight, - main: { - actionPanelHeight: 0, - breadcrumbHeight: 0 - } -} - -const sizesSlice = createSlice({ - name: "sizes", - initialState, - reducers: { - updateOutlet(state, action: PayloadAction) { - state.windowInnerHeight = window.innerHeight - state.outletTopMarginAndPadding = action.payload - }, - updateActionPanel(state, action: PayloadAction) { - const {value, mode} = action.payload - - state.windowInnerHeight = window.innerHeight - if (mode == "main") { - // main panel - state.main.actionPanelHeight = value - } else if (mode == "secondary") { - // secondary panel - if (state.secondary) { - state.secondary.actionPanelHeight = value - } else { - state.secondary = { - breadcrumbHeight: 0, - actionPanelHeight: value - } - } - } - }, - updateBreadcrumb(state, action: PayloadAction) { - const {value, mode} = action.payload - - state.windowInnerHeight = window.innerHeight - if (mode == "main") { - // main panel - state.main.breadcrumbHeight = value - } else if (mode == "secondary") { - // secondary panel - if (state.secondary) { - state.secondary.breadcrumbHeight = value - } else { - state.secondary = { - breadcrumbHeight: value, - actionPanelHeight: 0 - } - } - } - }, - updateSearchActionPanel(state, action: PayloadAction) { - state.windowInnerHeight = window.innerHeight - if (state.search) { - state.search.actionPanelHeight = action.payload - } else { - state.search = { - actionPanelHeight: action.payload - } - } - } - } -}) - -export default sizesSlice.reducer - -export const { - updateOutlet, - updateActionPanel, - updateSearchActionPanel, - updateBreadcrumb -} = sizesSlice.actions - -export const selectContentHeight = (state: RootState, mode: PanelMode) => { - let height: number = state.sizes.windowInnerHeight - - height -= state.sizes.outletTopMarginAndPadding - - if (mode == "main") { - height -= state.sizes.main.actionPanelHeight - height -= state.sizes.main.breadcrumbHeight - } else if (mode == "secondary") { - if (state.sizes.secondary) { - height -= state.sizes.secondary.actionPanelHeight - height -= state.sizes.secondary.breadcrumbHeight - } - } - - /* Let there be a small margin at the bottom of the viewport */ - height -= SMALL_BOTTOM_MARGIN - return height -} - -export const selectSearchContentHeight = (state: RootState) => { - let height: number = state.sizes.windowInnerHeight - - height -= state.sizes.outletTopMarginAndPadding - - if (state.sizes.search) { - height -= state.sizes.search.actionPanelHeight - } - - /* Let there be a small margin at the bottom of the viewport */ - height -= SMALL_BOTTOM_MARGIN - - return height -} From 6541cec1397d2cb141121268104941c5a8b02dd7 Mon Sep 17 00:00:00 2001 From: Eugen Ciur Date: Fri, 6 Sep 2024 09:09:08 +0200 Subject: [PATCH 4/4] linting --- ui2/src/features/nodes/components/UploadButton.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui2/src/features/nodes/components/UploadButton.tsx b/ui2/src/features/nodes/components/UploadButton.tsx index 0a20ba2af..5bb4923c3 100644 --- a/ui2/src/features/nodes/components/UploadButton.tsx +++ b/ui2/src/features/nodes/components/UploadButton.tsx @@ -4,8 +4,7 @@ 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 {PanelMode} from "@/types" import {selectCurrentFolderID} from "@/slices/dualPanel/dualPanel" import {useGetFolderQuery} from "../apiSlice"