Sammy/t 194 aau when i set sort back and forth the (#103)

* bugfix: use original row id in cells to make sure it rerenders

* feature: implement multiple sorts

* bugfix: recreate new array to make sure component rerenders

* feature: orderBy is an array to keep orders

* test: snapshot the searchTemplate methods

* feature: remove the console log and return undefined

* feature: use orderByTemplate instead of hardcoded orderBy

* refactor: move sort and where filters helpers out of service

* refactor: rename file helper

* refactor: move assert function in test

front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx

@@ -25,12 +25,14 @@ export const RegularSortAndFilterBar = ({ removeFunction }: OwnProps) => {
             order: 'asc',
             key: 'test_sort',
             icon: <FaArrowDown />,
+            _type: 'default_sort',
           },
           {
             label: 'Test sort 2',
             order: 'desc',
             key: 'test_sort_2',
             icon: <FaArrowDown />,
+            _type: 'default_sort',
           },
         ]}
         onRemoveSort={removeFunction}

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

@@ -11,6 +11,7 @@ import {
 } from 'react-icons/fa';
 import { SortDropdownButton } from '../SortDropdownButton';
 import styled from '@emotion/styled';
+import { Order_By, People_Order_By } from '../../../../generated/graphql';
 
 const component = {
   title: 'SortDropdownButton',
@@ -28,25 +29,31 @@ const availableSorts = [
     key: 'fullname',
     label: 'People',
     icon: <FaRegUser />,
+    _type: 'custom_sort',
+    orderByTemplate: () => ({ email: Order_By.Asc }),
   },
   {
     key: 'company_name',
     label: 'Company',
     icon: <FaRegBuilding />,
+    _type: 'custom_sort',
+    orderByTemplate: () => ({ email: Order_By.Asc }),
   },
   {
     key: 'email',
     label: 'Email',
     icon: <FaEnvelope />,
+    _type: 'default_sort',
   },
-  { key: 'phone', label: 'Phone', icon: <FaPhone /> },
+  { key: 'phone', label: 'Phone', icon: <FaPhone />, _type: 'default_sort' },
   {
     key: 'created_at',
     label: 'Created at',
     icon: <FaCalendar />,
+    _type: 'default_sort',
   },
-  { key: 'city', label: 'City', icon: <FaMapPin /> },
-] satisfies SortType[];
+  { key: 'city', label: 'City', icon: <FaMapPin />, _type: 'default_sort' },
+] satisfies SortType<People_Order_By>[];
 
 const StyleDiv = styled.div`
   height: 200px;
@@ -57,7 +64,7 @@ export const RegularSortDropdownButton = ({ setSorts }: OwnProps) => {
   return (
     <ThemeProvider theme={lightTheme}>
       <StyleDiv>
-        <SortDropdownButton
+        <SortDropdownButton<People_Order_By>
           isSortSelected={true}
           availableSorts={availableSorts}
           onSortSelect={setSorts}

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

@@ -12,11 +12,12 @@ const component = {
 export default component;
 
 export const RegularTableHeader = () => {
-  const availableSorts: Array<SortType> = [
+  const availableSorts: Array<SortType<Record<'created_at', 'asc'>>> = [
     {
       key: 'created_at',
       label: 'Created at',
       icon: <FaCalendar />,
+      _type: 'default_sort',
     },
   ];
   return (