admin/twenty
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

65
front/src/modules/favorites/hooks/useFavorites.ts
View File

@ -1,10 +1,8 @@
import { useState } from 'react';
import { useApolloClient } from '@apollo/client';
import { OnDragEndResponder } from '@hello-pangea/dnd';
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { Company } from '@/companies/types/Company';
import { Favorite } from '@/favorites/types/Favorite';
import { mapFavorites } from '@/favorites/utils/mapFavorites';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@ -35,55 +33,7 @@ export const useFavorites = ({
const apolloClient = useApolloClient();
const [allCompanies, setAllCompanies] = useState<
Record<string, { name: string; domainName?: string }>
>({});
const [allPeople, setAllPeople] = useState<
Record<string, { firstName: string; lastName: string; avatarUrl?: string }>
>({});
// This is only temporary and will be refactored once we have main identifiers
const { loading: companiesLoading } = useFindManyObjectRecords({
objectNamePlural: 'companies',
onCompleted: async (
data: PaginatedObjectTypeResults<Required<Company>>,
) => {
setAllCompanies(
data.edges.reduce(
(acc, { node: company }) => ({
...acc,
[company.id]: {
name: company.name,
domainName: company.domainName,
},
}),
{},
),
);
},
});
const { loading: peopleLoading } = useFindManyObjectRecords({
objectNamePlural: 'people',
onCompleted: async (data) => {
setAllPeople(
data.edges.reduce(
(acc, { node: person }) => ({
...acc,
[person.id]: {
firstName: person.firstName,
lastName: person.lastName,
avatarUrl: person.avatarUrl,
},
}),
{},
),
);
},
});
useFindManyObjectRecords({
skip: companiesLoading || peopleLoading,
objectNamePlural: 'favorites',
onCompleted: useRecoilCallback(
({ snapshot, set }) =>
@ -92,17 +42,13 @@ export const useFavorites = ({
const queriedFavorites = mapFavorites(
data.edges.map((edge) => edge.node),
{
...allCompanies,
...allPeople,
},
);
if (!isDeeplyEqual(favorites, queriedFavorites)) {
set(favoritesState, queriedFavorites);
}
},
[allCompanies, allPeople],
[],
),
});
@ -125,25 +71,20 @@ export const useFavorites = ({
},
});
const createdFavorite = result?.data?.createFavoriteV2;
const createdFavorite = result?.data?.createFavorite;
const newFavorite = {
...additionalData,
...createdFavorite,
};
const newFavoritesMapped = mapFavorites([newFavorite], {
...allCompanies,
...allPeople,
});
const newFavoritesMapped = mapFavorites([newFavorite]);
if (createdFavorite) {
set(favoritesState, [...favorites, ...newFavoritesMapped]);
}
},
[
allCompanies,
allPeople,
apolloClient,
createOneMutation,
currentWorkspaceMember,

60
front/src/modules/favorites/utils/mapFavorites.ts
View File

@ -1,48 +1,30 @@
import { Company } from '@/companies/types/Company';
import { Person } from '@/people/types/Person';
import { getLogoUrlFromDomainName } from '~/utils';
import { assertNotNull } from '~/utils/assert';
import { isDefined } from '~/utils/isDefined';
export const mapFavorites = (
favorites: any,
recordsDict: {
[key: string]: {
firstName?: Person['name']['firstName'];
lastName?: Person['name']['lastName'];
avatarUrl?: Person['avatarUrl'];
name?: Company['name'];
domainName?: Company['domainName'];
};
},
) => {
export const mapFavorites = (favorites: any) => {
return favorites
.map((favorite: any) => {
const recordInformation =
isDefined(favorite?.person) &&
isDefined(recordsDict[favorite.person.id])
? {
id: favorite.person.id,
labelIdentifier:
recordsDict[favorite.person.id].firstName +
' ' +
recordsDict[favorite.person.id].lastName,
avatarUrl: recordsDict[favorite.person.id].avatarUrl,
avatarType: 'rounded',
link: `/object/personV2/${favorite.person.id}`,
}
: isDefined(favorite?.company) &&
isDefined(recordsDict[favorite.company.id])
? {
id: favorite.company.id,
labelIdentifier: recordsDict[favorite.company.id].name,
avatarUrl: getLogoUrlFromDomainName(
recordsDict[favorite.company.id].domainName ?? '',
),
avatarType: 'squared',
link: `/object/companyV2/${favorite.company.id}`,
}
: undefined;
const recordInformation = isDefined(favorite?.person)
? {
id: favorite.person.id,
labelIdentifier:
favorite.person.name.firstName +
' ' +
favorite.person.name.lastName,
avatarUrl: favorite.person.avatarUrl,
avatarType: 'rounded',
link: `/object/person/${favorite.person.id}`,
}
: isDefined(favorite?.company)
? {
id: favorite.company.id,
labelIdentifier: favorite.company.name,
avatarUrl: getLogoUrlFromDomainName(favorite.company.domainName),
avatarType: 'squared',
link: `/object/company/${favorite.company.id}`,
}
: undefined;
return {
...recordInformation,

5
front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx
View File

@ -42,7 +42,8 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
) {
return {
id: record.id,
name: record.name.firstName + ' ' + record.name.lastName,
name:
(record.name?.firstName ?? '') + ' ' + (record.name?.lastName ?? ''),
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record: record,
@ -52,7 +53,7 @@ export const ObjectMetadataItemsRelationPickerEffect = () => {
if (['opportunity'].includes(objectMetadataItemSingularName)) {
return {
id: record.id,
name: record.company.name,
name: record?.company?.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
record: record,

7
front/src/modules/settings/data-model/hooks/useRelationFieldPreview.ts
View File

@ -20,10 +20,15 @@ export const useRelationFieldPreview = ({
skip: skipDefaultValue || !relationObjectMetadataItem,
});
const mockValueName = capitalize(
relationObjectMetadataItem?.nameSingular ?? '',
);
return {
relationObjectMetadataItem,
defaultValue: relationObjects?.[0] ?? {
name: capitalize(relationObjectMetadataItem?.nameSingular ?? ''),
company: { name: mockValueName }, // Temporary mock for opportunities, this needs to be replaced once labelIdentifiers are implemented
name: mockValueName,
},
};
};

42
front/src/modules/ui/object/record-table/components/RecordTable.tsx
View File

@ -1,17 +1,12 @@
import { useRef } from 'react';
import styled from '@emotion/styled';
import { RecordTableInternalEffect } from '@/ui/object/record-table/components/RecordTableInternalEffect';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import {
useListenClickOutside,
useListenClickOutsideByClassName,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { RecordTableBody } from './RecordTableBody';
import { RecordTableHeader } from './RecordTableHeader';
@ -82,37 +77,7 @@ type RecordTableProps = {
export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const {
leaveTableFocus,
setRowSelectedState,
resetTableRowSelection,
useMapKeyboardToSoftFocus,
} = useRecordTable();
useMapKeyboardToSoftFocus();
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
},
});
useScopedHotkeys(
'escape',
() => {
resetTableRowSelection();
},
TableHotkeyScope.Table,
);
useListenClickOutsideByClassName({
classNames: ['entity-table-cell'],
excludeClassNames: ['action-bar', 'context-menu'],
callback: () => {
resetTableRowSelection();
},
});
const { resetTableRowSelection, setRowSelectedState } = useRecordTable();
return (
<ScrollWrapper>
@ -130,6 +95,7 @@ export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
onDragSelectionChange={setRowSelectedState}
/>
</div>
<RecordTableInternalEffect tableBodyRef={tableBodyRef} />
</StyledTableContainer>
</StyledTableWithHeader>
</EntityUpdateMutationContext.Provider>

45
front/src/modules/ui/object/record-table/components/RecordTableInternalEffect.tsx Normal file
View File

@ -0,0 +1,45 @@
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { TableHotkeyScope } from '@/ui/object/record-table/types/TableHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import {
useListenClickOutside,
useListenClickOutsideByClassName,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
type RecordTableInternalEffectProps = {
tableBodyRef: React.RefObject<HTMLDivElement>;
};
export const RecordTableInternalEffect = ({
tableBodyRef,
}: RecordTableInternalEffectProps) => {
const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
useRecordTable();
useMapKeyboardToSoftFocus();
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
},
});
useScopedHotkeys(
'escape',
() => {
resetTableRowSelection();
},
TableHotkeyScope.Table,
);
useListenClickOutsideByClassName({
classNames: ['entity-table-cell'],
excludeClassNames: ['action-bar', 'context-menu'],
callback: () => {
resetTableRowSelection();
},
});
return <></>;
};

4
front/src/modules/ui/object/record-table/hooks/useRecordTable.ts
View File

@ -18,7 +18,6 @@ import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
import { useGetIsSomeCellInEditMode } from './internal/useGetIsSomeCellInEditMode';
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
@ -99,8 +98,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const leaveTableFocus = useLeaveTableFocus();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
@ -308,7 +305,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setRecordTableData,
setTableColumns,
leaveTableFocus,
getIsSomeCellInEditMode,
setRowSelectedState,
resetTableRowSelection,
upsertRecordTableItem,

4
front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -5,11 +5,11 @@ import { IconArrowUpRight } from '@/ui/display/icon';
import { useGetButtonIcon } from '@/ui/object/field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '@/ui/object/field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly';
import { useGetIsSomeCellInEditMode } from '@/ui/object/record-table/hooks/internal/useGetIsSomeCellInEditMode';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useRecordTable } from '../../hooks/useRecordTable';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
@ -57,7 +57,7 @@ export const TableCellContainer = ({
}: TableCellContainerProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
const { getIsSomeCellInEditMode } = useRecordTable();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const [isHovered, setIsHovered] = useState(false);

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,