feature: set the right sort on click

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

@@ -2,13 +2,10 @@ import styled from '@emotion/styled';
 import { useRef, ReactNode } from 'react';
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
 import { modalBackground } from '../../../layout/styles/themes';
-import { SortType } from './SortAndFilterBar';
 
 type OwnProps = {
   label: string;
-  options: Array<SortType>;
   isActive: boolean;
-  onSortSelect?: (id: string) => void;
   children?: ReactNode;
   isUnfolded?: boolean;
   setIsUnfolded?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -92,7 +89,6 @@ const StyledIcon = styled.div`
 
 function DropdownButton({
   label,
-  options,
   isActive,
   children,
   isUnfolded = false,
@@ -118,7 +114,7 @@ function DropdownButton({
       >
         {label}
       </StyledDropdownButton>
-      {isUnfolded && options.length > 0 && (
+      {isUnfolded && (
         <StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
       )}
     </StyledDropdownButtonContainer>

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

@@ -17,14 +17,8 @@ export function SortDropdownButton({
   const [isUnfolded, setIsUnfolded] = useState(false);
 
   const onSortItemSelect = useCallback(
-    (sortId: string) => {
-      const newSorts = [
-        {
-          label: 'Created at',
-          order: 'asc',
-          id: sortId,
-        } satisfies SortType,
-      ];
+    (sort: SortType) => {
+      const newSorts = [sort];
       setSorts(newSorts);
     },
     [setSorts],
@@ -33,8 +27,6 @@ export function SortDropdownButton({
   return (
     <DropdownButton
       label="Sort"
-      options={sortsAvailable}
-      onSortSelect={onSortItemSelect}
       isActive={sorts.length > 0}
       isUnfolded={isUnfolded}
       setIsUnfolded={setIsUnfolded}
@@ -44,7 +36,7 @@ export function SortDropdownButton({
           key={index}
           onClick={() => {
             setIsUnfolded(false);
-            onSortItemSelect(option.id);
+            onSortItemSelect(option);
           }}
         >
           <DropdownButton.StyledIcon>

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

@@ -80,22 +80,14 @@ function TableHeader({
           {viewName}
         </StyledViewSection>
         <StyledFilters>
-          <DropdownButton
-            label="Filter"
-            options={[]}
-            isActive={false}
-          ></DropdownButton>
+          <DropdownButton label="Filter" isActive={false}></DropdownButton>
           <SortDropdownButton
             setSorts={setSorts}
             sorts={sorts}
             sortsAvailable={sortsAvailable}
           />
 
-          <DropdownButton
-            label="Settings"
-            options={[]}
-            isActive={false}
-          ></DropdownButton>
+          <DropdownButton label="Settings" isActive={false}></DropdownButton>
         </StyledFilters>
       </StyledTableHeader>
       {sorts.length > 0 && (