Refactor/filters (#498)

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixes

* wip

* wip

* wip

* Use company filters

* Refactored FilterDropdown into multiple components

* Refactored entity search select in dropdown

* Renamed states

* Fixed people filters

* Removed unused code

* Cleaned states

* Cleaned state

* Better naming

* fixed rebase

* Fix

* Fixed stories and mocked data and displayName bug

* Fixed cancel sort

* Fixed naming

* Fixed dropdown height

* Fix

* Fixed lint

front/src/pages/companies/Companies.tsx

@@ -1,64 +1,30 @@
-import { useCallback, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
-import {
-  CompaniesSelectedSortType,
-  defaultOrderBy,
-  GET_COMPANIES,
-  useCompaniesQuery,
-} from '@/companies/services';
-import {
-  reduceFiltersToWhere,
-  reduceSortsToOrderBy,
-} from '@/filters-and-sorts/helpers';
-import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
+import { GET_COMPANIES } from '@/companies/services';
+import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
-import { EntityTable } from '@/ui/components/table/EntityTable';
-import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
 import { IconBuildingSkyscraper } from '@/ui/icons/index';
-import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
+import { TableContext } from '@/ui/tables/states/TableContext';
 import {
-  CompanyOrderByWithRelationInput as Companies_Order_By,
-  CompanyWhereInput,
-  GetCompaniesQuery,
   InsertCompanyMutationVariables,
   useInsertCompanyMutation,
 } from '~/generated/graphql';
 
 import { TableActionBarButtonCreateCommentThreadCompany } from './table/TableActionBarButtonCreateCommentThreadCompany';
 import { TableActionBarButtonDeleteCompanies } from './table/TableActionBarButtonDeleteCompanies';
-import { useCompaniesColumns } from './companies-columns';
-import { availableFilters } from './companies-filters';
-import { availableSorts } from './companies-sorts';
+import { CompanyTable } from './CompanyTable';
 
-const StyledCompaniesContainer = styled.div`
+const StyledTableContainer = styled.div`
   display: flex;
   width: 100%;
 `;
 
 export function Companies() {
   const [insertCompany] = useInsertCompanyMutation();
-  const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
-  const [where, setWhere] = useState<CompanyWhereInput>({});
-
-  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
-
-  const updateFilters = useCallback(
-    (filters: Array<SelectedFilterType<GetCompaniesQuery['companies'][0]>>) => {
-      setWhere(reduceFiltersToWhere(filters));
-    },
-    [],
-  );
-
-  const { data } = useCompaniesQuery(orderBy, where);
-
-  const companies = data?.companies ?? [];
 
   async function handleAddButtonClick() {
     const newCompany: InsertCompanyMutationVariables = {
@@ -76,36 +42,23 @@ export function Companies() {
     });
   }
 
-  const companiesColumns = useCompaniesColumns();
   const theme = useTheme();
+
   return (
     <WithTopBarContainer
       title="Companies"
       icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
       onAddButtonClick={handleAddButtonClick}
     >
-      <>
-        <StyledCompaniesContainer>
-          <HooksEntityTable
-            numberOfColumns={companiesColumns.length}
-            numberOfRows={companies.length}
-          />
-          <EntityTable
-            data={companies}
-            columns={companiesColumns}
-            viewName="All Companies"
-            viewIcon={<IconList size={16} />}
-            availableSorts={availableSorts}
-            availableFilters={availableFilters}
-            onSortsUpdate={updateSorts}
-            onFiltersUpdate={updateFilters}
-          />
-        </StyledCompaniesContainer>
+      <RecoilScope SpecificContext={TableContext}>
+        <StyledTableContainer>
+          <CompanyTable />
+        </StyledTableContainer>
         <EntityTableActionBar>
           <TableActionBarButtonCreateCommentThreadCompany />
           <TableActionBarButtonDeleteCompanies />
         </EntityTableActionBar>
-      </>
+      </RecoilScope>
     </WithTopBarContainer>
   );
 }