From b67e85001163a08c60e33f907c501427338549a5 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 13 Feb 2025 13:40:33 +0100 Subject: [PATCH] Fix table content missing when navigating to previously browsed page (#10188) We are using useInView to detect if a row should be rendered or not. # Behavior issue When browsing an Index page (let's say People), then navigating to another one (Company), then back to People, the rows were not displayed anymore. For some reason the inView value was set to false in this case # Fix - I have updated the useInView (react-intersection-observer) package but it did not fix it - useInView provides a ref. However, I believe this was conflicting with the draggableRef; cecause we are in a we cannot add additional containers and are forced to apply both refs to the (draggableRef + inViewRef). I believe this was causing the issue. I have added the inView ref to an empty )} diff --git a/yarn.lock b/yarn.lock index d97223f18..bdb7fb5c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -40964,16 +40964,16 @@ __metadata: languageName: node linkType: hard -"react-intersection-observer@npm:^9.5.2": - version: 9.13.0 - resolution: "react-intersection-observer@npm:9.13.0" +"react-intersection-observer@npm:^9.15.1": + version: 9.15.1 + resolution: "react-intersection-observer@npm:9.15.1" peerDependencies: - react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 peerDependenciesMeta: react-dom: optional: true - checksum: 10c0/7e446b763edc0d9e5642c03c0a151fa6e25fd91c7d004b8af918b0ec9a01f0c252909c13c6fbf95d331e7064bbe1d5668ed788610acab400ce38063d82f9e1b3 + checksum: 10c0/ac2ce7093aef2d6cc3ec9ddd88b8e3f54a7320d867170433a12014f881400553517b3304c4e7bd7b666a44dbd42e94472e5cffdfa45356c9e17d3a0a1ba02b3a languageName: node linkType: hard @@ -46289,7 +46289,7 @@ __metadata: react-hotkeys-hook: "npm:^4.4.4" react-icons: "npm:^4.12.0" react-imask: "npm:^7.6.0" - react-intersection-observer: "npm:^9.5.2" + react-intersection-observer: "npm:^9.15.1" react-loading-skeleton: "npm:^3.3.1" react-phone-number-input: "npm:^3.3.4" react-responsive: "npm:^9.0.2"
within the row which is achieving the same goal without forcing to combine refs --- package.json | 2 +- .../debug/components/ApolloDevLogEffect.tsx | 2 +- .../components/RecordTableDraggableTr.tsx | 11 ++++------- yarn.lock | 14 +++++++------- 4 files changed, 13 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 63a28b895..beeec0284 100644 --- a/package.json +++ b/package.json @@ -166,7 +166,7 @@ "react-hotkeys-hook": "^4.4.4", "react-icons": "^4.12.0", "react-imask": "^7.6.0", - "react-intersection-observer": "^9.5.2", + "react-intersection-observer": "^9.15.1", "react-loading-skeleton": "^3.3.1", "react-phone-number-input": "^3.3.4", "react-responsive": "^9.0.2", diff --git a/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx b/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx index 93a6af6f0..a1959a4b5 100644 --- a/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx +++ b/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx @@ -1,5 +1,5 @@ -import { useEffect } from 'react'; import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev'; +import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { isDebugModeState } from '@/client-config/states/isDebugModeState'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx index 973bd11e9..905e19ea1 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx @@ -1,10 +1,9 @@ import { useTheme } from '@emotion/react'; import { Draggable, DraggableId } from '@hello-pangea/dnd'; -import { forwardRef, ReactNode } from 'react'; +import { ReactNode, forwardRef } from 'react'; import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext'; import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr'; -import { combineRefs } from '~/utils/combineRefs'; type RecordTableDraggableTrProps = { className?: string; @@ -16,7 +15,7 @@ type RecordTableDraggableTrProps = { }; export const RecordTableDraggableTr = forwardRef< - HTMLTableRowElement, + HTMLTableCellElement, RecordTableDraggableTrProps >( ( @@ -40,10 +39,7 @@ export const RecordTableDraggableTr = forwardRef< > {(draggableProvided, draggableSnapshot) => ( ( - ref, - draggableProvided.innerRef, - )} + ref={draggableProvided.innerRef} className={className} // eslint-disable-next-line react/jsx-props-no-spreading {...draggableProvided.draggableProps} @@ -68,6 +64,7 @@ export const RecordTableDraggableTr = forwardRef< }} > {children} +