Simplifies search through relations usage (#126)

front/src/pages/companies/Companies.tsx

@@ -1,7 +1,7 @@
-import { FaRegBuilding, FaList } from 'react-icons/fa';
-import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
-import styled from '@emotion/styled';
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { FaRegBuilding, FaList } from 'react-icons/fa';
+import styled from '@emotion/styled';
+import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import { v4 as uuidv4 } from 'uuid';
 import {
   CompaniesSelectedSortType,
@@ -15,22 +15,18 @@ import {
   Company,
   mapToCompany,
 } from '../../interfaces/entities/company.interface';
-import {
-  useCompaniesColumns,
-  availableFilters,
-  availableSorts,
-} from './companies-table';
+
 import {
   reduceFiltersToWhere,
   reduceSortsToOrderBy,
 } from '../../components/table/table-header/helpers';
-import {
-  Companies_Bool_Exp,
-  Companies_Order_By,
-} from '../../generated/graphql';
-import { useSearch } from '../../services/api/search/search';
+import { Companies_Order_By } from '../../generated/graphql';
 import ActionBar from '../../components/table/action-bar/ActionBar';
 import { SelectedFilterType } from '../../interfaces/filters/interface';
+import { BoolExpType } from '../../interfaces/entities/generic.interface';
+import { useCompaniesColumns } from './companies-columns';
+import { availableSorts } from './companies-sorts';
+import { availableFilters } from './companies-filters';
 
 const StyledCompaniesContainer = styled.div`
   display: flex;
@@ -39,12 +35,10 @@ const StyledCompaniesContainer = styled.div`
 
 function Companies() {
   const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
-  const [where, setWhere] = useState<Companies_Bool_Exp>({});
+  const [where, setWhere] = useState<BoolExpType<Company>>({});
   const [internalData, setInternalData] = useState<Array<Company>>([]);
   const [selectedRowIds, setSelectedRowIds] = useState<Array<string>>([]);
 
-  const [filterSearchResults, setSearhInput, setFilterSearch] = useSearch();
-
   const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
   }, []);
@@ -113,13 +107,8 @@ function Companies() {
             viewIcon={<FaList />}
             availableSorts={availableSorts}
             availableFilters={availableFilters}
-            filterSearchResults={filterSearchResults}
             onSortsUpdate={updateSorts}
             onFiltersUpdate={updateFilters}
-            onFilterSearch={(filter, searchValue) => {
-              setSearhInput(searchValue);
-              setFilterSearch(filter);
-            }}
             onRowSelectionChange={setSelectedRowIds}
           />
         </StyledCompaniesContainer>

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

@@ -1,12 +1,4 @@
-import { CellContext, createColumnHelper } from '@tanstack/react-table';
-import {
-  Company,
-  mapToCompany,
-} from '../../interfaces/entities/company.interface';
-import { updateCompany } from '../../services/api/companies';
-import ColumnHead from '../../components/table/ColumnHead';
-import CompanyChip from '../../components/chips/CompanyChip';
-import EditableText from '../../components/editable-cell/EditableText';
+import { useMemo } from 'react';
 import {
   FaRegBuilding,
   FaCalendar,
@@ -14,126 +6,27 @@ import {
   FaMapPin,
   FaRegUser,
   FaUsers,
-  FaBuilding,
 } from 'react-icons/fa';
+import { CellContext, createColumnHelper } from '@tanstack/react-table';
+
+import { SEARCH_USER_QUERY } from '../../services/api/search/search';
+import { SearchConfigType } from '../../interfaces/search/interface';
+
+import { Company } from '../../interfaces/entities/company.interface';
+import { updateCompany } from '../../services/api/companies';
+import { User, mapToUser } from '../../interfaces/entities/user.interface';
+
+import ColumnHead from '../../components/table/ColumnHead';
+import Checkbox from '../../components/form/Checkbox';
+import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
+import EditableDate from '../../components/editable-cell/EditableDate';
+import EditableRelation from '../../components/editable-cell/EditableRelation';
+import EditableChip from '../../components/editable-cell/EditableChip';
+import EditableText from '../../components/editable-cell/EditableText';
 import PersonChip, {
   PersonChipPropsType,
 } from '../../components/chips/PersonChip';
-import EditableChip from '../../components/editable-cell/EditableChip';
-import { Companies_Order_By } from '../../generated/graphql';
-import {
-  SEARCH_COMPANY_QUERY,
-  SEARCH_USER_QUERY,
-} from '../../services/api/search/search';
-import EditableDate from '../../components/editable-cell/EditableDate';
-import EditableRelation from '../../components/editable-cell/EditableRelation';
-import { User, mapToUser } from '../../interfaces/entities/user.interface';
-import { useMemo } from 'react';
-import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
-import Checkbox from '../../components/form/Checkbox';
-import { SortType } from '../../interfaces/sorts/interface';
-import { FilterConfigType } from '../../interfaces/filters/interface';
-import { SearchConfigType } from '../../interfaces/search/interface';
-
-export const availableSorts = [
-  {
-    key: 'name',
-    label: 'Name',
-    icon: <FaBuilding />,
-    _type: 'default_sort',
-  },
-  {
-    key: 'employees',
-    label: 'Employees',
-    icon: <FaUsers />,
-    _type: 'default_sort',
-  },
-  {
-    key: 'domain_name',
-    label: 'Url',
-    icon: <FaLink />,
-    _type: 'default_sort',
-  },
-  {
-    key: 'address',
-    label: 'Address',
-    icon: <FaMapPin />,
-    _type: 'default_sort',
-  },
-  {
-    key: 'created_at',
-    label: 'Creation',
-    icon: <FaCalendar />,
-    _type: 'default_sort',
-  },
-] satisfies Array<SortType<Companies_Order_By>>;
-
-export const availableFilters = [
-  {
-    key: 'company_name',
-    label: 'Company',
-    icon: <FaBuilding />,
-    searchConfig: {
-      query: SEARCH_COMPANY_QUERY,
-      template: (searchInput) => ({
-        name: { _ilike: `%${searchInput}%` },
-      }),
-      resultMapper: (company) => ({
-        render: (company) => company.name,
-        value: mapToCompany(company),
-      }),
-    },
-    selectedValueRender: (company) => company.name || '',
-    operands: [
-      {
-        label: 'Equal',
-        id: 'equal',
-        whereTemplate: (company) => ({
-          name: { _eq: company.name },
-        }),
-      },
-      {
-        label: 'Not equal',
-        id: 'not-equal',
-        whereTemplate: (company) => ({
-          _not: { name: { _eq: company.name } },
-        }),
-      },
-    ],
-  } satisfies FilterConfigType<Company, Company>,
-  {
-    key: 'company_domain_name',
-    label: 'Url',
-    icon: <FaLink />,
-    searchConfig: {
-      query: SEARCH_COMPANY_QUERY,
-      template: (searchInput) => ({
-        name: { _ilike: `%${searchInput}%` },
-      }),
-      resultMapper: (company) => ({
-        render: (company) => company.domainName,
-        value: mapToCompany(company),
-      }),
-    },
-    selectedValueRender: (company) => company.domainName || '',
-    operands: [
-      {
-        label: 'Equal',
-        id: 'equal',
-        whereTemplate: (company) => ({
-          domain_name: { _eq: company.domainName },
-        }),
-      },
-      {
-        label: 'Not equal',
-        id: 'not-equal',
-        whereTemplate: (company) => ({
-          _not: { domain_name: { _eq: company.domainName } },
-        }),
-      },
-    ],
-  } satisfies FilterConfigType<Company, Company>,
-];
+import CompanyChip from '../../components/chips/CompanyChip';
 
 const columnHelper = createColumnHelper<Company>();
 

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

@@ -0,0 +1,74 @@
+import {
+  Company,
+  mapToCompany,
+} from '../../interfaces/entities/company.interface';
+import { FaLink, FaBuilding } from 'react-icons/fa';
+import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
+import { FilterConfigType } from '../../interfaces/filters/interface';
+
+export const availableFilters = [
+  {
+    key: 'company_name',
+    label: 'Company',
+    icon: <FaBuilding />,
+    searchConfig: {
+      query: SEARCH_COMPANY_QUERY,
+      template: (searchInput) => ({
+        name: { _ilike: `%${searchInput}%` },
+      }),
+      resultMapper: (company) => ({
+        render: (company) => company.name,
+        value: mapToCompany(company),
+      }),
+    },
+    selectedValueRender: (company) => company.name || '',
+    operands: [
+      {
+        label: 'Equal',
+        id: 'equal',
+        whereTemplate: (company) => ({
+          name: { _eq: company.name },
+        }),
+      },
+      {
+        label: 'Not equal',
+        id: 'not-equal',
+        whereTemplate: (company) => ({
+          _not: { name: { _eq: company.name } },
+        }),
+      },
+    ],
+  } satisfies FilterConfigType<Company, Company>,
+  {
+    key: 'company_domain_name',
+    label: 'Url',
+    icon: <FaLink />,
+    searchConfig: {
+      query: SEARCH_COMPANY_QUERY,
+      template: (searchInput) => ({
+        name: { _ilike: `%${searchInput}%` },
+      }),
+      resultMapper: (company) => ({
+        render: (company) => company.domainName,
+        value: mapToCompany(company),
+      }),
+    },
+    selectedValueRender: (company) => company.domainName || '',
+    operands: [
+      {
+        label: 'Equal',
+        id: 'equal',
+        whereTemplate: (company) => ({
+          domain_name: { _eq: company.domainName },
+        }),
+      },
+      {
+        label: 'Not equal',
+        id: 'not-equal',
+        whereTemplate: (company) => ({
+          _not: { domain_name: { _eq: company.domainName } },
+        }),
+      },
+    ],
+  } satisfies FilterConfigType<Company, Company>,
+];

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

@@ -0,0 +1,42 @@
+import {
+  FaCalendar,
+  FaLink,
+  FaMapPin,
+  FaUsers,
+  FaBuilding,
+} from 'react-icons/fa';
+import { Companies_Order_By } from '../../generated/graphql';
+import { SortType } from '../../interfaces/sorts/interface';
+
+export const availableSorts = [
+  {
+    key: 'name',
+    label: 'Name',
+    icon: <FaBuilding />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'employees',
+    label: 'Employees',
+    icon: <FaUsers />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'domain_name',
+    label: 'Url',
+    icon: <FaLink />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'address',
+    label: 'Address',
+    icon: <FaMapPin />,
+    _type: 'default_sort',
+  },
+  {
+    key: 'created_at',
+    label: 'Creation',
+    icon: <FaCalendar />,
+    _type: 'default_sort',
+  },
+] satisfies Array<SortType<Companies_Order_By>>;