Sammy/t 190 aau i see other filters city on people (#101)

* feature: add email filter

* feature: add city filter

* test: fix company search tests

* test: use the right value in test

* refactor: test all the filters in a loop

front/src/components/table/table-header/interface.ts

@@ -5,6 +5,12 @@ import {
   People_Bool_Exp,
   Users_Bool_Exp,
 } from '../../../generated/graphql';
+import { GraphqlQueryCompany } from '../../../interfaces/company.interface';
+import {
+  SEARCH_COMPANY_QUERY,
+  SEARCH_PEOPLE_QUERY,
+} from '../../../services/search/search';
+import { GraphqlQueryPerson } from '../../../interfaces/person.interface';
 
 export type SortType<SortKey = string> = {
   label: string;
@@ -46,3 +52,25 @@ export type SelectedFilterType<WhereTemplate> = FilterType<WhereTemplate> & {
   operand: FilterOperandType;
   where: WhereTemplate;
 };
+
+export 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;
+}
+
+export 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;
+}

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

@@ -1,70 +1,92 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PeopleFilter Company fitler should generate the where variable of the GQL call 1`] = `
+exports[`PeopleFilter should render the filter city 1`] = `
+Object {
+  "city": Object {
+    "_eq": "Paris",
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter city 2`] = `
+Object {
+  "_not": Object {
+    "city": Object {
+      "_eq": "Paris",
+    },
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter company_name 1`] = `
+Object {
+  "company": Object {
+    "name": Object {
+      "_eq": "ACME",
+    },
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter company_name 2`] = `
+Object {
+  "_not": Object {
+    "company": Object {
+      "name": Object {
+        "_eq": "ACME",
+      },
+    },
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter email 1`] = `
+Object {
+  "email": Object {
+    "_eq": "john@linkedin.com",
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter email 2`] = `
+Object {
+  "_not": Object {
+    "email": Object {
+      "_eq": "john@linkedin.com",
+    },
+  },
+}
+`;
+
+exports[`PeopleFilter should render the filter fullname 1`] = `
 Object {
   "_and": Array [
     Object {
       "firstname": Object {
-        "_eq": "undefined",
+        "_eq": "John",
       },
     },
     Object {
       "lastname": Object {
-        "_eq": "undefined",
+        "_eq": "Doe",
       },
     },
   ],
 }
 `;
 
