From 6caabf40fb9d1badb342c979eee7bf86601b036f Mon Sep 17 00:00:00 2001 From: Samyak Piya Date: Wed, 18 Dec 2024 23:32:48 -0500 Subject: [PATCH 1/4] fix: reset table selection when navigating away from index page - Add RecordIndexResetSelectionEffect component to handle selection cleanup - Integrate effect into RecordIndexPage - Ensures checkbox selections are cleared when navigating away --- .../RecordIndexResetSelectionEffect.tsx | 17 +++++++++++++++++ .../src/pages/object-record/RecordIndexPage.tsx | 3 ++- 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx new file mode 100644 index 000000000000..1ce7412b22b8 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx @@ -0,0 +1,17 @@ +import { useEffect } from 'react'; + +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; +import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; + +export const RecordIndexResetSelectionEffect = () => { + const { recordIndexId } = useRecordIndexContextOrThrow(); + const resetTableRowSelection = useResetTableRowSelection(recordIndexId); + + useEffect(() => { + return () => { + resetTableRowSelection(); + }; + }, [resetTableRowSelection]); + + return null; +}; diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx index c087137d72e4..20b5e81acaf8 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx @@ -12,6 +12,7 @@ import { RecordIndexContainer } from '@/object-record/record-index/components/Re import { RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect'; import { RecordIndexContainerContextStoreObjectMetadataEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreObjectMetadataEffect'; import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader'; +import { RecordIndexResetSelectionEffect } from '@/object-record/record-index/components/RecordIndexResetSelectionEffect'; import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick'; import { PageBody } from '@/ui/layout/page/components/PageBody'; @@ -86,7 +87,7 @@ export const RecordIndexPage = () => { - + From 5cc56333600adfb44a4f3ada4c979c9154ecaf81 Mon Sep 17 00:00:00 2001 From: Samyak Piya Date: Thu, 19 Dec 2024 17:42:04 -0500 Subject: [PATCH 2/4] refactor: remove useEffect for resetting selection on navigation --- .../RecordIndexResetSelectionEffect.tsx | 17 ----------------- .../src/pages/object-record/RecordIndexPage.tsx | 2 -- 2 files changed, 19 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx deleted file mode 100644 index 1ce7412b22b8..000000000000 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexResetSelectionEffect.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect } from 'react'; - -import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; -import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; - -export const RecordIndexResetSelectionEffect = () => { - const { recordIndexId } = useRecordIndexContextOrThrow(); - const resetTableRowSelection = useResetTableRowSelection(recordIndexId); - - useEffect(() => { - return () => { - resetTableRowSelection(); - }; - }, [resetTableRowSelection]); - - return null; -}; diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx index 20b5e81acaf8..41d3a2a7264d 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx @@ -12,7 +12,6 @@ import { RecordIndexContainer } from '@/object-record/record-index/components/Re import { RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect'; import { RecordIndexContainerContextStoreObjectMetadataEffect } from '@/object-record/record-index/components/RecordIndexContainerContextStoreObjectMetadataEffect'; import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader'; -import { RecordIndexResetSelectionEffect } from '@/object-record/record-index/components/RecordIndexResetSelectionEffect'; import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick'; import { PageBody } from '@/ui/layout/page/components/PageBody'; @@ -87,7 +86,6 @@ export const RecordIndexPage = () => { - From 3c961b3a76896088bf346f65bb3a65bf0cdbe486 Mon Sep 17 00:00:00 2001 From: Samyak Piya Date: Tue, 7 Jan 2025 23:27:03 -0500 Subject: [PATCH 3/4] feat(front): reset table selection when leaving record index page - Add reset table selection functionality when navigating away from record index pages - Add useParams hook to get objectNamePlural parameter - Integrate useResetTableRowSelection hook with default to Person object --- .../effect-components/PageChangeEffect.tsx | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx index 3934d9040d95..c9941c59b540 100644 --- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx @@ -1,5 +1,10 @@ import { useEffect, useState } from 'react'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { + matchPath, + useLocation, + useNavigate, + useParams, +} from 'react-router-dom'; import { useRecoilValue } from 'recoil'; import { @@ -8,6 +13,8 @@ import { } from '@/analytics/hooks/useEventTracker'; import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken'; import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState'; +import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural'; +import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; import { AppBasePath } from '@/types/AppBasePath'; import { AppPath } from '@/types/AppPath'; @@ -38,6 +45,11 @@ export const PageChangeEffect = () => { const eventTracker = useEventTracker(); + const objectNamePlural = + useParams().objectNamePlural ?? CoreObjectNamePlural.Person; + + const resetTableSelections = useResetTableRowSelection(objectNamePlural); + useEffect(() => { cleanRecoilState(); }, [cleanRecoilState]); @@ -56,6 +68,17 @@ export const PageChangeEffect = () => { } }, [navigate, pageChangeEffectNavigateLocation]); + useEffect(() => { + const isLeavingRecordIndexPage = !!matchPath( + AppPath.RecordIndexPage, + previousLocation, + ); + + if (isLeavingRecordIndexPage) { + resetTableSelections(); + } + }, [isMatchingLocation, previousLocation, resetTableSelections]); + useEffect(() => { switch (true) { case isMatchingLocation(AppPath.RecordIndexPage): { From dc9131c6d874abedb69493b226f52cdac436bd32 Mon Sep 17 00:00:00 2001 From: Samyak Piya Date: Wed, 8 Jan 2025 08:35:08 -0500 Subject: [PATCH 4/4] Add todo comment to refactor useResetTableRowSelection --- .../src/modules/app/effect-components/PageChangeEffect.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx index c9941c59b540..ace6faf14d91 100644 --- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx @@ -45,6 +45,8 @@ export const PageChangeEffect = () => { const eventTracker = useEventTracker(); + //TODO: refactor useResetTableRowSelection hook to not throw when the argument `recordTableId` is an empty string + // - replace CoreObjectNamePlural.Person const objectNamePlural = useParams().objectNamePlural ?? CoreObjectNamePlural.Person;