Move code to a lib, remove table dependancy (#606)

* Move code to a lib, remove table dependancy

* Abstract yable context from filters

* Update missing hook

* Remove wording of active filter, simplify naming for edited filters

* lint

front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx

@@ -1,5 +1,5 @@
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
 import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';

front/src/modules/companies/services/__tests__/select.test.ts

@@ -1,4 +1,4 @@
-import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
 
 import { CompaniesSelectedSortType } from '../select';
 

front/src/modules/companies/services/select.ts

@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 import {
   CompanyOrderByWithRelationInput as Companies_Order_By,
   CompanyWhereInput as Companies_Bool_Exp,

front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts

@@ -1,26 +0,0 @@
-import { useMemo } from 'react';
-
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
-import { TableContext } from '@/ui/tables/states/TableContext';
-
-import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '../states/tableFilterDefinitionUsedInDropdownScopedState';
-
-export function useActiveTableFilterCurrentlyEditedInDropdown() {
-  const [activeTableFilters] = useRecoilScopedState(
-    activeTableFiltersScopedState,
-    TableContext,
-  );
-
-  const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
-    TableContext,
-  );
-
-  return useMemo(() => {
-    return activeTableFilters.find(
-      (activeTableFilter) =>
-        activeTableFilter.field === tableFilterDefinitionUsedInDropdown?.field,
-    );
-  }, [tableFilterDefinitionUsedInDropdown, activeTableFilters]);
-}

front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts

@@ -1,19 +0,0 @@
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
-import { TableContext } from '@/ui/tables/states/TableContext';
-
-import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState';
-
-export function useRemoveActiveTableFilter() {
-  const [, setActiveTableFilters] = useRecoilScopedState(
-    activeTableFiltersScopedState,
-    TableContext,
-  );
-
-  return function removeActiveTableFilter(filterField: string) {
-    setActiveTableFilters((activeTableFilters) => {
-      return activeTableFilters.filter((activeTableFilter) => {
-        return activeTableFilter.field !== filterField;
-      });
-    });
-  };
-}

front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts

@@ -1,33 +0,0 @@
-import { produce } from 'immer';
-
-import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
-import { TableContext } from '@/ui/tables/states/TableContext';
-
-import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState';
-import { ActiveTableFilter } from '../types/ActiveTableFilter';
-
-export function useUpsertActiveTableFilter() {
-  const [, setActiveTableFilters] = useRecoilScopedState(
-    activeTableFiltersScopedState,
-    TableContext,
-  );
-
-  return function upsertActiveTableFilter(
-    activeTableFilterToUpsert: ActiveTableFilter,
-  ) {
-    setActiveTableFilters((activeTableFilters) => {
-      return produce(activeTableFilters, (activeTableFiltersDraft) => {
-        const index = activeTableFiltersDraft.findIndex(
-          (activeTableFilter) =>
-            activeTableFilter.field === activeTableFilterToUpsert.field,
-        );
-
-        if (index === -1) {
-          activeTableFiltersDraft.push(activeTableFilterToUpsert);
-        } else {
-          activeTableFiltersDraft[index] = activeTableFilterToUpsert;
-        }
-      });
-    });
-  };
-}

front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts

@@ -1,11 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { ActiveTableFilter } from '@/filters-and-sorts/types/ActiveTableFilter';
-
-export const activeTableFiltersScopedState = atomFamily<
-  ActiveTableFilter[],
-  string
->({
-  key: 'activeTableFiltersScopedState',
-  default: [],
-});

front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts

@@ -1,11 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { TableFilterDefinition } from '../types/TableFilterDefinition';
-
-export const availableTableFiltersScopedState = atomFamily<
-  TableFilterDefinition[],
-  string
->({
-  key: 'availableTableFiltersScopedState',
-  default: [],
-});

front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts

@@ -1,11 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { TableFilterDefinition } from '../types/TableFilterDefinition';
-
-export const tableFilterDefinitionUsedInDropdownScopedState = atomFamily<
-  TableFilterDefinition | null,
-  string
->({
-  key: 'tableFilterDefinitionUsedInDropdownScopedState',
-  default: null,
-});

front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts

@@ -1,10 +0,0 @@
-import { TableFilterOperand } from './TableFilterOperand';
-import { TableFilterType } from './TableFilterType';
-
-export type ActiveTableFilter = {
-  field: string;
-  type: TableFilterType;
-  value: string;
-  displayValue: string;
-  operand: TableFilterOperand;
-};

front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts

@@ -1,9 +0,0 @@
-import { TableFilterType } from './TableFilterType';
-
-export type TableFilterDefinition = {
-  field: string;
-  label: string;
-  icon: JSX.Element;
-  type: TableFilterType;
-  entitySelectComponent?: JSX.Element;
-};

front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts

@@ -1,5 +0,0 @@
-import { TableFilterDefinition } from './TableFilterDefinition';
-
-export type TableFilterDefinitionByEntity<T> = TableFilterDefinition & {
-  field: keyof T;
-};

front/src/modules/filters-and-sorts/types/TableFilterType.ts

@@ -1 +0,0 @@
-export type TableFilterType = 'text' | 'date' | 'entity' | 'number';

front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts

@@ -0,0 +1,21 @@
+import { Context, useMemo } from 'react';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+
+import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
+import { filtersScopedState } from '../states/filtersScopedState';
+
+export function useFilterCurrentlyEdited(context: Context<string | null>) {
+  const [filters] = useRecoilScopedState(filtersScopedState, context);
+
+  const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
+    filterDefinitionUsedInDropdownScopedState,
+    context,
+  );
+
+  return useMemo(() => {
+    return filters.find(
+      (filter) => filter.field === filterDefinitionUsedInDropdown?.field,
+    );
+  }, [filterDefinitionUsedInDropdown, filters]);
+}

