From 7d068095cdb9c3d3012c8281b49cf4d99a55344e Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Tue, 11 Jun 2024 22:30:38 +0200 Subject: [PATCH] Fix of board request fix PR (#5829) Fix again board requests as first merged PR appears to have missing commits / code. https://github.com/twentyhq/twenty/pull/5819 --- .../object-record/hooks/useFindManyRecords.ts | 1 + .../hooks/internal/useRecordBoardStates.ts | 5 ++ .../record-board/hooks/useRecordBoard.ts | 2 + .../components/RecordBoardCard.tsx | 4 +- .../RecordBoardColumnFetchMoreLoader.tsx | 7 ++- ...BoardFetchingRecordsByColumnFamilyState.ts | 7 +++ .../RecordIndexBoardColumnLoaderEffect.tsx | 63 ++++++++++++++----- .../hooks/useLoadRecordIndexBoardColumn.ts | 21 ++++--- .../record-store/hooks/useSetRecordInStore.ts | 4 +- 9 files changed, 85 insertions(+), 29 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts index 54befcecb..befc85849 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts @@ -240,5 +240,6 @@ export const useFindManyRecords = ({ error, fetchMoreRecords, queryStateIdentifier: findManyQueryStateIdentifier, + hasNextPage, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts index c81c341a0..aece94d48 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts @@ -3,6 +3,7 @@ import { isFirstRecordBoardColumnComponentFamilyState } from '@/object-record/re import { isLastRecordBoardColumnComponentFamilyState } from '@/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState'; import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState'; +import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState'; import { isRecordBoardFetchingRecordsComponentState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsComponentState'; import { recordBoardColumnIdsComponentState } from '@/object-record/record-board/states/recordBoardColumnIdsComponentState'; import { recordBoardFieldDefinitionsComponentState } from '@/object-record/record-board/states/recordBoardFieldDefinitionsComponentState'; @@ -42,6 +43,10 @@ export const useRecordBoardStates = (recordBoardId?: string) => { isRecordBoardFetchingRecordsComponentState, scopeId, ), + isFetchingRecordsByColumnState: extractComponentFamilyState( + isRecordBoardFetchingRecordsByColumnFamilyState, + scopeId, + ), columnIdsState: extractComponentState( recordBoardColumnIdsComponentState, scopeId, diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts index b516e6dc7..755703d0e 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts @@ -14,6 +14,7 @@ export const useRecordBoard = (recordBoardId?: string) => { isCompactModeActiveState, kanbanFieldMetadataNameState, shouldFetchMoreSelector, + isFetchingRecordsByColumnState, } = useRecordBoardStates(recordBoardId); const { setColumns } = useSetRecordBoardColumns(recordBoardId); @@ -37,5 +38,6 @@ export const useRecordBoard = (recordBoardId?: string) => { isCompactModeActiveState, shouldFetchMoreSelector, setRecordIdsForColumn, + isFetchingRecordsByColumnState, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 5f1c139d2..9b695a3f3 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -23,7 +23,6 @@ import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox'; import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState'; import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState'; import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut'; -import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; const StyledBoardCard = styled.div<{ selected: boolean }>` @@ -200,7 +199,6 @@ export const RecordBoardCard = () => { }; const scrollWrapperRef = useContext(ScrollWrapperContext); - const { isDragSelectionStartEnabled } = useDragSelect(); const { ref: cardRef, inView } = useInView({ root: scrollWrapperRef.current, @@ -280,7 +278,7 @@ export const RecordBoardCard = () => { hotkeyScope: InlineCellHotkeyScope.InlineCell, }} > - {inView || isDragSelectionStartEnabled() ? ( + {inView ? ( ) : ( diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx index 447eb6ae1..7a610c3dd 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx @@ -19,9 +19,12 @@ const StyledText = styled.div` export const RecordBoardColumnFetchMoreLoader = () => { const { columnDefinition } = useContext(RecordBoardColumnContext); - const { isFetchingRecordState, shouldFetchMoreInColumnFamilyState } = + const { shouldFetchMoreInColumnFamilyState, isFetchingRecordsByColumnState } = useRecordBoardStates(); - const isFetchingRecord = useRecoilValue(isFetchingRecordState); + + const isFetchingRecord = useRecoilValue( + isFetchingRecordsByColumnState({ columnId: columnDefinition.id }), + ); const setShouldFetchMore = useSetRecoilState( shouldFetchMoreInColumnFamilyState(columnDefinition.id), diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts new file mode 100644 index 000000000..dfaaffc0e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isRecordBoardFetchingRecordsByColumnFamilyState = + createComponentFamilyState({ + key: 'isRecordBoardFetchingRecordsByColumnFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx index b97e6e3a6..804df9806 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx @@ -1,8 +1,10 @@ import { useEffect } from 'react'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; -import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard'; +import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState'; +import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object-record/record-board/states/recordBoardShouldFetchMoreInColumnComponentFamilyState'; import { useLoadRecordIndexBoardColumn } from '@/object-record/record-index/hooks/useLoadRecordIndexBoardColumn'; +import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; export const RecordIndexBoardColumnLoaderEffect = ({ objectNameSingular, @@ -17,23 +19,54 @@ export const RecordIndexBoardColumnLoaderEffect = ({ boardFieldMetadataId: string | null; columnId: string; }) => { - const { shouldFetchMoreSelector } = useRecordBoard(recordBoardId); + const [shouldFetchMore, setShouldFetchMore] = useRecoilState( + recordBoardShouldFetchMoreInColumnComponentFamilyState({ + scopeId: getScopeIdFromComponentId(recordBoardId), + familyKey: columnId, + }), + ); - const shouldFetchMore = useRecoilValue(shouldFetchMoreSelector()); + const [loadingRecordsForThisColumn, setLoadingRecordsForThisColumn] = + useRecoilState( + isRecordBoardFetchingRecordsByColumnFamilyState({ + scopeId: getScopeIdFromComponentId(recordBoardId), + familyKey: { columnId }, + }), + ); - const { fetchMoreRecords, loading } = useLoadRecordIndexBoardColumn({ - objectNameSingular, - recordBoardId, - boardFieldMetadataId, - columnFieldSelectValue: boardFieldSelectValue, - columnId, - }); + const { fetchMoreRecords, loading, hasNextPage } = + useLoadRecordIndexBoardColumn({ + objectNameSingular, + recordBoardId, + boardFieldMetadataId, + columnFieldSelectValue: boardFieldSelectValue, + columnId, + }); useEffect(() => { - if (!loading && shouldFetchMore) { - fetchMoreRecords?.(); - } - }, [fetchMoreRecords, loading, shouldFetchMore, boardFieldSelectValue]); + const run = async () => { + if (!loading && shouldFetchMore && hasNextPage) { + setLoadingRecordsForThisColumn(true); + setShouldFetchMore(false); + + await fetchMoreRecords?.(); + + setLoadingRecordsForThisColumn(false); + } + }; + + run(); + }, [ + setShouldFetchMore, + fetchMoreRecords, + loading, + shouldFetchMore, + boardFieldSelectValue, + setLoadingRecordsForThisColumn, + loadingRecordsForThisColumn, + + hasNextPage, + ]); return <>; }; diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts index f15f04fab..a65d67abf 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts @@ -56,13 +56,19 @@ export const useLoadRecordIndexBoardColumn = ({ }, }; - const { records, loading, fetchMoreRecords, queryStateIdentifier } = - useFindManyRecords({ - objectNameSingular, - filter, - orderBy, - recordGqlFields, - }); + const { + records, + loading, + fetchMoreRecords, + queryStateIdentifier, + hasNextPage, + } = useFindManyRecords({ + objectNameSingular, + filter, + orderBy, + recordGqlFields, + limit: 10, + }); useEffect(() => { setRecordIdsForColumn(columnId, records); @@ -77,5 +83,6 @@ export const useLoadRecordIndexBoardColumn = ({ loading, fetchMoreRecords, queryStateIdentifier, + hasNextPage, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-store/hooks/useSetRecordInStore.ts b/packages/twenty-front/src/modules/object-record/record-store/hooks/useSetRecordInStore.ts index 832d7ff11..63c4b9836 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/hooks/useSetRecordInStore.ts +++ b/packages/twenty-front/src/modules/object-record/record-store/hooks/useSetRecordInStore.ts @@ -7,7 +7,7 @@ export const useSetRecordInStore = () => { const setRecords = useRecoilCallback( ({ set, snapshot }) => (records: ObjectRecord[]) => { - records.forEach((record) => { + for (const record of records) { const currentRecord = snapshot .getLoadable(recordStoreFamilyState(record.id)) .getValue(); @@ -15,7 +15,7 @@ export const useSetRecordInStore = () => { if (JSON.stringify(currentRecord) !== JSON.stringify(record)) { set(recordStoreFamilyState(record.id), record); } - }); + } }, [], );