mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve Performances of FE by reducing first print queries (#2623)

Browse Source
This commit is contained in:
Charles Bochet
2023-11-21 22:47:49 +01:00
committed by GitHub
parent c74bde28b8
commit 77733f2bc8
26 changed files with 304 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
front/src/modules/views/components/ViewBarEffect.tsx
View File

@ -5,12 +5,12 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjectTypeResults';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { GraphQLView } from '@/views/types/GraphQLView';
import { assertNotNull } from '~/utils/assert';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { useViewScopedStates } from '../hooks/internal/useViewScopedStates';
import { useView } from '../hooks/useView';
import { View } from '../types/View';
import { ViewField } from '../types/ViewField';
import { ViewFilter } from '../types/ViewFilter';
import { ViewSort } from '../types/ViewSort';
@ -18,12 +18,7 @@ import { getViewScopedStatesFromSnapshot } from '../utils/getViewScopedStatesFro
import { getViewScopedStateValuesFromSnapshot } from '../utils/getViewScopedStateValuesFromSnapshot';
export const ViewBarEffect = () => {
const {
scopeId: viewScopeId,
currentViewId,
loadView,
changeViewInUrl,
} = useView();
const { scopeId: viewScopeId, loadView, changeViewInUrl } = useView();
const [searchParams] = useSearchParams();
const currentViewIdFromUrl = searchParams.get('view');
@ -34,6 +29,7 @@ export const ViewBarEffect = () => {
const viewObjectMetadataId = useRecoilValue(viewObjectMetadataIdState);
useFindManyObjectRecords({
skip: !viewObjectMetadataId,
objectNamePlural: 'views',
filter: {
type: { eq: viewType },
@ -41,177 +37,190 @@ export const ViewBarEffect = () => {
},
onCompleted: useRecoilCallback(
({ snapshot, set }) =>
async (data: PaginatedObjectTypeResults<View>) => {
async (data: PaginatedObjectTypeResults<GraphQLView>) => {
const nextViews = data.edges.map((view) => ({
id: view.node.id,
name: view.node.name,
objectMetadataId: view.node.objectMetadataId,
}));
const { viewsState } = getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
});
const { viewsState, currentViewIdState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
});
const views = getSnapshotValue(snapshot, viewsState);
if (!isDeeplyEqual(views, nextViews)) set(viewsState, nextViews);
if (!nextViews.length) return;
const currentView =
data.edges
.map((view) => view.node)
.find((view) => view.id === currentViewIdFromUrl) ??
data.edges[0].node;
set(currentViewIdState, currentView.id);
if (currentView?.viewFields) {
updateViewFields(currentView.viewFields, currentView.id);
updateViewFilters(currentView.viewFilters, currentView.id);
updateViewSorts(currentView.viewSorts, currentView.id);
}
if (!nextViews.length) return;
if (!currentViewIdFromUrl) return changeViewInUrl(nextViews[0].id);
},
),
});
useFindManyObjectRecords({
skip: !currentViewId,
objectNamePlural: 'viewFields',
filter: { viewId: { eq: currentViewId } },
onCompleted: useRecoilCallback(
({ snapshot, set }) =>
async (data: PaginatedObjectTypeResults<ViewField>) => {
const {
availableFieldDefinitions,
onViewFieldsChange,
savedViewFields,
currentViewId,
} = getViewScopedStateValuesFromSnapshot({
const updateViewFields = useRecoilCallback(
({ snapshot, set }) =>
async (
data: PaginatedObjectTypeResults<ViewField>,
currentViewId: string,
) => {
const {
availableFieldDefinitions,
onViewFieldsChange,
savedViewFields,
isPersistingView,
} = getViewScopedStateValuesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
const { savedViewFieldsState, currentViewFieldsState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
const { savedViewFieldsState, currentViewFieldsState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
});
if (!availableFieldDefinitions) {
return;
}
if (!availableFieldDefinitions || !currentViewId) {
return;
}
const queriedViewFields = data.edges
.map((viewField) => viewField.node)
.filter(assertNotNull);
const queriedViewFields = data.edges
.map((viewField) => viewField.node)
.filter(assertNotNull);
if (isPersistingView) {
return;
}
if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
set(currentViewFieldsState, queriedViewFields);
set(savedViewFieldsState, queriedViewFields);
onViewFieldsChange?.(queriedViewFields);
}
},
[viewScopeId],
),
});
if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
set(currentViewFieldsState, queriedViewFields);
set(savedViewFieldsState, queriedViewFields);
onViewFieldsChange?.(queriedViewFields);
}
},
[viewScopeId],
);
useFindManyObjectRecords({
skip: !currentViewId,
objectNamePlural: 'viewFilters',
filter: { viewId: { eq: currentViewId } },
onCompleted: useRecoilCallback(
({ snapshot, set }) =>
async (data: PaginatedObjectTypeResults<Required<ViewFilter>>) => {
const {
availableFilterDefinitions,
savedViewFilters,
onViewFiltersChange,
currentViewId,
} = getViewScopedStateValuesFromSnapshot({
const updateViewFilters = useRecoilCallback(
({ snapshot, set }) =>
async (
data: PaginatedObjectTypeResults<Required<ViewFilter>>,
currentViewId: string,
) => {
const {
availableFilterDefinitions,
savedViewFilters,
onViewFiltersChange,
} = getViewScopedStateValuesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
const { savedViewFiltersState, currentViewFiltersState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
const { savedViewFiltersState, currentViewFiltersState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
});
if (!availableFilterDefinitions) {
return;
}
if (!availableFilterDefinitions || !currentViewId) {
return;
}
const queriedViewFilters = data.edges
.map(({ node }) => {
const availableFilterDefinition = availableFilterDefinitions.find(
(filterDefinition) =>
filterDefinition.fieldMetadataId === node.fieldMetadataId,
);
const queriedViewFilters = data.edges
.map(({ node }) => {
const availableFilterDefinition = availableFilterDefinitions.find(
(filterDefinition) =>
filterDefinition.fieldMetadataId === node.fieldMetadataId,
);
if (!availableFilterDefinition) return null;
if (!availableFilterDefinition) return null;
return {
...node,
displayValue: node.displayValue ?? node.value,
definition: availableFilterDefinition,
};
})
.filter(assertNotNull);
return {
...node,
displayValue: node.displayValue ?? node.value,
definition: availableFilterDefinition,
};
})
.filter(assertNotNull);
if (!isDeeplyEqual(savedViewFilters, queriedViewFilters)) {
set(savedViewFiltersState, queriedViewFilters);
set(currentViewFiltersState, queriedViewFilters);
onViewFiltersChange?.(queriedViewFilters);
}
},
[viewScopeId],
);
if (!isDeeplyEqual(savedViewFilters, queriedViewFilters)) {
set(savedViewFiltersState, queriedViewFilters);
set(currentViewFiltersState, queriedViewFilters);
onViewFiltersChange?.(queriedViewFilters);
}
},
[viewScopeId],
),
});
useFindManyObjectRecords({
skip: !currentViewId,
objectNamePlural: 'viewSorts',
filter: { viewId: { eq: currentViewId } },
onCompleted: useRecoilCallback(
({ snapshot, set }) =>
async (data: PaginatedObjectTypeResults<Required<ViewSort>>) => {
const {
availableSortDefinitions,
savedViewSorts,
onViewSortsChange,
currentViewId,
} = getViewScopedStateValuesFromSnapshot({
const updateViewSorts = useRecoilCallback(
({ snapshot, set }) =>
async (
data: PaginatedObjectTypeResults<Required<ViewSort>>,
currentViewId: string,
) => {
const { availableSortDefinitions, savedViewSorts, onViewSortsChange } =
getViewScopedStateValuesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
const { savedViewSortsState, currentViewSortsState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
});
const { savedViewSortsState, currentViewSortsState } =
getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
viewId: currentViewId,
});
if (!availableSortDefinitions || !currentViewId) {
return;
}
if (!availableSortDefinitions || !currentViewId) {
return;
}
const queriedViewSorts = data.edges
.map(({ node }) => {
const availableSortDefinition = availableSortDefinitions.find(
(sort) => sort.fieldMetadataId === node.fieldMetadataId,
);
const queriedViewSorts = data.edges
.map(({ node }) => {
const availableSortDefinition = availableSortDefinitions.find(
(sort) => sort.fieldMetadataId === node.fieldMetadataId,
);
if (!availableSortDefinition) return null;
if (!availableSortDefinition) return null;
return {
id: node.id,
fieldMetadataId: node.fieldMetadataId,
direction: node.direction,
definition: availableSortDefinition,
};
})
.filter(assertNotNull);
return {
id: node.id,
fieldMetadataId: node.fieldMetadataId,
direction: node.direction,
definition: availableSortDefinition,
};
})
.filter(assertNotNull);
if (!isDeeplyEqual(savedViewSorts, queriedViewSorts)) {
set(savedViewSortsState, queriedViewSorts);
set(currentViewSortsState, queriedViewSorts);
onViewSortsChange?.(queriedViewSorts);
}
},
[viewScopeId],
),
});
if (!isDeeplyEqual(savedViewSorts, queriedViewSorts)) {
set(savedViewSortsState, queriedViewSorts);
set(currentViewSortsState, queriedViewSorts);
onViewSortsChange?.(queriedViewSorts);
}
},
[viewScopeId],
);
useEffect(() => {
if (!currentViewIdFromUrl) return;

27
front/src/modules/views/hooks/internal/useViewFields.ts
View File

@ -3,18 +3,18 @@ import { useRecoilCallback } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ViewField } from '@/views/types/ViewField';
import { getViewScopedStatesFromSnapshot } from '@/views/utils/getViewScopedStatesFromSnapshot';
import { getViewScopedStateValuesFromSnapshot } from '@/views/utils/getViewScopedStateValuesFromSnapshot';
export const useViewFields = (viewScopeId: string) => {
const { updateOneMutation, createOneMutation, findManyQuery } =
useObjectMetadataItem({
objectNameSingular: 'viewField',
});
const { updateOneMutation, createOneMutation } = useObjectMetadataItem({
objectNameSingular: 'viewField',
});
const apolloClient = useApolloClient();
const persistViewFields = useRecoilCallback(
({ snapshot }) =>
({ snapshot, set }) =>
async (viewFieldsToPersist: ViewField[], viewId?: string) => {
const { viewObjectMetadataId, currentViewId, savedViewFieldsByKey } =
getViewScopedStateValuesFromSnapshot({
@ -23,6 +23,12 @@ export const useViewFields = (viewScopeId: string) => {
viewId,
});
const { isPersistingViewState } = getViewScopedStatesFromSnapshot({
snapshot,
viewScopeId,
viewId,
});
const viewIdToPersist = viewId ?? currentViewId;
if (!currentViewId || !savedViewFieldsByKey || !viewObjectMetadataId) {
@ -47,7 +53,6 @@ export const useViewFields = (viewScopeId: string) => {
position: viewField.position,
},
},
refetchQueries: [findManyQuery],
}),
),
);
@ -90,17 +95,13 @@ export const useViewFields = (viewScopeId: string) => {
.isVisible !== viewFieldToPersit.isVisible),
);
set(isPersistingViewState, true);
await _createViewFields(viewFieldsToCreate);
await _updateViewFields(viewFieldsToUpdate);
set(isPersistingViewState, false);
},
[
apolloClient,
createOneMutation,
findManyQuery,
updateOneMutation,
viewScopeId,
],
[apolloClient, createOneMutation, updateOneMutation, viewScopeId],
);
return { persistViewFields };

14
front/src/modules/views/hooks/internal/useViewFilters.ts
View File

@ -11,14 +11,10 @@ import { getViewScopedStateValuesFromSnapshot } from '@/views/utils/getViewScope
import { useViewScopedStates } from './useViewScopedStates';
export const useViewFilters = (viewScopeId: string) => {
const {
updateOneMutation,
createOneMutation,
deleteOneMutation,
findManyQuery,
} = useObjectMetadataItem({
objectNameSingular: 'viewFilter',
});
const { updateOneMutation, createOneMutation, deleteOneMutation } =
useObjectMetadataItem({
objectNameSingular: 'viewFilter',
});
const apolloClient = useApolloClient();
const { currentViewFiltersState } = useViewScopedStates({
@ -60,7 +56,6 @@ export const useViewFilters = (viewScopeId: string) => {
operand: viewFilter.operand,
},
},
refetchQueries: [findManyQuery],
}),
),
);
@ -139,7 +134,6 @@ export const useViewFilters = (viewScopeId: string) => {
apolloClient,
createOneMutation,
deleteOneMutation,
findManyQuery,
updateOneMutation,
viewScopeId,
],