front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts

@@ -0,0 +1,17 @@
+import { Context } from 'react';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+
+import { filtersScopedState } from '../states/filtersScopedState';
+
+export function useRemoveFilter(context: Context<string | null>) {
+  const [, setFilters] = useRecoilScopedState(filtersScopedState, context);
+
+  return function removeFilter(filterField: string) {
+    setFilters((filters) => {
+      return filters.filter((filter) => {
+        return filter.field !== filterField;
+      });
+    });
+  };
+}

front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts

@@ -0,0 +1,27 @@
+import { Context } from 'react';
+import { produce } from 'immer';
+
+import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
+
+import { filtersScopedState } from '../states/filtersScopedState';
+import { Filter } from '../types/Filter';
+
+export function useUpsertFilter(context: Context<string | null>) {
+  const [, setFilters] = useRecoilScopedState(filtersScopedState, context);
+
+  return function upsertFilter(filterToUpsert: Filter) {
+    setFilters((filters) => {
+      return produce(filters, (filtersDraft) => {
+        const index = filtersDraft.findIndex(
+          (filter) => filter.field === filterToUpsert.field,
+        );
+
+        if (index === -1) {
+          filtersDraft.push(filterToUpsert);
+        } else {
+          filtersDraft[index] = filterToUpsert;
+        }
+      });
+    });
+  };
+}

front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { FilterDefinition } from '../types/FilterDefinition';
+
+export const availableFiltersScopedState = atomFamily<
+  FilterDefinition[],
+  string
+>({
+  key: 'availableFiltersScopedState',
+  default: [],
+});

front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts

@@ -0,0 +1,11 @@
+import { atomFamily } from 'recoil';
+
+import { FilterDefinition } from '../types/FilterDefinition';
+
+export const filterDefinitionUsedInDropdownScopedState = atomFamily<
+  FilterDefinition | null,
+  string
+>({
+  key: 'filterDefinitionUsedInDropdownScopedState',
+  default: null,
+});

front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts

@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+import { Filter } from '@/lib/filters-and-sorts/types/Filter';
+
+export const filtersScopedState = atomFamily<Filter[], string>({
+  key: 'filtersScopedState',
+  default: [],
+});

front/src/modules/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts

