add select creator (#407)

papermerge · Jul 10, 2024 · 91fd72c · 91fd72c
1 parent d4d2ac6
commit 91fd72c
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 70 deletions.
diff --git a/ui2/src/components/DualPanel/DualPanel.tsx b/ui2/src/components/DualPanel/DualPanel.tsx
@@ -1,12 +1,12 @@
 import {Group} from "@mantine/core"
 import {useSelector} from "react-redux"
-import {selectPanels} from "@/slices/dualPanel/dualPanel"
+import {selectSecondaryPanel} from "@/slices/dualPanel/dualPanel"
 import SinglePanel from "@/components/SinglePanel"
 
 import PanelContext from "@/contexts/PanelContext"
 
 export default function DualPanel() {
-  const [_, secondaryPanel] = useSelector(selectPanels)
+  const secondaryPanel = useSelector(selectSecondaryPanel)
 
   if (secondaryPanel) {
     return (

diff --git a/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx b/ui2/src/components/DualPanel/ToggleSecondaryPanel.tsx
@@ -5,7 +5,8 @@ import {IconColumns2, IconX} from "@tabler/icons-react"
 import {
   openSecondaryPanel,
   closeSecondaryPanel,
-  selectPanels,
+  selectMainPanel,
+  selectSecondaryPanel,
   selectLastPageSize
 } from "@/slices/dualPanel/dualPanel"
 import {fetchPaginatedNodes, setCurrentNode} from "@/slices/dualPanel/dualPanel"
@@ -19,7 +20,8 @@ import PanelContext from "@/contexts/PanelContext"
 
 export default function ToggleSecondaryPanel() {
   const mode: PanelMode = useContext(PanelContext)
-  const [mainPanel, secondaryPanel] = useSelector(selectPanels)
+  const mainPanel = useSelector(selectMainPanel)
+  const secondaryPanel = useSelector(selectSecondaryPanel)
   const user: User = useSelector(selectCurrentUser)
   const dispatch = useDispatch()
   const lastPageSize = useSelector((state: RootState) =>

diff --git a/ui2/src/components/SinglePanel/SinglePanel.tsx b/ui2/src/components/SinglePanel/SinglePanel.tsx
@@ -1,6 +1,6 @@
 import {useContext} from "react"
 
-import {selectPanelComponents} from "@/slices/dualPanel/dualPanel"
+import {selectCommander, selectViewer} from "@/slices/dualPanel/dualPanel"
 import {useSelector} from "react-redux"
 import Commander from "@/components/Commander"
 import Viewer from "@/components/Viewer"
@@ -10,9 +10,11 @@ import {RootState} from "@/app/types"
 
 export default function SinglePanel() {
   const mode: PanelMode = useContext(PanelContext)
-  const [commander, viewer] = useSelector((state: RootState) =>
-    selectPanelComponents(state, mode)
+  const commander = useSelector((state: RootState) =>
+    selectCommander(state, mode)
   )
+  const viewer = useSelector((state: RootState) => selectViewer(state, mode))
+
   if (commander) {
     return <Commander />
   }

diff --git a/ui2/src/slices/dualPanel/dualPanel.ts b/ui2/src/slices/dualPanel/dualPanel.ts
@@ -1,4 +1,9 @@
-import {createSlice, PayloadAction, createAsyncThunk} from "@reduxjs/toolkit"
+import {
+  createSlice,
+  PayloadAction,
+  createAsyncThunk,
+  createSelector
+} from "@reduxjs/toolkit"
 import {getBaseURL, getDefaultHeaders} from "@/utils"
 
 import axios from "axios"
@@ -269,91 +274,82 @@ export default dualPanelSlice.reducer
 export const selectMainCurrentFolderId = (state: RootState) =>
   state.dualPanel.mainPanel.commander?.currentNode
 
-export const selectPanels = (state: RootState) => {
-  return [state.dualPanel.mainPanel, state.dualPanel.secondaryPanel]
+export const selectMainPanel = (state: RootState) => state.dualPanel.mainPanel
+export const selectSecondaryPanel = (state: RootState) =>
+  state.dualPanel.secondaryPanel
+
+export const selectCommander = (state: RootState, mode: PanelMode) => {
+  if (mode === "main") {
+    return state.dualPanel.mainPanel.commander
+  }
+
+  return state.dualPanel.secondaryPanel?.commander
 }
 
-export const selectPanelComponents = (state: RootState, mode: PanelMode) => {
+export const selectViewer = (state: RootState, mode: PanelMode) => {
   if (mode === "main") {
-    return [
-      state.dualPanel.mainPanel.commander,
-      state.dualPanel.mainPanel.viewer
-    ]
+    return state.dualPanel.mainPanel.viewer
   }
 
-  return [
-    state.dualPanel.secondaryPanel?.commander,
-    state.dualPanel.secondaryPanel?.viewer
-  ]
+  return state.dualPanel.secondaryPanel?.viewer
 }
 
-export const selectPanelNodes = (
+export const selectPanelNodesRaw = (
   state: RootState,
   mode: PanelMode
-): SliceState<Array<NodeType>> => {
+): SliceState<Array<NodeWithSpinner>> | undefined => {
   if (mode === "main") {
     if (state.dualPanel.mainPanel.commander) {
-      return selectMainPanelNodes(state)
+      return state.dualPanel.mainPanel.commander.nodes
     }
   }
 
-  if (state.dualPanel.secondaryPanel?.commander) {
-    return selectSecondaryPanelNodes(state)
-  }
+  return state.dualPanel.secondaryPanel?.commander?.nodes
+}
 
-  return {
-    data: null,
-    error: null,
-    status: "idle"
+export const selectNodesRaw = (
+  state: RootState,
+  mode: PanelMode
+): Array<NodeType> | undefined => {
+  if (mode) {
+    // mode is not used here
   }
+  return state.dualPanel.nodes
 }
 
-const selectMainPanelNodes = (
-  state: RootState
-): SliceState<Array<NodeType>> => {
-  if (state.dualPanel.mainPanel!.commander!.nodes.data) {
-    const nodeIds = state.dualPanel.mainPanel.commander!.nodes.data!.map(
-      (n: NodeWithSpinner) => n.id
-    )
-    const output = {
-      status: "succeeded",
-      error: null,
-      data: state.dualPanel.nodes.filter((n: NodeType) =>
-        nodeIds.includes(n.id)
-      )
-    } as SliceState<Array<NodeType>>
-    return output
-  }
+export const selectPanelNodes = createSelector(
+  [selectPanelNodesRaw, selectNodesRaw],
+  (
+    panelNodes: SliceState<Array<NodeWithSpinner>> | undefined,
+    allNodes: Array<NodeType> | undefined
+  ) => {
+    const IDLE = {
+      data: null,
+      status: "idle",
+      error: null
+    }
 
-  return {
-    status: state.dualPanel.mainPanel!.commander!.nodes.status,
-    error: state.dualPanel.mainPanel!.commander!.nodes.error,
-    data: null
-  }
-}
+    if (!panelNodes) {
+      return IDLE
+    }
 
-const selectSecondaryPanelNodes = (
-  state: RootState
-): SliceState<Array<NodeType>> => {
-  if (state.dualPanel.secondaryPanel!.commander!.nodes.data) {
-    const nodeIds = state.dualPanel.secondaryPanel!.commander!.nodes.data!.map(
-      (n: NodeWithSpinner) => n.id
-    )
-    return {
-      status: "succeeded",
-      error: null,
-      data: state.dualPanel.nodes.filter((n: NodeType) =>
-        nodeIds.includes(n.id)
-      )
+    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: state.dualPanel.secondaryPanel!.commander!.nodes.status,
-    error: state.dualPanel.secondaryPanel!.commander!.nodes.error,
-    data: null
+    return {
+      status: panelNodes.status,
+      error: panelNodes.error,
+      data: null
+    }
   }
-}
+)
 
 export const selectCurrentFolderID = (state: RootState, mode: PanelMode) => {
   if (mode == "main") {