-exports[`PeopleFilter Company fitler should generate the where variable of the GQL call 2`] = `
+exports[`PeopleFilter should render the filter fullname 2`] = `
 Object {
   "_not": Object {
     "_and": Array [
       Object {
         "firstname": Object {
-          "_eq": "undefined",
+          "_eq": "John",
         },
       },
       Object {
         "lastname": Object {
-          "_eq": "undefined",
+          "_eq": "Doe",
-        },
-      },
-    ],
-  },
-}
-`;
-
-exports[`PeopleFilter Fullname filter should generate the where variable of the GQL call 1`] = `
-Object {
-  "_and": Array [
-    Object {
-      "firstname": Object {
-        "_eq": "undefined",
-      },
-    },
-    Object {
-      "lastname": Object {
-        "_eq": "undefined",
-      },
-    },
-  ],
-}
-`;
-
-exports[`PeopleFilter Fullname filter should generate the where variable of the GQL call 2`] = `
-Object {
-  "_not": Object {
-    "_and": Array [
-      Object {
-        "firstname": Object {
-          "_eq": "undefined",
-        },
-      },
-      Object {
-        "lastname": Object {
-          "_eq": "undefined",
         },
       },
     ],

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

@@ -1,29 +1,37 @@
+import {
+  assertFilterUseCompanySearch,
+  assertFilterUsePeopleSearch,
+} from '../../../components/table/table-header/interface';
 import { GraphqlQueryPerson } from '../../../interfaces/person.interface';
 import { mockCompanyData } from '../../companies/__stories__/mock-data';
 import { defaultData } from '../default-data';
-import { companyFilter, fullnameFilter } from '../people-table';
+import { availableFilters } from '../people-table';
 
 const JohnDoeUser = defaultData.find(
   (user) => user.email === 'john@linkedin.com',
 ) as GraphqlQueryPerson;
 
 describe('PeopleFilter', () => {
-  it('Fullname filter should generate the where variable of the GQL call', () => {
+  for (const filter of availableFilters) {
-    const filterSelectedValue = fullnameFilter.searchResultMapper(JohnDoeUser);
+    it(`should render the filter ${filter.key}`, () => {
-    for (const operand of fullnameFilter.operands) {
+      if (assertFilterUseCompanySearch(filter)) {
-      expect(
+        const filterSelectedValue = filter.searchResultMapper(
-        fullnameFilter.whereTemplate(operand, filterSelectedValue),
+          mockCompanyData[0],
-      ).toMatchSnapshot();
+        );
-    }
+        for (const operand of filter.operands) {
-  });
+          expect(
-  it('Company fitler should generate the where variable of the GQL call', () => {
+            filter.whereTemplate(operand, filterSelectedValue.value),
-    const filterSelectedValue = companyFilter.searchResultMapper(
+          ).toMatchSnapshot();
-      mockCompanyData[0],
+        }
-    );
+      }
-    for (const operand of companyFilter.operands) {
+      if (assertFilterUsePeopleSearch(filter)) {
-      expect(
+        const filterSelectedValue = filter.searchResultMapper(JohnDoeUser);
-        fullnameFilter.whereTemplate(operand, filterSelectedValue),
+        for (const operand of filter.operands) {
-      ).toMatchSnapshot();
+          expect(
-    }
+            filter.whereTemplate(operand, filterSelectedValue.value),
-  });
+          ).toMatchSnapshot();
+        }
+      }
+    });
+  }
 });

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

@@ -56,7 +56,7 @@ export const availableSorts = [
   { key: 'city', label: 'City', icon: <FaMapPin /> },
 ] satisfies Array<SortType<OrderByFields>>;
 
-export const fullnameFilter = {
+const fullnameFilter = {
   key: 'fullname',
   label: 'People',
   icon: <FaUser />,
@@ -100,7 +100,7 @@ export const fullnameFilter = {
   ],
 } satisfies FilterType<People_Bool_Exp>;
 
-export const companyFilter = {
+const companyFilter = {
   key: 'company_name',
   label: 'Company',
   icon: <FaBuilding />,
@@ -133,17 +133,77 @@ export const companyFilter = {
   ],
 } satisfies FilterType<People_Bool_Exp>;
 
+const emailFilter = {
+  key: 'email',
+  label: 'Email',
+  icon: <FaEnvelope />,
+  whereTemplate: (operand, { email }) => {
+    if (operand.keyWord === 'equal') {
+      return {
+        email: { _eq: email },
+      };
+    }
+
+    if (operand.keyWord === 'not_equal') {
+      return {
+        _not: { email: { _eq: email } },
+      };
+    }
+    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
+    return {};
+  },
+  searchQuery: SEARCH_PEOPLE_QUERY,
+  searchTemplate: (searchInput: string) => ({
+    email: { _ilike: `%${searchInput}%` },
+  }),
+  searchResultMapper: (person: GraphqlQueryPerson) => ({
+    displayValue: person.email,
+    value: { email: person.email },
+  }),
+  operands: [
+    { label: 'Equal', id: 'equal', keyWord: 'equal' },
+    { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' },
+  ],
+} satisfies FilterType<People_Bool_Exp>;
+
+const cityFilter = {
+  key: 'city',
+  label: 'City',
+  icon: <FaMapPin />,
+  whereTemplate: (operand, { city }) => {
+    if (operand.keyWord === 'equal') {
+      return {
+        city: { _eq: city },
+      };
+    }
+
+    if (operand.keyWord === 'not_equal') {
+      return {
+        _not: { city: { _eq: city } },
+      };
+    }
+    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
+    return {};
+  },
+  searchQuery: SEARCH_PEOPLE_QUERY,
+  searchTemplate: (searchInput: string) => ({
+    city: { _ilike: `%${searchInput}%` },
+  }),
+  searchResultMapper: (person: GraphqlQueryPerson) => ({
+    displayValue: person.city,
+    value: { city: person.city },
+  }),
+  operands: [
+    { label: 'Equal', id: 'equal', keyWord: 'equal' },
+    { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' },
+  ],
+} satisfies FilterType<People_Bool_Exp>;
+
 export const availableFilters = [
   fullnameFilter,
   companyFilter,
-  // {
+  emailFilter,
-  //   key: 'email',
+  cityFilter,
-  //   label: 'Email',
-  //   icon: faEnvelope,
-  //   whereTemplate: () => ({ email: { _ilike: '%value%' } }),
-  //   searchQuery: GET_PEOPLE,
-  //   searchTemplate: { email: { _ilike: '%value%' } },
-  // },
   // {
   //   key: 'phone',
   //   label: 'Phone',
@@ -160,14 +220,6 @@ export const availableFilters = [
   //   searchQuery: GET_PEOPLE,
   //   searchTemplate: { created_at: { _eq: '%value%' } },
   // },
-  // {
-  //   key: 'city',
-  //   label: 'City',
-  //   icon: faMapPin,
-  //   whereTemplate: () => ({ city: { _ilike: '%value%' } }),
-  //   searchQuery: GET_PEOPLE,
-  //   searchTemplate: { city: { _ilike: '%value%' } },
-  // },
 ] satisfies FilterType<People_Bool_Exp>[];
 
 const columnHelper = createColumnHelper<Person>();