Sammy/t 194 aau when i set sort back and forth the (#103)

* bugfix: use original row id in cells to make sure it rerenders

* feature: implement multiple sorts

* bugfix: recreate new array to make sure component rerenders

* feature: orderBy is an array to keep orders

* test: snapshot the searchTemplate methods

* feature: remove the console log and return undefined

* feature: use orderByTemplate instead of hardcoded orderBy

* refactor: move sort and where filters helpers out of service

* refactor: rename file helper

* refactor: move assert function in test

front/src/pages/companies/Companies.tsx

@@ -5,12 +5,12 @@ import { useState, useCallback } from 'react';
 import {
   CompaniesSelectedSortType,
   defaultOrderBy,
-  reduceSortsToOrderBy,
   useCompaniesQuery,
 } from '../../services/companies';
 import Table from '../../components/table/Table';
 import { mapCompany } from '../../interfaces/company.interface';
 import { companiesColumns, sortsAvailable } from './companies-table';
+import { reduceSortsToOrderBy } from '../../components/table/table-header/helpers';
 
 const StyledCompaniesContainer = styled.div`
   display: flex;

front/src/pages/companies/companies-table.tsx

@@ -1,6 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { Company } from '../../interfaces/company.interface';
-import { OrderByFields, updateCompany } from '../../services/companies';
+import { updateCompany } from '../../services/companies';
 import ColumnHead from '../../components/table/ColumnHead';
 import Checkbox from '../../components/form/Checkbox';
 import CompanyChip from '../../components/chips/CompanyChip';
@@ -17,21 +17,24 @@ import {
 } from 'react-icons/fa';
 import ClickableCell from '../../components/table/ClickableCell';
 import PersonChip from '../../components/chips/PersonChip';
-import { SortType } from '../../components/table/table-header/interface';
 import EditableChip from '../../components/table/editable-cell/EditableChip';
+import { SortType } from '../../components/table/table-header/interface';
+import { Companies_Order_By } from '../../generated/graphql';
 
 export const sortsAvailable = [
   {
     key: 'name',
     label: 'Name',
     icon: undefined,
+    _type: 'default_sort',
   },
   {
     key: 'domain_name',
     label: 'Domain',
     icon: undefined,
+    _type: 'default_sort',
   },
-] satisfies Array<SortType<OrderByFields>>;
+] satisfies Array<SortType<Companies_Order_By>>;
 
 const columnHelper = createColumnHelper<Company>();
 export const companiesColumns = [

front/src/pages/people/People.tsx

@@ -12,13 +12,15 @@ import { useCallback, useState } from 'react';
 import {
   PeopleSelectedSortType,
   defaultOrderBy,
-  reduceFiltersToWhere,
-  reduceSortsToOrderBy,
   usePeopleQuery,
 } from '../../services/people';
 import { useSearch } from '../../services/search/search';
 import { People_Bool_Exp } from '../../generated/graphql';
 import { SelectedFilterType } from '../../components/table/table-header/interface';
+import {
+  reduceFiltersToWhere,
+  reduceSortsToOrderBy,
+} from '../../components/table/table-header/helpers';
 
 const StyledPeopleContainer = styled.div`
   display: flex;

front/src/pages/people/__tests__/__snapshots__/people-filter.test.ts.snap

@@ -93,3 +93,44 @@ Object {
   },
 }
 `;
+
+exports[`PeopleFilter should render the serch city with the searchValue 1`] = `
+Object {
+  "city": Object {
+    "_ilike": "%Search value%",
+  },
+}
+`;
+
+exports[`PeopleFilter should render the serch company_name with the searchValue 1`] = `
+Object {
+  "name": Object {
+    "_ilike": "%Search value%",
+  },
+}
+`;
+
+exports[`PeopleFilter should render the serch email with the searchValue 1`] = `
+Object {
+  "email": Object {
+    "_ilike": "%Search value%",
+  },
+}
+`;
+
+exports[`PeopleFilter should render the serch fullname with the searchValue 1`] = `
+Object {
+  "_or": Array [
+    Object {
+      "firstname": Object {
+        "_ilike": "%Search value%",
+      },
+    },
+    Object {
+      "lastname": Object {
+        "_ilike": "%Search value%",
+      },
+    },
+  ],
+}
+`;

front/src/pages/people/__tests__/people-filter.test.ts

@@ -1,12 +1,37 @@
-import {
-  assertFilterUseCompanySearch,
-  assertFilterUsePeopleSearch,
-} from '../../../components/table/table-header/interface';
+import { FilterType } from '../../../components/table/table-header/interface';
+import { People_Bool_Exp } from '../../../generated/graphql';
+import { GraphqlQueryCompany } from '../../../interfaces/company.interface';
 import { GraphqlQueryPerson } from '../../../interfaces/person.interface';
+import {
+  SEARCH_COMPANY_QUERY,
+  SEARCH_PEOPLE_QUERY,
+} from '../../../services/search/search';
 import { mockCompanyData } from '../../companies/__stories__/mock-data';
 import { defaultData } from '../default-data';
 import { availableFilters } from '../people-table';
 
+function assertFilterUseCompanySearch<FilterValue>(
+  filter: FilterType<People_Bool_Exp>,
+): filter is FilterType<People_Bool_Exp> & {
+  searchResultMapper: (data: GraphqlQueryCompany) => {
+    displayValue: string;
+    value: FilterValue;
+  };
+} {
+  return filter.searchQuery === SEARCH_COMPANY_QUERY;
+}
+
+function assertFilterUsePeopleSearch<FilterValue>(
+  filter: FilterType<People_Bool_Exp>,
+): filter is FilterType<People_Bool_Exp> & {
+  searchResultMapper: (data: GraphqlQueryPerson) => {
+    displayValue: string;
+    value: FilterValue;
+  };
+} {
+  return filter.searchQuery === SEARCH_PEOPLE_QUERY;
+}
+
 const JohnDoeUser = defaultData.find(
   (user) => user.email === 'john@linkedin.com',
 ) as GraphqlQueryPerson;
@@ -33,5 +58,8 @@ describe('PeopleFilter', () => {
         }
       }
     });
+    it(`should render the serch ${filter.key} with the searchValue`, () => {
+      expect(filter.searchTemplate('Search value')).toMatchSnapshot();
+    });
   }
 });

front/src/pages/people/people-table.tsx

@@ -17,12 +17,16 @@ import CompanyChip from '../../components/chips/CompanyChip';
 import { GraphqlQueryPerson, Person } from '../../interfaces/person.interface';
 import PipeChip from '../../components/chips/PipeChip';
 import EditableText from '../../components/table/editable-cell/EditableText';
-import { OrderByFields, updatePerson } from '../../services/people';
+import { updatePerson } from '../../services/people';
 import {
   FilterType,
   SortType,
 } from '../../components/table/table-header/interface';
-import { People_Bool_Exp } from '../../generated/graphql';
+import {
+  Order_By,
+  People_Bool_Exp,
+  People_Order_By,
+} from '../../generated/graphql';
 import {
   SEARCH_COMPANY_QUERY,
   SEARCH_PEOPLE_QUERY,
@@ -36,25 +40,44 @@ export const availableSorts = [
     key: 'fullname',
     label: 'People',
     icon: <FaRegUser />,
+    _type: 'custom_sort',
+    orderByTemplate: (order: Order_By) => ({
+      firstname: order,
+      lastname: order,
+    }),
   },
   {
     key: 'company_name',
     label: 'Company',
     icon: <FaRegBuilding />,
+    _type: 'custom_sort',
+    orderByTemplate: (order: Order_By) => ({ company: { name: order } }),
   },
   {
     key: 'email',
     label: 'Email',
     icon: <FaEnvelope />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'phone',
+    label: 'Phone',
+    icon: <FaPhone />,
+    _type: 'default_sort',
   },
-  { key: 'phone', label: 'Phone', icon: <FaPhone /> },
   {
     key: 'created_at',
     label: 'Created at',
     icon: <FaCalendar />,
+    _type: 'default_sort',
   },
-  { key: 'city', label: 'City', icon: <FaMapPin /> },
-] satisfies Array<SortType<OrderByFields>>;
+  {
+    key: 'city',
+    label: 'City',
+    icon: <FaMapPin />,
+    _type: 'default_sort',
+  },
+] satisfies Array<SortType<People_Order_By>>;
 
 const fullnameFilter = {
   key: 'fullname',
@@ -80,8 +103,6 @@ const fullnameFilter = {
         },
       };
     }
-    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
-    return {};
   },
   searchQuery: SEARCH_PEOPLE_QUERY,
   searchTemplate: (searchInput: string) => ({
@@ -116,8 +137,6 @@ const companyFilter = {
         _not: { company: { name: { _eq: companyName } } },
       };
     }
-    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
-    return {};
   },
   searchQuery: SEARCH_COMPANY_QUERY,
   searchTemplate: (searchInput: string) => ({
@@ -149,8 +168,6 @@ const emailFilter = {
         _not: { email: { _eq: email } },
       };
     }
-    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
-    return {};
   },
   searchQuery: SEARCH_PEOPLE_QUERY,
   searchTemplate: (searchInput: string) => ({
@@ -182,8 +199,6 @@ const cityFilter = {
         _not: { city: { _eq: city } },
       };
     }
-    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
-    return {};
   },
   searchQuery: SEARCH_PEOPLE_QUERY,
   searchTemplate: (searchInput: string) => ({