scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-11-30 04:43:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor sortsOrderBy & filtersWhere on CompanyTable & PeopleTable (#2064)

Browse Source
This commit is contained in:
Tom Avalexing
2023-10-16 17:49:37 +03:00
committed by GitHub
parent b128d53b58
commit 70aef9bb28
3 changed files with 28 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@@ -9,9 +9,6 @@ import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
import { filtersWhereScopedSelector } from '@/ui/data/view-bar/states/selectors/filtersWhereScopedSelector';
import { sortsOrderByScopedSelector } from '@/ui/data/view-bar/states/selectors/sortsOrderByScopedSelector';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useTableViews } from '@/views/hooks/useTableViews';
import {
UpdateOneCompanyMutationVariables,
@@ -23,15 +20,6 @@ import { companiesFilters } from '~/pages/companies/companies-filters';
import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
export const CompanyTable = () => {
const sortsOrderBy = useRecoilScopedValue(
sortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const filtersWhere = useRecoilScopedValue(
filtersWhereScopedSelector,
TableRecoilScopeContext,
);
const [updateEntityMutation] = useUpdateOneCompanyMutation();
const upsertDataTableItem = useUpsertDataTableItem();
@@ -89,8 +77,6 @@ export const CompanyTable = () => {
getRequestOptimisticEffectDefinition={
getCompaniesOptimisticEffectDefinition
}
orderBy={sortsOrderBy}
whereFilters={filtersWhere}
filterDefinitionArray={companiesFilters}
sortDefinitionArray={companyAvailableSorts}
setContextMenuEntries={setContextMenuEntries}

14
front/src/modules/people/table/components/PeopleTable.tsx
View File

@@ -9,9 +9,6 @@ import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
import { filtersWhereScopedSelector } from '@/ui/data/view-bar/states/selectors/filtersWhereScopedSelector';
import { sortsOrderByScopedSelector } from '@/ui/data/view-bar/states/selectors/sortsOrderByScopedSelector';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useTableViews } from '@/views/hooks/useTableViews';
import {
UpdateOnePersonMutationVariables,
@@ -22,15 +19,6 @@ import { peopleFilters } from '~/pages/people/people-filters';
import { peopleAvailableSorts } from '~/pages/people/people-sorts';
export const PeopleTable = () => {
const sortsOrderBy = useRecoilScopedValue(
sortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const filtersWhere = useRecoilScopedValue(
filtersWhereScopedSelector,
TableRecoilScopeContext,
);
const [updateEntityMutation] = useUpdateOnePersonMutation();
const upsertDataTableItem = useUpsertDataTableItem();
const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
@@ -61,8 +49,6 @@ export const PeopleTable = () => {
getRequestOptimisticEffectDefinition={
getPeopleOptimisticEffectDefinition
}
orderBy={sortsOrderBy}
whereFilters={filtersWhere}
filterDefinitionArray={peopleFilters}
setContextMenuEntries={setContextMenuEntries}
setActionBarEntries={setActionBarEntries}

43
front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
View File

@@ -1,5 +1,6 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import defaults from 'lodash/defaults';
import { useRecoilCallback } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
@@ -11,9 +12,16 @@ import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamil
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { SortOrder } from '~/generated/graphql';
import {
SortOrder,
useGetCompaniesQuery,
useGetPeopleQuery,
} from '~/generated/graphql';
import { filtersWhereScopedSelector } from '../../view-bar/states/selectors/filtersWhereScopedSelector';
import { sortsOrderByScopedSelector } from '../../view-bar/states/selectors/sortsOrderByScopedSelector';
import { useSetDataTableData } from '../hooks/useSetDataTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
@@ -21,25 +29,16 @@ export const DataTableEffect = ({
useGetRequest,
getRequestResultKey,
getRequestOptimisticEffectDefinition,
orderBy = [
{
createdAt: SortOrder.Desc,
},
],
whereFilters,
filterDefinitionArray,
setActionBarEntries,
setContextMenuEntries,
sortDefinitionArray,
}: {
// TODO: type this
useGetRequest: any;
useGetRequest: typeof useGetCompaniesQuery | typeof useGetPeopleQuery;
getRequestResultKey: string;
getRequestOptimisticEffectDefinition: OptimisticEffectDefinition<any>;
// TODO: type this and replace with defaultSorts reduce should be applied to defaultSorts in this component not before
orderBy?: any;
// TODO: type this and replace with defaultFilters reduce should be applied to defaultFilters in this component not before
whereFilters?: any;
filterDefinitionArray: FilterDefinition[];
sortDefinitionArray: SortDefinition[];
setActionBarEntries?: () => void;
@@ -48,15 +47,29 @@ export const DataTableEffect = ({
const setDataTableData = useSetDataTableData();
const { registerOptimisticEffect } = useOptimisticEffect();
let sortsOrderBy = useRecoilScopedValue(
sortsOrderByScopedSelector,
TableRecoilScopeContext,
);
sortsOrderBy = defaults(sortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
]);
const filtersWhere = useRecoilScopedValue(
filtersWhereScopedSelector,
TableRecoilScopeContext,
);
useGetRequest({
variables: { orderBy, where: whereFilters },
variables: { orderBy: sortsOrderBy, where: filtersWhere },
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
registerOptimisticEffect({
variables: { orderBy, where: whereFilters },
variables: { orderBy: sortsOrderBy, where: filtersWhere },
definition: getRequestOptimisticEffectDefinition,
});
},