feature: add setSorts from parent component

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) => (

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) {
+function TableHeader({
-  const [sorts, setSorts] = useState([] as Array<SortType>);
+  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([
       {

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>