twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 12:34:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix filtered INDEX view not loading (#7501)

Browse Source 
## 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.
This commit is contained in:
Charles Bochet 2024-10-08 16:52:15 +02:00 committed by GitHub
parent 098551b7b8
commit fcd60be110
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -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

16
packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
View File

@ -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 <></>;