Refactor record sort dropdown (#9578)

- Refactored all sort dropdown states to V2
- Added ObjectSortDropdownComponentInstanceContext
- Cleaned some constants

packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ObjectSortDropdownId.ts

@@ -1,5 +1 @@
-/* eslint-disable @nx/workspace-max-consts-per-file */
+export const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown';
-const OBJECT_SORT_DROPDOWN_ID = 'sort-dropdown';
-const VIEW_SORT_DROPDOWN_ID = 'view-sort';
-
-export { OBJECT_SORT_DROPDOWN_ID, VIEW_SORT_DROPDOWN_ID };

packages/twenty-front/src/modules/object-record/object-sort-dropdown/constants/ViewSortDropdownId.ts

@@ -0,0 +1 @@
+export const VIEW_SORT_DROPDOWN_ID = 'view-sort';

packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useObjectSortDropdown.ts

@@ -1,27 +1,25 @@
 import { useCallback } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
-import isSortDirectionMenuUnfoldedState from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
-import selectedSortDirectionState from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
 import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
+import { VIEW_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ViewSortDropdownId';
+import { isSortDirectionMenuUnfoldedComponentState } from '@/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState';
+import { selectedSortDirectionComponentState } from '@/object-record/object-sort-dropdown/states/selectedSortDirectionState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { availableSortDefinitionsComponentState } from '@/views/states/availableSortDefinitionsComponentState';
-import {
+import { OBJECT_SORT_DROPDOWN_ID } from '../constants/ObjectSortDropdownId';
-  OBJECT_SORT_DROPDOWN_ID,
-  VIEW_SORT_DROPDOWN_ID,
-} from '../constants/ObjectSortDropdownId';
 
 // TODO: merge this with useSortDropdown
 export const useObjectSortDropdown = () => {
   const [isSortDirectionMenuUnfolded, setIsSortDirectionMenuUnfolded] =
-    useRecoilState(isSortDirectionMenuUnfoldedState);
+    useRecoilComponentStateV2(isSortDirectionMenuUnfoldedComponentState);
 
-  const [selectedSortDirection, setSelectedSortDirection] = useRecoilState(
+  const [selectedSortDirection, setSelectedSortDirection] =
-    selectedSortDirectionState,
+    useRecoilComponentStateV2(selectedSortDirectionComponentState);
-  );
 
   const resetState = useCallback(() => {
     setIsSortDirectionMenuUnfolded(false);

packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useSortDropdownStates.ts

@@ -1,23 +1,20 @@
 import { isSortSelectedComponentState } from '@/object-record/object-sort-dropdown/states/isSortSelectedScopedState';
 import { objectSortDropdownSearchInputComponentState } from '@/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState';
 import { onSortSelectComponentState } from '@/object-record/object-sort-dropdown/states/onSortSelectScopedState';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 export const useSortDropdownStates = (scopeId: string) => {
-  const isSortSelectedState = extractComponentState(
+  const isSortSelectedState = isSortSelectedComponentState.atomFamily({
-    isSortSelectedComponentState,
+    instanceId: scopeId,
-    scopeId,
+  });
-  );
 
-  const onSortSelectState = extractComponentState(
+  const onSortSelectState = onSortSelectComponentState.atomFamily({
-    onSortSelectComponentState,
+    instanceId: scopeId,
-    scopeId,
+  });
-  );
 
-  const objectSortDropdownSearchInputState = extractComponentState(
+  const objectSortDropdownSearchInputState =
-    objectSortDropdownSearchInputComponentState,
+    objectSortDropdownSearchInputComponentState.atomFamily({
-    scopeId,
+      instanceId: scopeId,
-  );
+    });
 
   return {
     isSortSelectedState,

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsComponentState.ts

@@ -1,10 +1,11 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
-
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 import { SortDefinition } from '../types/SortDefinition';
 
-export const availableSortDefinitionsComponentState = createComponentState<
+export const availableSortDefinitionsComponentState = createComponentStateV2<
   SortDefinition[]
 >({
   key: 'availableSortDefinitionsComponentState',
   defaultValue: [],
+  componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const ObjectSortDropdownComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortDirectionMenuUnfoldedState.ts

@@ -1,8 +1,9 @@
-import { atom } from 'recoil';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-const isSortDirectionMenuUnfoldedState = atom({
+export const isSortDirectionMenuUnfoldedComponentState =
-  key: 'isSortDirectionMenuUnfoldedState',
+  createComponentStateV2<boolean>({
-  default: false,
+    key: 'isSortDirectionMenuUnfoldedComponentState',
-});
+    defaultValue: false,
-
+    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
-export default isSortDirectionMenuUnfoldedState;
+  });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts

@@ -1,6 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const isSortSelectedComponentState = createComponentState<boolean>({
+export const isSortSelectedComponentState = createComponentStateV2<boolean>({
   key: 'isSortSelectedComponentState',
   defaultValue: false,
+  componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/objectSortDropdownSearchInputComponentState.ts

@@ -1,7 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
 export const objectSortDropdownSearchInputComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
     key: 'objectSortDropdownSearchInputComponentState',
     defaultValue: '',
+    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
   });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts

@@ -1,10 +1,11 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
-
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 import { Sort } from '../types/Sort';
 
-export const onSortSelectComponentState = createComponentState<
+export const onSortSelectComponentState = createComponentStateV2<
   ((sort: Sort) => void) | undefined
 >({
   key: 'onSortSelectComponentState',
   defaultValue: undefined,
+  componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
 });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/selectedSortDirectionState.ts

@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
-
 import { SortDirection } from '@/object-record/object-sort-dropdown/types/SortDirection';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-const selectedSortDirectionState = atom<SortDirection>({
+export const selectedSortDirectionComponentState =
-  key: 'selectedSortDirectionState',
+  createComponentStateV2<SortDirection>({
-  default: 'asc',
+    key: 'selectedSortDirectionComponentState',
-});
+    defaultValue: 'asc',
-
+    componentInstanceContext: ObjectSortDropdownComponentInstanceContext,
-export default selectedSortDirectionState;
+  });

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

@@ -18,6 +18,7 @@ import { ViewPickerDropdown } from '@/views/view-picker/components/ViewPickerDro
 
 import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
 
+import { ObjectSortDropdownComponentInstanceContext } from '@/object-record/object-sort-dropdown/states/context/ObjectSortDropdownComponentInstanceContext';
 import { ViewEventContext } from '@/views/events/contexts/ViewEventContext';
 import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
 import { ViewBarDetails } from './ViewBarDetails';
@@ -68,12 +69,16 @@ export const ViewBar = ({
                 scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
               }}
             />
-            <ObjectSortDropdownButton
+            <ObjectSortDropdownComponentInstanceContext.Provider
-              sortDropdownId={sortDropdownId}
+              value={{ instanceId: sortDropdownId }}
-              hotkeyScope={{
+            >
-                scope: FiltersHotkeyScope.ObjectSortDropdownButton,
+              <ObjectSortDropdownButton
-              }}
+                sortDropdownId={sortDropdownId}
-            />
+                hotkeyScope={{
+                  scope: FiltersHotkeyScope.ObjectSortDropdownButton,
+                }}
+              />
+            </ObjectSortDropdownComponentInstanceContext.Provider>
             {optionsDropdownButton}
           </>
         }