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/people/People.tsx

@@ -1,36 +1,19 @@
-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 {
-  reduceFiltersToWhere,
-  reduceSortsToOrderBy,
-} from '@/filters-and-sorts/helpers';
-import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
-import {
-  defaultOrderBy,
-  GET_PEOPLE,
-  PeopleSelectedSortType,
-  usePeopleQuery,
-} from '@/people/services';
+import { GET_PEOPLE } from '@/people/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 { IconList, IconUser } from '@/ui/icons/index';
+import { IconUser } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
-import {
-  GetPeopleQuery,
-  PersonWhereInput,
-  useInsertPersonMutation,
-} from '~/generated/graphql';
+import { TableContext } from '@/ui/tables/states/TableContext';
+import { useInsertPersonMutation } from '~/generated/graphql';
 
 import { TableActionBarButtonCreateCommentThreadPeople } from './table/TableActionBarButtonCreateCommentThreadPeople';
 import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
-import { usePeopleColumns } from './people-columns';
-import { availableFilters } from './people-filters';
-import { availableSorts } from './people-sorts';
+import { PeopleTable } from './PeopleTable';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
@@ -39,26 +22,8 @@ const StyledPeopleContainer = styled.div`
 `;
 
 export function People() {
-  const [orderBy, setOrderBy] = useState(defaultOrderBy);
-  const [where, setWhere] = useState<PersonWhereInput>({});
-
-  const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
-
-  const updateFilters = useCallback(
-    (filters: Array<SelectedFilterType<GetPeopleQuery['people'][0]>>) => {
-      setWhere(reduceFiltersToWhere(filters));
-    },
-    [],
-  );
-
   const [insertPersonMutation] = useInsertPersonMutation();
 
-  const { data } = usePeopleQuery(orderBy, where);
-
-  const people = data?.people ?? [];
-
   async function handleAddButtonClick() {
     await insertPersonMutation({
       variables: {
@@ -74,8 +39,6 @@ export function People() {
     });
   }
 
-  const peopleColumns = usePeopleColumns();
-
   const theme = useTheme();
 
   return (
@@ -84,28 +47,15 @@ export function People() {
       icon={<IconUser size={theme.icon.size.md} />}
       onAddButtonClick={handleAddButtonClick}
     >
-      <>
+      <RecoilScope SpecificContext={TableContext}>
         <StyledPeopleContainer>
-          <HooksEntityTable
-            numberOfColumns={peopleColumns.length}
-            numberOfRows={people.length}
-          />
-          <EntityTable
-            data={people}
-            columns={peopleColumns}
-            viewName="All People"
-            viewIcon={<IconList size={theme.icon.size.md} />}
-            availableSorts={availableSorts}
-            availableFilters={availableFilters}
-            onSortsUpdate={updateSorts}
-            onFiltersUpdate={updateFilters}
-          />
+          <PeopleTable />
         </StyledPeopleContainer>
         <EntityTableActionBar>
           <TableActionBarButtonCreateCommentThreadPeople />
           <TableActionBarButtonDeletePeople />
         </EntityTableActionBar>
-      </>
+      </RecoilScope>
     </WithTopBarContainer>
   );
 }