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/interfaces/company.interface.test.ts

@@ -13,6 +13,7 @@ describe('mapCompany', () => {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
         email: 'john@example.com',
         displayName: 'John Doe',
+        __typename: 'User',
       },
       employees: 10,
       address: '1 Infinite Loop, 95014 Cupertino, California, USA',

front/src/interfaces/company.interface.ts

@@ -1,6 +1,7 @@
-import { User } from './user.interface';
+import { GraphqlQueryUser, User } from './user.interface';
 
 export interface Opportunity {
+  id: string;
   name: string;
   icon: string;
 }
@@ -16,17 +17,11 @@ export interface Company {
   creationDate: Date;
 }
 
-export type GraphqlQueryAccountOwner = {
-  id: string;
-  email: string;
-  displayName: string;
-};
-
 export type GraphqlQueryCompany = {
   id: string;
   name: string;
   domain_name: string;
-  account_owner?: GraphqlQueryAccountOwner;
+  account_owner?: GraphqlQueryUser;
   employees: number;
   address: string;
   created_at: string;
@@ -54,7 +49,7 @@ export const mapCompany = (company: GraphqlQueryCompany): Company => ({
       }
     : undefined,
   creationDate: new Date(company.created_at),
-  opportunities: [{ name: 'Sales Pipeline', icon: '' }],
+  opportunities: [],
 });
 
 export const mapGqlCompany = (company: Company): GraphqlMutationCompany => ({

front/src/interfaces/user.interface.ts

@@ -1,15 +1,39 @@
-import { GraphqlQueryAccountOwner } from './company.interface';
-import { Workspace } from './workspace.interface';
+import {
+  GraphqlQueryWorkspaceMember,
+  WorkspaceMember,
+} from './workspace.interface';
+
+export type GraphqlQueryUser = {
+  id: string;
+  email: string;
+  displayName: string;
+  workspace_member?: GraphqlQueryWorkspaceMember;
+  __typename: string;
+};
 
 export interface User {
   id: string;
   email: string;
   displayName: string;
-  workspace_member?: {
-    workspace: Workspace;
-  };
+  workspace_member?: WorkspaceMember;
 }
 
-export const mapUser = (user: GraphqlQueryAccountOwner): User => ({
-  ...user,
-});
+export const mapUser = (user: GraphqlQueryUser): User => {
+  const mappedUser = {
+    id: user.id,
+    email: user.email,
+    displayName: user.displayName,
+  } as User;
+  if (user.workspace_member) {
+    mappedUser['workspace_member'] = {
+      workspace: {
+        id: user.workspace_member.workspace.id,
+        displayName: user.workspace_member.workspace.display_name,
+        domainName: user.workspace_member.workspace.domain_name,
+        logo: user.workspace_member.workspace.logo,
+      },
+    };
+  }
+
+  return mappedUser;
+};

front/src/interfaces/workspace.interface.ts

@@ -1,5 +1,22 @@
 export interface Workspace {
   id: string;
-  display_name: string;
+  domainName: string;
+  displayName: string;
   logo: string;
 }
+
+export interface WorkspaceMember {
+  workspace: Workspace;
+}
+
+export type GraphqlQueryWorkspace = {
+  id: string;
+  display_name: string;
+  domain_name: string;
+  logo: string;
+  __typename: string;
+};
+export type GraphqlQueryWorkspaceMember = {
+  workspace: GraphqlQueryWorkspace;
+  __typename: string;
+};