From 3cf8f2668018e8e9402e05d3abedb8519a7b9ccb Mon Sep 17 00:00:00 2001 From: Raunak Singh Jolly Date: Thu, 27 Jun 2024 22:54:58 +0530 Subject: [PATCH 1/3] Fixed: Drag and Drop Causes Flashing and Disappearing Cards #6001 by setting root to document's viewport --- .../record-board-card/components/RecordBoardCard.tsx | 4 ---- 1 file changed, 4 deletions(-) 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 ddf7a99c3d1e..3e1a1711312c 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 { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => @@ -199,10 +198,7 @@ export const RecordBoardCard = () => { return [updateEntity, { loading: false }]; }; - const scrollWrapperRef = useContext(ScrollWrapperContext); - const { ref: cardRef, inView } = useInView({ - root: scrollWrapperRef.current, rootMargin: '1000px', }); From 8cb2f3be7d630ef1441aa6525d895bddd4a883ca Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 12 Aug 2024 18:37:33 +0200 Subject: [PATCH 2/3] Removed limit from optimistic effect --- .../triggerUpdateRecordOptimisticEffect.ts | 53 +------------------ 1 file changed, 1 insertion(+), 52 deletions(-) diff --git a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect.ts b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect.ts index 97284ab2be3c..3c09c213f68b 100644 --- a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect.ts +++ b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerUpdateRecordOptimisticEffect.ts @@ -39,7 +39,7 @@ export const triggerUpdateRecordOptimisticEffect = ({ fields: { [objectMetadataItem.namePlural]: ( rootQueryCachedResponse, - { DELETE, readField, storeFieldName, toReference }, + { readField, storeFieldName, toReference }, ) => { const shouldSkip = !isObjectRecordConnectionWithRefs( objectMetadataItem.nameSingular, @@ -64,7 +64,6 @@ export const triggerUpdateRecordOptimisticEffect = ({ const rootQueryFilter = rootQueryVariables?.filter; const rootQueryOrderBy = rootQueryVariables?.orderBy; - const rootQueryLimit = rootQueryVariables?.first; const shouldTryToMatchFilter = isDefined(rootQueryFilter); @@ -123,56 +122,6 @@ export const triggerUpdateRecordOptimisticEffect = ({ }); } - const shouldLimitNextRootQueryEdges = isDefined(rootQueryLimit); - - // TODO: not sure that we should trigger a DELETE here, as it will trigger a network request - // Is it the responsibility of this optimistic effect function to delete a root query that will trigger a network request ? - // Shouldn't we let the response from the network overwrite the cache and keep this util purely about cache updates ? - // - // Shoud we even apply the limit at all since with pagination we cannot really do optimistic rendering and should - // wait for the network response to update the cache - // - // Maybe we could apply a merging function instead and exclude limit from the caching field arguments ? - // Also we have a problem that is not yet present with this but may arise if we start - // to use limit arguments, as for now we rely on the hard coded limit of 60 in pg_graphql. - // This is as if we had a { limit: 60 } argument in every query but we don't. - // so Apollo correctly merges the return of fetchMore for now, because of this, - // but wouldn't do it well like Thomas had the problem with mail threads - // because he applied a limit of 2 and Apollo created one root query in the cache for each. - // In Thomas' case we should implement this because he use a hack to overwrite the first request with the return of the other. - // See: https://www.apollographql.com/docs/react/pagination/cursor-based/#relay-style-cursor-pagination - // See: https://www.apollographql.com/docs/react/pagination/core-api/#merging-queries - if (shouldLimitNextRootQueryEdges) { - // If previous edges length was exactly at the required limit, - // but after update next edges length is under the limit, - // we cannot for sure know if re-fetching the query - // would return more edges, so we cannot optimistically deduce - // the query's result. - // In this case, invalidate the cache entry so it can be re-fetched. - const rootQueryCurrentCachedRecordEdgesLengthIsAtLimit = - rootQueryCurrentEdges.length === rootQueryLimit; - - // If next edges length is under limit, then we can wait for the network response and merge the result - // then in the merge function we could implement this mechanism to limit the number of edges in the cache - const rootQueryNextCachedRecordEdgesLengthIsUnderLimit = - rootQueryNextEdges.length < rootQueryLimit; - - const shouldDeleteRootQuerySoItCanBeRefetched = - rootQueryCurrentCachedRecordEdgesLengthIsAtLimit && - rootQueryNextCachedRecordEdgesLengthIsUnderLimit; - - if (shouldDeleteRootQuerySoItCanBeRefetched) { - return DELETE; - } - - const rootQueryNextCachedRecordEdgesLengthIsAboveRootQueryLimit = - rootQueryNextEdges.length > rootQueryLimit; - - if (rootQueryNextCachedRecordEdgesLengthIsAboveRootQueryLimit) { - rootQueryNextEdges.splice(rootQueryLimit); - } - } - return { ...rootQueryConnection, edges: rootQueryNextEdges, From 411ac5234509b00de5aa548fa8c60f9905d88bbf Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 12 Aug 2024 18:42:18 +0200 Subject: [PATCH 3/3] Reverted scroll wrapper --- .../record-board-card/components/RecordBoardCard.tsx | 4 ++++ 1 file changed, 4 insertions(+) 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 b91ed78817c5..1e45cbb9fced 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,6 +23,7 @@ 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 { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => @@ -198,7 +199,10 @@ export const RecordBoardCard = () => { return [updateEntity, { loading: false }]; }; + const scrollWrapperRef = useContext(ScrollWrapperContext); + const { ref: cardRef, inView } = useInView({ + root: scrollWrapperRef.current, rootMargin: '1000px', });