refactor: rename setSorts to onSortsUpdate

front/src/components/table/Table.tsx

@@ -16,7 +16,7 @@ type OwnProps<TData> = {
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
   viewIcon?: IconProp;
-  setSorts?: React.Dispatch<React.SetStateAction<SortType[]>>;
+  onSortsUpdate?: React.Dispatch<React.SetStateAction<SortType[]>>;
 };
 
 const StyledTable = styled.table`
@@ -67,7 +67,7 @@ function Table<TData>({
   columns,
   viewName,
   viewIcon,
-  setSorts,
+  onSortsUpdate,
 }: OwnProps<TData>) {
   const table = useReactTable({
     data,
@@ -80,7 +80,7 @@ function Table<TData>({
       <TableHeader
         viewName={viewName}
         viewIcon={viewIcon}
-        setSorts={setSorts}
+        onSortsUpdate={onSortsUpdate}
       />
       <StyledTable>
         <thead>

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

@@ -9,7 +9,7 @@ import { useState } from 'react';
 type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
-  setSorts?: React.Dispatch<React.SetStateAction<SortType[]>>;
+  onSortsUpdate?: React.Dispatch<React.SetStateAction<SortType[]>>;
 };
 
 const StyledContainer = styled.div`
@@ -44,17 +44,8 @@ const StyledFilters = styled.div`
   margin-right: ${(props) => props.theme.spacing(2)};
 `;
 
-function TableHeader({
+function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) {
-  viewName,
+  const [sorts, setSorts] = useState([] as Array<SortType>);
-  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([
@@ -64,6 +55,7 @@ function TableHeader({
         id: sortId,
       },
     ]);
+    onSortsUpdate && onSortsUpdate(sorts);
   };
 
   const onSortItemUnSelect = (sortId: string) => {

front/src/pages/people/People.tsx

@@ -69,7 +69,7 @@ function People() {
             columns={peopleColumns}
             viewName="All People"
             viewIcon={faList}
-            setSorts={setSorts}
+            onSortsUpdate={setSorts}
           />
         )}
       </StyledPeopleContainer>