From bc91e976950d4fd4e73e6f87df3bc024e48053d8 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 24 Apr 2023 13:53:49 +0200
Subject: [PATCH] refactor: move sortable fields in table

---
 front/src/components/table/Table.tsx           | 11 +++++++++++
 .../table/table-header/TableHeader.tsx         | 18 +++++++-----------
 .../__stories__/TableHeader.stories.tsx        | 17 +++++++++++++++--
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx
index fd3eec506..edcaaeef9 100644
--- a/front/src/components/table/Table.tsx
+++ b/front/src/components/table/Table.tsx
@@ -10,6 +10,7 @@ import TableHeader from './table-header/TableHeader';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import styled from '@emotion/styled';
 import { SortType } from './table-header/SortAndFilterBar';
+import { faCalendar } from '@fortawesome/pro-regular-svg-icons';
 
 type OwnProps<TData> = {
   data: Array<TData>;
@@ -75,12 +76,22 @@ function Table<TData>({
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const sortsAvailable: Array<SortType> = [
+    {
+      id: 'created_at',
+      label: 'Created at',
+      order: 'asc',
+      icon: faCalendar,
+    },
+  ];
+
   return (
     <StyledTableWithHeader>
       <TableHeader
         viewName={viewName}
         viewIcon={viewIcon}
         onSortsUpdate={onSortsUpdate}
+        sortsAvailable={sortsAvailable}
       />
       <StyledTable>
         <thead>
diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index 8253571bc..dca266985 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faCalendar } from '@fortawesome/pro-regular-svg-icons';
 import SortAndFilterBar, { SortType } from './SortAndFilterBar';
 import { useEffect, useState } from 'react';
 
@@ -10,6 +9,7 @@ type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
   onSortsUpdate?: (sorts: Array<SortType>) => void;
+  sortsAvailable: Array<SortType>;
 };
 
 const StyledContainer = styled.div`
@@ -44,7 +44,12 @@ const StyledFilters = styled.div`
   margin-right: ${(props) => props.theme.spacing(2)};
 `;
 
-function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
+function TableHeader({
+  viewName,
+  viewIcon,
+  onSortsUpdate,
+  sortsAvailable,
+}: OwnProps) {
   const [sorts, setSorts] = useState([] as Array<SortType>);
 
   const onSortItemSelect = (sortId: string) => {
@@ -64,15 +69,6 @@ function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
     onSortsUpdate && onSortsUpdate(sorts);
   }, [sorts, onSortsUpdate]);
 
-  const sortsAvailable: Array<SortType> = [
-    {
-      id: 'created_at',
-      label: 'Created at',
-      order: 'asc',
-      icon: faCalendar,
-    },
-  ];
-
   return (
     <StyledContainer>
       <StyledTableHeader>
diff --git a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx
index fa7f336ac..2862c0734 100644
--- a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx
+++ b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx
@@ -1,7 +1,8 @@
 import TableHeader from '../TableHeader';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { faBuilding } from '@fortawesome/pro-regular-svg-icons';
+import { faBuilding, faCalendar } from '@fortawesome/pro-regular-svg-icons';
+import { SortType } from '../SortAndFilterBar';
 
 const component = {
   title: 'TableHeader',
@@ -11,9 +12,21 @@ const component = {
 export default component;
 
 export const RegularTableHeader = () => {
+  const sortsAvailable: Array<SortType> = [
+    {
+      id: 'created_at',
+      label: 'Created at',
+      order: 'asc',
+      icon: faCalendar,
+    },
+  ];
   return (
     <ThemeProvider theme={lightTheme}>
-      <TableHeader viewName="Test" viewIcon={faBuilding} />
+      <TableHeader
+        viewName="Test"
+        viewIcon={faBuilding}
+        sortsAvailable={sortsAvailable}
+      />
     </ThemeProvider>
   );
 };