diff --git a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx b/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx index 0f23d7d32..f4fa94292 100644 --- a/ui2/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/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(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) { - {nodesStatus == "loading" && } + {/*nodesStatus == "loading" && */} ) } @@ -93,7 +90,7 @@ export default function BreadcrumbsComponent({onClick, className}: Args) { {links} {lastOne} - {nodesStatus == "loading" && } + {/*nodesStatus == "loading" && */} ) } diff --git a/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx b/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx index 3d8315e85..fd06943ab 100644 --- a/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx +++ b/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"}) ) } diff --git a/ui2/src/components/SearchResults/SearchResults.tsx b/ui2/src/components/SearchResults/SearchResults.tsx index 9113327ad..91dd12a80 100644 --- a/ui2/src/components/SearchResults/SearchResults.tsx +++ b/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 }) ) diff --git a/ui2/src/components/Viewer/EditTitleButton.tsx b/ui2/src/components/Viewer/EditTitleButton.tsx index ddba3d8fa..8fa8d7f95 100644 --- a/ui2/src/components/Viewer/EditTitleButton.tsx +++ b/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) diff --git a/ui2/src/components/Viewer/Viewer.tsx b/ui2/src/components/Viewer/Viewer.tsx index 0c7e68f45..aebae116a 100644 --- a/ui2/src/components/Viewer/Viewer.tsx +++ b/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}`) diff --git a/ui2/src/features/nodes/components/Commander.tsx b/ui2/src/features/nodes/components/Commander.tsx index 55e985e25..53f19c01a 100644 --- a/ui2/src/features/nodes/components/Commander.tsx +++ b/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(lastPageSize) const [page, setPage] = useState(1) const filter = useAppSelector(s => selectFilterText(s, mode)) @@ -48,7 +48,11 @@ export default function Commander() { }) const [uploadFiles, setUploadFiles] = useState() - const {data: currentFolder} = useGetFolderQuery(currentNodeID!) + if (!currentNodeID) { + return
Loading...
+ } + + const {data: currentFolder} = useGetFolderQuery(currentNodeID) if (isLoading && !data) { return
Loading...
@@ -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}`) diff --git a/ui2/src/features/nodes/components/UploadButton.tsx b/ui2/src/features/nodes/components/UploadButton.tsx index 96e688e25..db4aa3243 100644 --- a/ui2/src/features/nodes/components/UploadButton.tsx +++ b/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() 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 + } + + const {data: target} = useGetFolderQuery(folderID) const onUpload = (files: File[]) => { if (!files) { diff --git a/ui2/src/features/ui/uiSlice.ts b/ui2/src/features/ui/uiSlice.ts index efeda5dec..6115de342 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, 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) { + 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 diff --git a/ui2/src/pages/Document.tsx b/ui2/src/pages/Document.tsx index 5ecc8718a..b0e163d99 100644 --- a/ui2/src/pages/Document.tsx +++ b/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 @@ -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" }) ) diff --git a/ui2/src/pages/Folder.tsx b/ui2/src/pages/Folder.tsx index c24f9f4c6..850c06226 100644 --- a/ui2/src/pages/Folder.tsx +++ b/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} diff --git a/ui2/src/pages/Home.tsx b/ui2/src/pages/Home.tsx index 81a1f2597..2ead27779 100644 --- a/ui2/src/pages/Home.tsx +++ b/ui2/src/pages/Home.tsx @@ -1,12 +1,12 @@ import {LoaderFunctionArgs} from "react-router" import DualPanel from "@/components/DualPanel" -import {setCurrentNode} from "@/slices/dualPanel/dualPanel" import {getCurrentUser} from "@/utils" import {store} from "@/app/store" import type {User} from "@/types" +import {currentNodeChanged} from "@/features/ui/uiSlice" export default function Home() { return @@ -26,8 +26,9 @@ export async function loader({params, request}: LoaderFunctionArgs) { } store.dispatch( - setCurrentNode({ - node: {id: folderId, ctype: "folder", breadcrumb: breadcrumb}, + currentNodeChanged({ + id: folderId, + ctype: "folder", panel: "main" }) ) diff --git a/ui2/src/pages/Inbox.tsx b/ui2/src/pages/Inbox.tsx index b388b2f62..1b093ed71 100644 --- a/ui2/src/pages/Inbox.tsx +++ b/ui2/src/pages/Inbox.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,8 +24,9 @@ export async function loader({params, request}: LoaderFunctionArgs) { } store.dispatch( - setCurrentNode({ - node: {id: folderId, ctype: "folder", breadcrumb: null}, + currentNodeChanged({ + id: folderId, + ctype: "folder", panel: "main" }) ) diff --git a/ui2/src/slices/dualPanel/dualPanel.ts b/ui2/src/slices/dualPanel/dualPanel.ts index 14d93cf84..938bda83b 100644 --- a/ui2/src/slices/dualPanel/dualPanel.ts +++ b/ui2/src/slices/dualPanel/dualPanel.ts @@ -14,15 +14,12 @@ axios.defaults.headers.common = getDefaultHeaders() import {RootState} from "@/app/types" import { - removeNodesHelper, selectionAddNodeHelper, selectionAddPageHelper, selectionRemoveNodeHelper, selectionRemovePageHelper, clearNodesSelectionHelper, commanderInitialState, - setCurrentNodeHelper, - nodeAddedHelper, dropThumbnailPageHelper, resetPageChangesHelper, getLatestVersionPages @@ -40,7 +37,6 @@ import type { DocumentType, CurrentNodeType, PaginationType, - SliceStateStatus, SearchResultNode, PaginatedSearchResult, DroppedThumbnailPosition, @@ -53,8 +49,6 @@ import type { import { DualPanelState, SetCurrentNodeArgs, - FolderAddedArgs, - NodeWithSpinner, SelectionNodePayload, SelectionPagePayload } from "./types" @@ -80,9 +74,7 @@ const initialState: DualPanelState = { viewer: null, searchResults: null }, - secondaryPanel: null, - // common nodes data shared between mainPanel and secondary Panel - nodes: [] + secondaryPanel: null } type ThunkArgs = { @@ -375,20 +367,6 @@ const dualPanelSlice = createSlice({ } } }, - nodeAdded(state, action: PayloadAction) { - nodeAddedHelper({ - state, - node: action.payload.node, - mode: action.payload.mode - }) - }, - setCurrentNode(state, action: PayloadAction) { - setCurrentNodeHelper({ - state, - node: action.payload.node, - mode: action.payload.panel - }) - }, openSecondaryPanel(state, action: PayloadAction) { state.secondaryPanel = { commander: commanderInitialState(action.payload), @@ -453,86 +431,6 @@ const dualPanelSlice = createSlice({ } }, extraReducers(builder) { - builder.addCase(fetchPaginatedNodes.fulfilled, (state, action) => { - action.payload.nodes.forEach((incomingNode: NodeType) => { - let found = state.nodes.find((i: NodeType) => i.id == incomingNode.id) - if (found) { - found = incomingNode - } else { - state.nodes.push(incomingNode) - } - }) - - const found = state.nodes.find( - (i: NodeType) => i.id == action.payload.parent.id - ) - if (!found) { - state.nodes.push(action.payload.parent) - } - - const newNodes: Array = action.payload.nodes.map( - (n: NodeType) => { - return { - id: n.id, - status: "idle" - } - } - ) - if (action.meta.arg.panel == "main") { - if (state.mainPanel.commander) { - state.mainPanel.commander.nodes = { - status: "succeeded", - error: null, - data: newNodes - } - if (state.mainPanel.commander.currentNode) { - state.mainPanel.commander.currentNode.breadcrumb = - action.payload.breadcrumb - } - state.mainPanel.commander.pagination = { - pageSize: action.payload.per_page, - pageNumber: action.payload.page_number, - numPages: action.payload.num_pages - } - state.mainPanel.commander.lastPageSize = action.payload.per_page - } - } 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 - } - state.secondaryPanel.commander.pagination = { - pageSize: action.payload.per_page, - pageNumber: action.payload.page_number, - numPages: action.payload.num_pages - } - state.secondaryPanel.commander.lastPageSize = action.payload.per_page - } - }) - builder.addCase(fetchPaginatedNodes.pending, (state, action) => { - if (action.meta.arg.panel == "main") { - if (state.mainPanel.commander) { - state.mainPanel.commander.nodes.status = "loading" - } - } - if (action.meta.arg.panel == "secondary") { - if (state.secondaryPanel?.commander) { - state.secondaryPanel.commander.nodes.status = "loading" - } - } - }) - builder.addCase( - deleteNodes.fulfilled, - (state, action: PayloadAction) => { - const nodeIds = action.payload - removeNodesHelper(state, nodeIds) - } - ) builder.addCase(applyPageOpChanges.fulfilled, (state, action) => { if (action.meta.arg.panel == "main") { const versionNumbers = action.payload.versions.map(v => v.number) @@ -636,7 +534,6 @@ export const { decZoomFactor, fitZoomFactor, toggleThumbnailsPanel, - setCurrentNode, openSecondaryPanel, closeSecondaryPanel, selectionAddNode, @@ -645,7 +542,6 @@ export const { selectionRemovePage, clearNodesSelection, updateSearchResultItemTarget, - nodeAdded, setCurrentPage, dropThumbnailPage, resetPageChanges, @@ -696,63 +592,6 @@ export const selectSearchResultItems = ( return null } -export const selectPanelNodesRaw = ( - state: RootState, - mode: PanelMode -): SliceState> | undefined => { - if (mode === "main") { - if (state.dualPanel.mainPanel.commander) { - return state.dualPanel.mainPanel.commander.nodes - } - } - - return state.dualPanel.secondaryPanel?.commander?.nodes -} - -export const selectNodesRaw = ( - state: RootState, - mode: PanelMode -): Array | undefined => { - if (mode) { - // mode is not used here - } - return state.dualPanel.nodes -} - -export const selectPanelNodes = createSelector( - [selectPanelNodesRaw, selectNodesRaw], - ( - panelNodes: SliceState> | undefined, - allNodes: Array | undefined - ) => { - const IDLE = { - data: null, - status: "idle", - error: null - } - - if (!panelNodes) { - return IDLE - } - - if (panelNodes?.data && allNodes) { - const nodeIds = panelNodes?.data.map(n => n.id) - - return { - status: panelNodes?.status, - error: panelNodes?.error, - data: allNodes.filter(n => nodeIds.includes(n.id)) - } - } - - return { - status: panelNodes.status, - error: panelNodes.error, - data: null - } - } -) - export const selectCurrentFolderID = (state: RootState, mode: PanelMode) => { if (mode == "main") { return state.dualPanel.mainPanel.commander?.currentNode?.id @@ -834,24 +673,6 @@ export const selectFilterText = ( return null } -export const selectPanelNodesStatus = ( - state: RootState, - mode: PanelMode -): SliceStateStatus => { - if (mode == "main") { - if (state.dualPanel.mainPanel.commander) { - return state.dualPanel.mainPanel.commander?.nodes.status - } - return "idle" - } - - if (state.dualPanel.secondaryPanel?.commander) { - return state.dualPanel.secondaryPanel?.commander?.nodes.status - } - - return "idle" -} - export const selectCommanderPageSize = (state: RootState, mode: PanelMode) => { if (mode == "main") { return state.dualPanel.mainPanel.commander?.pagination?.pageSize @@ -984,22 +805,6 @@ export const selectPagesHaveChanged = createSelector( } ) -export const selectSelectedNodes = createSelector( - [selectSelectedNodeIds, selectNodesRaw], - ( - selectedIds: Array | undefined, - allNodes: Array | undefined - ): Array => { - if (selectedIds && allNodes) { - return Object.values(allNodes).filter((i: NodeType) => - selectedIds.includes(i.id) - ) - } - - return [] - } -) - export const selectDocumentVersions = (state: RootState, mode: PanelMode) => { if (mode == "main") { if (state.dualPanel.mainPanel.viewer) { diff --git a/ui2/src/slices/dualPanel/helpers.ts b/ui2/src/slices/dualPanel/helpers.ts index 3108d495e..091af16d6 100644 --- a/ui2/src/slices/dualPanel/helpers.ts +++ b/ui2/src/slices/dualPanel/helpers.ts @@ -1,13 +1,12 @@ import type { CurrentNodeType, - NodeType, PanelMode, PageType, DroppedThumbnailPosition, DocumentVersion, PageAndRotOp } from "@/types" -import {DualPanelState, NodeWithSpinner, Commander} from "./types" +import {DualPanelState, Commander} from "./types" import {INITIAL_PAGE_SIZE} from "@/cconstants" import {contains_every} from "@/utils" import {reorder as reorder_pages} from "@/utils" @@ -118,163 +117,11 @@ export function clearNodesSelectionHelper( } } -export function removeNodesHelper(state: DualPanelState, nodeIds: string[]) { - /* Removes nodes from: - - `dualPanel.mainPanel.commander.nodes` - - `dualPanel.secondaryPanel.commander.nodes` - - `dualPanel.nodes` - */ - const newMainNodes = _removePanelNodes(state, nodeIds, "main") - const newSecondaryNodes = _removePanelNodes(state, nodeIds, "secondary") - const newNodes = _removeNodes(state, nodeIds) - - if (newMainNodes && state.mainPanel.commander) { - state.mainPanel.commander.nodes.data = newMainNodes - } - if (newSecondaryNodes && state.secondaryPanel?.commander) { - state.secondaryPanel.commander.nodes.data = newSecondaryNodes - } - if (newNodes && state.nodes) { - state.nodes = newNodes - } -} - -export function setCurrentNodeHelper({ - state, - node, - mode -}: { - state: DualPanelState - node: CurrentNodeType - mode: PanelMode -}) { - if (mode == "main") { - // main panel - if (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 = { - id: node.id, - ctype: node.ctype, - breadcrumb: prevBreadcrumb - } - } else { - // re-open commander - state.mainPanel.commander = commanderInitialState({ - id: node.id, - ctype: "folder", - breadcrumb: null - }) - // close viewer - state.mainPanel.viewer = null - } - } else { - // viewer. Here node.ctype == "document" - state.mainPanel.commander = null - state.mainPanel.viewer = { - breadcrumb: null, - versions: [], - currentVersion: null, - currentPage: 1, - thumbnailsPanelOpen: false, - zoomFactor: 100, - selectedIds: [], - initialPages: [] - } - } - } - - if (mode == "secondary") { - if (node.ctype == "folder") { - if (state.secondaryPanel?.commander) { - // preserve breadcrumb - const prevBreadcrumb = - state.secondaryPanel.commander.currentNode?.breadcrumb - state.secondaryPanel.commander.currentNode = { - id: node.id, - ctype: node.ctype, - breadcrumb: prevBreadcrumb - } - } else { - // re-open commander - state.secondaryPanel = { - commander: commanderInitialState({ - id: node.id, - ctype: "folder", - breadcrumb: null - }), - viewer: null, - searchResults: null - } - // close viewer - state.secondaryPanel.viewer = null - } - } else { - // viewer. Here node.ctype == "document" - state.secondaryPanel = { - commander: null, - viewer: { - breadcrumb: null, - versions: [], - currentVersion: null, - currentPage: 1, - thumbnailsPanelOpen: false, - zoomFactor: 100, - selectedIds: [], - initialPages: [] - }, - searchResults: null - } - } - } -} - -export function nodeAddedHelper({ - state, - node, - mode -}: { - state: DualPanelState - node: NodeType - mode: PanelMode -}) { - // in case panels are equal (i.e. both have same current node) -> - // both panels need to be updated - const addToBothPanels = equalPanels(state) - - // first add node data in common list of nodes - state.nodes.push(node) - - // update list of ids in main panel - if (mode == "main" || addToBothPanels) { - state.mainPanel.commander?.nodes.data!.push({ - id: node.id, - status: "idle" - }) - } - - // update list of ids in secondary panel - if (mode == "secondary" || addToBothPanels) { - state.secondaryPanel!.commander?.nodes.data!.push({ - id: node.id, - status: "idle" - }) - } -} - export function commanderInitialState(node: CurrentNodeType | null): Commander { return { currentNode: node, pagination: null, lastPageSize: INITIAL_PAGE_SIZE, - nodes: { - status: "idle", - error: null, - data: null - }, selectedIds: [], filter: null } @@ -382,45 +229,6 @@ export function resetPageChangesHelper(state: DualPanelState, mode: PanelMode) { } } -function _removePanelNodes( - state: DualPanelState, - idsToRemove: string[], - mode: PanelMode -): NodeWithSpinner[] | null | undefined { - const data = state[`${mode}Panel`]?.commander?.nodes?.data - - if (data) { - const nodes = Object.values(data || []) - const newNodes = nodes.filter((n: {id: string}) => { - // if it is one of the IDs to remove - filter it out - if (idsToRemove.includes(n.id)) { - return false - } - return true - }) - return newNodes - } - - return data -} - -function _removeNodes( - state: DualPanelState, - idsToRemove: string[] -): NodeType[] | null | undefined { - if (state.nodes) { - const nodes = Object.values(state.nodes || []) - const newNodes = nodes.filter((n: {id: string}) => { - if (idsToRemove.includes(n.id)) { - return false - } - return true - }) - return newNodes - } - return state.nodes -} - export function getLatestVersionPages(vers: DocumentVersion[]): PageType[] { const lastVer = vers.reduce((maxVer, v) => { if (maxVer.number > v.number) { diff --git a/ui2/src/slices/dualPanel/types.ts b/ui2/src/slices/dualPanel/types.ts index 13f2d23ec..3a183acaa 100644 --- a/ui2/src/slices/dualPanel/types.ts +++ b/ui2/src/slices/dualPanel/types.ts @@ -43,7 +43,6 @@ export interface Commander { currentNode: CurrentNodeType | null pagination: PaginationType | null | undefined lastPageSize: number - nodes: SliceState> selectedIds: Array filter: string | null } @@ -82,5 +81,4 @@ export interface SinglePanel { export interface DualPanelState { mainPanel: SinglePanel secondaryPanel: SinglePanel | null - nodes: Array }