2
front/src/modules/views/hooks/internal/useViewScopedStates.ts
View File

@ -36,6 +36,7 @@ export const useViewScopedStates = (args?: { customViewScopeId?: string }) => {
currentViewSortsState,
entityCountInCurrentViewState,
isViewBarExpandedState,
isPersistingViewState,
onViewFieldsChangeState,
onViewFiltersChangeState,
onViewSortsChangeState,
@ -67,6 +68,7 @@ export const useViewScopedStates = (args?: { customViewScopeId?: string }) => {
currentViewSortsState,
entityCountInCurrentViewState,
isViewBarExpandedState,
isPersistingViewState,
onViewFieldsChangeState,
onViewFiltersChangeState,
onViewSortsChangeState,

14
front/src/modules/views/hooks/internal/useViewSorts.ts
View File

@ -11,14 +11,10 @@ import { getViewScopedStateValuesFromSnapshot } from '@/views/utils/getViewScope
import { useViewScopedStates } from './useViewScopedStates';
export const useViewSorts = (viewScopeId: string) => {
const {
updateOneMutation,
createOneMutation,
deleteOneMutation,
findManyQuery,
} = useObjectMetadataItem({
objectNameSingular: 'viewSort',
});
const { updateOneMutation, createOneMutation, deleteOneMutation } =
useObjectMetadataItem({
objectNameSingular: 'viewSort',
});
const apolloClient = useApolloClient();
const { currentViewSortsState } = useViewScopedStates({
@ -59,7 +55,6 @@ export const useViewSorts = (viewScopeId: string) => {
direction: viewSort.direction,
},
},
refetchQueries: [findManyQuery],
}),
),
);
@ -132,7 +127,6 @@ export const useViewSorts = (viewScopeId: string) => {
apolloClient,
createOneMutation,
deleteOneMutation,
findManyQuery,
updateOneMutation,
viewScopeId,
],

