twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-26 05:24:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix of board request fix PR (#5829)

Browse Source 
Fix again board requests as first merged PR appears to have missing
commits / code. https://github.com/twentyhq/twenty/pull/5819
This commit is contained in:
Lucas Bordeau 2024-06-11 22:30:38 +02:00 committed by GitHub
parent a57e251208
commit 7d068095cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 85 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
View File

@ -240,5 +240,6 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
error,
fetchMoreRecords,
queryStateIdentifier: findManyQueryStateIdentifier,
hasNextPage,
};
};

5
packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts
View File

@ -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,

2
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts
View File

@ -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,
};
};

4
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -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 />

7
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
View File

@ -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),

7
packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState.ts Normal file
View File

@ -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,
});

63
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx
View File

@ -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 <></>;
};

21
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
View File

@ -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,
};
};

4
packages/twenty-front/src/modules/object-record/record-store/hooks/useSetRecordInStore.ts
View File

@ -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);
}
});
}
},
[],
);