Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests
This commit is contained in:
Charles Bochet
2024-03-20 14:21:58 +01:00
committed by GitHub
parent 20e14cb455
commit cfb0cce9b8
392 changed files with 3474 additions and 4410 deletions

View File

@ -2,9 +2,9 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const availableFieldDefinitionsScopedState = createComponentState<
export const availableFieldDefinitionsComponentState = createComponentState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'availableFieldDefinitionsScopedState',
key: 'availableFieldDefinitionsComponentState',
defaultValue: [],
});

View File

@ -1,9 +1,9 @@
import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const availableFilterDefinitionsScopedState = createComponentState<
export const availableFilterDefinitionsComponentState = createComponentState<
FilterDefinition[]
>({
key: 'availableFilterDefinitionsScopedState',
key: 'availableFilterDefinitionsComponentState',
defaultValue: [],
});

View File

@ -1,9 +1,9 @@
import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const availableSortDefinitionsScopedState = createComponentState<
export const availableSortDefinitionsComponentState = createComponentState<
SortDefinition[]
>({
key: 'availableSortDefinitionsScopedState',
key: 'availableSortDefinitionsComponentState',
defaultValue: [],
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewField } from '../types/ViewField';
export const currentViewFieldsScopedFamilyState = createComponentFamilyState<
ViewField[],
string
>({
key: 'currentViewFieldsScopedFamilyState',
defaultValue: [],
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewFilter } from '../types/ViewFilter';
export const currentViewFiltersScopedFamilyState = createComponentFamilyState<
ViewFilter[],
string
>({
key: 'currentViewFiltersScopedFamilyState',
defaultValue: [],
});

View File

@ -1,8 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const currentViewIdScopedState = createComponentState<
export const currentViewIdComponentState = createComponentState<
string | undefined
>({
key: 'currentViewIdScopedState',
key: 'currentViewIdComponentState',
defaultValue: undefined,
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewSort } from '../types/ViewSort';
export const currentViewSortsScopedFamilyState = createComponentFamilyState<
ViewSort[],
string
>({
key: 'currentViewSortsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,7 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const entityCountInCurrentViewComponentState =
createComponentState<number>({
key: 'entityCountInCurrentViewComponentState',
defaultValue: 0,
});

View File

@ -1,8 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const entityCountInCurrentViewScopedState = createComponentState<number>(
{
key: 'entityCountInCurrentViewScopedState',
defaultValue: 0,
},
);

View File

@ -0,0 +1,7 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const isCurrentViewKeyIndexComponentState =
createComponentState<boolean>({
key: 'isCurrentViewKeyIndexComponentState',
defaultValue: true,
});

View File

@ -0,0 +1,7 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const isPersistingViewFieldsComponentState =
createComponentState<boolean>({
key: 'isPersistingViewFieldsComponentState',
defaultValue: false,
});

View File

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

View File

@ -1,6 +1,6 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const isViewBarExpandedScopedState = createComponentState<boolean>({
key: 'isViewBarExpandedScopedState',
export const isViewBarExpandedComponentState = createComponentState<boolean>({
key: 'isViewBarExpandedComponentState',
defaultValue: true,
});

View File

@ -1,6 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
export const noneScopedFamilyState = createComponentFamilyState<any, string>({
key: 'noneScopedFamilyState',
defaultValue: null,
});

View File

@ -0,0 +1,9 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { GraphQLView } from '@/views/types/GraphQLView';
export const onCurrentViewChangeComponentState = createComponentState<
((view: GraphQLView | undefined) => void | Promise<void>) | undefined
>({
key: 'onCurrentViewChangeComponentState',
defaultValue: undefined,
});

View File

@ -1,8 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const onViewCompactModeChangeScopeState = createComponentState<
((isCompactModeActive: boolean) => void | Promise<void>) | undefined
>({
key: 'onViewCompactModeChangeScopeState',
defaultValue: undefined,
});

View File

@ -1,10 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewField } from '../types/ViewField';
export const onViewFieldsChangeScopedState = createComponentState<
((fields: ViewField[]) => void | Promise<void>) | undefined
>({
key: 'onViewFieldsChangeScopedState',
defaultValue: undefined,
});

View File

@ -1,9 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewFilter } from '@/views/types/ViewFilter';
export const onViewFiltersChangeScopedState = createComponentState<
((filters: ViewFilter[]) => void | Promise<void>) | undefined
>({
key: 'onViewFiltersChangeScopedState',
defaultValue: undefined,
});

View File

@ -1,9 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewSort } from '@/views/types/ViewSort';
export const onViewSortsChangeScopedState = createComponentState<
((sorts: ViewSort[]) => void | Promise<void>) | undefined
>({
key: 'onViewSortsChangeScopedState',
defaultValue: undefined,
});

View File

@ -1,9 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewType } from '@/views/types/ViewType';
export const onViewTypeChangeScopedState = createComponentState<
((viewType: ViewType) => void | Promise<void>) | undefined
>({
key: 'onViewTypeChangeScopedState',
defaultValue: undefined,
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewField } from '../types/ViewField';
export const savedViewFieldsScopedFamilyState = createComponentFamilyState<
ViewField[],
string
>({
key: 'savedViewFieldsScopedFamilyState',
defaultValue: [],
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewFilter } from '../types/ViewFilter';
export const savedViewFiltersScopedFamilyState = createComponentFamilyState<
ViewFilter[],
string
>({
key: 'savedViewFiltersScopedFamilyState',
defaultValue: [],
});

View File

@ -1,11 +0,0 @@
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
import { ViewSort } from '../types/ViewSort';
export const savedViewSortsScopedFamilyState = createComponentFamilyState<
ViewSort[],
string
>({
key: 'savedViewSortsScopedFamilyState',
defaultValue: [],
});

View File

@ -0,0 +1,21 @@
import { selectorFamily } from 'recoil';
import { unsavedToDeleteViewFilterIdsComponentState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentState';
import { unsavedToDeleteViewSortIdsComponentState } from '@/views/states/unsavedToDeleteViewSortIdsComponentState';
import { unsavedToUpsertViewFiltersComponentState } from '@/views/states/unsavedToUpsertViewFiltersComponentState';
import { unsavedToUpsertViewSortsComponentState } from '@/views/states/unsavedToUpsertViewSortsComponentState';
export const canPersistViewComponentSelector = selectorFamily({
key: 'canPersistViewComponentSelector',
get:
({ scopeId }: { scopeId: string }) =>
({ get }) => {
return (
get(unsavedToUpsertViewFiltersComponentState({ scopeId })).length > 0 ||
get(unsavedToUpsertViewSortsComponentState({ scopeId })).length > 0 ||
get(unsavedToDeleteViewFilterIdsComponentState({ scopeId })).length >
0 ||
get(unsavedToDeleteViewSortIdsComponentState({ scopeId })).length > 0
);
},
});

View File

@ -1,32 +0,0 @@
import { selectorFamily } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { currentViewFiltersScopedFamilyState } from '../currentViewFiltersScopedFamilyState';
import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
export const canPersistViewFiltersScopedFamilySelector = selectorFamily({
key: 'canPersistFiltersScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
return !isDeeplyEqual(
get(
savedViewFiltersScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
get(
currentViewFiltersScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
},
});

View File

@ -1,31 +0,0 @@
import { selectorFamily } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const canPersistViewSortsScopedFamilySelector = selectorFamily({
key: 'canPersistSortsScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
return !isDeeplyEqual(
get(
savedViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
get(
currentViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
},
});

View File

@ -0,0 +1,22 @@
import { selectorFamily } from 'recoil';
import { unsavedToDeleteViewFilterIdsComponentState } from '@/views/states/unsavedToDeleteViewFilterIdsComponentState';
import { unsavedToDeleteViewSortIdsComponentState } from '@/views/states/unsavedToDeleteViewSortIdsComponentState';
import { unsavedToUpsertViewFiltersComponentState } from '@/views/states/unsavedToUpsertViewFiltersComponentState';
import { unsavedToUpsertViewSortsComponentState } from '@/views/states/unsavedToUpsertViewSortsComponentState';
export const canResetViewComponentSelector = selectorFamily({
key: 'canResetViewComponentSelector',
get:
({ scopeId }: { scopeId: string }) =>
({ get }) => {
return (
get(unsavedToUpsertViewFiltersComponentState({ scopeId })).length ===
0 &&
get(unsavedToUpsertViewSortsComponentState({ scopeId })).length === 0 &&
get(unsavedToDeleteViewFilterIdsComponentState({ scopeId })).length ===
0 &&
get(unsavedToDeleteViewSortIdsComponentState({ scopeId })).length === 0
);
},
});

View File

@ -1,21 +0,0 @@
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
import { GraphQLView } from '@/views/types/GraphQLView';
import { currentViewIdScopedState } from '../currentViewIdScopedState';
import { viewsByIdScopedSelector } from './viewsByIdScopedSelector';
export const currentViewComponentSelector = createComponentReadOnlySelector<
GraphQLView | undefined
>({
key: 'currentViewScopedSelector',
get:
({ scopeId }: { scopeId: string }) =>
({ get }) => {
const currentViewId = get(currentViewIdScopedState({ scopeId: scopeId }));
return currentViewId
? get(viewsByIdScopedSelector(scopeId))[currentViewId]
: undefined;
},
});

View File

@ -1,32 +0,0 @@
import { selectorFamily } from 'recoil';
import { ViewField } from '@/views/types/ViewField';
import { savedViewFieldsScopedFamilyState } from '../savedViewFieldsScopedFamilyState';
export const savedViewFieldByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewFieldByKeyScopedFamilySelector',
get:
({
viewScopeId,
viewId,
}: {
viewScopeId: string;
viewId: string | undefined;
}) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewFieldsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
).reduce<Record<string, ViewField>>(
(result, column) => ({ ...result, [column.fieldMetadataId]: column }),
{},
);
},
});

View File

@ -1,25 +0,0 @@
import { selectorFamily } from 'recoil';
import { ViewFilter } from '@/views/types/ViewFilter';
import { savedViewFiltersScopedFamilyState } from '../savedViewFiltersScopedFamilyState';
export const savedViewFiltersByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewFiltersByKeyScopedFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewFiltersScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
).reduce<Record<string, ViewFilter>>(
(result, filter) => ({ ...result, [filter.fieldMetadataId]: filter }),
{},
);
},
});

View File

@ -1,25 +0,0 @@
import { selectorFamily } from 'recoil';
import { ViewSort } from '@/views/types/ViewSort';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const savedViewSortsByKeyScopedFamilySelector = selectorFamily({
key: 'savedViewSortsByKeyScopedFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string | undefined }) =>
({ get }) => {
if (viewId === undefined) {
return undefined;
}
return get(
savedViewSortsScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
).reduce<Record<string, ViewSort>>(
(result, sort) => ({ ...result, [sort.fieldMetadataId]: sort }),
{},
);
},
});

View File

@ -1,16 +0,0 @@
import { selectorFamily } from 'recoil';
import { savedViewSortsScopedFamilyState } from '../savedViewSortsScopedFamilyState';
export const savedViewSortsFamilySelector = selectorFamily({
key: 'savedViewSortsFamilySelector',
get:
({ scopeId, viewId }: { scopeId: string; viewId: string }) =>
({ get }) =>
get(
savedViewSortsScopedFamilyState({
scopeId: scopeId,
familyKey: viewId,
}),
),
});

View File

@ -1,18 +0,0 @@
import { selectorFamily } from 'recoil';
import { GraphQLView } from '@/views/types/GraphQLView';
import { viewsScopedState } from '../viewsScopedState';
export const viewsByIdScopedSelector = selectorFamily<
Record<string, GraphQLView>,
string
>({
key: 'viewsByIdScopedSelector',
get:
(scopeId) =>
({ get }) =>
get(viewsScopedState({ scopeId: scopeId })).reduce<
Record<string, GraphQLView>
>((result, view) => ({ ...result, [view.id]: view }), {}),
});

View File

@ -0,0 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const unsavedToDeleteViewFilterIdsComponentState = createComponentState<
string[]
>({
key: 'unsavedToDeleteViewFilterIdsComponentState',
defaultValue: [],
});

View File

@ -0,0 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const unsavedToDeleteViewSortIdsComponentState = createComponentState<
string[]
>({
key: 'unsavedToDeleteViewSortIdsComponentState',
defaultValue: [],
});

View File

@ -0,0 +1,10 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewFilter } from '../types/ViewFilter';
export const unsavedToUpsertViewFiltersComponentState = createComponentState<
ViewFilter[]
>({
key: 'unsavedToUpsertViewFiltersComponentState',
defaultValue: [],
});

View File

@ -0,0 +1,10 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewSort } from '../types/ViewSort';
export const unsavedToUpsertViewSortsComponentState = createComponentState<
ViewSort[]
>({
key: 'unsavedToUpsertViewSortsComponentState',
defaultValue: [],
});

View File

@ -1,8 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const viewEditModeScopedState = createComponentState<
export const viewEditModeComponentState = createComponentState<
'none' | 'edit' | 'create'
>({
key: 'viewEditModeScopedState',
key: 'viewEditModeComponentState',
defaultValue: 'none',
});

View File

@ -1,8 +1,8 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
export const viewObjectMetadataIdScopeState = createComponentState<
export const viewObjectMetadataIdComponentState = createComponentState<
string | undefined
>({
key: 'viewObjectMetadataIdScopeState',
key: 'viewObjectMetadataIdComponentState',
defaultValue: undefined,
});

View File

@ -1,8 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { ViewType } from '../types/ViewType';
export const viewTypeScopedState = createComponentState<ViewType>({
key: 'viewTypeScopedState',
defaultValue: ViewType.Table,
});

View File

@ -1,7 +0,0 @@
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
import { GraphQLView } from '@/views/types/GraphQLView';
export const viewsScopedState = createComponentState<GraphQLView[]>({
key: 'viewsScopedState',
defaultValue: [],
});