@@ -1,9 +1,9 @@
 import { atomFamily } from 'recoil';
 
-import { TableFilterOperand } from '../types/TableFilterOperand';
+import { FilterOperand } from '../types/FilterOperand';
 
 export const selectedOperandInDropdownScopedState = atomFamily<
-  TableFilterOperand | null,
+  FilterOperand | null,
   string
 >({
   key: 'selectedOperandInDropdownScopedState',

front/src/modules/lib/filters-and-sorts/types/Filter.ts

@@ -0,0 +1,10 @@
+import { FilterOperand } from './FilterOperand';
+import { FilterType } from './FilterType';
+
+export type Filter = {
+  field: string;
+  type: FilterType;
+  value: string;
+  displayValue: string;
+  operand: FilterOperand;
+};

front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts

@@ -0,0 +1,9 @@
+import { FilterType } from './FilterType';
+
+export type FilterDefinition = {
+  field: string;
+  label: string;
+  icon: JSX.Element;
+  type: FilterType;
+  entitySelectComponent?: JSX.Element;
+};

front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts

@@ -0,0 +1,5 @@
+import { FilterDefinition } from './FilterDefinition';
+
+export type FilterDefinitionByEntity<T> = FilterDefinition & {
+  field: keyof T;
+};

front/src/modules/lib/filters-and-sorts/types/FilterOperand.ts

@@ -1,4 +1,4 @@
-export type TableFilterOperand =
+export type FilterOperand =
   | 'contains'
   | 'does-not-contain'
   | 'greater-than'

front/src/modules/lib/filters-and-sorts/types/FilterType.ts

@@ -0,0 +1 @@
+export type FilterType = 'text' | 'date' | 'entity' | 'number';

front/src/modules/lib/filters-and-sorts/utils/getOperandLabel.ts

@@ -1,8 +1,6 @@
-import { TableFilterOperand } from '../types/TableFilterOperand';
+import { FilterOperand } from '../types/FilterOperand';
 
-export function getOperandLabel(
+export function getOperandLabel(operand: FilterOperand | null | undefined) {
-  operand: TableFilterOperand | null | undefined,
-) {
   switch (operand) {
     case 'contains':
       return 'Contains';

front/src/modules/lib/filters-and-sorts/utils/getOperandsForFilterType.ts

@@ -1,9 +1,9 @@
-import { TableFilterOperand } from '../types/TableFilterOperand';
+import { FilterOperand } from '../types/FilterOperand';
-import { TableFilterType } from '../types/TableFilterType';
+import { FilterType } from '../types/FilterType';
 
 export function getOperandsForFilterType(
-  filterType: TableFilterType | null | undefined,
+  filterType: FilterType | null | undefined,
-): TableFilterOperand[] {
+): FilterOperand[] {
   switch (filterType) {
     case 'text':
       return ['contains', 'does-not-contain'];

front/src/modules/lib/filters-and-sorts/utils/turnFilterIntoWhereClause.ts

@@ -1,8 +1,8 @@
 import { QueryMode } from '~/generated/graphql';
 
-import { ActiveTableFilter } from '../types/ActiveTableFilter';
+import { Filter } from '../types/Filter';
 
-export function turnFilterIntoWhereClause(filter: ActiveTableFilter) {
+export function turnFilterIntoWhereClause(filter: Filter) {
   switch (filter.type) {
     case 'text':
       switch (filter.operand) {

front/src/modules/people/services/__tests__/select.test.ts

@@ -1,4 +1,4 @@
-import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
 
 import { PeopleSelectedSortType } from '../select';
 

front/src/modules/people/services/select.ts

@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 import {
   PersonOrderByWithRelationInput as People_Order_By,
   PersonWhereInput as People_Bool_Exp,

front/src/modules/ui/components/table/EntityTable.tsx

@@ -11,7 +11,7 @@ import { useRecoilState } from 'recoil';
 import {
   SelectedSortType,
   SortType,
-} from '@/filters-and-sorts/interfaces/sorts/interface';
+} from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 import { useLeaveTableFocus } from '@/ui/tables/hooks/useLeaveTableFocus';

front/src/modules/ui/components/table/HooksEntityTable.tsx

@@ -1,4 +1,4 @@
-import { TableFilterDefinition } from '@/filters-and-sorts/types/TableFilterDefinition';
+import { FilterDefinition } from '@/lib/filters-and-sorts/types/FilterDefinition';
 import { useInitializeEntityTable } from '@/ui/tables/hooks/useInitializeEntityTable';
 import { useInitializeEntityTableFilters } from '@/ui/tables/hooks/useInitializeEntityTableFilters';
 import { useMapKeyboardToSoftFocus } from '@/ui/tables/hooks/useMapKeyboardToSoftFocus';
@@ -10,7 +10,7 @@ export function HooksEntityTable({
 }: {
   numberOfColumns: number;
   numberOfRows: number;
-  availableTableFilters: TableFilterDefinition[];
+  availableTableFilters: FilterDefinition[];
 }) {
   useMapKeyboardToSoftFocus();
 

front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
-import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
@@ -37,7 +37,7 @@ export function FilterDropdownButton() {
     tableFilterDefinitionUsedInDropdown,
     setTableFilterDefinitionUsedInDropdown,
   ] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -47,7 +47,7 @@ export function FilterDropdownButton() {
   );
 
   const [activeTableFilters] = useRecoilScopedState(
-    activeTableFiltersScopedState,
+    filtersScopedState,
     TableContext,
   );
 

front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
@@ -10,7 +10,7 @@ import DatePicker from '../../form/DatePicker';
 
 export function FilterDropdownDateSearchInput() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -19,7 +19,7 @@ export function FilterDropdownDateSearchInput() {
     TableContext,
   );
 
-  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const upsertActiveTableFilter = useUpsertFilter(TableContext);
 
   function handleChange(date: Date) {
     if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown)

front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx

@@ -1,14 +1,14 @@
 import { ChangeEvent } from 'react';
 
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
 export function FilterDropdownEntitySearchInput() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 

front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 
-import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited';
-import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter';
-import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter';
-import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { EntitiesForMultipleEntitySelect } from '@/relation-picker/components/MultipleEntitySelect';
 import { SingleEntitySelectBase } from '@/relation-picker/components/SingleEntitySelectBase';
@@ -29,15 +29,14 @@ export function FilterDropdownEntitySearchSelect({
   );
 
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
-  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const upsertActiveTableFilter = useUpsertFilter(TableContext);
-  const removeActiveTableFilter = useRemoveActiveTableFilter();
+  const removeActiveTableFilter = useRemoveFilter(TableContext);
 
-  const activeFilterCurrentlyEditedInDropdown =
+  const filterCurrentlyEdited = useFilterCurrentlyEdited(TableContext);
-    useActiveTableFilterCurrentlyEditedInDropdown();
 
   function handleUserSelected(selectedEntity: EntityForSelect) {
     if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown) {
@@ -64,13 +63,10 @@ export function FilterDropdownEntitySearchSelect({
   }
 
   useEffect(() => {
-    if (!activeFilterCurrentlyEditedInDropdown) {
+    if (!filterCurrentlyEdited) {
       setFilterDropdownSelectedEntityId(null);
     }
-  }, [
+  }, [filterCurrentlyEdited, setFilterDropdownSelectedEntityId]);
-    activeFilterCurrentlyEditedInDropdown,
-    setFilterDropdownSelectedEntityId,
-  ]);
 
   return (
     <>

front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx

@@ -1,4 +1,4 @@
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
@@ -7,7 +7,7 @@ import { DropdownMenuSeparator } from '../../menu/DropdownMenuSeparator';
 
 export function FilterDropdownEntitySelect() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 

front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx

@@ -1,10 +1,10 @@
-import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
-import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType';
 import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
+import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { getOperandsForFilterType } from '@/lib/filters-and-sorts/utils/getOperandsForFilterType';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
 import { TableContext } from '@/ui/tables/states/TableContext';
@@ -16,7 +16,7 @@ import DropdownButton from './DropdownButton';
 
 export function FilterDropdownFilterSelect() {
   const [, setTableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -31,7 +31,7 @@ export function FilterDropdownFilterSelect() {
   );
 
   const availableTableFilters = useRecoilScopedValue(
-    availableTableFiltersScopedState,
+    availableFiltersScopedState,
     TableContext,
   );
 

front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx

@@ -1,15 +1,15 @@
 import { ChangeEvent } from 'react';
 
-import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter';
-import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
 export function FilterDropdownNumberSearchInput() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -18,8 +18,8 @@ export function FilterDropdownNumberSearchInput() {
     TableContext,
   );
 
-  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const upsertActiveTableFilter = useUpsertFilter(TableContext);
-  const removeActiveTableFilter = useRemoveActiveTableFilter();
+  const removeActiveTableFilter = useRemoveFilter(TableContext);
 
   return (
     tableFilterDefinitionUsedInDropdown &&

front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx

@@ -1,6 +1,6 @@
-import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
-import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 

front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx

@@ -1,11 +1,11 @@
-import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited';
-import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter';
-import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
-import { TableFilterOperand } from '@/filters-and-sorts/types/TableFilterOperand';
+import { FilterOperand } from '@/lib/filters-and-sorts/types/FilterOperand';
-import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel';
-import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType';
+import { getOperandsForFilterType } from '@/lib/filters-and-sorts/utils/getOperandsForFilterType';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
@@ -15,7 +15,7 @@ import DropdownButton from './DropdownButton';
 
 export function FilterDropdownOperandSelect() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -34,25 +34,25 @@ export function FilterDropdownOperandSelect() {
       TableContext,
     );
 
-  const activeTableFilterCurrentlyEditedInDropdown =
+  const activeTableFilterCurrentlyEdited =
-    useActiveTableFilterCurrentlyEditedInDropdown();
+    useFilterCurrentlyEdited(TableContext);
 
-  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const upsertActiveTableFilter = useUpsertFilter(TableContext);
 
-  function handleOperangeChange(newOperand: TableFilterOperand) {
+  function handleOperangeChange(newOperand: FilterOperand) {
     setSelectedOperandInDropdown(newOperand);
     setIsOperandSelectionUnfolded(false);
 
     if (
       tableFilterDefinitionUsedInDropdown &&
-      activeTableFilterCurrentlyEditedInDropdown
+      activeTableFilterCurrentlyEdited
     ) {
       upsertActiveTableFilter({
-        field: activeTableFilterCurrentlyEditedInDropdown.field,
+        field: activeTableFilterCurrentlyEdited.field,
-        displayValue: activeTableFilterCurrentlyEditedInDropdown.displayValue,
+        displayValue: activeTableFilterCurrentlyEdited.displayValue,
         operand: newOperand,
-        type: activeTableFilterCurrentlyEditedInDropdown.type,
+        type: activeTableFilterCurrentlyEdited.type,
-        value: activeTableFilterCurrentlyEditedInDropdown.value,
+        value: activeTableFilterCurrentlyEdited.value,
       });
     }
   }

front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx

@@ -1,17 +1,17 @@
 import { ChangeEvent } from 'react';
 
-import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown';
+import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited';
-import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter';
-import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter';
+import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter';
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState';
-import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState';
+import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { TableContext } from '@/ui/tables/states/TableContext';
 
 export function FilterDropdownTextSearchInput() {
   const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState(
-    tableFilterDefinitionUsedInDropdownScopedState,
+    filterDefinitionUsedInDropdownScopedState,
     TableContext,
   );
 
@@ -23,11 +23,10 @@ export function FilterDropdownTextSearchInput() {
   const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
     useRecoilScopedState(filterDropdownSearchInputScopedState, TableContext);
 
-  const upsertActiveTableFilter = useUpsertActiveTableFilter();
+  const upsertActiveTableFilter = useUpsertFilter(TableContext);
-  const removeActiveTableFilter = useRemoveActiveTableFilter();
+  const removeActiveTableFilter = useRemoveFilter(TableContext);
 
-  const activeFilterCurrentlyEditedInDropdown =
+  const filterCurrentlyEdited = useFilterCurrentlyEdited(TableContext);
-    useActiveTableFilterCurrentlyEditedInDropdown();
 
   return (
     tableFilterDefinitionUsedInDropdown &&
@@ -35,10 +34,7 @@ export function FilterDropdownTextSearchInput() {
       <input
         type="text"
         placeholder={tableFilterDefinitionUsedInDropdown.label}
-        value={
+        value={filterCurrentlyEdited?.value ?? filterDropdownSearchInput}
-          activeFilterCurrentlyEditedInDropdown?.value ??
-          filterDropdownSearchInput
-        }
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setFilterDropdownSearchInput(event.target.value);
 

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -1,11 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter';
+import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter';
-import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
-import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState';
-import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
+import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState';
-import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel';
+import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index';
 import { TableContext } from '@/ui/tables/states/TableContext';
@@ -66,39 +66,35 @@ function SortAndFilterBar<SortField>({
 }: OwnProps<SortField>) {
   const theme = useTheme();
 
-  const [activeTableFilters, setActiveTableFilters] = useRecoilScopedState(
+  const [filters, setFilters] = useRecoilScopedState(
-    activeTableFiltersScopedState,
+    filtersScopedState,
     TableContext,
   );
 
-  const [availableTableFilters] = useRecoilScopedState(
+  const [availableFilters] = useRecoilScopedState(
-    availableTableFiltersScopedState,
+    availableFiltersScopedState,
     TableContext,
   );
 
-  const activeTableFiltersWithDefinition = activeTableFilters.map(
+  const filtersWithDefinition = filters.map((filter) => {
-    (activeTableFilter) => {
+    const tableFilterDefinition = availableFilters.find((availableFilter) => {
-      const tableFilterDefinition = availableTableFilters.find(
+      return availableFilter.field === filter.field;
-        (availableTableFilter) => {
+    });
-          return availableTableFilter.field === activeTableFilter.field;
-        },
-      );
 
-      return {
+    return {
-        ...activeTableFilter,
+      ...filter,
-        ...tableFilterDefinition,
+      ...tableFilterDefinition,
-      };
+    };
-    },
+  });
-  );
 
-  const removeActiveTableFilter = useRemoveActiveTableFilter();
+  const removeFilter = useRemoveFilter(TableContext);
 
   function handleCancelClick() {
-    setActiveTableFilters([]);
+    setFilters([]);
     onCancelClick();
   }
 
-  if (!activeTableFiltersWithDefinition.length && !sorts.length) {
+  if (!filtersWithDefinition.length && !sorts.length) {
     return null;
   }
 
@@ -122,7 +118,7 @@ function SortAndFilterBar<SortField>({
             />
           );
         })}
-        {activeTableFiltersWithDefinition.map((filter) => {
+        {filtersWithDefinition.map((filter) => {
           return (
             <SortOrFilterChip
               key={filter.field}
@@ -133,13 +129,13 @@ function SortAndFilterBar<SortField>({
               id={filter.field}
               icon={filter.icon}
               onRemove={() => {
-                removeActiveTableFilter(filter.field);
+                removeFilter(filter.field);
               }}
             />
           );
         })}
       </StyledChipcontainer>
-      {activeTableFilters.length + sorts.length > 0 && (
+      {filters.length + sorts.length > 0 && (
         <StyledCancelButton
           data-testid={'cancel-button'}
           onClick={handleCancelClick}

front/src/modules/ui/components/table/table-header/SortDropdownButton.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 import {
   SelectedSortType,
   SortType,
-} from '@/filters-and-sorts/interfaces/sorts/interface';
+} from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 
 import DropdownButton from './DropdownButton';
 

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {
   SelectedSortType,
   SortType,
-} from '@/filters-and-sorts/interfaces/sorts/interface';
+} from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 
 import { FilterDropdownButton } from './FilterDropdownButton';
 import SortAndFilterBar from './SortAndFilterBar';

front/src/modules/ui/tables/hooks/useInitializeEntityTableFilters.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
+import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState';
-import { TableFilterDefinition } from '@/filters-and-sorts/types/TableFilterDefinition';
+import { FilterDefinition } from '@/lib/filters-and-sorts/types/FilterDefinition';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 
 import { TableContext } from '../states/TableContext';
@@ -9,10 +9,10 @@ import { TableContext } from '../states/TableContext';
 export function useInitializeEntityTableFilters({
   availableTableFilters,
 }: {
-  availableTableFilters: TableFilterDefinition[];
+  availableTableFilters: FilterDefinition[];
 }) {
   const [, setAvailableTableFilters] = useRecoilScopedState(
-    availableTableFiltersScopedState,
+    availableFiltersScopedState,
     TableContext,
   );
 

front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx

@@ -1,5 +1,5 @@
-import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState';
-import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
 import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';

front/src/pages/companies/CompanyTable.tsx

@@ -6,9 +6,9 @@ import {
   defaultOrderBy,
   useCompaniesQuery,
 } from '@/companies/services';
-import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
-import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState';
-import { turnFilterIntoWhereClause } from '@/filters-and-sorts/utils/turnFilterIntoWhereClause';
+import { turnFilterIntoWhereClause } from '@/lib/filters-and-sorts/utils/turnFilterIntoWhereClause';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
 import { EntityTable } from '@/ui/components/table/EntityTable';
 import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
@@ -27,10 +27,7 @@ export function CompanyTable() {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
   }, []);
 
-  const filters = useRecoilScopedValue(
+  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
-    activeTableFiltersScopedState,
-    TableContext,
-  );
 
   const whereFilters = useMemo(() => {
     if (!filters.length) return undefined;

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

@@ -1,4 +1,4 @@
-import { TableFilterDefinitionByEntity } from '@/filters-and-sorts/types/TableFilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/lib/filters-and-sorts/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -11,7 +11,7 @@ import { icon } from '@/ui/themes/icon';
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Company } from '~/generated/graphql';
 
-export const companiesFilters: TableFilterDefinitionByEntity<Company>[] = [
+export const companiesFilters: FilterDefinitionByEntity<Company>[] = [
   {
     field: 'name',
     label: 'Name',

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

@@ -1,4 +1,4 @@
-import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { SortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,

front/src/pages/people/PeopleTable.tsx

@@ -2,9 +2,9 @@ import { useCallback, useMemo, useState } from 'react';
 import { IconList } from '@tabler/icons-react';
 
 import { defaultOrderBy } from '@/companies/services';
-import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
-import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState';
-import { turnFilterIntoWhereClause } from '@/filters-and-sorts/utils/turnFilterIntoWhereClause';
+import { turnFilterIntoWhereClause } from '@/lib/filters-and-sorts/utils/turnFilterIntoWhereClause';
 import { PeopleSelectedSortType, usePeopleQuery } from '@/people/services';
 import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
 import { EntityTable } from '@/ui/components/table/EntityTable';
@@ -24,10 +24,7 @@ export function PeopleTable() {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
   }, []);
 
-  const filters = useRecoilScopedValue(
+  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
-    activeTableFiltersScopedState,
-    TableContext,
-  );
 
   const whereFilters = useMemo(() => {
     return { AND: filters.map(turnFilterIntoWhereClause) };

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

@@ -1,5 +1,5 @@
 import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect';
-import { TableFilterDefinitionByEntity } from '@/filters-and-sorts/types/TableFilterDefinitionByEntity';
+import { FilterDefinitionByEntity } from '@/lib/filters-and-sorts/types/FilterDefinitionByEntity';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -11,7 +11,7 @@ import {
 import { icon } from '@/ui/themes/icon';
 import { Person } from '~/generated/graphql';
 
-export const peopleFilters: TableFilterDefinitionByEntity<Person>[] = [
+export const peopleFilters: FilterDefinitionByEntity<Person>[] = [
   {
     field: 'firstName',
     label: 'First name',

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

@@ -1,4 +1,4 @@
-import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
+import { SortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,