From fbd338ee7d1dfda5f99683557648a51a8c4669cd Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Thu, 20 Apr 2023 16:45:07 +0200
Subject: [PATCH] feature: apply the sorts to the query

---
 .../table/table-header/SortAndFilterBar.tsx     |  2 +-
 front/src/pages/people/People.tsx               | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/front/src/components/table/table-header/SortAndFilterBar.tsx b/front/src/components/table/table-header/SortAndFilterBar.tsx
index 87c7abfc3..682b16260 100644
--- a/front/src/components/table/table-header/SortAndFilterBar.tsx
+++ b/front/src/components/table/table-header/SortAndFilterBar.tsx
@@ -10,7 +10,7 @@ type OwnProps = {
 
 export type SortType = {
   label: string;
-  order: string;
+  order: 'asc' | 'desc';
   id: string;
   icon?: IconProp;
 };
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 5f5096ed7..c99637949 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -36,17 +36,28 @@ export const GET_PEOPLE = gql`
   }
 `;
 
-const orderBy = [
+// @TODO get those types from generated-code person-order-by
+type OrderBy = Record<string, 'asc' | 'desc'>;
+
+const defaultOrderBy = [
   {
     created_at: 'desc',
   },
 ];
 
+const reduceSortsToGqlSorts = (sorts: Array<SortType>): OrderBy[] => {
+  const mappedSorts = sorts.reduce((acc, sort) => {
+    acc[sort.id] = sort.order;
+    return acc;
+  }, {} as OrderBy);
+  return [mappedSorts];
+};
+
 function People() {
   const [sorts, setSorts] = useState([] as Array<SortType>);
-  console.log(sorts);
+  const orderBy = sorts.length ? reduceSortsToGqlSorts(sorts) : defaultOrderBy;
   const { data } = useQuery<{ person: GraphqlPerson[] }>(GET_PEOPLE, {
-    variables: { orderBy: sorts ? orderBy : orderBy },
+    variables: { orderBy: orderBy },
   });
 
   const mydata: Person[] = data ? data.person.map(mapPerson) : defaultData;