Fix latest visited view (#10158)
Fixes https://github.com/twentyhq/twenty/issues/9772 In this PR: - the root cause of the issue that the ContextStoreViewIdEffect was not filtering the views on objectMetadata properly - I'm also deleting some over complex in the latestVisited view logic - Duplicated logic between ContextStoreViewIdEffect and ViewBarViewIdEffect, see my comment
This commit is contained in:
Charles Bochet
@ -1,104 +0,0 @@
|
||||
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
|
||||
import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
|
||||
import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
|
||||
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
|
||||
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
|
||||
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
|
||||
import { View } from '@/views/types/View';
|
||||
import { isUndefined } from '@sniptt/guards';
|
||||
import { useEffect } from 'react';
|
||||
import { isDefined } from 'twenty-shared';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
export const ContextStoreViewIdEffect = ({
|
||||
objectNamePlural,
|
||||
}: {
|
||||
objectNamePlural: string;
|
||||
}) => {
|
||||
const { viewIdQueryParam } = useViewFromQueryParams();
|
||||
|
||||
const { records: viewsOnCurrentObject } = usePrefetchedData<View>(
|
||||
PrefetchKey.AllViews,
|
||||
);
|
||||
|
||||
const { findObjectMetadataItemByNamePlural } =
|
||||
useFilteredObjectMetadataItems();
|
||||
const objectMetadataItemId =
|
||||
findObjectMetadataItemByNamePlural(objectNamePlural);
|
||||
const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
|
||||
useLastVisitedView();
|
||||
const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
|
||||
useLastVisitedObjectMetadataItem();
|
||||
|
||||
const lastVisitedViewId =
|
||||
getLastVisitedViewIdFromObjectNamePlural(objectNamePlural);
|
||||
const isLastVisitedObjectMetadataItemDifferent = !isDeeplyEqual(
|
||||
objectMetadataItemId?.id,
|
||||
lastVisitedObjectMetadataItemId,
|
||||
);
|
||||
const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
|
||||
contextStoreCurrentViewIdComponentState,
|
||||
objectNamePlural,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
|
||||
|
||||
if (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) {
|
||||
if (isLastVisitedObjectMetadataItemDifferent) {
|
||||
setLastVisitedObjectMetadataItem(objectNamePlural);
|
||||
setLastVisitedView({
|
||||
objectNamePlural,
|
||||
viewId: lastVisitedViewId,
|
||||
});
|
||||
}
|
||||
setContextStoreCurrentViewId(lastVisitedViewId);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDefined(viewIdQueryParam)) {
|
||||
if (isLastVisitedObjectMetadataItemDifferent) {
|
||||
setLastVisitedObjectMetadataItem(objectNamePlural);
|
||||
}
|
||||
if (!isDeeplyEqual(viewIdQueryParam, lastVisitedViewId)) {
|
||||
setLastVisitedView({
|
||||
objectNamePlural,
|
||||
viewId: viewIdQueryParam,
|
||||
});
|
||||
}
|
||||
setContextStoreCurrentViewId(viewIdQueryParam);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDefined(indexView)) {
|
||||
if (isLastVisitedObjectMetadataItemDifferent) {
|
||||
setLastVisitedObjectMetadataItem(objectNamePlural);
|
||||
}
|
||||
if (!isDeeplyEqual(indexView.id, lastVisitedViewId)) {
|
||||
setLastVisitedView({
|
||||
objectNamePlural,
|
||||
viewId: indexView.id,
|
||||
});
|
||||
}
|
||||
setContextStoreCurrentViewId(indexView.id);
|
||||
return;
|
||||
}
|
||||
|
||||
return () => {
|
||||
setContextStoreCurrentViewId(null);
|
||||
};
|
||||
}, [
|
||||
isLastVisitedObjectMetadataItemDifferent,
|
||||
lastVisitedViewId,
|
||||
objectNamePlural,
|
||||
setContextStoreCurrentViewId,
|
||||
setLastVisitedObjectMetadataItem,
|
||||
setLastVisitedView,
|
||||
viewIdQueryParam,
|
||||
viewsOnCurrentObject,
|
||||
]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
@ -1,27 +0,0 @@
|
||||
import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
|
||||
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
|
||||
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
export const MainContextStoreComponentInstanceIdSetterEffect = () => {
|
||||
const setMainContextStoreComponentInstanceId = useSetRecoilState(
|
||||
mainContextStoreComponentInstanceIdState,
|
||||
);
|
||||
|
||||
const context = useContext(ContextStoreComponentInstanceContext);
|
||||
|
||||
useEffect(() => {
|
||||
setMainContextStoreComponentInstanceId(
|
||||
context?.instanceId ?? CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
|
||||
);
|
||||
|
||||
return () => {
|
||||
setMainContextStoreComponentInstanceId(
|
||||
CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
|
||||
);
|
||||
};
|
||||
}, [context, setMainContextStoreComponentInstanceId]);
|
||||
|
||||
return null;
|
||||
};
|
||||
@ -0,0 +1,90 @@
|
||||
import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect';
|
||||
import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
|
||||
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
||||
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
|
||||
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { View } from '@/views/types/View';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared';
|
||||
import { undefined } from 'zod';
|
||||
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
||||
|
||||
const getViewId = (
|
||||
viewIdFromQueryParams: string | null,
|
||||
indexView?: View,
|
||||
lastVisitedViewId?: string,
|
||||
) => {
|
||||
if (isDefined(viewIdFromQueryParams)) {
|
||||
return viewIdFromQueryParams;
|
||||
}
|
||||
|
||||
if (isDefined(lastVisitedViewId)) {
|
||||
return lastVisitedViewId;
|
||||
}
|
||||
|
||||
if (isDefined(indexView)) {
|
||||
return indexView.id;
|
||||
}
|
||||
|
||||
throw new Error('No view id found');
|
||||
};
|
||||
|
||||
export const MainContextStoreProvider = () => {
|
||||
const { isMatchingLocation } = useIsMatchingLocation();
|
||||
const isRecordIndexPage = isMatchingLocation(AppPath.RecordIndexPage);
|
||||
const isRecordShowPage = isMatchingLocation(AppPath.RecordShowPage);
|
||||
|
||||
const pageName = isRecordIndexPage
|
||||
? 'record-index'
|
||||
: isRecordShowPage
|
||||
? 'record-show'
|
||||
: undefined;
|
||||
|
||||
const objectNamePlural = useParams().objectNamePlural ?? '';
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
const viewIdQueryParam = searchParams.get('viewId');
|
||||
|
||||
const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
|
||||
|
||||
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
|
||||
|
||||
const objectMetadataItem = objectMetadataItems.find(
|
||||
(objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
|
||||
);
|
||||
|
||||
const { getLastVisitedViewIdFromObjectNamePlural } = useLastVisitedView();
|
||||
|
||||
const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
|
||||
objectMetadataItem?.namePlural ?? '',
|
||||
);
|
||||
|
||||
const viewsOnCurrentObject = views.filter(
|
||||
(view) => view.objectMetadataId === objectMetadataItem?.id,
|
||||
);
|
||||
const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
|
||||
|
||||
const viewId = getViewId(viewIdQueryParam, indexView, lastVisitedViewId);
|
||||
|
||||
const mainContextStoreComponentInstanceId = `${pageName}-${objectMetadataItem?.namePlural}-${viewId}`;
|
||||
|
||||
if (
|
||||
!isDefined(pageName) ||
|
||||
!isDefined(objectMetadataItem) ||
|
||||
!isDefined(viewId)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<MainContextStoreProviderEffect
|
||||
mainContextStoreComponentInstanceIdToSet={
|
||||
mainContextStoreComponentInstanceId
|
||||
}
|
||||
viewId={viewId}
|
||||
objectMetadataItem={objectMetadataItem}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,96 @@
|
||||
import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
|
||||
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
|
||||
import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
|
||||
import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
|
||||
import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
|
||||
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
||||
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
export const MainContextStoreProviderEffect = ({
|
||||
mainContextStoreComponentInstanceIdToSet,
|
||||
viewId,
|
||||
objectMetadataItem,
|
||||
}: {
|
||||
mainContextStoreComponentInstanceIdToSet: string;
|
||||
viewId: string;
|
||||
objectMetadataItem: ObjectMetadataItem;
|
||||
}) => {
|
||||
const [
|
||||
mainContextStoreComponentInstanceId,
|
||||
setMainContextStoreComponentInstanceId,
|
||||
] = useRecoilState(mainContextStoreComponentInstanceIdState);
|
||||
|
||||
const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
|
||||
useLastVisitedView();
|
||||
|
||||
const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
|
||||
useLastVisitedObjectMetadataItem();
|
||||
|
||||
const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
|
||||
objectMetadataItem.namePlural,
|
||||
);
|
||||
|
||||
const [contextStoreCurrentViewId, setContextStoreCurrentViewId] =
|
||||
useRecoilComponentStateV2(
|
||||
contextStoreCurrentViewIdComponentState,
|
||||
mainContextStoreComponentInstanceId,
|
||||
);
|
||||
|
||||
const [
|
||||
contextStoreCurrentObjectMetadataId,
|
||||
setContextStoreCurrentObjectMetadataId,
|
||||
] = useRecoilComponentStateV2(
|
||||
contextStoreCurrentObjectMetadataIdComponentState,
|
||||
mainContextStoreComponentInstanceId,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (contextStoreCurrentObjectMetadataId !== objectMetadataItem.id) {
|
||||
setContextStoreCurrentObjectMetadataId(objectMetadataItem.id);
|
||||
}
|
||||
|
||||
if (
|
||||
mainContextStoreComponentInstanceIdToSet !==
|
||||
mainContextStoreComponentInstanceId
|
||||
) {
|
||||
setMainContextStoreComponentInstanceId(
|
||||
mainContextStoreComponentInstanceIdToSet,
|
||||
);
|
||||
}
|
||||
|
||||
if (viewId !== lastVisitedViewId) {
|
||||
setLastVisitedView({
|
||||
objectNamePlural: objectMetadataItem.namePlural,
|
||||
viewId: viewId,
|
||||
});
|
||||
}
|
||||
|
||||
if (objectMetadataItem.id !== lastVisitedObjectMetadataItemId) {
|
||||
setLastVisitedObjectMetadataItem(objectMetadataItem.namePlural);
|
||||
}
|
||||
|
||||
if (contextStoreCurrentViewId !== viewId) {
|
||||
console.log('contextStoreCurrentViewId', contextStoreCurrentViewId);
|
||||
setContextStoreCurrentViewId(viewId);
|
||||
}
|
||||
}, [
|
||||
contextStoreCurrentObjectMetadataId,
|
||||
contextStoreCurrentViewId,
|
||||
lastVisitedObjectMetadataItemId,
|
||||
lastVisitedViewId,
|
||||
mainContextStoreComponentInstanceId,
|
||||
mainContextStoreComponentInstanceIdToSet,
|
||||
objectMetadataItem,
|
||||
objectMetadataItem.namePlural,
|
||||
setContextStoreCurrentObjectMetadataId,
|
||||
setContextStoreCurrentViewId,
|
||||
setLastVisitedObjectMetadataItem,
|
||||
setLastVisitedView,
|
||||
setMainContextStoreComponentInstanceId,
|
||||
viewId,
|
||||
]);
|
||||
|
||||
return null;
|
||||
};
|
||||
Reference in New Issue
Block a user