7336 create contextstore

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -1,6 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconCheckbox } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -12,6 +17,10 @@ import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCapt
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandType } from '@/command-menu/types/Command';
+import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { contextStoreCurrentViewIdState } from '@/context-store/states/contextStoreCurrentViewIdState';
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { AppBasePath } from '@/types/AppBasePath';
@@ -49,6 +58,29 @@ export const PageChangeEffect = () => {
     activityObjectNameSingular: CoreObjectNameSingular.Task,
   });
 
+  const [searchParams] = useSearchParams();
+  const { objectNameSingular, objectNamePlural } = useParams();
+
+  const objectMetadataItem = useRecoilValue(
+    objectMetadataItemFamilySelector(
+      objectNameSingular
+        ? { objectName: objectNameSingular, objectNameType: 'singular' }
+        : objectNamePlural
+          ? { objectName: objectNamePlural, objectNameType: 'plural' }
+          : { objectName: '', objectNameType: 'singular' },
+    ),
+  );
+
+  const setContextStoreCurrentViewId = useSetRecoilState(
+    contextStoreCurrentViewIdState,
+  );
+  const setContextStoreCurrentObjectMetadataId = useSetRecoilState(
+    contextStoreCurrentObjectMetadataIdState,
+  );
+  const setContextStoreTargetedRecordIds = useSetRecoilState(
+    contextStoreTargetedRecordIdsState,
+  );
+
   useEffect(() => {
     cleanRecoilState();
   }, [cleanRecoilState]);
@@ -67,6 +99,20 @@ export const PageChangeEffect = () => {
     }
   }, [navigate, pageChangeEffectNavigateLocation]);
 
+  useEffect(() => {
+    const viewId = searchParams.get('view');
+    setContextStoreCurrentViewId(viewId);
+    setContextStoreTargetedRecordIds([]);
+  }, [
+    searchParams,
+    setContextStoreCurrentViewId,
+    setContextStoreTargetedRecordIds,
+  ]);
+
+  useEffect(() => {
+    setContextStoreCurrentObjectMetadataId(objectMetadataItem?.id ?? null);
+  }, [objectMetadataItem, setContextStoreCurrentObjectMetadataId]);
+
   useEffect(() => {
     switch (true) {
       case isMatchingLocation(AppPath.RecordIndexPage): {

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentObjectMetadataIdState.ts

@@ -0,0 +1,8 @@
+import { createState } from 'twenty-ui';
+
+export const contextStoreCurrentObjectMetadataIdState = createState<
+  string | null
+>({
+  key: 'contextStoreCurrentObjectMetadataIdState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/context-store/states/contextStoreCurrentViewIdState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const contextStoreCurrentViewIdState = createState<string | null>({
+  key: 'contextStoreCurrentViewIdState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordIdsState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const contextStoreTargetedRecordIdsState = createState<string[]>({
+  key: 'contextStoreTargetedRecordIdsState',
+  defaultValue: [],
+});

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoaderEffect.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
@@ -129,10 +130,18 @@ export const RecordIndexBoardDataLoaderEffect = ({
     callback: resetRecordSelection,
   });
 
+  const setContextStoreTargetedRecordIds = useSetRecoilState(
+    contextStoreTargetedRecordIdsState,
+  );
+
   useEffect(() => {
     setActionBarEntries?.();
     setContextMenuEntries?.();
   }, [setActionBarEntries, setContextMenuEntries]);
 
+  useEffect(() => {
+    setContextStoreTargetedRecordIds(selectedRecordIds);
+  }, [selectedRecordIds, setContextStoreTargetedRecordIds]);
+
   return <></>;
 };

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
@@ -34,6 +35,10 @@ export const RecordIndexTableContainerEffect = ({
     recordTableId,
   });
 
+  const setContextStoreTargetedRecordIds = useSetRecoilState(
+    contextStoreTargetedRecordIdsState,
+  );
+
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
   });
@@ -111,5 +116,9 @@ export const RecordIndexTableContainerEffect = ({
     );
   }, [setRecordCountInCurrentView, setOnEntityCountChange]);
 