8
front/src/modules/views/scopes/ViewScope.tsx
View File

@ -1,7 +1,7 @@
import { ReactNode } from 'react';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { ViewFilter } from '@/views/types/ViewFilter';
import { ViewSort } from '@/views/types/ViewSort';
import { ViewField } from '../types/ViewField';
@ -11,8 +11,8 @@ import { ViewScopeInternalContext } from './scope-internal-context/ViewScopeInte
type ViewScopeProps = {
children: ReactNode;
viewScopeId: string;
onViewSortsChange?: (sorts: Sort[]) => void | Promise<void>;
onViewFiltersChange?: (filters: Filter[]) => void | Promise<void>;
onViewSortsChange?: (sorts: ViewSort[]) => void | Promise<void>;
onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
};

8
front/src/modules/views/scopes/init-effect/ViewScopeInitEffect.tsx
View File

@ -1,15 +1,15 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { ViewField } from '@/views/types/ViewField';
import { ViewFilter } from '@/views/types/ViewFilter';
import { ViewSort } from '@/views/types/ViewSort';
type ViewScopeInitEffectProps = {
viewScopeId: string;
onViewSortsChange?: (sorts: Sort[]) => void | Promise<void>;
onViewFiltersChange?: (filters: Filter[]) => void | Promise<void>;
onViewSortsChange?: (sorts: ViewSort[]) => void | Promise<void>;
onViewFiltersChange?: (filters: ViewFilter[]) => void | Promise<void>;
onViewFieldsChange?: (fields: ViewField[]) => void | Promise<void>;
};

