Fix of board request fix PR (twentyhq#5829)

Fix again board requests as first merged PR appears to have missing commits / code. twentyhq#5819
hanchchch · Jun 11, 2024 · 7d06809 · 7d06809
1 parent a57e251
commit 7d06809
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 29 deletions.
diff --git 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 = <T extends ObjectRecord = ObjectRecord>({
     error,
     fetchMoreRecords,
     queryStateIdentifier: findManyQueryStateIdentifier,
+    hasNextPage,
   };
 };
diff --git a/...wenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts b/...wenty-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
@@ -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/...t/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/...t/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 ? (
                     <RecordInlineCell />
                   ) : (
                     <StyledRecordInlineCellPlaceholder />

diff --git a/...t-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/...t-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/...ules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts b/...ules/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<boolean, { columnId: string }>({
+    key: 'isRecordBoardFetchingRecordsByColumnFamilyState',
+    defaultValue: false,
+  });
diff --git a/.../src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx b/.../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/...wenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts b/...wenty-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
@@ -7,15 +7,15 @@ 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();
 
           if (JSON.stringify(currentRecord) !== JSON.stringify(record)) {
             set(recordStoreFamilyState(record.id), record);
           }
-        });
+        }
       },
     [],
   );