From ba77091b065ef9ff6876ff7050a17e1f4d28cba8 Mon Sep 17 00:00:00 2001
From: Samyak Piya <76403666+samyakpiya@users.noreply.github.com>
Date: Sat, 11 Jan 2025 05:23:07 -0500
Subject: [PATCH] fix: reset table selection when navigating away from index
 page (#9140)

Fixes #9132

## Purpose
Currently, when navigating away from an index page and returning,
previously checked selections remain checked. This fix ensures the
selection context is properly reset on navigation.

## Changes
- Add `RecordIndexResetSelectionEffect` component to handle selection
cleanup
- Integrate effect into `RecordIndexPage`
- Uses existing `useResetTableRowSelection` hook to clear selections

## Testing
1. Go to any index page (e.g., Companies)
2. Select some records using checkboxes
3. Navigate to a detail page
4. Return to the index page
5. Verify that no records are selected

## Demo
I've recorded a short video demonstrating how this PR fixes the issue:

[Loom Video
Link](https://www.loom.com/share/72ca46a5dc194b5092e1944a985fa0d2?sid=55c95d8b-2376-4ac5-b406-6483aa7e341f)

Before fix: Selections persist after navigation
After fix: Selections are properly reset

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../effect-components/PageChangeEffect.tsx    | 27 ++++++++++++++++++-
 .../pages/object-record/RecordIndexPage.tsx   |  1 -
 2 files changed, 26 insertions(+), 2 deletions(-)

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 3934d9040..ace6faf14 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,13 @@ 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;
+
+  const resetTableSelections = useResetTableRowSelection(objectNamePlural);
+
   useEffect(() => {
     cleanRecoilState();
   }, [cleanRecoilState]);
@@ -56,6 +70,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): {
diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
index 90ac129d3..269e515f1 100644
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
@@ -86,7 +86,6 @@ export const RecordIndexPage = () => {
                   <RecordIndexContainerContextStoreObjectMetadataEffect />
                   <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
                   <MainContextStoreComponentInstanceIdSetterEffect />
-
                   <RecordIndexContainer />
                 </StyledIndexContainer>
               </PageBody>