From fcd60be110eb0a524f1f2eefe439c3249dd3086d Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Tue, 8 Oct 2024 16:52:15 +0200
Subject: [PATCH] Fix filtered INDEX view not loading (#7501)

## Context

We have recently merged a refactoring of our view module. However, one
case was forgotten which is to test our dynamic filtering logic.

It is currently possible to pass unsaved filters through the URL and
these filters will be applied to the currentView through
`QueryParamsFiltersEffect`. This component was saving filters but also
listening to them through useGetCurrentView hook.

## How

1) I'm removing this infinite loop by directly loading currentViewId
through the right recoil atom.

Bonus: I'm also removing the unmounting logic which seems wrong to me as
unsaved filters are mounted on a specific view, there is no need to
remove them while switching views in my opinion.
---
 .../components/RecordDetailRelationSection.tsx   | 12 ++++++++++++
 .../components/QueryParamsFiltersEffect.tsx      | 16 +++++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
index 23fc1f070..edd49b3f8 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
@@ -24,12 +24,15 @@ import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRela
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { FilterQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
+import { View } from '@/views/types/View';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
@@ -119,12 +122,21 @@ export const RecordDetailRelationSection = ({
     scopeId: dropdownId,
   });
 
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+
+  const indexView = views.find(
+    (view) =>
+      view.key === 'INDEX' &&
+      view.objectMetadataId === relationObjectMetadataItem.id,
+  );
+
   const filterQueryParams: FilterQueryParams = {
     filter: {
       [relationFieldMetadataItem?.name || '']: {
         [ViewFilterOperand.Is]: [recordId],
       },
     },
+    view: indexView?.id,
   };
   const filterLinkHref = `/objects/${
     relationObjectMetadataItem.namePlural
diff --git a/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx b/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
index 10ecdfa83..f811df0dd 100644
--- a/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
+++ b/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
@@ -1,23 +1,24 @@
 import { useEffect } from 'react';
 
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
+import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
-import { isDefined } from 'twenty-ui';
 
 export const QueryParamsFiltersEffect = () => {
   const { hasFiltersQueryParams, getFiltersFromQueryParams, viewIdQueryParam } =
     useViewFromQueryParams();
 
+  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
+
   const setUnsavedViewFilter = useSetRecoilComponentFamilyStateV2(
     unsavedToUpsertViewFiltersComponentFamilyState,
-    { viewId: viewIdQueryParam },
+    { viewId: viewIdQueryParam ?? currentViewId },
   );
 
   const { resetUnsavedViewStates } = useResetUnsavedViewStates();
-  const { currentViewId } = useGetCurrentView();
 
   useEffect(() => {
     if (!hasFiltersQueryParams) {
@@ -29,18 +30,11 @@ export const QueryParamsFiltersEffect = () => {
         setUnsavedViewFilter(filtersFromParams);
       }
     });
-
-    return () => {
-      if (isDefined(currentViewId)) {
-        resetUnsavedViewStates(currentViewId);
-      }
-    };
   }, [
     getFiltersFromQueryParams,
     hasFiltersQueryParams,
     resetUnsavedViewStates,
     setUnsavedViewFilter,
-    currentViewId,
   ]);
 
   return <></>;