refactor: create SortDropdownButton

front/src/components/table/table-header/SortDropdownButton.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import DropdownButton from './DropdownButton';
+import { SortType } from './SortAndFilterBar';
+
+type OwnProps = {
+  sorts: SortType[];
+  setSorts: any;
+  sortsAvailable: any;
+};
+
+export function SortDropdownButton({
+  sortsAvailable,
+  setSorts,
+  sorts,
+}: OwnProps) {
+  const onSortItemSelect = useCallback(
+    (sortId: string) => {
+      const newSorts = [
+        {
+          label: 'Created at',
+          order: 'asc',
+          id: sortId,
+        } satisfies SortType,
+      ];
+      setSorts(newSorts);
+    },
+    [setSorts],
+  );
+
+  return (
+    <DropdownButton
+      label="Sort"
+      options={sortsAvailable}
+      onSortSelect={onSortItemSelect}
+      isActive={sorts.length > 0}
+    />
+  );
+}

front/src/components/table/table-header/TableHeader.tsx

@@ -4,6 +4,7 @@ import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import SortAndFilterBar, { SortType } from './SortAndFilterBar';
 import { useCallback, useState } from 'react';
+import { SortDropdownButton } from './SortDropdownButton';
 
 type OwnProps = {
   viewName: string;
@@ -50,19 +51,12 @@ function TableHeader({
   onSortsUpdate,
   sortsAvailable,
 }: OwnProps) {
-  const [sorts, setSorts] = useState([] as Array<SortType>);
+  const [sorts, innerSetSorts] = useState([] as Array<SortType>);
 
-  const onSortItemSelect = useCallback(
+  const setSorts = useCallback(
-    (sortId: string) => {
+    (sorts: SortType[]) => {
-      const newSorts = [
+      innerSetSorts(sorts);
-        {
+      onSortsUpdate && onSortsUpdate(sorts);
-          label: 'Created at',
-          order: 'asc',
-          id: sortId,
-        } satisfies SortType,
-      ];
-      setSorts(newSorts);
-      onSortsUpdate && onSortsUpdate(newSorts);
     },
     [onSortsUpdate],
   );
@@ -70,7 +64,7 @@ function TableHeader({
   const onSortItemUnSelect = useCallback(
     (sortId: string) => {
       const newSorts = [] as SortType[];
-      setSorts(newSorts);
+      innerSetSorts(newSorts);
       onSortsUpdate && onSortsUpdate(newSorts);
     },
     [onSortsUpdate],
@@ -87,12 +81,12 @@ function TableHeader({
         </StyledViewSection>
         <StyledFilters>
           <DropdownButton label="Filter" options={[]} isActive={false} />
-          <DropdownButton
+          <SortDropdownButton
-            label="Sort"
+            setSorts={setSorts}
-            options={sortsAvailable}
+            sorts={sorts}
-            onSortSelect={onSortItemSelect}
+            sortsAvailable={sortsAvailable}
-            isActive={sorts.length > 0}
           />
+
           <DropdownButton label="Settings" options={[]} isActive={false} />
         </StyledFilters>
       </StyledTableHeader>