From a3184dcc2f03318278d70365d7361d58ecc924bc Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 5 Apr 2024 20:30:16 +0200 Subject: [PATCH] Used query fields for record table and record board (#4857) - Added two hooks for computing query keys for index table and index board. - Using query keys for findManyRecords on index table and index board --- .../getObjectMetadataIdentifierFields.ts | 20 +++++++ .../components/RecordIndexContainer.tsx | 4 +- .../RecordIndexTableContainerEffect.tsx | 4 +- .../hooks/useLoadRecordIndexBoard.ts | 11 +++- .../hooks/useLoadRecordIndexTable.ts | 8 ++- .../hooks/useRecordBoardQueryFields.ts | 52 +++++++++++++++++++ .../hooks/useRecordTableQueryFields.ts | 18 +++++++ 7 files changed, 109 insertions(+), 8 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts new file mode 100644 index 000000000..65d4e41ee --- /dev/null +++ b/packages/twenty-front/src/modules/object-metadata/utils/getObjectMetadataIdentifierFields.ts @@ -0,0 +1,20 @@ +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem'; + +export const getObjectMetadataIdentifierFields = ({ + objectMetadataItem, +}: { + objectMetadataItem: ObjectMetadataItem; +}) => { + const labelIdentifierFieldMetadataItem = + getLabelIdentifierFieldMetadataItem(objectMetadataItem); + + const imageIdentifierFieldMetadataItem = objectMetadataItem.fields.find( + (field) => field.id === objectMetadataItem.imageIdentifierFieldMetadataId, + ); + + return { + labelIdentifierFieldMetadataItem, + imageIdentifierFieldMetadataItem, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 3fceb3f2c..9d15808cc 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; import { RecordIndexBoardContainer } from '@/object-record/record-index/components/RecordIndexBoardContainer'; import { RecordIndexBoardContainerEffect } from '@/object-record/record-index/components/RecordIndexBoardContainerEffect'; @@ -53,7 +53,7 @@ export const RecordIndexContainer = ({ objectNamePlural, }); - const { objectMetadataItem } = useObjectMetadataItem({ + const { objectMetadataItem } = useObjectMetadataItemOnly({ objectNameSingular, }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx index 6677d0426..10fc39632 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar'; import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleColumnFilter'; import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort'; @@ -31,7 +31,7 @@ export const RecordIndexTableContainerEffect = ({ recordTableId, }); - const { objectMetadataItem } = useObjectMetadataItem({ + const { objectMetadataItem } = useObjectMetadataItemOnly({ objectNameSingular, }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts index 8e58e3448..14bcdad20 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts @@ -1,11 +1,12 @@ import { useEffect } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy'; import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard'; import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter'; +import { useRecordBoardQueryFields } from '@/object-record/record-index/hooks/useRecordBoardQueryFields'; import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState'; import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState'; import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState'; @@ -24,7 +25,7 @@ export const useLoadRecordIndexBoard = ({ viewBarId, recordBoardId, }: UseLoadRecordIndexBoardProps) => { - const { objectMetadataItem } = useObjectMetadataItem({ + const { objectMetadataItem } = useObjectMetadataItemOnly({ objectNameSingular, }); const { @@ -55,6 +56,11 @@ export const useLoadRecordIndexBoard = ({ recordIndexIsCompactModeActiveState, ); + const queryFields = useRecordBoardQueryFields({ + objectMetadataItem, + recordBoardId, + }); + const { records, totalCount, @@ -65,6 +71,7 @@ export const useLoadRecordIndexBoard = ({ objectNameSingular, filter: requestFilters, orderBy, + queryFields, }); const { setRecordCountInCurrentView } = diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index 52f4a1a6d..ca616895b 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts @@ -1,10 +1,11 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState.ts'; -import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; +import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy'; import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter'; +import { useRecordTableQueryFields } from '@/object-record/record-index/hooks/useRecordTableQueryFields'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies'; @@ -13,7 +14,7 @@ export const useFindManyParams = ( objectNameSingular: string, recordTableId?: string, ) => { - const { objectMetadataItem } = useObjectMetadataItem({ + const { objectMetadataItem } = useObjectMetadataItemOnly({ objectNameSingular, }); @@ -48,6 +49,8 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { const currentWorkspace = useRecoilValue(currentWorkspaceState); const params = useFindManyParams(objectNameSingular); + const queryFields = useRecordTableQueryFields(); + const { records, loading, @@ -56,6 +59,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { queryStateIdentifier, } = useFindManyRecords({ ...params, + queryFields, onCompleted: () => { setLastRowVisible(false); setIsRecordTableInitialLoading(false); diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts new file mode 100644 index 000000000..7d1294ab6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordBoardQueryFields.ts @@ -0,0 +1,52 @@ +import { useRecoilValue } from 'recoil'; + +import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { getObjectMetadataIdentifierFields } from '@/object-metadata/utils/getObjectMetadataIdentifierFields'; +import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates'; +import { isDefined } from '~/utils/isDefined'; + +export const useRecordBoardQueryFields = ({ + objectMetadataItem, + recordBoardId, +}: { + recordBoardId: string; + objectMetadataItem: ObjectMetadataItem; +}) => { + const { kanbanFieldMetadataNameState, visibleFieldDefinitionsState } = + useRecordBoardStates(recordBoardId); + + const { imageIdentifierFieldMetadataItem, labelIdentifierFieldMetadataItem } = + getObjectMetadataIdentifierFields({ objectMetadataItem }); + + const kanbanFieldMetadataName = useRecoilValue(kanbanFieldMetadataNameState); + const visibleFieldDefinitions = useRecoilValue( + visibleFieldDefinitionsState(), + ); + + const identifierQueryFields: Record = {}; + + if (isDefined(labelIdentifierFieldMetadataItem)) { + identifierQueryFields[labelIdentifierFieldMetadataItem.name] = true; + } + + if (isDefined(imageIdentifierFieldMetadataItem)) { + identifierQueryFields[imageIdentifierFieldMetadataItem.name] = true; + } + + const queryFields: Record = { + id: true, + ...Object.fromEntries( + visibleFieldDefinitions.map((visibleFieldDefinition) => [ + visibleFieldDefinition.metadata.fieldName, + true, + ]), + ), + ...identifierQueryFields, + }; + + if (isDefined(kanbanFieldMetadataName)) { + queryFields[kanbanFieldMetadataName] = true; + } + + return queryFields; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts new file mode 100644 index 000000000..4b0351407 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordTableQueryFields.ts @@ -0,0 +1,18 @@ +import { useRecoilValue } from 'recoil'; + +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; + +export const useRecordTableQueryFields = () => { + const { visibleTableColumnsSelector } = useRecordTableStates(); + + const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector()); + + const queryFields: Record = { + id: true, + ...Object.fromEntries( + visibleTableColumns.map((column) => [column.metadata.fieldName, true]), + ), + }; + + return queryFields; +};