Improve Jotai work (#18205)

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartFiltersSettings.tsx

@@ -49,12 +49,12 @@ export const ChartFiltersSettings = ({
   const { updateCurrentWidgetConfig } =
     useUpdateCurrentWidgetConfig(pageLayoutId);
 
-  const currentRecordFiltersAtom = useRecoilComponentStateCallbackStateV2(
+  const currentRecordFilters = useRecoilComponentStateCallbackStateV2(
     currentRecordFiltersComponentState,
     instanceId,
   );
 
-  const currentRecordFilterGroupsAtom = useRecoilComponentStateCallbackStateV2(
+  const currentRecordFilterGroups = useRecoilComponentStateCallbackStateV2(
     currentRecordFilterGroupsComponentState,
     instanceId,
   );
@@ -63,15 +63,15 @@ export const ChartFiltersSettings = ({
   const chartWidgetConfiguration = widget.configuration;
 
   const handleFiltersUpdate = () => {
-    const currentRecordFilters = store.get(currentRecordFiltersAtom);
-    const currentRecordFilterGroups = store.get(currentRecordFilterGroupsAtom);
+    const existingRecordFilters = store.get(currentRecordFilters);
+    const existingRecordFilterGroups = store.get(currentRecordFilterGroups);
 
     updateCurrentWidgetConfig({
       objectMetadataId: objectMetadataItem.id,
       configToUpdate: {
         filter: {
-          recordFilters: currentRecordFilters,
-          recordFilterGroups: currentRecordFilterGroups,
+          recordFilters: existingRecordFilters,
+          recordFilterGroups: existingRecordFilterGroups,
         },
       } satisfies Partial<ChartWidgetConfiguration>,
     });

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useResetChartDraftFiltersSettings.ts

@@ -5,11 +5,12 @@ import { currentRecordFilterGroupsComponentState } from '@/object-record/record-
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
 import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
-import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { useStore } from 'jotai';
 
 export const useResetChartDraftFiltersSettings = () => {
+  const store = useStore();
   const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
 
   const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
@@ -25,7 +26,7 @@ export const useResetChartDraftFiltersSettings = () => {
         objectMetadataItemId: objectMetadataItemId,
       });
 
-      jotaiStore.set(
+      store.set(
         hasInitializedCurrentRecordFilterGroupsComponentFamilyState.atomFamily({
           familyKey: {},
           instanceId,
@@ -33,7 +34,7 @@ export const useResetChartDraftFiltersSettings = () => {
         false,
       );
 
-      jotaiStore.set(
+      store.set(
         hasInitializedCurrentRecordFiltersComponentFamilyState.atomFamily({
           familyKey: {},
           instanceId,
@@ -41,16 +42,16 @@ export const useResetChartDraftFiltersSettings = () => {
         false,
       );
 
-      jotaiStore.set(
+      store.set(
         currentRecordFiltersComponentState.atomFamily({ instanceId }),
         [],
       );
-      jotaiStore.set(
+      store.set(
         currentRecordFilterGroupsComponentState.atomFamily({ instanceId }),
         [],
       );
     },
-    [widgetInEditMode],
+    [widgetInEditMode, store],
   );
 
   return {

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig.ts

@@ -7,7 +7,7 @@ import { useStore } from 'jotai';
 import { useCallback } from 'react';
 
 export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
-  const pageLayoutDraftAtom = useRecoilComponentStateCallbackStateV2(
+  const pageLayoutDraft = useRecoilComponentStateCallbackStateV2(
     pageLayoutDraftComponentState,
     pageLayoutIdFromProps,
   );
@@ -27,8 +27,8 @@ export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
       objectMetadataId?: string | null;
       configToUpdate?: Partial<PageLayoutWidget['configuration']>;
     }) => {
-      const prev = store.get(pageLayoutDraftAtom);
-      store.set(pageLayoutDraftAtom, {
+      const prev = store.get(pageLayoutDraft);
+      store.set(pageLayoutDraft, {
         ...prev,
         tabs: prev.tabs.map((tab) => ({
           ...tab,
@@ -47,7 +47,7 @@ export const useUpdateCurrentWidgetConfig = (pageLayoutIdFromProps: string) => {
         })),
       });
     },
-    [pageLayoutDraftAtom, currentlyEditingWidgetId, store],
+    [pageLayoutDraft, currentlyEditingWidgetId, store],
   );
 
   return { updateCurrentWidgetConfig };