Improve Performances of FE by reducing first print queries (#2623)
This commit is contained in:
Charles Bochet
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user