From 1609c8c787b80c98943f47b14712b79e41c6494d Mon Sep 17 00:00:00 2001
From: Afshin Mehrabani <afshin.meh@gmail.com>
Date: Sat, 30 Dec 2023 15:29:50 +0000
Subject: [PATCH] Fix sort.tsx to always register one processor

---
 src/hooks/useSelector.ts        |  2 +-
 src/view/plugin/sort/actions.ts |  4 +-
 src/view/plugin/sort/sort.tsx   | 85 ++++++++++++++++-----------------
 3 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/hooks/useSelector.ts b/src/hooks/useSelector.ts
index ed3d7b29..74ade663 100644
--- a/src/hooks/useSelector.ts
+++ b/src/hooks/useSelector.ts
@@ -15,7 +15,7 @@ export default function useSelector<T>(selector: (state) => T) {
     });
 
     return unsubscribe;
-  }, []);
+  }, [store, current]);
 
   return current;
 }
diff --git a/src/view/plugin/sort/actions.ts b/src/view/plugin/sort/actions.ts
index 722382f9..e642c0b7 100644
--- a/src/view/plugin/sort/actions.ts
+++ b/src/view/plugin/sort/actions.ts
@@ -8,7 +8,7 @@ export const SortColumn =
     compare?: Comparator<TCell>,
   ) =>
   (state) => {
-    let columns = state.sort ? [...state.sort.columns] : [];
+    let columns = state.sort ? structuredClone(state.sort.columns) : [];
     const count = columns.length;
     const column = columns.find((x) => x.index === index);
     const exists = column !== undefined;
@@ -86,7 +86,7 @@ export const SortColumn =
 
 export const SortToggle =
   (index: number, multi: boolean, compare?: Comparator<TCell>) => (state) => {
-    const columns = state.sort ? [...state.sort.columns] : [];
+    const columns = state.sort ? structuredClone(state.sort.columns) : [];
     const column = columns.find((x) => x.index === index);
 
     if (!column) {
diff --git a/src/view/plugin/sort/sort.tsx b/src/view/plugin/sort/sort.tsx
index 5b19779c..2598e3ed 100644
--- a/src/view/plugin/sort/sort.tsx
+++ b/src/view/plugin/sort/sort.tsx
@@ -1,7 +1,7 @@
 import { h, JSX } from 'preact';
 
 import { classJoin, className } from '../../../util/className';
-import { ProcessorType } from '../../../pipeline/processor';
+import { PipelineProcessor, ProcessorType } from '../../../pipeline/processor';
 import NativeSort from '../../../pipeline/sort/native';
 import { Comparator, TCell, TColumnSort } from '../../../types';
 import * as actions from './actions';
@@ -38,25 +38,52 @@ export function Sort(
   } & SortConfig,
 ) {
   const config = useConfig();
+  const { dispatch } = useStore();
   const _ = useTranslator();
   const [direction, setDirection] = useState(0);
-  const [processor, setProcessor] = useState<NativeSort | ServerSort>(
-    undefined,
-  );
-  const state = useSelector((state) => state.sort);
-  const { dispatch } = useStore();
   const sortConfig = config.sort as GenericSortConfig;
+  const state = useSelector((state) => state.sort);
+  const processorType =
+    typeof sortConfig?.server === 'object'
+      ? ProcessorType.ServerSort
+      : ProcessorType.Sort;
 
-  useEffect(() => {
-    const processor = getOrCreateSortProcessor();
-    if (processor) setProcessor(processor);
-  }, []);
+  const getSortProcessor = () => {
+    const processors = config.pipeline.getStepsByType(processorType);
+    if (processors.length) {
+      return processors[0];
+    }
+    return undefined;
+  };
+
+  const createSortProcessor = () => {
+    if (processorType === ProcessorType.ServerSort) {
+      return new ServerSort({
+        columns: state ? state.columns : [],
+        ...sortConfig.server,
+      });
+    }
+
+    return new NativeSort({
+      columns: state ? state.columns : [],
+    });
+  };
 
+  const getOrCreateSortProcessor = (): PipelineProcessor<any, any> => {
+    const existingSortProcessor = getSortProcessor();
+    if (existingSortProcessor) {
+      return existingSortProcessor;
+    }
+
+    return createSortProcessor();
+  };
+  
   useEffect(() => {
-    config.pipeline.register(processor);
+    const processor = getOrCreateSortProcessor();
+    config.pipeline.tryRegister(processor);
 
     return () => config.pipeline.unregister(processor);
-  }, [config, processor]);
+  }, [config]);
 
   /**
    * Sets the internal state of component
@@ -74,6 +101,8 @@ export function Sort(
   }, [state]);
 
   useEffect(() => {
+    const processor = getSortProcessor();
+
     if (!processor) return;
     if (!state) return;
 
@@ -82,36 +111,6 @@ export function Sort(
     });
   }, [state]);
 
-  const getOrCreateSortProcessor = (): NativeSort | null => {
-    let processorType = ProcessorType.Sort;
-
-    if (sortConfig && typeof sortConfig.server === 'object') {
-      processorType = ProcessorType.ServerSort;
-    }
-
-    const processors = config.pipeline.getStepsByType(processorType);
-
-    if (processors.length === 0) {
-      // my assumption is that we only have ONE sorting processor in the
-      // entire pipeline and that's why I'm displaying a warning here
-      let processor;
-
-      if (processorType === ProcessorType.ServerSort) {
-        processor = new ServerSort({
-          columns: state ? state.columns : [],
-          ...sortConfig.server,
-        });
-      } else {
-        processor = new NativeSort({
-          columns: state ? state.columns : [],
-        });
-      }
-      return processor;
-    }
-
-    return null;
-  };
-
   const changeDirection = (e: JSX.TargetedMouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -125,7 +124,7 @@ export function Sort(
     );
   };
 
-  const getSortClassName = (direction) => {
+  const getSortClassName = (direction: number) => {
     if (direction === 1) {
       return 'asc';
     } else if (direction === -1) {