admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improved optimistic rendering (#2649)

Browse Source
This commit is contained in:
Lucas Bordeau
2023-11-22 17:08:32 +01:00
committed by GitHub
parent 713eada9ef
commit ac2fedb148
6 changed files with 37 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/modules/activities/notes/hooks/useNotes.ts
View File

@ -1,7 +1,4 @@
import { Note } from '@/activities/types/Note';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
@ -14,15 +11,6 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
},
});
const { objectMetadataItem: activityObjectMetadataItem } =
useObjectMetadataItem({
objectNameSingular: 'activity',
});
const { registerOptimisticEffect } = useOptimisticEffect({
objectNameSingular: activityObjectMetadataItem?.nameSingular,
});
const filter = {
id: {
in: activityTargets?.map((activityTarget) => activityTarget.activityId),
@ -38,16 +26,6 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
objectNamePlural: 'activities',
filter,
orderBy,
onCompleted: () => {
if (activityObjectMetadataItem) {
registerOptimisticEffect({
variables: { orderBy, filter },
definition: getRecordOptimisticEffectDefinition({
objectMetadataItem: activityObjectMetadataItem,
}),
});
}
},
});
return {

58
front/src/modules/activities/tasks/hooks/useTasks.ts
View File

@ -2,9 +2,6 @@ import { DateTime } from 'luxon';
import { Activity } from '@/activities/types/Activity';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { parseDate } from '~/utils/date-utils';
@ -21,15 +18,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
},
});
const { objectMetadataItem: activityObjectMetadataItem } =
useObjectMetadataItem({
objectNameSingular: 'activity',
});
const { registerOptimisticEffect } = useOptimisticEffect({
objectNameSingular: activityObjectMetadataItem?.nameSingular,
});
const { objects: completeTasksData } = useFindManyObjectRecords({
objectNamePlural: 'activities',
skip: !entity && !selectedFilter,
@ -43,29 +31,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
orderBy: {
createdAt: 'DescNullsFirst',
},
onCompleted: () => {
if (activityObjectMetadataItem) {
registerOptimisticEffect({
variables: {
filter: {
completedAt: { is: 'NOT_NULL' },
id: {
in: activityTargets?.map(
(activityTarget) => activityTarget.activityId,
),
},
type: { eq: 'Task' },
},
orderBy: {
createdAt: 'DescNullsFirst',
},
},
definition: getRecordOptimisticEffectDefinition({
objectMetadataItem: activityObjectMetadataItem,
}),
});
}
},
});
const { objects: incompleteTaskData } = useFindManyObjectRecords({
@ -81,29 +46,6 @@ export const useTasks = (entity?: ActivityTargetableEntity) => {
orderBy: {
createdAt: 'DescNullsFirst',
},
onCompleted: () => {
if (activityObjectMetadataItem) {
registerOptimisticEffect({
variables: {
filter: {
completedAt: { is: 'NULL' },
id: {
in: activityTargets?.map(
(activityTarget) => activityTarget.activityId,
),
},
type: { eq: 'Task' },
},
orderBy: {
createdAt: 'DescNullsFirst',
},
},
definition: getRecordOptimisticEffectDefinition({
objectMetadataItem: activityObjectMetadataItem,
}),
});
}
},
});
const todayOrPreviousTasks = incompleteTaskData?.filter((task) => {

6
front/src/modules/object-record/hooks/useCreateOneObjectRecord.ts
View File

@ -36,10 +36,8 @@ export const useCreateOneObjectRecord = <T>({
});
triggerOptimisticEffects(
`${capitalize(foundObjectMetadataItem.nameSingular)}Edge`,
createdObject.data[
`create${capitalize(foundObjectMetadataItem.nameSingular)}`
],
`${capitalize(objectNameSingular)}Edge`,
createdObject.data[`create${capitalize(objectNameSingular)}`],
);
return createdObject.data[`create${capitalize(objectNameSingular)}`] as T;
};

15
front/src/modules/object-record/hooks/useDeleteOneObjectRecord.ts
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useMutation } from '@apollo/client';
import { getOperationName } from '@apollo/client/utilities';
import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
import { capitalize } from '~/utils/string/capitalize';
@ -9,10 +9,11 @@ import { capitalize } from '~/utils/string/capitalize';
export const useDeleteOneObjectRecord = <T>({
objectNameSingular,
}: Pick<ObjectMetadataItemIdentifier, 'objectNameSingular'>) => {
const { performOptimisticEvict } = useOptimisticEvict();
const {
objectMetadataItem: foundObjectMetadataItem,
objectNotFoundInMetadata,
findManyQuery,
deleteOneMutation,
} = useObjectMetadataItem({
objectNameSingular,
@ -31,12 +32,18 @@ export const useDeleteOneObjectRecord = <T>({
variables: {
idToDelete,
},
refetchQueries: [getOperationName(findManyQuery) ?? ''],
});
performOptimisticEvict(capitalize(objectNameSingular), 'id', idToDelete);
return deletedObject.data[`create${capitalize(objectNameSingular)}`] as T;
},
[foundObjectMetadataItem, mutate, objectNameSingular, findManyQuery],
[
performOptimisticEvict,
foundObjectMetadataItem,
mutate,
objectNameSingular,
],
);
return {

18
front/src/modules/object-record/hooks/useFindManyObjectRecords.ts
View File

@ -4,8 +4,10 @@ import { isNonEmptyArray } from '@apollo/client/utilities';
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilState } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
import { getRecordOptimisticEffectDefinition } from '@/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { logError } from '~/utils/logError';
import { capitalize } from '~/utils/string/capitalize';
@ -53,6 +55,10 @@ export const useFindManyObjectRecords = <
objectNamePlural,
});
const { registerOptimisticEffect } = useOptimisticEffect({
objectNameSingular: objectMetadataItem?.nameSingular,
});
const { enqueueSnackBar } = useSnackBar();
const { data, loading, error, fetchMore } = useQuery<
@ -64,6 +70,18 @@ export const useFindManyObjectRecords = <
orderBy: orderBy ?? {},
},
onCompleted: (data) => {
if (objectMetadataItem) {
registerOptimisticEffect({
variables: {
filter: filter ?? {},
orderBy: orderBy ?? {},
},
definition: getRecordOptimisticEffectDefinition({
objectMetadataItem,
}),
});
}
if (objectNamePlural) {
onCompleted?.(data[objectNamePlural]);

6
front/src/modules/object-record/hooks/useUpdateOneObjectRecord.ts
View File

@ -36,6 +36,12 @@ export const useUpdateOneObjectRecord = <T>({
...input,
},
},
optimisticResponse: {
[`update${capitalize(objectNameSingular)}`]: {
id: idToUpdate,
...input,
},
},
});
return updatedObject.data[`update${capitalize(objectNameSingular)}`] as T;