Finalize sort created_at filter

front/src/components/table/Table.tsx

@@ -16,7 +16,7 @@ type OwnProps<TData> = {
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
   viewIcon?: IconProp;
-  onSortsUpdate?: React.Dispatch<React.SetStateAction<SortType[]>>;
+  onSortsUpdate?: (sorts: Array<SortType>) => void;
 };
 
 const StyledTable = styled.table`

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

@@ -4,12 +4,12 @@ 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 { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
-  onSortsUpdate?: React.Dispatch<React.SetStateAction<SortType[]>>;
+  onSortsUpdate?: (sorts: Array<SortType>) => void;
 };
 
 const StyledContainer = styled.div`
@@ -53,15 +53,17 @@ function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
         label: 'Created at',
         order: 'asc',
         id: sortId,
-      },
+      } as SortType,
     ]);
-    onSortsUpdate && onSortsUpdate(sorts);
   };
-
   const onSortItemUnSelect = (sortId: string) => {
     setSorts([]);
   };
 
+  useEffect(() => {
+    onSortsUpdate && onSortsUpdate(sorts);
+  }, [sorts, onSortsUpdate]);
+
   const sortsAvailable: Array<SortType> = [
     {
       id: 'created_at',

front/src/pages/people/People.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { peopleColumns } from './people-table';
 import { gql, useQuery } from '@apollo/client';
 import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { SortType } from '../../components/table/table-header/SortAndFilterBar';
 
 const StyledPeopleContainer = styled.div`
@@ -34,7 +34,7 @@ export const GET_PEOPLE = gql`
 // @TODO get those types from generated-code person-order-by
 type OrderBy = Record<string, 'asc' | 'desc'>;
 
-const defaultOrderBy = [
+const defaultOrderBy: OrderBy[] = [
   {
     created_at: 'desc',
   },
@@ -50,7 +50,13 @@ const reduceSortsToOrderBy = (sorts: Array<SortType>): OrderBy[] => {
 
 function People() {
   const [sorts, setSorts] = useState([] as Array<SortType>);
-  const orderBy = sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy;
+  const [orderBy, setOrderBy] = useState(defaultOrderBy);
+
+  const updateSorts = (sorts: Array<SortType>) => {
+    setSorts(sorts);
+    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
+  };
+
   const { data } = useQuery<{ person: GraphqlPerson[] }>(GET_PEOPLE, {
     variables: { orderBy: orderBy },
   });
@@ -58,15 +64,15 @@ function People() {
   return (
     <WithTopBarContainer title="People" icon={faUser}>
       <StyledPeopleContainer>
-        {data && (
+        {
           <Table
-            data={data.person.map(mapPerson)}
+            data={data ? data.person.map(mapPerson) : []}
             columns={peopleColumns}
             viewName="All People"
             viewIcon={faList}
-            onSortsUpdate={setSorts}
+            onSortsUpdate={updateSorts}
           />
-        )}
+        }
       </StyledPeopleContainer>
     </WithTopBarContainer>
   );