Add Filters on Table views (#95)

* Add filter search logic

WIP Filter search

Implement filters

test: fix sorts tests

test: fix filter test

feature: search person and display firstname in results

feature: fix test for filter component

test: mock search filters

refactor: create a useSearch hook

refactor: move debounce in useSearch and reset status of filter selection

feature: debounce set filters

refactor: remove useless setSorts

feature: add where variable to people query

feature: strongly type Filters

feature: update WhereTemplate method

feature: implement filtering on full name

feature: type the useSearch hook

feature: use where reducer

refactor: create a type for readability

feature: use query and mapper from filters

feature: implement filter by company

feature: search filter results on filter select

feature: add loading and results to search results in filters

refactor: move render search results in a function

feature: display a LOADING when it loads

feature: split search input and search filter for different debounce

refactor: remove some warnings

refactor: remove some warnings

* Write test 1

* Write test 2

* test: useSearch is tested

* test: update names of default people data

* test: add a filter search

* Test 3

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/services/people/select.ts

@@ -1,7 +1,14 @@
 import { QueryResult, gql, useQuery } from '@apollo/client';
 import { GraphqlQueryPerson } from '../../interfaces/person.interface';
-import { Order_By, People_Order_By } from '../../generated/graphql';
-import { SelectedSortType } from '../../components/table/table-header/interface';
+import {
+  Order_By,
+  People_Bool_Exp,
+  People_Order_By,
+} from '../../generated/graphql';
+import {
+  SelectedFilterType,
+  SelectedSortType,
+} from '../../components/table/table-header/interface';
 
 export type OrderByFields = keyof People_Order_By | 'fullname' | 'company_name';
 
@@ -11,6 +18,16 @@ const mapOrder = (order: 'asc' | 'desc'): Order_By => {
   return order === 'asc' ? Order_By.Asc : Order_By.Desc;
 };
 
+export const reduceFiltersToWhere = <T>(
+  filters: Array<SelectedFilterType<T>>,
+): T => {
+  const where = filters.reduce((acc, filter) => {
+    const { where } = filter;
+    return { ...acc, ...where };
+  }, {} as T);
+  return where;
+};
+
 export const reduceSortsToOrderBy = (
   sorts: Array<PeopleSelectedSortType>,
 ): People_Order_By[] => {
@@ -31,8 +48,12 @@ export const reduceSortsToOrderBy = (
 };
 
 export const GET_PEOPLE = gql`
-  query GetPeople($orderBy: [people_order_by!]) {
-    people(order_by: $orderBy) {
+  query GetPeople(
+    $orderBy: [people_order_by!]
+    $where: people_bool_exp
+    $limit: Int
+  ) {
+    people(order_by: $orderBy, where: $where, limit: $limit) {
       id
       phone
       email
@@ -51,9 +72,10 @@ export const GET_PEOPLE = gql`
 
 export function usePeopleQuery(
   orderBy: People_Order_By[],
+  where: People_Bool_Exp,
 ): QueryResult<{ people: GraphqlQueryPerson[] }> {
   return useQuery<{ people: GraphqlQueryPerson[] }>(GET_PEOPLE, {
-    variables: { orderBy },
+    variables: { orderBy, where },
   });
 }