+  useEffect(() => {
+    setContextStoreTargetedRecordIds(selectedRowIds);
+  }, [selectedRowIds, setContextStoreTargetedRecordIds]);
+
   return <></>;
 };

packages/twenty-front/src/modules/views/components/QueryParamsViewIdEffect.tsx

@@ -4,6 +4,7 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useSetViewInUrl } from '@/views/hooks/useSetViewInUrl';
 import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { isUndefined } from '@sniptt/guards';
 import { useEffect } from 'react';
@@ -37,6 +38,7 @@ export const QueryParamsViewIdEffect = () => {
     objectMetadataItemId?.id,
     lastVisitedObjectMetadataItemId,
   );
+  const { setViewInUrl } = useSetViewInUrl();
 
   // // TODO: scope view bar per view id if possible
   // const { resetCurrentView } = useResetCurrentView();
@@ -59,6 +61,7 @@ export const QueryParamsViewIdEffect = () => {
         });
       }
       setCurrentViewId(lastVisitedViewId);
+      setViewInUrl(lastVisitedViewId);
       return;
     }
 
@@ -99,6 +102,7 @@ export const QueryParamsViewIdEffect = () => {
     setCurrentViewId,
     setLastVisitedObjectMetadataItem,
     setLastVisitedView,
+    setViewInUrl,
     viewIdQueryParam,
     viewsOnCurrentObject,
   ]);

packages/twenty-front/src/modules/views/hooks/useChangeView.ts

@@ -1,19 +1,11 @@
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
-import { useSearchParams } from 'react-router-dom';
+import { useSetViewInUrl } from '@/views/hooks/useSetViewInUrl';
 
 export const useChangeView = (viewBarComponentId?: string) => {
   const { resetUnsavedViewStates } =
     useResetUnsavedViewStates(viewBarComponentId);
 
-  const [, setSearchParams] = useSearchParams();
-
-  const setViewInUrl = (viewId: string) => {
-    setSearchParams(() => {
-      const searchParams = new URLSearchParams();
-      searchParams.set('view', viewId);
-      return searchParams;
-    });
-  };
+  const { setViewInUrl } = useSetViewInUrl();
 
   const changeView = async (viewId: string) => {
     setViewInUrl(viewId);

packages/twenty-front/src/modules/views/hooks/useSetViewInUrl.ts

@@ -0,0 +1,15 @@
+import { useSearchParams } from 'react-router-dom';
+
+export const useSetViewInUrl = () => {
+  const [, setSearchParams] = useSearchParams();
+
+  const setViewInUrl = (viewId: string) => {
+    setSearchParams(() => {
+      const searchParams = new URLSearchParams();
+      searchParams.set('view', viewId);
+      return searchParams;
+    });
+  };
+
+  return { setViewInUrl };
+};

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -11,6 +11,7 @@ import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { RecordShowPageWorkflowHeader } from '@/workflow/components/RecordShowPageWorkflowHeader';
 import { RecordShowPageBaseHeader } from '~/pages/object-record/RecordShowPageBaseHeader';
+import { RecordShowPageEffect } from '~/pages/object-record/RecordShowPageEffect';
 import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
 
 export const RecordShowPage = () => {
@@ -38,6 +39,7 @@ export const RecordShowPage = () => {
   return (
     <RecordFieldValueSelectorContextProvider>
       <RecordValueSetterEffect recordId={objectRecordId} />
+      <RecordShowPageEffect recordId={objectRecordId} />
       <PageContainer>
         <PageTitle title={pageTitle} />
         <RecordShowPageHeader

packages/twenty-front/src/pages/object-record/RecordShowPageEffect.tsx

@@ -0,0 +1,15 @@
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+export const RecordShowPageEffect = ({ recordId }: { recordId: string }) => {
+  const setContextStoreTargetedRecordIds = useSetRecoilState(
+    contextStoreTargetedRecordIdsState,
+  );
+
+  useEffect(() => {
+    setContextStoreTargetedRecordIds([recordId]);
+  }, [recordId, setContextStoreTargetedRecordIds]);
+
+  return null;
+};