From 33473aea92a8d7ca88fb47607f11c38d90b4bb53 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Thu, 20 Apr 2023 16:38:29 +0200
Subject: [PATCH] feature: add setSorts from parent component

---
 front/src/components/table/Table.tsx             | 16 ++++++++++++++--
 .../table/table-header/TableHeader.tsx           | 15 +++++++++++++--
 front/src/pages/people/People.tsx                |  7 ++++++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx
index da7ea635a..1b2b373c2 100644
--- a/front/src/components/table/Table.tsx
+++ b/front/src/components/table/Table.tsx
@@ -9,12 +9,14 @@ import {
 import TableHeader from './table-header/TableHeader';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import styled from '@emotion/styled';
+import { SortType } from './table-header/SortAndFilterBar';
 
 type OwnProps<TData> = {
   data: Array<TData>;
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
   viewIcon?: IconProp;
+  setSorts?: React.Dispatch<React.SetStateAction<SortType[]>>;
 };
 
 const StyledTable = styled.table`
@@ -60,7 +62,13 @@ const StyledTableWithHeader = styled.div`
   flex: 1;
 `;
 
-function Table<TData>({ data, columns, viewName, viewIcon }: OwnProps<TData>) {
+function Table<TData>({
+  data,
+  columns,
+  viewName,
+  viewIcon,
+  setSorts,
+}: OwnProps<TData>) {
   const table = useReactTable({
     data,
     columns,
@@ -69,7 +77,11 @@ function Table<TData>({ data, columns, viewName, viewIcon }: OwnProps<TData>) {
 
   return (
     <StyledTableWithHeader>
-      <TableHeader viewName={viewName} viewIcon={viewIcon} />
+      <TableHeader
+        viewName={viewName}
+        viewIcon={viewIcon}
+        setSorts={setSorts}
+      />
       <StyledTable>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index a3c861ce1..fc6b26ae6 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -9,6 +9,7 @@ import { useState } from 'react';
 type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
+  setSorts?: React.Dispatch<React.SetStateAction<SortType[]>>;
 };
 
 const StyledContainer = styled.div`
@@ -43,8 +44,18 @@ const StyledFilters = styled.div`
   margin-right: ${(props) => props.theme.spacing(2)};
 `;
 
-function TableHeader({ viewName, viewIcon }: OwnProps) {
-  const [sorts, setSorts] = useState([] as Array<SortType>);
+function TableHeader({
+  viewName,
+  viewIcon,
+  setSorts: parentSetSorts,
+}: OwnProps) {
+  const [sorts, localSetSorts] = useState([] as Array<SortType>);
+
+  const setSorts = (value: React.SetStateAction<SortType[]>) => {
+    parentSetSorts && parentSetSorts(value);
+    localSetSorts(value);
+  };
+
   const onSortItemSelect = (sortId: string) => {
     setSorts([
       {
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 9b33e9307..5f5096ed7 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -10,6 +10,8 @@ import {
   mapPerson,
 } from '../../interfaces/person.interface';
 import { defaultData } from './default-data';
+import { useState } from 'react';
+import { SortType } from '../../components/table/table-header/SortAndFilterBar';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
@@ -41,8 +43,10 @@ const orderBy = [
 ];
 
 function People() {
+  const [sorts, setSorts] = useState([] as Array<SortType>);
+  console.log(sorts);
   const { data } = useQuery<{ person: GraphqlPerson[] }>(GET_PEOPLE, {
-    variables: { orderBy },
+    variables: { orderBy: sorts ? orderBy : orderBy },
   });
 
   const mydata: Person[] = data ? data.person.map(mapPerson) : defaultData;
@@ -56,6 +60,7 @@ function People() {
             columns={peopleColumns}
             viewName="All People"
             viewIcon={faList}
+            setSorts={setSorts}
           />
         )}
       </StyledPeopleContainer>