use selectors - correct way

papermerge · Jul 10, 2024 · 560ea38 · 560ea38
1 parent 38f4c1f
commit 560ea38
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 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
@@ -278,23 +278,20 @@ export const selectMainPanel = (state: RootState) => state.dualPanel.mainPanel
 export const selectSecondaryPanel = (state: RootState) =>
   state.dualPanel.secondaryPanel
 
-export const selectPanels = createSelector(
-  [selectMainPanel, selectSecondaryPanel],
-  (a, b) => [a, b]
-)
+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 = (