From 560ea38f643a7c38fd35131a30c1a67103f51746 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Wed, 10 Jul 2024 05:43:51 +0200
Subject: [PATCH] use selectors - correct way

---
 ui2/src/components/DualPanel/DualPanel.tsx    |  4 ++--
 .../DualPanel/ToggleSecondaryPanel.tsx        |  6 +++--
 .../components/SinglePanel/SinglePanel.tsx    |  8 ++++---
 ui2/src/slices/dualPanel/dualPanel.ts         | 23 ++++++++-----------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/ui2/src/components/DualPanel/DualPanel.tsx b/ui2/src/components/DualPanel/DualPanel.tsx
index 0396eb3ed..7d00028fa 100644
--- 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
index 96349dcdb..016849e30 100644
--- 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
index 5012c2ae2..d084d05f8 100644
--- 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
index 2b609da0d..c62cbddd5 100644
--- 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 = (