6
front/src/modules/views/states/isPersistingViewScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isPersistingViewScopedState = createScopedState<boolean>({
key: 'isPersistingViewScopedState',
defaultValue: false,
});

4
front/src/modules/views/states/onViewFiltersChangeScopedState.ts
View File

@ -1,8 +1,8 @@
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ViewFilter } from '@/views/types/ViewFilter';
export const onViewFiltersChangeScopedState = createScopedState<
((filters: Filter[]) => void | Promise<void>) | undefined
((filters: ViewFilter[]) => void | Promise<void>) | undefined
>({
key: 'onViewFiltersChangeScopedState',
defaultValue: undefined,

4
front/src/modules/views/states/onViewSortsChangeScopedState.ts
View File

@ -1,8 +1,8 @@
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ViewSort } from '@/views/types/ViewSort';
export const onViewSortsChangeScopedState = createScopedState<
((sorts: Sort[]) => void | Promise<void>) | undefined
((sorts: ViewSort[]) => void | Promise<void>) | undefined
>({
key: 'onViewSortsChangeScopedState',
defaultValue: undefined,

13
front/src/modules/views/types/GraphQLView.ts Normal file
View File

@ -0,0 +1,13 @@
import { PaginatedObjectTypeResults } from '@/object-record/types/PaginatedObjectTypeResults';
import { ViewField } from '@/views/types/ViewField';
import { ViewFilter } from '@/views/types/ViewFilter';
import { ViewSort } from '@/views/types/ViewSort';
export type GraphQLView = {
id: string;
name: string;
objectMetadataId: string;
viewFields: PaginatedObjectTypeResults<ViewField>;
viewFilters: PaginatedObjectTypeResults<ViewFilter>;
viewSorts: PaginatedObjectTypeResults<ViewSort>;
};

6
front/src/modules/views/types/View.ts
View File

@ -1 +1,5 @@
export type View = { id: string; name: string; objectMetadataId: string };
export type View = {
id: string;
name: string;
objectMetadataId: string;
};

2
front/src/modules/views/types/ViewFilter.ts
View File

@ -3,7 +3,7 @@ import { FilterDefinition } from '@/ui/object/object-filter-dropdown/types/Filte
import { ViewFilterOperand } from './ViewFilterOperand';
export type ViewFilter = {
id?: string;
id: string;
fieldMetadataId: string;
operand: ViewFilterOperand;
value: string;

2
front/src/modules/views/types/ViewSort.ts
View File

@ -2,7 +2,7 @@ import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefin
import { SortDirection } from '@/ui/object/object-sort-dropdown/types/SortDirection';
export type ViewSort = {
id?: string;
id: string;
fieldMetadataId: string;
direction: SortDirection;
definition: SortDefinition;

2
front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts
View File

@ -37,6 +37,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
currentViewSortsState,
entityCountInCurrentViewState,
isViewBarExpandedState,
isPersistingViewState,
onViewFieldsChangeState,
onViewFiltersChangeState,
onViewSortsChangeState,
@ -80,6 +81,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
entityCountInCurrentViewState,
),
isViewBarExpanded: getSnapshotValue(snapshot, isViewBarExpandedState),
isPersistingView: getSnapshotValue(snapshot, isPersistingViewState),
onViewFieldsChange: getSnapshotValue(snapshot, onViewFieldsChangeState),
onViewFiltersChange: getSnapshotValue(snapshot, onViewFiltersChangeState),
onViewSortsChange: getSnapshotValue(snapshot, onViewSortsChangeState),

2
front/src/modules/views/utils/getViewScopedStatesFromSnapshot.ts
View File

@ -37,6 +37,7 @@ export const getViewScopedStatesFromSnapshot = ({
currentViewSortsState,
entityCountInCurrentViewState,
isViewBarExpandedState,
isPersistingViewState,
onViewFieldsChangeState,
onViewFiltersChangeState,
onViewSortsChangeState,
@ -68,6 +69,7 @@ export const getViewScopedStatesFromSnapshot = ({
currentViewSortsState,
entityCountInCurrentViewState,
isViewBarExpandedState,
isPersistingViewState,
onViewFieldsChangeState,
onViewFiltersChangeState,
onViewSortsChangeState,

7
front/src/modules/views/utils/internal/getViewScopedStates.ts
View File

@ -2,6 +2,7 @@ import { getScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/getScope
import { getScopedSelector } from '@/ui/utilities/recoil-scope/utils/getScopedSelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';
import { availableFieldDefinitionsScopedState } from '../../states/availableFieldDefinitionsScopedState';
@ -59,6 +60,11 @@ export const getViewScopedStates = ({
viewScopeId,
);
const isPersistingViewState = getScopedState(
isPersistingViewScopedState,
viewScopeId,
);
// ViewSorts
const currentViewSortsState = getScopedFamilyState(
currentViewSortsScopedFamilyState,
@ -170,6 +176,7 @@ export const getViewScopedStates = ({
currentViewSelector,
isViewBarExpandedState,
isPersistingViewState,
viewsState,
viewEditModeState,