diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 66003014e..1cb049749 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -172,4 +172,4 @@ jobs: key: root-node_modules-${{hashFiles('yarn.lock')}} restore-keys: root-node_modules- - name: Front / Run jest - run: yarn nx test twenty-front \ No newline at end of file + run: yarn nx coverage twenty-front \ No newline at end of file diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index ec0ff2882..9539629bf 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -17,7 +17,7 @@ "lint:ci": "yarn lint --config .eslintrc-ci.cjs", "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"", "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"", - "test": "jest src/modules/spreadsheet-import/utils/__tests__/dataMutations.test.ts", + "test": "jest", "test-watch": "jest --watch", "tsup": "tsup", "coverage": "jest --coverage", diff --git a/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx b/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx index ece319312..7803c8103 100644 --- a/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx +++ b/packages/twenty-front/src/effect-components/CommandMenuEffect.tsx @@ -5,7 +5,7 @@ import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuComma import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState'; export const CommandMenuEffect = () => { - const setCommands = useSetRecoilState(commandMenuCommandsState); + const setCommands = useSetRecoilState(commandMenuCommandsState()); const commands = COMMAND_MENU_COMMANDS; useEffect(() => { diff --git a/packages/twenty-front/src/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/effect-components/PageChangeEffect.tsx index c5d8b32f3..4e0f29928 100644 --- a/packages/twenty-front/src/effect-components/PageChangeEffect.tsx +++ b/packages/twenty-front/src/effect-components/PageChangeEffect.tsx @@ -45,7 +45,7 @@ export const PageChangeEffect = () => { const openCreateActivity = useOpenCreateActivityDrawer(); - const isSignUpDisabled = useRecoilValue(isSignUpDisabledState); + const isSignUpDisabled = useRecoilValue(isSignUpDisabledState()); useEffect(() => { if (!previousLocation || previousLocation !== location.pathname) { diff --git a/packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx b/packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx index 876d5a251..3c1b39bcb 100644 --- a/packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx +++ b/packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx @@ -11,7 +11,7 @@ import { Comment } from '../Comment'; import { mockComment, mockCommentWithLongValues } from './mock-comment'; const CommentSetterEffect = () => { - const setViewableActivity = useSetRecoilState(viewableActivityIdState); + const setViewableActivity = useSetRecoilState(viewableActivityIdState()); useEffect(() => { setViewableActivity('test-id'); diff --git a/packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx b/packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx index d61ebc25b..5206587ac 100644 --- a/packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx +++ b/packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx @@ -13,7 +13,7 @@ import { CommentHeader } from '../CommentHeader'; import { mockComment, mockCommentWithLongValues } from './mock-comment'; const CommentHeaderSetterEffect = () => { - const setViewableActivity = useSetRecoilState(viewableActivityIdState); + const setViewableActivity = useSetRecoilState(viewableActivityIdState()); useEffect(() => { setViewableActivity('test-id'); diff --git a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx index 71ca1afb3..aec4a248d 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx @@ -118,7 +118,7 @@ export const ActivityBodyEditor = ({ ); const [canCreateActivity, setCanCreateActivity] = useRecoilState( - canCreateActivityState, + canCreateActivityState(), ); const slashMenuItems = getSlashMenu(); diff --git a/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx b/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx index 16bdbed69..8647c485e 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityComments.tsx @@ -61,7 +61,7 @@ export const ActivityComments = ({ objectNameSingular: CoreObjectNameSingular.Comment, }); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { records: comments } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.Comment, diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx index 29c98e4ec..6c4c54065 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx @@ -29,15 +29,15 @@ export const ActivityEditorEffect = ({ ({ snapshot, set }) => () => { const isUpsertingActivityInDB = snapshot - .getLoadable(isUpsertingActivityInDBState) + .getLoadable(isUpsertingActivityInDBState()) .getValue(); const canCreateActivity = snapshot - .getLoadable(canCreateActivityState) + .getLoadable(canCreateActivityState()) .getValue(); const isActivityInCreateMode = snapshot - .getLoadable(isActivityInCreateModeState) + .getLoadable(isActivityInCreateModeState()) .getValue(); const activityFromStore = snapshot @@ -71,7 +71,7 @@ export const ActivityEditorEffect = ({ deleteActivityFromCache(activity); } - set(isActivityInCreateModeState, false); + set(isActivityInCreateModeState(), false); } else if (isNonNullable(activity)) { if ( activity.title !== activityTitle || diff --git a/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx b/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx index 4eb7b3803..db321d469 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx @@ -71,7 +71,7 @@ export const ActivityTitle = ({ activityId }: ActivityTitleProps) => { const activity = activityInStore as Activity; const [canCreateActivity, setCanCreateActivity] = useRecoilState( - canCreateActivityState, + canCreateActivityState(), ); const { upsertActivity } = useUpsertActivity(); diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts b/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts index dc40a314d..946a43e0f 100644 --- a/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts +++ b/packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts @@ -1,7 +1,7 @@ -import { emailThreadsPageStateScopeMap } from '@/activities/emails/state/emailThreadsPageStateScopeMap'; +import { emailThreadsPageComponentState } from '@/activities/emails/state/emailThreadsPageComponentState'; import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; type useEmailThreadStatesProps = { emailThreadScopeId?: string; @@ -17,6 +17,9 @@ export const useEmailThreadStates = ({ return { scopeId, - getEmailThreadsPageState: getState(emailThreadsPageStateScopeMap, scopeId), + getEmailThreadsPageState: extractComponentState( + emailThreadsPageComponentState, + scopeId, + ), }; }; diff --git a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts index a0e9bbc85..bbc6d4c28 100644 --- a/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts +++ b/packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts @@ -1,11 +1,11 @@ -import { useRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer'; import { viewableEmailThreadIdState } from '@/activities/emails/state/viewableEmailThreadIdState'; export const useEmailThread = () => { - const [, setViewableEmailThreadId] = useRecoilState( - viewableEmailThreadIdState, + const setViewableEmailThreadId = useSetRecoilState( + viewableEmailThreadIdState(), ); const openEmailThredRightDrawer = useOpenEmailThreadRightDrawer(); diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts index 1dbce6e00..7415ba501 100644 --- a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts +++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts @@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; export const useRightDrawerEmailThread = () => { - const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState); + const viewableEmailThreadId = useRecoilValue(viewableEmailThreadIdState()); const apolloClient = useApolloClient(); const thread = apolloClient.readFragment({ diff --git a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts new file mode 100644 index 000000000..a1d52b61d --- /dev/null +++ b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts @@ -0,0 +1,12 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export type EmailThreadsPageType = { + pageNumber: number; + hasNextPage: boolean; +}; + +export const emailThreadsPageComponentState = + createComponentState({ + key: 'emailThreadsPageComponentState', + defaultValue: { pageNumber: 1, hasNextPage: true }, + }); diff --git a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts b/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts deleted file mode 100644 index f7761acc7..000000000 --- a/packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export type EmailThreadsPageType = { - pageNumber: number; - hasNextPage: boolean; -}; - -export const emailThreadsPageStateScopeMap = - createStateScopeMap({ - key: 'emailThreadsPageStateScopeMap', - defaultValue: { pageNumber: 1, hasNextPage: true }, - }); diff --git a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts index 73b4a3b89..1785845e5 100644 --- a/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts +++ b/packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const viewableEmailThreadIdState = atom({ +export const viewableEmailThreadIdState = createState({ key: 'viewableEmailThreadIdState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx b/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx index 1a0cceee7..bfc66abd4 100644 --- a/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx +++ b/packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx @@ -10,7 +10,7 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { FileFolder, useUploadFileMutation } from '~/generated/graphql'; export const useUploadAttachmentFile = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const [uploadFile] = useUploadFileMutation(); const { createOneRecord: createOneAttachment } = diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx index a43b53fba..88da90b3a 100644 --- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx +++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx @@ -58,7 +58,7 @@ describe('useActivityConnectionUtils', () => { { snapshot.set( - objectMetadataItemsState, + objectMetadataItemsState(), getObjectMetadataItemsMock(), ); }} @@ -86,7 +86,7 @@ describe('useActivityConnectionUtils', () => { { snapshot.set( - objectMetadataItemsState, + objectMetadataItemsState(), getObjectMetadataItemsMock(), ); }} diff --git a/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts b/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts index 15e1fb1f9..00dacda4f 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts @@ -14,7 +14,7 @@ export const useActivityTargetObjectRecords = ({ }: { activityId: string; }) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const { records: activityTargets, loading: loadingActivityTargets } = useFindManyRecords({ diff --git a/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts b/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts index 5c1bd50d7..5acbc05da 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts @@ -27,7 +27,7 @@ export const useCreateActivityInCache = () => { objectNameSingular: CoreObjectNameSingular.Activity, }); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { record: currentWorkspaceMemberRecord } = useFindOneRecord({ objectNameSingular: CoreObjectNameSingular.WorkspaceMember, diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts index 9bcc1ec21..ae4d579a7 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts @@ -1,4 +1,4 @@ -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { activityIdInDrawerState } from '@/activities/states/activityIdInDrawerState'; import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer'; @@ -12,9 +12,9 @@ export const useOpenActivityRightDrawer = () => { const { openRightDrawer, isRightDrawerOpen, rightDrawerPage } = useRightDrawer(); const [viewableActivityId, setViewableActivityId] = useRecoilState( - viewableActivityIdState, + viewableActivityIdState(), ); - const [, setActivityIdInDrawer] = useRecoilState(activityIdInDrawerState); + const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState()); const setHotkeyScope = useSetHotkeyScope(); return (activityId: string) => { diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts index 6b7e83c44..5b4c313fb 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts @@ -23,21 +23,23 @@ export const useOpenCreateActivityDrawer = () => { const { createActivityInCache } = useCreateActivityInCache(); - const [, setActivityTargetableEntityArray] = useRecoilState( - activityTargetableEntityArrayState, + const setActivityTargetableEntityArray = useSetRecoilState( + activityTargetableEntityArrayState(), ); - const [, setViewableActivityId] = useRecoilState(viewableActivityIdState); + const setViewableActivityId = useSetRecoilState(viewableActivityIdState()); - const setIsCreatingActivity = useSetRecoilState(isActivityInCreateModeState); + const setIsCreatingActivity = useSetRecoilState( + isActivityInCreateModeState(), + ); const setTemporaryActivityForEditor = useSetRecoilState( - temporaryActivityForEditorState, + temporaryActivityForEditorState(), ); - const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState); + const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState()); const [, setIsUpsertingActivityInDB] = useRecoilState( - isUpsertingActivityInDBState, + isUpsertingActivityInDBState(), ); const openCreateActivityDrawer = async ({ diff --git a/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts b/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts index 169586a63..776118678 100644 --- a/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts +++ b/packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts @@ -21,7 +21,7 @@ import { isNonNullable } from '~/utils/isNonNullable'; // TODO: create a generic way to have records only in cache for create mode and delete them afterwards ? export const useUpsertActivity = () => { const [isActivityInCreateMode, setIsActivityInCreateMode] = useRecoilState( - isActivityInCreateModeState, + isActivityInCreateModeState(), ); const { updateOneRecord: updateOneActivity } = useUpdateOneRecord({ @@ -31,10 +31,10 @@ export const useUpsertActivity = () => { const { createActivityInDB } = useCreateActivityInDB(); const [, setIsUpsertingActivityInDB] = useRecoilState( - isUpsertingActivityInDBState, + isUpsertingActivityInDBState(), ); - const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState); + const setActivityIdInDrawer = useSetRecoilState(activityIdInDrawerState()); const objectShowPageTargetableObject = useRecoilValue( objectShowPageTargetableObjectState, diff --git a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx index 3275f0923..2c2c3a68e 100644 --- a/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx +++ b/packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx @@ -34,7 +34,9 @@ export const ActivityTargetInlineCellEditMode = ({ activity, activityTargetWithTargetRecords, }: ActivityTargetInlineCellEditModeProps) => { - const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState); + const [isActivityInCreateMode] = useRecoilState( + isActivityInCreateModeState(), + ); const selectedTargetObjectIds = activityTargetWithTargetRecords.map( (activityTarget) => ({ diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx index a6653130a..b52de3b41 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx +++ b/packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx @@ -36,13 +36,13 @@ const StyledButtonContainer = styled.div` `; export const ActivityActionBar = () => { - const viewableActivityId = useRecoilValue(viewableActivityIdState); - const activityIdInDrawer = useRecoilValue(activityIdInDrawerState); + const viewableActivityId = useRecoilValue(viewableActivityIdState()); + const activityIdInDrawer = useRecoilValue(activityIdInDrawerState()); const activityTargetableEntityArray = useRecoilValue( - activityTargetableEntityArrayState, + activityTargetableEntityArrayState(), ); - const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState); + const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState()); const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({ objectNameSingular: CoreObjectNameSingular.Activity, }); @@ -54,13 +54,15 @@ export const ActivityActionBar = () => { ); const [temporaryActivityForEditor, setTemporaryActivityForEditor] = - useRecoilState(temporaryActivityForEditorState); + useRecoilState(temporaryActivityForEditorState()); const { deleteActivityFromCache } = useDeleteActivityFromCache(); - const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState); + const [isActivityInCreateMode] = useRecoilState( + isActivityInCreateModeState(), + ); const [isUpsertingActivityInDB] = useRecoilState( - isUpsertingActivityInDBState, + isUpsertingActivityInDBState(), ); const objectShowPageTargetableObject = useRecoilValue( diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx index fe6ac8eca..4ec49de22 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx +++ b/packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx @@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS import { RightDrawerActivity } from '../RightDrawerActivity'; export const RightDrawerCreateActivity = () => { - const viewableActivityId = useRecoilValue(viewableActivityIdState); + const viewableActivityId = useRecoilValue(viewableActivityIdState()); return ( <> diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx index 288d7aca8..971d34b81 100644 --- a/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx +++ b/packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx @@ -5,7 +5,7 @@ import { viewableActivityIdState } from '@/activities/states/viewableActivityIdS import { RightDrawerActivity } from '../RightDrawerActivity'; export const RightDrawerEditActivity = () => { - const viewableActivityId = useRecoilValue(viewableActivityIdState); + const viewableActivityId = useRecoilValue(viewableActivityIdState()); return ( <> diff --git a/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts b/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts index 452dc0220..b9d557957 100644 --- a/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts @@ -1,9 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const activityBodyFamilyState = atomFamily< +export const activityBodyFamilyState = createFamilyState< string, { activityId: string } >({ key: 'activityBodyFamilyState', - default: '', + defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts b/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts index 7bc9362fc..b275db312 100644 --- a/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const activityIdInDrawerState = atom({ +export const activityIdInDrawerState = createState({ key: 'activityIdInDrawerState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts index c3a06d48f..dc1695f10 100644 --- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts @@ -1,10 +1,10 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { ActivityTargetableObject } from '../types/ActivityTargetableEntity'; -export const activityTargetableEntityArrayState = atom< +export const activityTargetableEntityArrayState = createState< ActivityTargetableObject[] >({ key: 'activities/targetable-entity-array', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts b/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts index 6196bae01..5a02e57fc 100644 --- a/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts @@ -1,9 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const activityTitleFamilyState = atomFamily< +export const activityTitleFamilyState = createFamilyState< string, { activityId: string } >({ key: 'activityTitleFamilyState', - default: '', + defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts b/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts index 096df500d..f47e13f84 100644 --- a/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts +++ b/packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts @@ -1,9 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const activityTitleHasBeenSetFamilyState = atomFamily< +export const activityTitleHasBeenSetFamilyState = createFamilyState< boolean, { activityId: string } >({ key: 'activityTitleHasBeenSetFamilyState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts index 6d1062371..287786f10 100644 --- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts +++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const canCreateActivityState = atom({ +export const canCreateActivityState = createState({ key: 'canCreateActivityState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts index d0f32a483..819670812 100644 --- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts +++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isActivityInCreateModeState = atom({ +export const isActivityInCreateModeState = createState({ key: 'isActivityInCreateModeState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts index 315b623bb..c1a560b82 100644 --- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts +++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isUpsertingActivityInDBState = atom({ +export const isUpsertingActivityInDBState = createState({ key: 'isUpsertingActivityInDBState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts b/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts index 553c75110..e50a70c48 100644 --- a/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts +++ b/packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts @@ -1,8 +1,9 @@ -import { atom } from 'recoil'; - import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const targetableObjectsInDrawerState = atom({ +export const targetableObjectsInDrawerState = createState< + ActivityTargetableObject[] +>({ key: 'targetableObjectsInDrawerState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts b/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts index 5b657a369..b1f64681f 100644 --- a/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts +++ b/packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts @@ -1,8 +1,8 @@ -import { atom } from 'recoil'; - import { ActivityForEditor } from '@/activities/types/ActivityForEditor'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const temporaryActivityForEditorState = atom({ - key: 'temporaryActivityForEditorState', - default: null, -}); +export const temporaryActivityForEditorState = + createState({ + key: 'temporaryActivityForEditorState', + defaultValue: null, + }); diff --git a/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts b/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts index 95cfc1712..85aab18a1 100644 --- a/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts +++ b/packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const viewableActivityIdState = atom({ +export const viewableActivityIdState = createState({ key: 'activities/viewable-activity-id', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx b/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx index f725249b4..802777746 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx @@ -9,10 +9,10 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { parseDate } from '~/utils/date-utils'; export const CurrentUserDueTaskCountEffect = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const [currentUserDueTaskCount, setCurrentUserDueTaskCount] = useRecoilState( - currentUserDueTaskCountState, + currentUserDueTaskCountState(), ); const { records: tasks } = useFindManyRecords({ diff --git a/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts b/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts index 836ed21ba..8ef7e168f 100644 --- a/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts +++ b/packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts @@ -7,7 +7,7 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { parseDate } from '~/utils/date-utils'; export const useCurrentUserTaskCount = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { records: tasks } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.Activity, diff --git a/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts b/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts index 4c7653ddf..f823e49a7 100644 --- a/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts +++ b/packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const currentUserDueTaskCountState = atom({ - default: 0, +export const currentUserDueTaskCountState = createState({ + defaultValue: 0, key: 'currentUserDueTaskCountState', }); diff --git a/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx b/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx index 37cc77560..96621b34a 100644 --- a/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx +++ b/packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx @@ -33,7 +33,7 @@ export const Timeline = ({ targetableObject: ActivityTargetableObject; }) => { const { initialized, noActivities } = useRecoilValue( - timelineActivitiesNetworkingState, + timelineActivitiesNetworkingState(), ); const showEmptyState = noActivities; diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx index f509a4781..59a5a925e 100644 --- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx +++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx @@ -26,7 +26,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)``; export const TimelineItemsContainer = () => { const timelineActivitiesForGroup = useRecoilValue( - timelineActivitiesForGroupState, + timelineActivitiesForGroupState(), ); const groupedActivities = groupActivitiesByMonth(timelineActivitiesForGroup); diff --git a/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx b/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx index 2f548e80a..5159d5d36 100644 --- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx +++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx @@ -35,10 +35,10 @@ export const TimelineQueryEffect = ({ }); const [timelineActivitiesNetworking, setTimelineActivitiesNetworking] = - useRecoilState(timelineActivitiesNetworkingState); + useRecoilState(timelineActivitiesNetworkingState()); const [timelineActivitiesForGroup, setTimelineActivitiesForGroup] = - useRecoilState(timelineActivitiesForGroupState); + useRecoilState(timelineActivitiesForGroupState()); useEffect(() => { if (!isNonNullable(targetableObject)) { diff --git a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts index de045ed03..f2acc7a33 100644 --- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts +++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts @@ -1,11 +1,10 @@ -import { atomFamily } from 'recoil'; - import { Activity } from '@/activities/types/Activity'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const timelineActivitiesFammilyState = atomFamily< +export const timelineActivitiesFammilyState = createFamilyState< Activity | null, string >({ key: 'timelineActivitiesFammilyState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts index ddbea64f2..f976d78fd 100644 --- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts +++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts @@ -1,10 +1,9 @@ -import { atom } from 'recoil'; - import { ActivityForActivityGroup } from '@/activities/timeline/utils/groupActivitiesByMonth'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const timelineActivitiesForGroupState = atom( - { - key: 'timelineActivitiesForGroupState', - default: [], - }, -); +export const timelineActivitiesForGroupState = createState< + ActivityForActivityGroup[] +>({ + key: 'timelineActivitiesForGroupState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts index e3ca7a837..b652b0def 100644 --- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts +++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts @@ -1,11 +1,11 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const timelineActivitiesNetworkingState = atom<{ +export const timelineActivitiesNetworkingState = createState<{ initialized: boolean; noActivities: boolean; }>({ key: 'timelineActivitiesNetworkingState', - default: { + defaultValue: { initialized: false, noActivities: false, }, diff --git a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts index 767bb5e8f..ece59dab2 100644 --- a/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts +++ b/packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts @@ -1,11 +1,10 @@ -import { atomFamily } from 'recoil'; - import { Activity } from '@/activities/types/Activity'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const timelineActivityWithoutTargetsFamilyState = atomFamily< +export const timelineActivityWithoutTargetsFamilyState = createFamilyState< Pick | null, string >({ key: 'timelineActivityFirstLevelFamilySelector', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts b/packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts index 6cb0fcf4d..75f80b4ba 100644 --- a/packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts +++ b/packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { useRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; import { telemetryState } from '@/client-config/states/telemetryState'; import { useCreateEventMutation } from '~/generated/graphql'; @@ -13,7 +13,7 @@ export interface EventData { } export const useEventTracker = () => { - const [telemetry] = useRecoilState(telemetryState); + const telemetry = useRecoilValue(telemetryState()); const [createEventMutation] = useCreateEventMutation(); return useCallback( diff --git a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts b/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts index 8c1129655..725deb426 100644 --- a/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts +++ b/packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts @@ -16,11 +16,11 @@ import { ApolloFactory } from '../services/apollo.factory'; export const useApolloFactory = () => { // eslint-disable-next-line @nx/workspace-no-state-useref const apolloRef = useRef | null>(null); - const [isDebugMode] = useRecoilState(isDebugModeState); + const [isDebugMode] = useRecoilState(isDebugModeState()); const navigate = useNavigate(); const isMatchingLocation = useIsMatchingLocation(); - const [tokenPair, setTokenPair] = useRecoilState(tokenPairState); + const [tokenPair, setTokenPair] = useRecoilState(tokenPairState()); const apolloClient = useMemo(() => { apolloRef.current = new ApolloFactory({ diff --git a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx index 25bfda751..230075cdb 100644 --- a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx +++ b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx @@ -76,13 +76,13 @@ describe('useAuth', () => { const { result } = renderHook( () => { const client = useApolloClient(); - const icons = useRecoilValue(iconsState); - const authProviders = useRecoilValue(authProvidersState); - const billing = useRecoilValue(billingState); - const isSignInPrefilled = useRecoilValue(isSignInPrefilledState); - const supportChat = useRecoilValue(supportChatState); - const telemetry = useRecoilValue(telemetryState); - const isDebugMode = useRecoilValue(isDebugModeState); + const icons = useRecoilValue(iconsState()); + const authProviders = useRecoilValue(authProvidersState()); + const billing = useRecoilValue(billingState()); + const isSignInPrefilled = useRecoilValue(isSignInPrefilledState()); + const supportChat = useRecoilValue(supportChatState()); + const telemetry = useRecoilValue(telemetryState()); + const isDebugMode = useRecoilValue(isDebugModeState()); return { ...useAuth(), client, diff --git a/packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts b/packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts index 2674f26d9..a441c4797 100644 --- a/packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts +++ b/packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts @@ -9,7 +9,7 @@ const renderHooks = () => { const { result } = renderHook( () => { const isLogged = useIsLogged(); - const setTokenPair = useSetRecoilState(tokenPairState); + const setTokenPair = useSetRecoilState(tokenPairState()); return { isLogged, diff --git a/packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts b/packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts index 0758ed0d7..51387e2c9 100644 --- a/packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts +++ b/packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts @@ -35,13 +35,13 @@ const renderHooks = () => { const { result } = renderHook( () => { const onboardingStatus = useOnboardingStatus(); - const setBilling = useSetRecoilState(billingState); - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); + const setBilling = useSetRecoilState(billingState()); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); - const setTokenPair = useSetRecoilState(tokenPairState); - const setVerifyPending = useSetRecoilState(isVerifyPendingState); + const setTokenPair = useSetRecoilState(tokenPairState()); + const setVerifyPending = useSetRecoilState(isVerifyPendingState()); return { onboardingStatus, diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts index 85c11d267..dc0d2458f 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts +++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts @@ -32,14 +32,14 @@ import { currentUserState } from '../states/currentUserState'; import { tokenPairState } from '../states/tokenPairState'; export const useAuth = () => { - const [, setTokenPair] = useRecoilState(tokenPairState); - const setCurrentUser = useSetRecoilState(currentUserState); + const [, setTokenPair] = useRecoilState(tokenPairState()); + const setCurrentUser = useSetRecoilState(currentUserState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); - const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); + const setIsVerifyPendingState = useSetRecoilState(isVerifyPendingState()); const [challenge] = useChallengeMutation(); const [signUp] = useSignUpMutation(); @@ -141,26 +141,26 @@ export const useAuth = () => { ({ snapshot }) => async () => { const emptySnapshot = snapshot_UNSTABLE(); - const iconsValue = snapshot.getLoadable(iconsState).getValue(); + const iconsValue = snapshot.getLoadable(iconsState()).getValue(); const authProvidersValue = snapshot - .getLoadable(authProvidersState) + .getLoadable(authProvidersState()) .getValue(); - const billing = snapshot.getLoadable(billingState).getValue(); + const billing = snapshot.getLoadable(billingState()).getValue(); const isSignInPrefilled = snapshot - .getLoadable(isSignInPrefilledState) + .getLoadable(isSignInPrefilledState()) .getValue(); - const supportChat = snapshot.getLoadable(supportChatState).getValue(); - const telemetry = snapshot.getLoadable(telemetryState).getValue(); - const isDebugMode = snapshot.getLoadable(isDebugModeState).getValue(); + const supportChat = snapshot.getLoadable(supportChatState()).getValue(); + const telemetry = snapshot.getLoadable(telemetryState()).getValue(); + const isDebugMode = snapshot.getLoadable(isDebugModeState()).getValue(); const initialSnapshot = emptySnapshot.map(({ set }) => { - set(iconsState, iconsValue); - set(authProvidersState, authProvidersValue); - set(billingState, billing); - set(isSignInPrefilledState, isSignInPrefilled); - set(supportChatState, supportChat); - set(telemetryState, telemetry); - set(isDebugModeState, isDebugMode); + set(iconsState(), iconsValue); + set(authProvidersState(), authProvidersValue); + set(billingState(), billing); + set(isSignInPrefilledState(), isSignInPrefilled); + set(supportChatState(), supportChat); + set(telemetryState(), telemetry); + set(isDebugModeState(), isDebugMode); return undefined; }); diff --git a/packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts b/packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts index 4399b564c..1c235a747 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts +++ b/packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts @@ -5,8 +5,8 @@ import { isVerifyPendingState } from '@/auth/states/isVerifyPendingState'; import { tokenPairState } from '../states/tokenPairState'; export const useIsLogged = (): boolean => { - const [tokenPair] = useRecoilState(tokenPairState); - const isVerifyPending = useRecoilValue(isVerifyPendingState); + const [tokenPair] = useRecoilState(tokenPairState()); + const isVerifyPending = useRecoilValue(isVerifyPendingState()); return !!tokenPair && !isVerifyPending; }; diff --git a/packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts b/packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts index 91a8a60e8..bd8ed6b0d 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts +++ b/packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts @@ -11,9 +11,9 @@ import { } from '../utils/getOnboardingStatus'; export const useOnboardingStatus = (): OnboardingStatus | undefined => { - const billing = useRecoilValue(billingState); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const billing = useRecoilValue(billingState()); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const isLoggedIn = useIsLogged(); return getOnboardingStatus({ diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index bc1997f2d..b028ba01a 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -46,7 +46,7 @@ const StyledInputContainer = styled.div` `; export const SignInUpForm = () => { - const [authProviders] = useRecoilState(authProvidersState); + const [authProviders] = useRecoilState(authProvidersState()); const [showErrors, setShowErrors] = useState(false); const { handleResetPassword } = useHandleResetPassword(); const workspace = useWorkspaceFromInviteHash(); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts index ee090c127..e659696c4 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts +++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts @@ -9,7 +9,7 @@ import { WorkspaceMember } from '~/generated/graphql.tsx'; export const useNavigateAfterSignInUp = () => { const navigate = useNavigate(); - const billing = useRecoilValue(billingState); + const billing = useRecoilValue(billingState()); const navigateAfterSignInUp = useCallback( ( currentWorkspace: CurrentWorkspace, diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts index 591abf368..6677754d2 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts +++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts @@ -19,7 +19,7 @@ const validationSchema = z export type Form = z.infer; export const useSignInUpForm = () => { - const isSignInPrefilled = useRecoilValue(isSignInPrefilledState); + const isSignInPrefilled = useRecoilValue(isSignInPrefilledState()); const form = useForm
({ mode: 'onChange', defaultValues: { diff --git a/packages/twenty-front/src/modules/auth/states/currentUserState.ts b/packages/twenty-front/src/modules/auth/states/currentUserState.ts index db3ed7b67..49339e189 100644 --- a/packages/twenty-front/src/modules/auth/states/currentUserState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentUserState.ts @@ -1,5 +1,4 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { User } from '~/generated/graphql'; export type CurrentUser = Pick< @@ -7,7 +6,7 @@ export type CurrentUser = Pick< 'id' | 'email' | 'supportUserHash' | 'canImpersonate' >; -export const currentUserState = atom({ +export const currentUserState = createState({ key: 'currentUserState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts index 938e304a6..a6fbe62b0 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts @@ -1,11 +1,10 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; -export const currentWorkspaceMemberState = atom | null>({ key: 'currentWorkspaceMemberState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts index 594d16e1b..5f9032e9d 100644 --- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts +++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts @@ -1,5 +1,4 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { Workspace } from '~/generated/graphql'; export type CurrentWorkspace = Pick< @@ -14,7 +13,7 @@ export type CurrentWorkspace = Pick< | 'activationStatus' >; -export const currentWorkspaceState = atom({ +export const currentWorkspaceState = createState({ key: 'currentWorkspaceState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts index 6986efab0..1f976ebcd 100644 --- a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts +++ b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isVerifyPendingState = atom({ +export const isVerifyPendingState = createState({ key: 'isVerifyPendingState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts index 2bf851df4..25589a0b6 100644 --- a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts +++ b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts @@ -1,10 +1,9 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { AuthTokenPair } from '~/generated/graphql'; import { cookieStorageEffect } from '~/utils/recoil-effects'; -export const tokenPairState = atom({ +export const tokenPairState = createState({ key: 'tokenPairState', - default: null, + defaultValue: null, effects: [cookieStorageEffect('tokenPair')], }); diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx index 75aa82669..debb354f1 100644 --- a/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx +++ b/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx @@ -15,17 +15,17 @@ import { isNonNullable } from '~/utils/isNonNullable'; export const ClientConfigProvider: React.FC = ({ children, }) => { - const setAuthProviders = useSetRecoilState(authProvidersState); - const setIsDebugMode = useSetRecoilState(isDebugModeState); + const setAuthProviders = useSetRecoilState(authProvidersState()); + const setIsDebugMode = useSetRecoilState(isDebugModeState()); - const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState); - const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState); + const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState()); + const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState()); - const setBilling = useSetRecoilState(billingState); - const setTelemetry = useSetRecoilState(telemetryState); - const setSupportChat = useSetRecoilState(supportChatState); + const setBilling = useSetRecoilState(billingState()); + const setTelemetry = useSetRecoilState(telemetryState()); + const setSupportChat = useSetRecoilState(supportChatState()); - const setSentryConfig = useSetRecoilState(sentryConfigState); + const setSentryConfig = useSetRecoilState(sentryConfigState()); const { data, loading } = useGetClientConfigQuery(); diff --git a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts index e0b087fa4..2fbc24d6f 100644 --- a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts +++ b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { AuthProviders } from '~/generated/graphql'; -export const authProvidersState = atom({ +export const authProvidersState = createState({ key: 'authProvidersState', - default: { google: false, magicLink: false, password: true }, + defaultValue: { google: false, magicLink: false, password: true }, }); diff --git a/packages/twenty-front/src/modules/client-config/states/billingState.ts b/packages/twenty-front/src/modules/client-config/states/billingState.ts index 4f0982b49..e0f46cf34 100644 --- a/packages/twenty-front/src/modules/client-config/states/billingState.ts +++ b/packages/twenty-front/src/modules/client-config/states/billingState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { Billing } from '~/generated/graphql'; -export const billingState = atom({ +export const billingState = createState({ key: 'billingState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts index 82d8be49d..7b9b0cf5a 100644 --- a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isDebugModeState = atom({ +export const isDebugModeState = createState({ key: 'isDebugModeState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts b/packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts index 649f42d25..57cc70c57 100644 --- a/packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isSignInPrefilledState = atom({ +export const isSignInPrefilledState = createState({ key: 'isSignInPrefilledState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts b/packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts index da7ec103e..095f74b1b 100644 --- a/packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts +++ b/packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isSignUpDisabledState = atom({ +export const isSignUpDisabledState = createState({ key: 'isSignUpDisabledState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts index e88fd2483..fd4b7a1c9 100644 --- a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts +++ b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { Sentry } from '~/generated/graphql'; -export const sentryConfigState = atom({ +export const sentryConfigState = createState({ key: 'sentryConfigState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts index 859770493..28c739356 100644 --- a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts +++ b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts @@ -1,10 +1,9 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { Support } from '~/generated/graphql'; -export const supportChatState = atom({ +export const supportChatState = createState({ key: 'supportChatState', - default: { + defaultValue: { supportDriver: 'none', supportFrontChatId: null, }, diff --git a/packages/twenty-front/src/modules/client-config/states/telemetryState.ts b/packages/twenty-front/src/modules/client-config/states/telemetryState.ts index c6d095807..1811862fd 100644 --- a/packages/twenty-front/src/modules/client-config/states/telemetryState.ts +++ b/packages/twenty-front/src/modules/client-config/states/telemetryState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { Telemetry } from '~/generated/graphql'; -export const telemetryState = atom({ +export const telemetryState = createState({ key: 'telemetryState', - default: { enabled: true, anonymizationEnabled: true }, + defaultValue: { enabled: true, anonymizationEnabled: true }, }); diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index 3cd35214f..e4cef7b5f 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -109,9 +109,9 @@ export const CommandMenu = () => { const openActivityRightDrawer = useOpenActivityRightDrawer(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); const [commandMenuSearch, setCommandMenuSearch] = useRecoilState( - commandMenuSearchState, + commandMenuSearchState(), ); - const commandMenuCommands = useRecoilValue(commandMenuCommandsState); + const commandMenuCommands = useRecoilValue(commandMenuCommandsState()); const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu(); const handleSearchChange = (event: React.ChangeEvent) => { diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx index 6cf5c7fbf..95e4da7d1 100644 --- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx @@ -27,9 +27,9 @@ const meta: Meta = { component: CommandMenu, decorators: [ (Story) => { - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } = useCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx index e1ee55013..2cdec0fdc 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx +++ b/packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx @@ -25,7 +25,7 @@ const renderHooks = () => { const commandMenu = useCommandMenu(); const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState); const [commandMenuCommands, setCommandMenuCommands] = useRecoilState( - commandMenuCommandsState, + commandMenuCommandsState(), ); return { diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index 249eb89d8..cf422e523 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -17,7 +17,7 @@ import { Command } from '../types/Command'; export const useCommandMenu = () => { const navigate = useNavigate(); const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState); - const setCommands = useSetRecoilState(commandMenuCommandsState); + const setCommands = useSetRecoilState(commandMenuCommandsState()); const { resetSelectedItem } = useSelectableList('command-menu-list'); const { setHotkeyScopeAndMemorizePreviousScope, @@ -52,7 +52,7 @@ export const useCommandMenu = () => { .getLoadable(isCommandMenuOpenedState) .getValue(); - set(commandMenuSearchState, ''); + set(commandMenuSearchState(), ''); if (isCommandMenuOpened) { closeCommandMenu(); diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts index cfd4c3596..28d7cdc9d 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts @@ -1,10 +1,10 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { Command, CommandType } from '../types/Command'; -export const commandMenuCommandsState = atom({ +export const commandMenuCommandsState = createState({ key: 'command-menu/commandMenuCommandsState', - default: [ + defaultValue: [ { id: '', to: '', diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts index b5be2a5d7..5d6aa126d 100644 --- a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts +++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const commandMenuSearchState = atom({ +export const commandMenuSearchState = createState({ key: 'command-menu/commandMenuSearchState', - default: '', + defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx b/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx index 93a6af6f0..7ce150846 100644 --- a/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx +++ b/packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx @@ -5,7 +5,7 @@ import { useRecoilValue } from 'recoil'; import { isDebugModeState } from '@/client-config/states/isDebugModeState'; export const ApolloDevLogEffect = () => { - const isDebugMode = useRecoilValue(isDebugModeState); + const isDebugMode = useRecoilValue(isDebugModeState()); useEffect(() => { if (isDebugMode) { diff --git a/packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx b/packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx index 5031c1963..e603623f7 100644 --- a/packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx +++ b/packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx @@ -15,7 +15,7 @@ const formatTitle = (stateName: string) => { }; export const RecoilDebugObserverEffect = () => { - const isDebugMode = useRecoilValue(isDebugModeState); + const isDebugMode = useRecoilValue(isDebugModeState()); useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => { if (!isDebugMode) { diff --git a/packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx b/packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx index ba7e1978d..639f6c781 100644 --- a/packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx @@ -11,11 +11,11 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { isNonNullable } from '~/utils/isNonNullable'; export const SentryInitEffect = () => { - const sentryConfig = useRecoilValue(sentryConfigState); + const sentryConfig = useRecoilValue(sentryConfigState()); - const currentUser = useRecoilValue(currentUserState); - const currentWorkspace = useRecoilValue(currentWorkspaceState); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentUser = useRecoilValue(currentUserState()); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const [isSentryInitialized, setIsSentryInitialized] = useState(false); diff --git a/packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx b/packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx index f7fb44d6f..08d86a5b7 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx +++ b/packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx @@ -50,11 +50,11 @@ describe('useFavorites', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember(mockWorkspaceMember); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useFavorites(); @@ -71,11 +71,11 @@ describe('useFavorites', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember(mockWorkspaceMember); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useFavorites(); @@ -99,11 +99,11 @@ describe('useFavorites', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember(mockWorkspaceMember); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useFavorites(); @@ -124,11 +124,11 @@ describe('useFavorites', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember(mockWorkspaceMember); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useFavorites(); diff --git a/packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts b/packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts index 8614bfc60..19c71c113 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts +++ b/packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts @@ -14,7 +14,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql'; import { isNonNullable } from '~/utils/isNonNullable'; export const useFavorites = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const favoriteObjectNameSingular = 'favorite'; diff --git a/packages/twenty-front/src/modules/favorites/states/favoritesState.ts b/packages/twenty-front/src/modules/favorites/states/favoritesState.ts index 298de69af..a15a76e70 100644 --- a/packages/twenty-front/src/modules/favorites/states/favoritesState.ts +++ b/packages/twenty-front/src/modules/favorites/states/favoritesState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - import { Favorite } from '@/favorites/types/Favorite'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const favoritesState = atom({ +export const favoritesState = createState({ key: 'favoritesState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx index 0a8a50cdd..216a12462 100644 --- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx @@ -28,12 +28,12 @@ export const AppNavigationDrawer = ({ const isMobile = useIsMobile(); const isSettingsPage = useIsSettingsPage(); const currentMobileNavigationDrawer = useRecoilValue( - currentMobileNavigationDrawerState, + currentMobileNavigationDrawerState(), ); const setIsNavigationDrawerOpen = useSetRecoilState( isNavigationDrawerOpenState, ); - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const isSettingsDrawer = isMobile ? currentMobileNavigationDrawer === 'settings' diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index f8a437ed7..102f5d7cf 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -24,11 +24,13 @@ export const MainNavigationDrawerItems = () => { const isMobile = useIsMobile(); const { toggleCommandMenu } = useCommandMenu(); const isTasksPage = useIsTasksPage(); - const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState); + const currentUserDueTaskCount = useRecoilValue( + currentUserDueTaskCountState(), + ); const navigate = useNavigate(); const location = useLocation(); const setNavigationMemorizedUrl = useSetRecoilState( - navigationMemorizedUrlState, + navigationMemorizedUrlState(), ); return ( diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index 3680415ba..d671a284e 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -30,7 +30,7 @@ export const MobileNavigationBar = () => { isNavigationDrawerOpenState, ); const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] = - useRecoilState(currentMobileNavigationDrawerState); + useRecoilState(currentMobileNavigationDrawerState()); const activeItemName = isNavigationDrawerOpen ? currentMobileNavigationDrawer diff --git a/packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx b/packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx index e267c7e24..3c538ccd6 100644 --- a/packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx +++ b/packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx @@ -24,7 +24,7 @@ const MobileNavigationDrawerStateSetterEffect = ({ isNavigationDrawerOpenState, ); const setCurrentMobileNavigationDrawer = useSetRecoilState( - currentMobileNavigationDrawerState, + currentMobileNavigationDrawerState(), ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts index acd302d44..44acf85a1 100644 --- a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts +++ b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts @@ -1,6 +1,8 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const currentMobileNavigationDrawerState = atom<'main' | 'settings'>({ +export const currentMobileNavigationDrawerState = createState< + 'main' | 'settings' +>({ key: 'currentMobileNavigationDrawerState', - default: 'main', + defaultValue: 'main', }); diff --git a/packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx b/packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx index 2af836298..38bd8fc66 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx @@ -13,7 +13,7 @@ export const ApolloMetadataClientProvider = ({ }: { children: React.ReactNode; }) => { - const [tokenPair] = useRecoilState(tokenPairState); + const [tokenPair] = useRecoilState(tokenPairState()); const apolloMetadataClient = useMemo(() => { if (isNonEmptyString(tokenPair?.accessToken.token)) { return new ApolloClient({ diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx index 9288ec017..0313a164f 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx @@ -10,7 +10,7 @@ export const ObjectMetadataItemsLoadEffect = () => { useFindManyObjectMetadataItems(); const [objectMetadataItems, setObjectMetadataItems] = useRecoilState( - objectMetadataItemsState, + objectMetadataItemsState(), ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx index 872c8da19..73441a496 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx @@ -9,8 +9,8 @@ import { RelationPickerScope } from '@/object-record/relation-picker/scopes/Rela export const ObjectMetadataItemsProvider = ({ children, }: React.PropsWithChildren) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const shouldDisplayChildren = () => { if (objectMetadataItems.length > 0) { return true; diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx index e544f642c..d23f347d6 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx @@ -12,7 +12,7 @@ describe('useFilterOutUnexistingObjectMetadataItems', () => { it('should work as expected', async () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems.slice(1)); return useFilterOutUnexistingObjectMetadataItems(); diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx index 1a4c0e2cb..6f25e039c 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx @@ -17,7 +17,7 @@ describe('useGetObjectRecordIdentifierByNameSingular', () => { record: any; objectNameSingular: string; }) => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx index b13554ed6..454866290 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx @@ -31,7 +31,7 @@ describe('useGetRelationMetadata', () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); useEffect(() => { setMetadataItems(objectMetadataItems); diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx index 43a5b676a..31d6bdfe9 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx @@ -127,7 +127,7 @@ describe('useMapFieldMetadataToGraphQLQuery', () => { it('should work as expected', async () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return { diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx index c93057e2e..e13c468e4 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx @@ -44,7 +44,7 @@ describe('useObjectMetadataItemForSettings', () => { it('should findActiveObjectMetadataItemBySlug', async () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useObjectMetadataItemForSettings(); @@ -64,7 +64,7 @@ describe('useObjectMetadataItemForSettings', () => { it('should findObjectMetadataItemById', async () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useObjectMetadataItemForSettings(); @@ -86,7 +86,7 @@ describe('useObjectMetadataItemForSettings', () => { it('should findObjectMetadataItemByNamePlural', async () => { const { result } = renderHook( () => { - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); return useObjectMetadataItemForSettings(); diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts index be32e2162..53c878f87 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts @@ -5,7 +5,7 @@ import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectReco import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier'; export const useGetObjectRecordIdentifierByNameSingular = () => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); return (record: any, objectNameSingular: string): ObjectRecordIdentifier => { const objectMetadataItem = objectMetadataItems.find( diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts index 41a69a93c..6ddf40b41 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts @@ -6,7 +6,7 @@ import { FieldType } from '@/object-record/record-field/types/FieldType'; import { FieldMetadataItem } from '../types/FieldMetadataItem'; export const useMapFieldMetadataToGraphQLQuery = () => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const mapFieldMetadataToGraphQLQuery = ({ field, diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts index 95b88de5e..1a1560003 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts @@ -41,7 +41,7 @@ export const useObjectMetadataItem = ( { objectNameSingular }: ObjectMetadataItemIdentifier, depth?: number, ) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const mockObjectMetadataItems = getObjectMetadataItemsMock(); @@ -52,7 +52,7 @@ export const useObjectMetadataItem = ( }), ); - let objectMetadataItems = useRecoilValue(objectMetadataItemsState); + let objectMetadataItems = useRecoilValue(objectMetadataItemsState()); if (currentWorkspace?.activationStatus !== 'active') { objectMetadataItem = diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemForSettings.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemForSettings.ts index eb8bfe651..fce038869 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemForSettings.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemForSettings.ts @@ -5,7 +5,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { getObjectSlug } from '../utils/getObjectSlug'; export const useObjectMetadataItemForSettings = () => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const activeObjectMetadataItems = objectMetadataItems.filter( ({ isActive, isSystem }) => isActive && !isSystem, diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemOnly.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemOnly.ts index 12dc6f28e..ca269ed1e 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemOnly.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemOnly.ts @@ -12,7 +12,7 @@ import { ObjectMetadataItemIdentifier } from '../types/ObjectMetadataItemIdentif export const useObjectMetadataItemOnly = ({ objectNameSingular, }: ObjectMetadataItemIdentifier) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const mockObjectMetadataItems = getObjectMetadataItemsMock(); @@ -23,7 +23,7 @@ export const useObjectMetadataItemOnly = ({ }), ); - let objectMetadataItems = useRecoilValue(objectMetadataItemsState); + let objectMetadataItems = useRecoilValue(objectMetadataItemsState()); if (currentWorkspace?.activationStatus !== 'active') { objectMetadataItem = diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItems.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItems.ts index 215d61200..0085cccab 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItems.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItems.ts @@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; export const useObjectMetadataItems = () => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); return { objectMetadataItems, diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNamePluralFromSingular.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNamePluralFromSingular.ts index 412006108..df0e65af0 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNamePluralFromSingular.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNamePluralFromSingular.ts @@ -10,7 +10,7 @@ export const useObjectNamePluralFromSingular = ({ }: { objectNameSingular: string; }) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const mockObjectMetadataItems = getObjectMetadataItemsMock(); let objectMetadataItem = useRecoilValue( diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNameSingularFromPlural.ts b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNameSingularFromPlural.ts index 6a00794f8..a63b56305 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNameSingularFromPlural.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/useObjectNameSingularFromPlural.ts @@ -10,7 +10,7 @@ export const useObjectNameSingularFromPlural = ({ }: { objectNamePlural: string; }) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const mockObjectMetadataItems = getObjectMetadataItemsMock(); diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts index b264758fb..7e0d695b3 100644 --- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts +++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts @@ -16,7 +16,7 @@ export const objectMetadataItemFamilySelector = selectorFamily< get: ({ objectNameType, objectName }: ObjectMetadataItemSelector) => ({ get }) => { - const objectMetadataItems = get(objectMetadataItemsState); + const objectMetadataItems = get(objectMetadataItemsState()); if (objectNameType === 'singular') { return ( diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts index 30dfb115e..7168e5054 100644 --- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts +++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts @@ -8,7 +8,7 @@ export const objectMetadataItemsByNamePluralMapSelector = selector< >({ key: 'objectMetadataItemsByNamePluralMapSelector', get: ({ get }) => { - const objectMetadataItems = get(objectMetadataItemsState); + const objectMetadataItems = get(objectMetadataItemsState()); return new Map( objectMetadataItems.map((objectMetadataItem) => [ diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts index 2eddad42b..9111cc6c2 100644 --- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts +++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts @@ -8,7 +8,7 @@ export const objectMetadataItemsByNameSingularMapSelector = selector< >({ key: 'objectMetadataItemsByNameSingularMapSelector', get: ({ get }) => { - const objectMetadataItems = get(objectMetadataItemsState); + const objectMetadataItems = get(objectMetadataItemsState()); return new Map( objectMetadataItems.map((objectMetadataItem) => [ diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts index 516a64403..8d7ee619e 100644 --- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts +++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const objectMetadataItemsState = atom({ +export const objectMetadataItemsState = createState({ key: 'objectMetadataItemsState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx index 480e74bab..9da0f77fc 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useFindManyRecords.test.tsx @@ -57,7 +57,7 @@ describe('useFindManyRecords', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember({ id: '32219445-f587-4c40-b2b1-6d3205ed96da', @@ -67,7 +67,7 @@ describe('useFindManyRecords', () => { const mockObjectMetadataItems = getObjectMetadataItemsMock(); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); diff --git a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useMapConnectionToRecords.test.tsx b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useMapConnectionToRecords.test.tsx index 9694cc6ce..4cafb15a6 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__tests__/useMapConnectionToRecords.test.tsx +++ b/packages/twenty-front/src/modules/object-record/hooks/__tests__/useMapConnectionToRecords.test.tsx @@ -18,7 +18,7 @@ import { isNonNullable } from '~/utils/isNonNullable'; const Wrapper = getJestHookWrapper({ apolloMocks: [], onInitializeRecoilSnapshot: (snapshot) => { - snapshot.set(objectMetadataItemsState, getObjectMetadataItemsMock()); + snapshot.set(objectMetadataItemsState(), getObjectMetadataItemsMock()); }, }); diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts index 22cbc2ec2..083e5396e 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts @@ -69,7 +69,7 @@ export const useFindManyRecords = ({ ); const { enqueueSnackBar } = useSnackBar(); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { data, loading, error, fetchMore } = useQuery< ObjectRecordQueryResult diff --git a/packages/twenty-front/src/modules/object-record/hooks/useMapConnectionToRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useMapConnectionToRecords.ts index 03b599846..a73584a61 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useMapConnectionToRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useMapConnectionToRecords.ts @@ -11,7 +11,7 @@ import { FieldMetadataType } from '~/generated/graphql'; import { isNonNullable } from '~/utils/isNonNullable'; export const useMapConnectionToRecords = () => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const mapConnectionToRecords = useCallback( ({ diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts index 30869a8a6..1c29844bd 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type ObjectFilterDropdownScopeInternalContextProps = StateScopeMapKey; +type ObjectFilterDropdownScopeInternalContextProps = ComponentStateKey; export const ObjectFilterDropdownScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts index 4ed3c9ce7..8433868e1 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts @@ -1,7 +1,7 @@ import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const availableFilterDefinitionsScopedState = createStateScopeMap< +export const availableFilterDefinitionsScopedState = createComponentState< FilterDefinition[] >({ key: 'availableFilterDefinitionsScopedState', diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts index 1ee8f0b45..874d06a63 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts @@ -1,9 +1,9 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { FilterDefinition } from '../types/FilterDefinition'; export const filterDefinitionUsedInDropdownScopedState = - createStateScopeMap({ + createComponentState({ key: 'filterDefinitionUsedInDropdownScopedState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts index bec9fee84..5fc86fa88 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const isObjectFilterDropdownOperandSelectUnfoldedScopedState = - createStateScopeMap({ + createComponentState({ key: 'isObjectFilterDropdownOperandSelectUnfoldedScopedState', defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts index 432df3475..e07f31ca1 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const isObjectFilterDropdownUnfoldedScopedState = - createStateScopeMap({ + createComponentState({ key: 'isObjectFilterDropdownUnfoldedScopedState', defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts index b5cd0c1e4..83c73842d 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const objectFilterDropdownSearchInputScopedState = - createStateScopeMap({ + createComponentState({ key: 'objectFilterDropdownSearchInputScopedState', defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts index a96a2c5e9..9eba05a6b 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const objectFilterDropdownSelectedEntityIdScopedState = - createStateScopeMap({ + createComponentState({ key: 'objectFilterDropdownSelectedEntityIdScopedState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesScopedState.ts index 372da4c5d..db1124959 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedOptionValuesScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const objectFilterDropdownSelectedOptionValuesScopedState = - createStateScopeMap({ + createComponentState({ key: 'objectFilterDropdownSelectedOptionValuesScopedState', defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts index 10c1dab0b..e5e1b396c 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const objectFilterDropdownSelectedRecordIdsScopedState = - createStateScopeMap({ + createComponentState({ key: 'objectFilterDropdownSelectedRecordIdsScopedState', defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts index 04c2199ce..43a90fa7a 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { Filter } from '../types/Filter'; -export const onFilterSelectScopedState = createStateScopeMap< +export const onFilterSelectScopedState = createComponentState< ((filter: Filter | null) => void) | undefined >({ key: 'onFilterSelectScopedState', diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts index 7e4513447..c9df2abce 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { Filter } from '../types/Filter'; -export const selectedFilterScopedState = createStateScopeMap< +export const selectedFilterScopedState = createComponentState< Filter | undefined | null >({ key: 'selectedFilterScopedState', diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts index 2cb8e270c..087ac6d07 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; export const selectedOperandInDropdownScopedState = - createStateScopeMap({ + createComponentState({ key: 'selectedOperandInDropdownScopedState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts index 45a636d5f..8454813f3 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts @@ -1,9 +1,9 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; import { Sort } from '../../types/Sort'; -type ObjectSortDropdownScopeInternalContextProps = StateScopeMapKey & { +type ObjectSortDropdownScopeInternalContextProps = ComponentStateKey & { onSortSelect?: (sort: Sort) => void; }; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts index 27da40c6b..3f8165b63 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { SortDefinition } from '../types/SortDefinition'; -export const availableSortDefinitionsScopedState = createStateScopeMap< +export const availableSortDefinitionsScopedState = createComponentState< SortDefinition[] >({ key: 'availableSortDefinitionsScopedState', diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts index 02514a4c4..071d66274 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const isSortSelectedScopedState = createStateScopeMap({ +export const isSortSelectedScopedState = createComponentState({ key: 'isSortSelectedScopedState', defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts index 0b76031e6..9e0661722 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { Sort } from '../types/Sort'; -export const onSortSelectScopedState = createStateScopeMap< +export const onSortSelectScopedState = createComponentState< ((sort: Sort) => void) | undefined >({ key: 'onSortSelectScopedState', diff --git a/packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx b/packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx index 3d7c97263..591b2df40 100644 --- a/packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx +++ b/packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx @@ -32,8 +32,8 @@ export const useRecordActionBar = ({ selectedRecordIds, callback, }: useRecordActionBarProps) => { - const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); - const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState); + const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState()); + const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState()); const { createFavorite, favorites, deleteFavorite } = useFavorites(); diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts index 291db2655..cd5b2cf31 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts @@ -1,24 +1,24 @@ import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext'; -import { isFirstRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap'; -import { isLastRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap'; -import { isRecordBoardCardSelectedFamilyStateScopeMap } from '@/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap'; -import { isRecordBoardCompactModeActiveStateScopeMap } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap'; -import { isRecordBoardFetchingRecordsStateScopeMap } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsStateScopeMap'; -import { onRecordBoardFetchMoreVisibilityChangeStateScopeMap } from '@/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeStateScopeMap'; -import { recordBoardColumnIdsStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnIdsStateScopeMap'; -import { recordBoardFieldDefinitionsStateScopeMap } from '@/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap'; -import { recordBoardFiltersStateScopeMap } from '@/object-record/record-board/states/recordBoardFiltersStateScopeMap'; -import { recordBoardObjectSingularNameStateScopeMap } from '@/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap'; -import { recordBoardRecordIdsByColumnIdFamilyStateScopeMap } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap'; -import { recordBoardSortsStateScopeMap } from '@/object-record/record-board/states/recordBoardSortsStateScopeMap'; -import { recordBoardColumnsFamilySelectorScopeMap } from '@/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap'; -import { recordBoardSelectedRecordIdsSelectorScopeMap } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsSelectorScopeMap'; -import { recordBoardVisibleFieldDefinitionsScopedSelector } from '@/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector'; +import { isFirstRecordBoardColumnComponentFamilyState } from '@/object-record/record-board/states/isFirstRecordBoardColumnComponentFamilyState'; +import { isLastRecordBoardColumnComponentFamilyState } from '@/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState'; +import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; +import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState'; +import { isRecordBoardFetchingRecordsComponentState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsComponentState'; +import { onRecordBoardFetchMoreVisibilityChangeComponentState } from '@/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeComponentState'; +import { recordBoardColumnIdsComponentState } from '@/object-record/record-board/states/recordBoardColumnIdsComponentState'; +import { recordBoardFieldDefinitionsComponentState } from '@/object-record/record-board/states/recordBoardFieldDefinitionsComponentState'; +import { recordBoardFiltersComponentState } from '@/object-record/record-board/states/recordBoardFiltersComponentState'; +import { recordBoardObjectSingularNameComponentState } from '@/object-record/record-board/states/recordBoardObjectSingularNameComponentState'; +import { recordBoardRecordIdsByColumnIdComponentFamilyState } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState'; +import { recordBoardSortsComponentState } from '@/object-record/record-board/states/recordBoardSortsComponentState'; +import { recordBoardColumnsComponentFamilySelector } from '@/object-record/record-board/states/selectors/recordBoardColumnsComponentFamilySelector'; +import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector'; +import { recordBoardVisibleFieldDefinitionsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState'; import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; -import { getSelectorReadOnly } from '@/ui/utilities/recoil-scope/utils/getSelectorReadOnly'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState'; +import { extractComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; export const useRecordBoardStates = (recordBoardId?: string) => { const scopeId = useAvailableScopeIdOrThrow( @@ -28,59 +28,68 @@ export const useRecordBoardStates = (recordBoardId?: string) => { return { scopeId, - getObjectSingularNameState: getState( - recordBoardObjectSingularNameStateScopeMap, + getObjectSingularNameState: extractComponentState( + recordBoardObjectSingularNameComponentState, scopeId, ), - getIsFetchingRecordState: getState( - isRecordBoardFetchingRecordsStateScopeMap, + getIsFetchingRecordState: extractComponentState( + isRecordBoardFetchingRecordsComponentState, scopeId, ), - getColumnIdsState: getState(recordBoardColumnIdsStateScopeMap, scopeId), - isFirstColumnFamilyState: getFamilyState( - isFirstRecordBoardColumnFamilyStateScopeMap, + getColumnIdsState: extractComponentState( + recordBoardColumnIdsComponentState, scopeId, ), - isLastColumnFamilyState: getFamilyState( - isLastRecordBoardColumnFamilyStateScopeMap, + isFirstColumnFamilyState: extractComponentFamilyState( + isFirstRecordBoardColumnComponentFamilyState, scopeId, ), - columnsFamilySelector: getFamilyState( - recordBoardColumnsFamilySelectorScopeMap, + isLastColumnFamilyState: extractComponentFamilyState( + isLastRecordBoardColumnComponentFamilyState, + scopeId, + ), + columnsFamilySelector: extractComponentFamilyState( + recordBoardColumnsComponentFamilySelector, scopeId, ), - getFiltersState: getState(recordBoardFiltersStateScopeMap, scopeId), - getSortsState: getState(recordBoardSortsStateScopeMap, scopeId), - getFieldDefinitionsState: getState( - recordBoardFieldDefinitionsStateScopeMap, + getFiltersState: extractComponentState( + recordBoardFiltersComponentState, scopeId, ), - getVisibleFieldDefinitionsState: getSelectorReadOnly( - recordBoardVisibleFieldDefinitionsScopedSelector, + getSortsState: extractComponentState( + recordBoardSortsComponentState, + scopeId, + ), + getFieldDefinitionsState: extractComponentState( + recordBoardFieldDefinitionsComponentState, + scopeId, + ), + getVisibleFieldDefinitionsState: extractComponentReadOnlySelector( + recordBoardVisibleFieldDefinitionsComponentSelector, scopeId, ), - recordIdsByColumnIdFamilyState: getFamilyState( - recordBoardRecordIdsByColumnIdFamilyStateScopeMap, + recordIdsByColumnIdFamilyState: extractComponentFamilyState( + recordBoardRecordIdsByColumnIdComponentFamilyState, scopeId, ), - isRecordBoardCardSelectedFamilyState: getFamilyState( - isRecordBoardCardSelectedFamilyStateScopeMap, + isRecordBoardCardSelectedFamilyState: extractComponentFamilyState( + isRecordBoardCardSelectedComponentFamilyState, scopeId, ), - getSelectedRecordIdsSelector: getSelectorReadOnly( - recordBoardSelectedRecordIdsSelectorScopeMap, + getSelectedRecordIdsSelector: extractComponentReadOnlySelector( + recordBoardSelectedRecordIdsComponentSelector, scopeId, ), - getIsCompactModeActiveState: getState( - isRecordBoardCompactModeActiveStateScopeMap, + getIsCompactModeActiveState: extractComponentState( + isRecordBoardCompactModeActiveComponentState, scopeId, ), - getOnFetchMoreVisibilityChangeState: getState( - onRecordBoardFetchMoreVisibilityChangeStateScopeMap, + getOnFetchMoreVisibilityChangeState: extractComponentState( + onRecordBoardFetchMoreVisibilityChangeComponentState, scopeId, ), }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 15f2424e9..034466873 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -152,8 +152,8 @@ export const RecordBoardCard = () => { const record = useRecoilValue(recordStoreFamilyState(recordId)); - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState()); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState()); const handleContextMenu = (event: React.MouseEvent) => { event.preventDefault(); diff --git a/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts index 03da78cce..22aeae0ed 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts @@ -1,10 +1,10 @@ import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition'; import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type RecordBoardScopeInternalContextProps = StateScopeMapKey & { +type RecordBoardScopeInternalContextProps = ComponentStateKey & { onFieldsChange: (fields: FieldDefinition[]) => void; onColumnsChange: (column: RecordBoardColumnDefinition[]) => void; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnComponentFamilyState.ts new file mode 100644 index 000000000..bef421970 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnComponentFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isFirstRecordBoardColumnComponentFamilyState = + createComponentFamilyState({ + key: 'isFirstRecordBoardColumnComponentFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap.ts deleted file mode 100644 index 989f3277b..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const isFirstRecordBoardColumnFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'isFirstRecordBoardColumnFamilyStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState.ts new file mode 100644 index 000000000..9174fba1c --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isLastRecordBoardColumnComponentFamilyState = + createComponentFamilyState({ + key: 'isLastRecordBoardColumnComponentFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap.ts deleted file mode 100644 index b29e9ecae..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const isLastRecordBoardColumnFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'isLastRecordBoardColumnFamilyStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState.ts new file mode 100644 index 000000000..8cb7c99f4 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isRecordBoardCardSelectedComponentFamilyState = + createComponentFamilyState({ + key: 'isRecordBoardCardSelectedComponentFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts deleted file mode 100644 index 825e46ed3..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const isRecordBoardCardSelectedFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'isRecordBoardCardSelectedFamilyStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState.ts new file mode 100644 index 000000000..68741ee81 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const isRecordBoardCompactModeActiveComponentState = + createComponentState({ + key: 'isRecordBoardCompactModeActiveComponentState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts deleted file mode 100644 index 0ad51b9a9..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardCompactModeActiveStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const isRecordBoardCompactModeActiveStateScopeMap = - createStateScopeMap({ - key: 'isRecordBoardCompactModeActiveStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsComponentState.ts new file mode 100644 index 000000000..c76a8777e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const isRecordBoardFetchingRecordsComponentState = + createComponentState({ + key: 'isRecordBoardFetchingRecordsComponentState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsStateScopeMap.ts deleted file mode 100644 index 83c35a4be..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardFetchingRecordsStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const isRecordBoardFetchingRecordsStateScopeMap = - createStateScopeMap({ - key: 'isRecordBoardFetchingRecordsStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeComponentState.ts new file mode 100644 index 000000000..c977c8851 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const onRecordBoardFetchMoreVisibilityChangeComponentState = + createComponentState<(visbility: boolean) => void>({ + key: 'onRecordBoardFetchMoreVisibilityChangeComponentState', + defaultValue: () => {}, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeStateScopeMap.ts deleted file mode 100644 index fb5da620a..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/onRecordBoardFetchMoreVisibilityChangeStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const onRecordBoardFetchMoreVisibilityChangeStateScopeMap = - createStateScopeMap<(visbility: boolean) => void>({ - key: 'onRecordBoardFetchMoreVisibilityChangeStateScopeMap', - defaultValue: () => {}, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsComponentState.ts new file mode 100644 index 000000000..3ae094376 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordBoardColumnIdsComponentState = createComponentState< + string[] +>({ + key: 'recordBoardColumnIdsComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsStateScopeMap.ts deleted file mode 100644 index 82118caf3..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnIdsStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordBoardColumnIdsStateScopeMap = createStateScopeMap({ - key: 'recordBoardColumnIdsStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsComponentFamilyState.ts new file mode 100644 index 000000000..c2b6cc1cf --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsComponentFamilyState.ts @@ -0,0 +1,8 @@ +import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const recordBoardColumnsComponentFamilyState = + createComponentFamilyState({ + key: 'recordBoardColumnsComponentFamilyState', + defaultValue: undefined, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsFamilyStateScopeMap.ts deleted file mode 100644 index aca09ce52..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsFamilyStateScopeMap.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition'; -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const recordBoardColumnsFamilyStateScopeMap = createFamilyStateScopeMap< - RecordBoardColumnDefinition | undefined, - string ->({ - key: 'recordBoardColumnsFamilyStateScopeMap', - defaultValue: undefined, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsComponentState.ts similarity index 53% rename from packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap.ts rename to packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsComponentState.ts index 4248350bc..e8fb862be 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFieldDefinitionsComponentState.ts @@ -1,10 +1,10 @@ import { RecordBoardFieldDefinition } from '@/object-record/record-board/types/RecordBoardFieldDefinition'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const recordBoardFieldDefinitionsStateScopeMap = createStateScopeMap< +export const recordBoardFieldDefinitionsComponentState = createComponentState< RecordBoardFieldDefinition[] >({ - key: 'recordBoardFieldDefinitionsStateScopeMap', + key: 'recordBoardFieldDefinitionsComponentState', defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersComponentState.ts new file mode 100644 index 000000000..7d493b349 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersComponentState.ts @@ -0,0 +1,7 @@ +import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordBoardFiltersComponentState = createComponentState({ + key: 'recordBoardFiltersComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersStateScopeMap.ts deleted file mode 100644 index 71c8528ce..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordBoardFiltersStateScopeMap = createStateScopeMap({ - key: 'recordBoardFiltersStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameComponentState.ts new file mode 100644 index 000000000..b3efddfd7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordBoardObjectSingularNameComponentState = createComponentState< + string | undefined +>({ + key: 'recordBoardObjectSingularNameComponentState', + defaultValue: undefined, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts deleted file mode 100644 index fd35c826a..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardObjectSingularNameStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordBoardObjectSingularNameStateScopeMap = createStateScopeMap< - string | undefined ->({ - key: 'recordBoardObjectSingularNameStateScopeMap', - defaultValue: undefined, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState.ts new file mode 100644 index 000000000..9cb2f0df3 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState.ts @@ -0,0 +1,7 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const recordBoardRecordIdsByColumnIdComponentFamilyState = + createComponentFamilyState({ + key: 'recordBoardRecordIdsByColumnIdComponentFamilyState', + defaultValue: [], + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap.ts deleted file mode 100644 index 8a413e0b5..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const recordBoardRecordIdsByColumnIdFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'recordBoardRecordIdsByColumnIdFamilyStateScopeMap', - defaultValue: [], - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsComponentState.ts new file mode 100644 index 000000000..d2aa0923f --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsComponentState.ts @@ -0,0 +1,7 @@ +import { Sort } from '@/object-record/object-sort-dropdown/types/Sort'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordBoardSortsComponentState = createComponentState({ + key: 'recordBoardSortsComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsStateScopeMap.ts deleted file mode 100644 index b49376153..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Sort } from '@/object-record/object-sort-dropdown/types/Sort'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordBoardSortsStateScopeMap = createStateScopeMap({ - key: 'recordBoardSortsStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsComponentFamilySelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsComponentFamilySelector.ts new file mode 100644 index 000000000..3c10cb0a0 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsComponentFamilySelector.ts @@ -0,0 +1,118 @@ +import { isUndefined } from '@sniptt/guards'; + +import { isFirstRecordBoardColumnComponentFamilyState } from '@/object-record/record-board/states/isFirstRecordBoardColumnComponentFamilyState'; +import { isLastRecordBoardColumnComponentFamilyState } from '@/object-record/record-board/states/isLastRecordBoardColumnComponentFamilyState'; +import { recordBoardColumnIdsComponentState } from '@/object-record/record-board/states/recordBoardColumnIdsComponentState'; +import { recordBoardColumnsComponentFamilyState } from '@/object-record/record-board/states/recordBoardColumnsComponentFamilyState'; +import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition'; +import { guardRecoilDefaultValue } from '@/ui/utilities/recoil-scope/utils/guardRecoilDefaultValue'; +import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector'; +import { isNonNullable } from '~/utils/isNonNullable'; + +export const recordBoardColumnsComponentFamilySelector = + createComponentFamilySelector< + RecordBoardColumnDefinition | undefined, + string + >({ + key: 'recordBoardColumnsComponentFamilySelector', + get: + ({ + scopeId, + familyKey: columnId, + }: { + scopeId: string; + familyKey: string; + }) => + ({ get }) => { + return get( + recordBoardColumnsComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + ); + }, + set: + ({ + scopeId, + familyKey: columnId, + }: { + scopeId: string; + familyKey: string; + }) => + ({ set, get }, newColumn) => { + set( + recordBoardColumnsComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + newColumn, + ); + + if (guardRecoilDefaultValue(newColumn)) return; + + const columnIds = get(recordBoardColumnIdsComponentState({ scopeId })); + + const columns = columnIds + .map((columnId) => { + return get( + recordBoardColumnsComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + ); + }) + .filter(isNonNullable); + + const lastColumn = [...columns].sort( + (a, b) => b.position - a.position, + )[0]; + + const firstColumn = [...columns].sort( + (a, b) => a.position - b.position, + )[0]; + + if (!newColumn) { + return; + } + + if (!lastColumn || newColumn.position > lastColumn.position) { + set( + isLastRecordBoardColumnComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + true, + ); + + if (!isUndefined(lastColumn)) { + set( + isLastRecordBoardColumnComponentFamilyState({ + scopeId, + familyKey: lastColumn.id, + }), + false, + ); + } + } + + if (!firstColumn || newColumn.position < firstColumn.position) { + set( + isFirstRecordBoardColumnComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + true, + ); + + if (!isUndefined(firstColumn)) { + set( + isFirstRecordBoardColumnComponentFamilyState({ + scopeId, + familyKey: firstColumn.id, + }), + false, + ); + } + } + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap.ts deleted file mode 100644 index 007734fe9..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { isFirstRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap'; -import { isLastRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap'; -import { recordBoardColumnIdsStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnIdsStateScopeMap'; -import { recordBoardColumnsFamilyStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnsFamilyStateScopeMap'; -import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition'; -import { createFamilySelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap'; -import { guardRecoilDefaultValue } from '@/ui/utilities/recoil-scope/utils/guardRecoilDefaultValue'; -import { isNonNullable } from '~/utils/isNonNullable'; - -export const recordBoardColumnsFamilySelectorScopeMap = - createFamilySelectorScopeMap( - { - key: 'recordBoardColumnsFamilySelectorScopeMap', - get: - ({ - scopeId, - familyKey: columnId, - }: { - scopeId: string; - familyKey: string; - }) => - ({ get }) => { - return get( - recordBoardColumnsFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - ); - }, - set: - ({ - scopeId, - familyKey: columnId, - }: { - scopeId: string; - familyKey: string; - }) => - ({ set, get }, newColumn) => { - set( - recordBoardColumnsFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - newColumn, - ); - - if (guardRecoilDefaultValue(newColumn)) return; - - const columnIds = get(recordBoardColumnIdsStateScopeMap({ scopeId })); - - const columns = columnIds - .map((columnId) => { - return get( - recordBoardColumnsFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - ); - }) - .filter(isNonNullable); - - const lastColumn = [...columns].sort( - (a, b) => b.position - a.position, - )[0]; - - const firstColumn = [...columns].sort( - (a, b) => a.position - b.position, - )[0]; - - if (!newColumn) { - return; - } - - if (!lastColumn || newColumn.position > lastColumn.position) { - set( - isLastRecordBoardColumnFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - true, - ); - - if (isNonNullable(lastColumn)) { - set( - isLastRecordBoardColumnFamilyStateScopeMap({ - scopeId, - familyKey: lastColumn.id, - }), - false, - ); - } - } - - if (!firstColumn || newColumn.position < firstColumn.position) { - set( - isFirstRecordBoardColumnFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - true, - ); - - if (isNonNullable(firstColumn)) { - set( - isFirstRecordBoardColumnFamilyStateScopeMap({ - scopeId, - familyKey: firstColumn.id, - }), - false, - ); - } - } - }, - }, - ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts new file mode 100644 index 000000000..ce2b1e4ca --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts @@ -0,0 +1,35 @@ +import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; +import { recordBoardColumnIdsComponentState } from '@/object-record/record-board/states/recordBoardColumnIdsComponentState'; +import { recordBoardRecordIdsByColumnIdComponentFamilyState } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdComponentFamilyState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +export const recordBoardSelectedRecordIdsComponentSelector = + createComponentReadOnlySelector({ + key: 'recordBoardSelectedRecordIdsSelector', + get: + ({ scopeId }) => + ({ get }) => { + const columnIds = get(recordBoardColumnIdsComponentState({ scopeId })); + + const recordIdsByColumn = columnIds.map((columnId) => + get( + recordBoardRecordIdsByColumnIdComponentFamilyState({ + scopeId, + familyKey: columnId, + }), + ), + ); + + const recordIds = recordIdsByColumn.flat(); + + return recordIds.filter( + (recordId) => + get( + isRecordBoardCardSelectedComponentFamilyState({ + scopeId, + familyKey: recordId, + }), + ) === true, + ); + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsSelectorScopeMap.ts deleted file mode 100644 index 437fcfa56..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsSelectorScopeMap.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { isRecordBoardCardSelectedFamilyStateScopeMap } from '@/object-record/record-board/states/isRecordBoardCardSelectedFamilyStateScopeMap'; -import { recordBoardColumnIdsStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnIdsStateScopeMap'; -import { recordBoardRecordIdsByColumnIdFamilyStateScopeMap } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap'; -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -export const recordBoardSelectedRecordIdsSelectorScopeMap = - createSelectorReadOnlyScopeMap({ - key: 'recordBoardSelectedRecordIdsSelectorScopeMap', - get: - ({ scopeId }) => - ({ get }) => { - const columnIds = get(recordBoardColumnIdsStateScopeMap({ scopeId })); - - const recordIdsByColumn = columnIds.map((columnId) => - get( - recordBoardRecordIdsByColumnIdFamilyStateScopeMap({ - scopeId, - familyKey: columnId, - }), - ), - ); - - const recordIds = recordIdsByColumn.flat(); - - return recordIds.filter( - (recordId) => - get( - isRecordBoardCardSelectedFamilyStateScopeMap({ - scopeId, - familyKey: recordId, - }), - ) === true, - ); - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector.ts new file mode 100644 index 000000000..4b2732eb3 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector.ts @@ -0,0 +1,13 @@ +import { recordBoardFieldDefinitionsComponentState } from '@/object-record/record-board/states/recordBoardFieldDefinitionsComponentState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +export const recordBoardVisibleFieldDefinitionsComponentSelector = + createComponentReadOnlySelector({ + key: 'recordBoardVisibleFieldDefinitionsComponentSelector', + get: + ({ scopeId }) => + ({ get }) => + get(recordBoardFieldDefinitionsComponentState({ scopeId })) + .filter((field) => field.isVisible) + .sort((a, b) => a.position - b.position), + }); diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts deleted file mode 100644 index edae8d879..000000000 --- a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsScopedSelector.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { recordBoardFieldDefinitionsStateScopeMap } from '@/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap'; -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -export const recordBoardVisibleFieldDefinitionsScopedSelector = - createSelectorReadOnlyScopeMap({ - key: 'recordBoardVisibleFieldDefinitionsScopedSelector', - get: - ({ scopeId }) => - ({ get }) => - get(recordBoardFieldDefinitionsStateScopeMap({ scopeId })) - .filter((field) => field.isVisible) - .sort((a, b) => a.position - b.position), - }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/internal/useRecordFieldInputStates.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/internal/useRecordFieldInputStates.ts index 8efcb745d..924e838b7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/internal/useRecordFieldInputStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/internal/useRecordFieldInputStates.ts @@ -1,9 +1,9 @@ import { RecordFieldInputScopeInternalContext } from '@/object-record/record-field/scopes/scope-internal-context/RecordFieldInputScopeInternalContext'; -import { recordFieldInputDraftValueSelectorScopeMap } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueSelectorScopeMap'; +import { recordFieldInputDraftValueComponentSelector } from '@/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector'; import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; -import { getSelector } from '@/ui/utilities/recoil-scope/utils/getSelector'; +import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector'; export const useRecordFieldInputStates = ( recordFieldInputId?: string, @@ -15,8 +15,8 @@ export const useRecordFieldInputStates = ( return { scopeId, - getDraftValueSelector: getSelector< + getDraftValueSelector: extractComponentSelector< FieldInputDraftValue | undefined - >(recordFieldInputDraftValueSelectorScopeMap, scopeId), + >(recordFieldInputDraftValueComponentSelector, scopeId), }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx index 3cbe87a49..9d8dd6034 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx @@ -30,9 +30,9 @@ import { } from '../RelationFieldInput'; const RelationWorkspaceSetterEffect = () => { - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-field/scopes/scope-internal-context/RecordFieldInputScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/record-field/scopes/scope-internal-context/RecordFieldInputScopeInternalContext.ts index 240470e52..eebf6c22d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/scopes/scope-internal-context/RecordFieldInputScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/scopes/scope-internal-context/RecordFieldInputScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type RecordFieldInputScopeInternalContextProps = StateScopeMapKey; +type RecordFieldInputScopeInternalContextProps = ComponentStateKey; export const RecordFieldInputScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts b/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts new file mode 100644 index 000000000..ccc67af80 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordFieldInputDraftValueComponentState = + createComponentState({ + key: 'recordFieldInputDraftValueComponentState', + defaultValue: undefined, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueStateScopeMap.ts deleted file mode 100644 index 1d0720c43..000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/states/recordFieldInputDraftValueStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const recordFieldInputDraftValueStateScopeMap = createStateScopeMap( - { - key: 'recordFieldInputDraftValueStateScopeMap', - defaultValue: undefined, - }, -); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts new file mode 100644 index 000000000..e96dd4075 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueComponentSelector.ts @@ -0,0 +1,16 @@ +import { recordFieldInputDraftValueComponentState } from '@/object-record/record-field/states/recordFieldInputDraftValueComponentState'; +import { createComponentSelector } from '@/ui/utilities/state/component-state/utils/createComponentSelector'; + +export const recordFieldInputDraftValueComponentSelector = + createComponentSelector({ + key: 'recordFieldInputDraftValueComponentSelector', + get: + ({ scopeId }: { scopeId: string }) => + ({ get }) => + get(recordFieldInputDraftValueComponentState({ scopeId })) as T, + set: + ({ scopeId }: { scopeId: string }) => + ({ set }, newValue: T) => { + set(recordFieldInputDraftValueComponentState({ scopeId }), newValue); + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueSelectorScopeMap.ts deleted file mode 100644 index e785ec313..000000000 --- a/packages/twenty-front/src/modules/object-record/record-field/states/selectors/recordFieldInputDraftValueSelectorScopeMap.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { recordFieldInputDraftValueStateScopeMap } from '@/object-record/record-field/states/recordFieldInputDraftValueStateScopeMap'; -import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap'; - -export const recordFieldInputDraftValueSelectorScopeMap = - createSelectorScopeMap({ - key: 'recordFieldInputDraftValueSelectorScopeMap', - get: - ({ scopeId }: { scopeId: string }) => - ({ get }) => - get(recordFieldInputDraftValueStateScopeMap({ scopeId })) as T, - set: - ({ scopeId }: { scopeId: string }) => - ({ set }, newValue: T) => { - set(recordFieldInputDraftValueStateScopeMap({ scopeId }), newValue); - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx index 44f0ab12a..08e3bd35d 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx @@ -78,7 +78,7 @@ export const RecordIndexBoardContainerEffect = ({ ]); const recordIndexFieldDefinitions = useRecoilValue( - recordIndexFieldDefinitionsState, + recordIndexFieldDefinitionsState(), ); useEffect(() => { diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx index 81679b9c6..d9873a1b1 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx @@ -47,7 +47,7 @@ export const RecordIndexContainer = ({ objectNamePlural, }: RecordIndexContainerProps) => { const [recordIndexViewType, setRecordIndexViewType] = useRecoilState( - recordIndexViewTypeState, + recordIndexViewTypeState(), ); const { objectNameSingular } = useObjectNameSingularFromPlural({ objectNamePlural, @@ -60,10 +60,10 @@ export const RecordIndexContainer = ({ const { columnDefinitions } = useColumnDefinitionsFromFieldMetadata(objectMetadataItem); - const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState); - const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState); + const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState()); + const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState()); const setRecordIndexIsCompactModeActive = useSetRecoilState( - recordIndexIsCompactModeActiveState, + recordIndexIsCompactModeActiveState(), ); const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({ @@ -85,7 +85,7 @@ export const RecordIndexContainer = ({ ); const existingRecordIndexFieldDefinitions = snapshot - .getLoadable(recordIndexFieldDefinitionsState) + .getLoadable(recordIndexFieldDefinitionsState()) .getValue(); if ( @@ -94,7 +94,10 @@ export const RecordIndexContainer = ({ newRecordIndexFieldDefinitions, ) ) { - set(recordIndexFieldDefinitionsState, newRecordIndexFieldDefinitions); + set( + recordIndexFieldDefinitionsState(), + newRecordIndexFieldDefinitions, + ); } }, [columnDefinitions, setTableColumns], diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts index 622be1ecd..fa894ebb1 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts @@ -35,14 +35,14 @@ export const useLoadRecordIndexBoard = ({ const { setRecords: setRecordsInStore } = useSetRecordInStore(); const recordIndexFieldDefinitions = useRecoilValue( - recordIndexFieldDefinitionsState, + recordIndexFieldDefinitionsState(), ); useEffect(() => { setFieldDefinitions(recordIndexFieldDefinitions); }, [recordIndexFieldDefinitions, setFieldDefinitions]); - const recordIndexFilters = useRecoilValue(recordIndexFiltersState); - const recordIndexSorts = useRecoilValue(recordIndexSortsState); + const recordIndexFilters = useRecoilValue(recordIndexFiltersState()); + const recordIndexSorts = useRecoilValue(recordIndexSortsState()); const requestFilters = turnObjectDropdownFilterIntoQueryFilter( recordIndexFilters, objectMetadataItem?.fields ?? [], @@ -53,7 +53,7 @@ export const useLoadRecordIndexBoard = ({ ); const recordIndexIsCompactModeActive = useRecoilValue( - recordIndexIsCompactModeActiveState, + recordIndexIsCompactModeActiveState(), ); const { diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index 48d9f64ef..cc4005c49 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts @@ -38,7 +38,7 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { useRecordTable(); const { getTableLastRowVisibleState } = useRecordTableStates(); const setLastRowVisible = useSetRecoilState(getTableLastRowVisibleState()); - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const params = useFindManyParams(objectNameSingular); const { diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts index 770e9d6bd..c109087fc 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts @@ -28,7 +28,7 @@ export const useRecordIndexOptionsForBoard = ({ viewBarId, }: useRecordIndexOptionsForBoardParams) => { const [recordIndexFieldDefinitions, setRecordIndexFieldDefinitions] = - useRecoilState(recordIndexFieldDefinitionsState); + useRecoilState(recordIndexFieldDefinitionsState()); const { persistViewFields } = useViewFields(viewBarId); const { updateView } = useViews(viewBarId); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts index 9fccbe7ab..a02f9573c 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts @@ -1,11 +1,10 @@ -import { atom } from 'recoil'; - import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const recordIndexFieldDefinitionsState = atom< +export const recordIndexFieldDefinitionsState = createState< ColumnDefinition[] >({ key: 'recordIndexFieldDefinitionsState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts index 83349211e..aae23cae0 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const recordIndexFiltersState = atom({ +export const recordIndexFiltersState = createState({ key: 'recordIndexFiltersState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts index e0fba8940..5c78c52a5 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const recordIndexIsCompactModeActiveState = atom({ +export const recordIndexIsCompactModeActiveState = createState({ key: 'recordIndexIsCompactModeActiveState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts index fe98a2f61..1d8f79150 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - import { Sort } from '@/object-record/object-sort-dropdown/types/Sort'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const recordIndexSortsState = atom({ +export const recordIndexSortsState = createState({ key: 'recordIndexSortsState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts index 28dcdef03..2075ad5cd 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - +import { createState } from '@/ui/utilities/state/utils/createState'; import { ViewType } from '@/views/types/ViewType'; -export const recordIndexViewTypeState = atom({ +export const recordIndexViewTypeState = createState({ key: 'recordIndexViewTypeState', - default: undefined, + defaultValue: undefined, }); diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/customEditHotkeyScopeForFieldScopedState.ts b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/customEditHotkeyScopeForFieldScopedState.ts index 37abc8db1..96db47ff9 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/customEditHotkeyScopeForFieldScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/customEditHotkeyScopeForFieldScopedState.ts @@ -1,11 +1,10 @@ -import { atomFamily } from 'recoil'; - import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const customEditHotkeyScopeForFieldScopedState = atomFamily< +export const customEditHotkeyScopeForFieldScopedState = createFamilyState< HotkeyScope | null, string >({ key: 'customEditHotkeyScopeForFieldScopedState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState.ts b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState.ts index bdc57ccb3..9142d9400 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState.ts @@ -1,6 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const isInlineCellInEditModeScopedState = atomFamily({ +export const isInlineCellInEditModeScopedState = createFamilyState< + boolean, + string +>({ key: 'isInlineCellInEditModeScopedState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/parentHotkeyScopeForFieldScopedState.ts b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/parentHotkeyScopeForFieldScopedState.ts index 031446907..4562c09cf 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/states/parentHotkeyScopeForFieldScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/states/parentHotkeyScopeForFieldScopedState.ts @@ -1,11 +1,10 @@ -import { atomFamily } from 'recoil'; - import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const parentHotkeyScopeForFieldScopedState = atomFamily< +export const parentHotkeyScopeForFieldScopedState = createFamilyState< HotkeyScope | null, string >({ key: 'parentHotkeyScopeForFieldScopedState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/record-store/states/recordLoadingFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-store/states/recordLoadingFamilyState.ts index 68a97545e..cbfd3ebb0 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/states/recordLoadingFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-store/states/recordLoadingFamilyState.ts @@ -1,6 +1,6 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const recordLoadingFamilyState = atomFamily({ +export const recordLoadingFamilyState = createFamilyState({ key: 'recordLoadingFamilyState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts index a0e71f0bb..9c7877004 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/record-store/states/recordStoreFamilyState.ts @@ -1,8 +1,10 @@ -import { atomFamily } from 'recoil'; - import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const recordStoreFamilyState = atomFamily({ +export const recordStoreFamilyState = createFamilyState< + ObjectRecord | null, + string +>({ key: 'recordStoreFamilyState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts b/packages/twenty-front/src/modules/object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts index 24502a288..10167cc4c 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-store/states/selectors/recordStoreIdentifierSelector.ts @@ -17,7 +17,7 @@ export const recordStoreIdentifierFamilySelector = selectorFamily({ ({ get }) => { const recordFromStore = get(recordStoreFamilyState(recordId)); - const objectMetadataItems = get(objectMetadataItemsState); + const objectMetadataItems = get(objectMetadataItemsState()); const objectMetadataItem = objectMetadataItems.find( (item) => item.nameSingular === objectNameSingular, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx index 2aff77e1b..d6c432c81 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx @@ -22,7 +22,7 @@ const StyledContainer = styled.div` export const CheckboxCell = () => { const { recordId } = useContext(RecordTableRowContext); const { isRowSelectedFamilyState } = useRecordTableStates(); - const setActionBarOpenState = useSetRecoilState(actionBarOpenState); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState()); const { setCurrentRowSelected } = useSetCurrentRowSelected(); const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId)); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx index 5f3207bfa..2cd9432bd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx @@ -53,7 +53,7 @@ export const ColumnHead = ({ column }: ColumnHeadProps) => { const { getIcon } = useIcons(); const Icon = getIcon(column.iconName); - const scrollLeft = useRecoilValue(scrollLeftState); + const scrollLeft = useRecoilValue(scrollLeftState()); return ( 0}> diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx index 80dbedafd..6d9a60ca7 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx @@ -122,7 +122,7 @@ export const RecordTable = ({ createRecord, }: RecordTableProps) => { const { scopeId } = useRecordTableStates(recordTableId); - const scrollLeft = useRecoilValue(scrollLeftState); + const scrollLeft = useRecoilValue(scrollLeftState()); const { objectMetadataItem } = useObjectMetadataItemOnly({ objectNameSingular, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx index 5d85a7193..70337e666 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellContainer.tsx @@ -23,8 +23,8 @@ const StyledContainer = styled.td<{ isSelected: boolean }>` `; export const RecordTableCellContainer = () => { - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState()); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState()); const { setCurrentRowSelected } = useSetCurrentRowSelected(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx index f6ec3a660..9d1f7f89a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderCell.tsx @@ -165,7 +165,7 @@ export const RecordTableHeaderCell = ({ }); const isMobile = useIsMobile(); - const scrollLeft = useRecoilValue(scrollLeftState); + const scrollLeft = useRecoilValue(scrollLeftState()); const disableColumnResize = column.isLabelIdentifier && isMobile && scrollLeft > 0; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts index ffb3eb2a8..ff2e2b877 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts @@ -25,7 +25,7 @@ export const useLeaveTableFocus = (recordTableId?: string) => { ); const currentHotkeyScope = snapshot - .getLoadable(currentHotkeyScopeState) + .getLoadable(currentHotkeyScopeState()) .getValue(); if (!isSoftFocusActive) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts index 7238fec44..21414ec2d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useRecordTableStates.ts @@ -1,31 +1,31 @@ -import { isRowSelectedFamilyStateScopeMap } from '@/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap'; +import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; -import { availableTableColumnsStateScopeMap } from '@/object-record/record-table/states/availableTableColumnsStateScopeMap'; -import { currentTableCellInEditModePositionStateScopeMap } from '@/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap'; -import { isRecordTableInitialLoadingStateScopeMap } from '@/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap'; -import { isSoftFocusActiveStateScopeMap } from '@/object-record/record-table/states/isSoftFocusActiveStateScopeMap'; -import { isSoftFocusOnTableCellFamilyStateScopeMap } from '@/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap'; -import { isTableCellInEditModeFamilyStateScopeMap } from '@/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap'; -import { numberOfTableRowsStateScopeMap } from '@/object-record/record-table/states/numberOfTableRowsStateScopeMap'; -import { onColumnsChangeStateScopeMap } from '@/object-record/record-table/states/onColumnsChangeStateScopeMap'; -import { onEntityCountChangeStateScopeMap } from '@/object-record/record-table/states/onEntityCountChangeStateScopeMap'; -import { resizeFieldOffsetStateScopeMap } from '@/object-record/record-table/states/resizeFieldOffsetStateScopeMap'; -import { allRowsSelectedStatusSelectorScopeMap } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap'; -import { hiddenTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap'; -import { numberOfTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap'; -import { selectedRowIdsSelectorScopeMap } from '@/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap'; -import { visibleTableColumnsSelectorScopeMap } from '@/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap'; -import { softFocusPositionStateScopeMap } from '@/object-record/record-table/states/softFocusPositionStateScopeMap'; -import { tableColumnsStateScopeMap } from '@/object-record/record-table/states/tableColumnsStateScopeMap'; -import { tableFiltersStateScopeMap } from '@/object-record/record-table/states/tableFiltersStateScopeMap'; -import { tableLastRowVisibleStateScopeMap } from '@/object-record/record-table/states/tableLastRowVisibleStateScopeMap'; -import { tableRowIdsStateScopeMap } from '@/object-record/record-table/states/tableRowIdsStateScopeMap'; -import { tableSortsStateScopeMap } from '@/object-record/record-table/states/tableSortsStateScopeMap'; +import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; +import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState'; +import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState'; +import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState'; +import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState'; +import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState'; +import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState'; +import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState'; +import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState'; +import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState'; +import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector'; +import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector'; +import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector'; +import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector'; +import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector'; +import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState'; +import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; +import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState'; +import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState'; +import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState'; +import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState'; import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; -import { getSelectorReadOnly } from '@/ui/utilities/recoil-scope/utils/getSelectorReadOnly'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState'; +import { extractComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; export const useRecordTableStates = (recordTableId?: string) => { const scopeId = useAvailableScopeIdOrThrow( @@ -35,78 +35,93 @@ export const useRecordTableStates = (recordTableId?: string) => { return { scopeId, - getAvailableTableColumnsState: getState( - availableTableColumnsStateScopeMap, + getAvailableTableColumnsState: extractComponentState( + availableTableColumnsComponentState, + scopeId, + ), + getTableFiltersState: extractComponentState( + tableFiltersComponentState, + scopeId, + ), + getTableSortsState: extractComponentState( + tableSortsComponentState, + scopeId, + ), + getTableColumnsState: extractComponentState( + tableColumnsComponentState, scopeId, ), - getTableFiltersState: getState(tableFiltersStateScopeMap, scopeId), - getTableSortsState: getState(tableSortsStateScopeMap, scopeId), - getTableColumnsState: getState(tableColumnsStateScopeMap, scopeId), - getOnColumnsChangeState: getState(onColumnsChangeStateScopeMap, scopeId), - getOnEntityCountChangeState: getState( - onEntityCountChangeStateScopeMap, + getOnColumnsChangeState: extractComponentState( + onColumnsChangeComponentState, scopeId, ), - getTableLastRowVisibleState: getState( - tableLastRowVisibleStateScopeMap, + getOnEntityCountChangeState: extractComponentState( + onEntityCountChangeComponentState, scopeId, ), - getSoftFocusPositionState: getState( - softFocusPositionStateScopeMap, + getTableLastRowVisibleState: extractComponentState( + tableLastRowVisibleComponentState, scopeId, ), - getNumberOfTableRowsState: getState( - numberOfTableRowsStateScopeMap, + getSoftFocusPositionState: extractComponentState( + softFocusPositionComponentState, scopeId, ), - getCurrentTableCellInEditModePositionState: getState( - currentTableCellInEditModePositionStateScopeMap, + getNumberOfTableRowsState: extractComponentState( + numberOfTableRowsComponentState, scopeId, ), - isTableCellInEditModeFamilyState: getFamilyState( - isTableCellInEditModeFamilyStateScopeMap, + getCurrentTableCellInEditModePositionState: extractComponentState( + currentTableCellInEditModePositionComponentState, scopeId, ), - getIsSoftFocusActiveState: getState( - isSoftFocusActiveStateScopeMap, + isTableCellInEditModeFamilyState: extractComponentFamilyState( + isTableCellInEditModeComponentFamilyState, scopeId, ), - getTableRowIdsState: getState(tableRowIdsStateScopeMap, scopeId), - getIsRecordTableInitialLoadingState: getState( - isRecordTableInitialLoadingStateScopeMap, + getIsSoftFocusActiveState: extractComponentState( + isSoftFocusActiveComponentState, scopeId, ), - getResizeFieldOffsetState: getState( - resizeFieldOffsetStateScopeMap, + getTableRowIdsState: extractComponentState( + tableRowIdsComponentState, scopeId, ), - isSoftFocusOnTableCellFamilyState: getFamilyState( - isSoftFocusOnTableCellFamilyStateScopeMap, + getIsRecordTableInitialLoadingState: extractComponentState( + isRecordTableInitialLoadingComponentState, scopeId, ), - isRowSelectedFamilyState: getFamilyState( - isRowSelectedFamilyStateScopeMap, + getResizeFieldOffsetState: extractComponentState( + resizeFieldOffsetComponentState, scopeId, ), - getAllRowsSelectedStatusSelector: getSelectorReadOnly( - allRowsSelectedStatusSelectorScopeMap, + isSoftFocusOnTableCellFamilyState: extractComponentFamilyState( + isSoftFocusOnTableCellComponentFamilyState, scopeId, ), - getHiddenTableColumnsSelector: getSelectorReadOnly( - hiddenTableColumnsSelectorScopeMap, + isRowSelectedFamilyState: extractComponentFamilyState( + isRowSelectedComponentFamilyState, scopeId, ), - getNumberOfTableColumnsSelector: getSelectorReadOnly( - numberOfTableColumnsSelectorScopeMap, + getAllRowsSelectedStatusSelector: extractComponentReadOnlySelector( + allRowsSelectedStatusComponentSelector, scopeId, ), - getSelectedRowIdsSelector: getSelectorReadOnly( - selectedRowIdsSelectorScopeMap, + getHiddenTableColumnsSelector: extractComponentReadOnlySelector( + hiddenTableColumnsComponentSelector, scopeId, ), - getVisibleTableColumnsSelector: getSelectorReadOnly( - visibleTableColumnsSelectorScopeMap, + getNumberOfTableColumnsSelector: extractComponentReadOnlySelector( + numberOfTableColumnsComponentSelector, + scopeId, + ), + getSelectedRowIdsSelector: extractComponentReadOnlySelector( + selectedRowIdsComponentSelector, + scopeId, + ), + getVisibleTableColumnsSelector: extractComponentReadOnlySelector( + visibleTableColumnsComponentSelector, scopeId, ), }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts index 2941893c6..a530bb635 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts @@ -128,7 +128,7 @@ export const useRecordTable = (props?: useRecordTableProps) => { const setHotkeyScope = useSetHotkeyScope(); const setIsSoftFocusUsingMouseState = useSetRecoilState( - isSoftFocusUsingMouseState, + isSoftFocusUsingMouseState(), ); useScopedHotkeys( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 344988c94..b5ac47aaf 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx @@ -64,7 +64,7 @@ export const RecordTableCellContainer = ({ const isSomeCellInEditMode = useRecoilValue(isSomeCellInEditModeState()); const setIsSoftFocusUsingMouseState = useSetRecoilState( - isSoftFocusUsingMouseState, + isSoftFocusUsingMouseState(), ); const moveSoftFocusToCurrentCellOnHover = diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index 7c6947aa5..f48939220 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx @@ -24,7 +24,7 @@ export const RecordTableCellSoftFocusMode = ({ const toggleEditOnlyInput = useToggleEditOnlyInput(); const scrollRef = useRef(null); - const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState); + const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState()); useEffect(() => { if (!isSoftFocusUsingMouse) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx index f8337c3ba..1ebad63a8 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx @@ -13,19 +13,19 @@ import { TableCellPosition } from '@/object-record/record-table/types/TableCellP import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; const mockSoftFocusPositionState = { - key: 'softFocusPositionStateScopeMap__{"scopeId":"scopeId"}', + key: 'softFocusPositionComponentState__{"scopeId":"scopeId"}', }; const mockSoftFocusActiveState = { - key: 'isSoftFocusActiveStateScopeMap__{"scopeId":"scopeId"}', + key: 'isSoftFocusActiveComponentState__{"scopeId":"scopeId"}', }; const mockIsSoftFocusOnTableCellFamilyState = { - key: 'isSoftFocusOnTableCellFamilyStateScopeMap__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', + key: 'isSoftFocusOnTableCellFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', }; const mockCurrentTableCellInEditModePositionState = { - key: 'currentTableCellInEditModePositionStateScopeMap__{"scopeId":"scopeId"}', + key: 'currentTableCellInEditModePositionComponentState__{"scopeId":"scopeId"}', }; const mockIsTableCellInEditModeFamilyState = { - key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', + key: 'isTableCellInEditModeFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', }; const mockCurrentHotKeyScopeState = { key: 'currentHotkeyScopeState', diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx index 9cbf45efe..1e7ec2088 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx @@ -48,19 +48,14 @@ describe('useSelectedTableCellEditMode', () => { expect(mockCallbackInterface.set).toHaveBeenCalledWith( { - key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId-scope"}', + key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId-scope"}', }, false, ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( { - key: 'currentTableCellInEditModePositionStateScopeMap__{"scopeId":"yourScopeId-scope"}', - }, - { column: 5, row: 1 }, - ); - expect(mockCallbackInterface.set).toHaveBeenCalledWith( - { - key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId-scope"}', + key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId-scope"}', }, true, ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts index 4bb8b9f87..0ddc6fe6a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts @@ -33,7 +33,7 @@ export const useMoveSoftFocusToCurrentCellOnHover = () => { .getValue(); const currentHotkeyScope = snapshot - .getLoadable(currentHotkeyScopeState) + .getLoadable(currentHotkeyScopeState()) .getValue(); if ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts new file mode 100644 index 000000000..803921f1e --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState.ts @@ -0,0 +1,9 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isRowSelectedComponentFamilyState = createComponentFamilyState< + boolean, + string +>({ + key: 'isRowSelectedComponentFamilyState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap.ts deleted file mode 100644 index ebb2af412..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/states/isRowSelectedFamilyStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const isRowSelectedFamilyStateScopeMap = createFamilyStateScopeMap< - boolean, - string ->({ - key: 'isRowSelectedFamilyStateScopeMap', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts index e25882196..a4dcca144 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts @@ -1,10 +1,10 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; import { ColumnDefinition } from '../../types/ColumnDefinition'; -type RecordTableScopeInternalContextProps = StateScopeMapKey & { +type RecordTableScopeInternalContextProps = ComponentStateKey & { onColumnsChange: (columns: ColumnDefinition[]) => void; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts new file mode 100644 index 000000000..d7fcfa072 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsComponentState.ts @@ -0,0 +1,11 @@ +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +import { ColumnDefinition } from '../types/ColumnDefinition'; + +export const availableTableColumnsComponentState = createComponentState< + ColumnDefinition[] +>({ + key: 'availableTableColumnsComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsStateScopeMap.ts deleted file mode 100644 index f60d3afb1..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/availableTableColumnsStateScopeMap.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -import { ColumnDefinition } from '../types/ColumnDefinition'; - -export const availableTableColumnsStateScopeMap = createStateScopeMap< - ColumnDefinition[] ->({ - key: 'availableTableColumnsStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts new file mode 100644 index 000000000..88616eb1b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionComponentState.ts @@ -0,0 +1,12 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const currentTableCellInEditModePositionComponentState = + createComponentState({ + key: 'currentTableCellInEditModePositionComponentState', + defaultValue: { + row: 0, + column: 1, + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap.ts deleted file mode 100644 index 873790029..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/currentTableCellInEditModePositionStateScopeMap.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const currentTableCellInEditModePositionStateScopeMap = - createStateScopeMap({ - key: 'currentTableCellInEditModePositionStateScopeMap', - defaultValue: { - row: 0, - column: 1, - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts new file mode 100644 index 000000000..01d7f280d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const isRecordTableInitialLoadingComponentState = + createComponentState({ + key: 'isRecordTableInitialLoadingComponentState', + defaultValue: true, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap.ts deleted file mode 100644 index 6b320ced8..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isRecordTableInitialLoadingStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const isRecordTableInitialLoadingStateScopeMap = - createStateScopeMap({ - key: 'isRecordTableInitialLoadingStateScopeMap', - defaultValue: true, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts new file mode 100644 index 000000000..a9b726ddf --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const isSoftFocusActiveComponentState = createComponentState({ + key: 'isSoftFocusActiveComponentState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveStateScopeMap.ts deleted file mode 100644 index 917733d87..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusActiveStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const isSoftFocusActiveStateScopeMap = createStateScopeMap({ - key: 'isSoftFocusActiveStateScopeMap', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts new file mode 100644 index 000000000..dd9023404 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState.ts @@ -0,0 +1,9 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const isSoftFocusOnTableCellComponentFamilyState = + createComponentFamilyState({ + key: 'isSoftFocusOnTableCellComponentFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap.ts deleted file mode 100644 index f9c48a851..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusOnTableCellFamilyStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const isSoftFocusOnTableCellFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'isSoftFocusOnTableCellFamilyStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts index 7895269f9..234db43ec 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isSoftFocusUsingMouseState = atom({ +export const isSoftFocusUsingMouseState = createState({ key: 'isSoftFocusUsingMouseState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts new file mode 100644 index 000000000..e049c0349 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeComponentFamilyState.ts @@ -0,0 +1,9 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const isTableCellInEditModeComponentFamilyState = + createComponentFamilyState({ + key: 'isTableCellInEditModeComponentFamilyState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap.ts deleted file mode 100644 index ff9ba4bd7..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/isTableCellInEditModeFamilyStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const isTableCellInEditModeFamilyStateScopeMap = - createFamilyStateScopeMap({ - key: 'isTableCellInEditModeFamilyStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts new file mode 100644 index 000000000..2e6340e6d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const numberOfTableRowsComponentState = createComponentState({ + key: 'numberOfTableRowsComponentState', + defaultValue: 0, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsStateScopeMap.ts deleted file mode 100644 index f67a8a40c..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/numberOfTableRowsStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const numberOfTableRowsStateScopeMap = createStateScopeMap({ - key: 'numberOfTableRowsStateScopeMap', - defaultValue: 0, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts similarity index 56% rename from packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeStateScopeMap.ts rename to packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts index 9253e2443..b157eb071 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeStateScopeMap.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onColumnsChangeComponentState.ts @@ -1,10 +1,10 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const onColumnsChangeStateScopeMap = createStateScopeMap< +export const onColumnsChangeComponentState = createComponentState< ((columns: ColumnDefinition[]) => void) | undefined >({ - key: 'onColumnsChangeStateScopeMap', + key: 'onColumnsChangeComponentState', defaultValue: undefined, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts new file mode 100644 index 000000000..65356e5dc --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const onEntityCountChangeComponentState = createComponentState< + ((entityCount: number) => void) | undefined +>({ + key: 'onEntityCountChangeComponentState', + defaultValue: undefined, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeStateScopeMap.ts deleted file mode 100644 index 6aefeedb7..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/onEntityCountChangeStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const onEntityCountChangeStateScopeMap = createStateScopeMap< - ((entityCount: number) => void) | undefined ->({ - key: 'onEntityCountChangeStateScopeMap', - defaultValue: undefined, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts new file mode 100644 index 000000000..9e2700f45 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const resizeFieldOffsetComponentState = createComponentState({ + key: 'resizeFieldOffsetComponentState', + defaultValue: 0, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetStateScopeMap.ts deleted file mode 100644 index 21ca29d2d..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/resizeFieldOffsetStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const resizeFieldOffsetStateScopeMap = createStateScopeMap({ - key: 'resizeFieldOffsetStateScopeMap', - defaultValue: 0, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts new file mode 100644 index 000000000..c0a42ea81 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector.ts @@ -0,0 +1,30 @@ +import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState'; +import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; + +export const allRowsSelectedStatusComponentSelector = + createComponentReadOnlySelector({ + key: 'allRowsSelectedStatusComponentSelector', + get: + ({ scopeId }) => + ({ get }) => { + const numberOfRows = get(numberOfTableRowsComponentState({ scopeId })); + + const selectedRowIds = get( + selectedRowIdsComponentSelector({ scopeId }), + ); + + const numberOfSelectedRows = selectedRowIds.length; + + const allRowsSelectedStatus = + numberOfSelectedRows === 0 + ? 'none' + : numberOfRows === numberOfSelectedRows + ? 'all' + : 'some'; + + return allRowsSelectedStatus; + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap.ts deleted file mode 100644 index ee0a66e80..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/allRowsSelectedStatusSelectorScopeMap.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus'; -import { numberOfTableRowsStateScopeMap } from '../numberOfTableRowsStateScopeMap'; - -import { selectedRowIdsSelectorScopeMap } from './selectedRowIdsSelectorScopeMap'; - -export const allRowsSelectedStatusSelectorScopeMap = - createSelectorReadOnlyScopeMap({ - key: 'allRowsSelectedStatusSelectorScopeMap', - get: - ({ scopeId }) => - ({ get }) => { - const numberOfRows = get(numberOfTableRowsStateScopeMap({ scopeId })); - - const selectedRowIds = get(selectedRowIdsSelectorScopeMap({ scopeId })); - - const numberOfSelectedRows = selectedRowIds.length; - - const allRowsSelectedStatus = - numberOfSelectedRows === 0 - ? 'none' - : numberOfRows === numberOfSelectedRows - ? 'all' - : 'some'; - - return allRowsSelectedStatus; - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts similarity index 57% rename from packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts rename to packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts index 1fcd14587..c6692670d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector.ts @@ -1,17 +1,17 @@ -import { availableTableColumnsStateScopeMap } from '@/object-record/record-table/states/availableTableColumnsStateScopeMap'; -import { tableColumnsStateScopeMap } from '@/object-record/record-table/states/tableColumnsStateScopeMap'; -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; +import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState'; +import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; -export const hiddenTableColumnsSelectorScopeMap = - createSelectorReadOnlyScopeMap({ - key: 'hiddenTableColumnsSelectorScopeMap', +export const hiddenTableColumnsComponentSelector = + createComponentReadOnlySelector({ + key: 'hiddenTableColumnsComponentSelector', get: ({ scopeId }) => ({ get }) => { - const tableColumns = get(tableColumnsStateScopeMap({ scopeId })); + const tableColumns = get(tableColumnsComponentState({ scopeId })); const availableColumns = get( - availableTableColumnsStateScopeMap({ scopeId }), + availableTableColumnsComponentState({ scopeId }), ); const tableColumnsByKey = mapArrayToObject( tableColumns, diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts new file mode 100644 index 000000000..83754490c --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector.ts @@ -0,0 +1,11 @@ +import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +export const numberOfTableColumnsComponentSelector = + createComponentReadOnlySelector({ + key: 'numberOfTableColumnsComponentSelector', + get: + ({ scopeId }) => + ({ get }) => + get(tableColumnsComponentState({ scopeId })).length, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap.ts deleted file mode 100644 index a4afd9ccb..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/numberOfTableColumnsSelectorScopeMap.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -import { tableColumnsStateScopeMap } from '../tableColumnsStateScopeMap'; - -export const numberOfTableColumnsSelectorScopeMap = - createSelectorReadOnlyScopeMap({ - key: 'numberOfTableColumnsSelectorScopeMap', - get: - ({ scopeId }) => - ({ get }) => - get(tableColumnsStateScopeMap({ scopeId })).length, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts new file mode 100644 index 000000000..3a3a020c8 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsComponentSelector.ts @@ -0,0 +1,24 @@ +import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState'; +import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +export const selectedRowIdsComponentSelector = createComponentReadOnlySelector< + string[] +>({ + key: 'selectedRowIdsComponentSelector', + get: + ({ scopeId }) => + ({ get }) => { + const rowIds = get(tableRowIdsComponentState({ scopeId })); + + return rowIds.filter( + (rowId) => + get( + isRowSelectedComponentFamilyState({ + scopeId, + familyKey: rowId, + }), + ) === true, + ); + }, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap.ts deleted file mode 100644 index b395c54d3..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/selectedRowIdsSelectorScopeMap.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -import { isRowSelectedFamilyStateScopeMap } from '../../record-table-row/states/isRowSelectedFamilyStateScopeMap'; -import { tableRowIdsStateScopeMap } from '../tableRowIdsStateScopeMap'; - -export const selectedRowIdsSelectorScopeMap = createSelectorReadOnlyScopeMap< - string[] ->({ - key: 'selectedRowIdsSelectorScopeMap', - get: - ({ scopeId }) => - ({ get }) => { - const rowIds = get(tableRowIdsStateScopeMap({ scopeId })); - - return rowIds.filter( - (rowId) => - get( - isRowSelectedFamilyStateScopeMap({ - scopeId, - familyKey: rowId, - }), - ) === true, - ); - }, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts new file mode 100644 index 000000000..fc58195ca --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector.ts @@ -0,0 +1,15 @@ +import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; + +export const visibleTableColumnsComponentSelector = + createComponentReadOnlySelector({ + key: 'visibleTableColumnsComponentSelector', + get: + ({ scopeId }) => + ({ get }) => { + const columns = get(tableColumnsComponentState({ scopeId })); + return columns + .filter((column) => column.isVisible) + .sort((columnA, columnB) => columnA.position - columnB.position); + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts deleted file mode 100644 index 01a818edb..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { tableColumnsStateScopeMap } from '@/object-record/record-table/states/tableColumnsStateScopeMap'; -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; - -export const visibleTableColumnsSelectorScopeMap = - createSelectorReadOnlyScopeMap({ - key: 'visibleTableColumnsSelectorScopeMap', - get: - ({ scopeId }) => - ({ get }) => { - const columns = get(tableColumnsStateScopeMap({ scopeId })); - return columns - .filter((column) => column.isVisible) - .sort((columnA, columnB) => columnA.position - columnB.position); - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts new file mode 100644 index 000000000..212b581cc --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionComponentState.ts @@ -0,0 +1,12 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +import { TableCellPosition } from '../types/TableCellPosition'; + +export const softFocusPositionComponentState = + createComponentState({ + key: 'softFocusPositionComponentState', + defaultValue: { + row: 0, + column: 1, + }, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionStateScopeMap.ts deleted file mode 100644 index 5a4b87fb9..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/softFocusPositionStateScopeMap.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -import { TableCellPosition } from '../types/TableCellPosition'; - -export const softFocusPositionStateScopeMap = - createStateScopeMap({ - key: 'softFocusPositionStateScopeMap', - defaultValue: { - row: 0, - column: 1, - }, - }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts similarity index 50% rename from packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsStateScopeMap.ts rename to packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts index d04192bb6..8c89c2972 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsStateScopeMap.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableColumnsComponentState.ts @@ -1,11 +1,11 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ColumnDefinition } from '../types/ColumnDefinition'; -export const tableColumnsStateScopeMap = createStateScopeMap< +export const tableColumnsComponentState = createComponentState< ColumnDefinition[] >({ - key: 'tableColumnsStateScopeMap', + key: 'tableColumnsComponentState', defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts new file mode 100644 index 000000000..d19698d0f --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +import { Filter } from '../../object-filter-dropdown/types/Filter'; + +export const tableFiltersComponentState = createComponentState({ + key: 'tableFiltersComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersStateScopeMap.ts deleted file mode 100644 index 87c37e6f9..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableFiltersStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -import { Filter } from '../../object-filter-dropdown/types/Filter'; - -export const tableFiltersStateScopeMap = createStateScopeMap({ - key: 'tableFiltersStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts new file mode 100644 index 000000000..371cd72d6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const tableLastRowVisibleComponentState = createComponentState({ + key: 'tableLastRowVisibleComponentState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleStateScopeMap.ts deleted file mode 100644 index 8648e7bbe..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableLastRowVisibleStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const tableLastRowVisibleStateScopeMap = createStateScopeMap({ - key: 'tableLastRowVisibleStateScopeMap', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts new file mode 100644 index 000000000..5350c7f44 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const tableRowIdsComponentState = createComponentState({ + key: 'tableRowIdsComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsStateScopeMap.ts deleted file mode 100644 index a9027a4ed..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const tableRowIdsStateScopeMap = createStateScopeMap({ - key: 'tableRowIdsStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts new file mode 100644 index 000000000..e36730a28 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +import { Sort } from '../../object-sort-dropdown/types/Sort'; + +export const tableSortsComponentState = createComponentState({ + key: 'tableSortsComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsStateScopeMap.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsStateScopeMap.ts deleted file mode 100644 index 2e1900a2b..000000000 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableSortsStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -import { Sort } from '../../object-sort-dropdown/types/Sort'; - -export const tableSortsStateScopeMap = createStateScopeMap({ - key: 'tableSortsStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx index decadcd2e..92661b8e6 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx @@ -58,7 +58,7 @@ describe('useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray' }, }, ), - setObjectMetadata: useSetRecoilState(objectMetadataItemsState), + setObjectMetadata: useSetRecoilState(objectMetadataItemsState()), }; }, { diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearch.test.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearch.test.tsx index a117719c0..23dafb578 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearch.test.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/__tests__/useMultiObjectSearch.test.tsx @@ -102,7 +102,7 @@ describe('useMultiObjectSearch', () => { }, ], }), - setObjectMetadata: useSetRecoilState(objectMetadataItemsState), + setObjectMetadata: useSetRecoilState(objectMetadataItemsState()), }), { wrapper: Wrapper, diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts index 635f2e754..2afb0c8ea 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts @@ -25,7 +25,7 @@ export const useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery = ({ searchFilterValue: string; limit?: number; }) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const { searchFilterPerMetadataItemNameSingular } = useSearchFilterPerMetadataItem({ diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts index 538b61919..6c17af6db 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts @@ -28,7 +28,7 @@ export const useMultiObjectSearchMatchesSearchFilterAndToSelectQuery = ({ searchFilterValue: string; limit?: number; }) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const nonSystemObjectMetadataItems = objectMetadataItems.filter( ({ nameSingular, isSystem }) => diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts index 2c18f7d3b..1d993dc61 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts @@ -26,7 +26,7 @@ export const useMultiObjectSearchSelectedItemsQuery = ({ }: { selectedObjectRecordIds: SelectedObjectRecordId[]; }) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter( ({ nameSingular }) => { diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts b/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts index 8e49b1267..3dbbfc7ef 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type RelationPickerScopeInternalContextProps = StateScopeMapKey; +type RelationPickerScopeInternalContextProps = ComponentStateKey; export const RelationPickerScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts index 2266afc5b..c0c2ba232 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const relationPickerPreselectedIdScopedState = createStateScopeMap< +export const relationPickerPreselectedIdScopedState = createComponentState< string | undefined >({ key: 'relationPickerPreselectedIdScopedState', diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts index 5184ff810..608415575 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; export const relationPickerSearchFilterScopedState = - createStateScopeMap({ + createComponentState({ key: 'relationPickerSearchFilterScopedState', defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts b/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts index 5f94b225a..70a072e0f 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts +++ b/packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts @@ -1,7 +1,7 @@ import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const searchQueryScopedState = createStateScopeMap({ +export const searchQueryScopedState = createComponentState({ key: 'searchQueryScopedState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/object-record/spreadsheet-import/__tests__/useSpreadsheetRecordImport.test.tsx b/packages/twenty-front/src/modules/object-record/spreadsheet-import/__tests__/useSpreadsheetRecordImport.test.tsx index a26df2b1c..248b81a94 100644 --- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/__tests__/useSpreadsheetRecordImport.test.tsx +++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/__tests__/useSpreadsheetRecordImport.test.tsx @@ -75,7 +75,7 @@ describe('useSpreadsheetCompanyImport', () => { it('should work as expected', async () => { const { result } = renderHook( () => { - const spreadsheetImport = useRecoilValue(spreadsheetImportState); + const spreadsheetImport = useRecoilValue(spreadsheetImportState()); const { openRecordSpreadsheetImport } = useSpreadsheetRecordImport( CoreObjectNameSingular.Company, ); diff --git a/packages/twenty-front/src/modules/object-record/states/cursorFamilyState.ts b/packages/twenty-front/src/modules/object-record/states/cursorFamilyState.ts index e9c44191e..44fb5742c 100644 --- a/packages/twenty-front/src/modules/object-record/states/cursorFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/states/cursorFamilyState.ts @@ -1,6 +1,6 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const cursorFamilyState = atomFamily({ +export const cursorFamilyState = createFamilyState({ key: 'cursorFamilyState', - default: '', + defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/object-record/states/hasNextPageFamilyState.ts b/packages/twenty-front/src/modules/object-record/states/hasNextPageFamilyState.ts index 20260b927..2a5f9e894 100644 --- a/packages/twenty-front/src/modules/object-record/states/hasNextPageFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/states/hasNextPageFamilyState.ts @@ -1,6 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const hasNextPageFamilyState = atomFamily({ +export const hasNextPageFamilyState = createFamilyState< + boolean, + string | undefined +>({ key: 'hasNextPageFamilyState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/object-record/states/isFetchingMoreRecordsFamilyState.ts b/packages/twenty-front/src/modules/object-record/states/isFetchingMoreRecordsFamilyState.ts index 4137f67a7..e254f9231 100644 --- a/packages/twenty-front/src/modules/object-record/states/isFetchingMoreRecordsFamilyState.ts +++ b/packages/twenty-front/src/modules/object-record/states/isFetchingMoreRecordsFamilyState.ts @@ -1,9 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const isFetchingMoreRecordsFamilyState = atomFamily< +export const isFetchingMoreRecordsFamilyState = createFamilyState< boolean, string | undefined >({ key: 'isFetchingMoreRecordsFamilyState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchEntityQuery.test.tsx b/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchEntityQuery.test.tsx index 57a93cdec..ea46bac44 100644 --- a/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchEntityQuery.test.tsx +++ b/packages/twenty-front/src/modules/search/hooks/__tests__/useFilteredSearchEntityQuery.test.tsx @@ -67,7 +67,7 @@ describe('useFilteredSearchEntityQuery', () => { const { result } = renderHook( () => { const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember({ id: '32219445-f587-4c40-b2b1-6d3205ed96da', @@ -76,7 +76,7 @@ describe('useFilteredSearchEntityQuery', () => { const mockObjectMetadataItems = getObjectMetadataItemsMock(); - const setMetadataItems = useSetRecoilState(objectMetadataItemsState); + const setMetadataItems = useSetRecoilState(objectMetadataItemsState()); setMetadataItems(mockObjectMetadataItems); diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx index 542597631..b157fb588 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx @@ -20,7 +20,7 @@ const StyledRowRightContainer = styled.div` `; export const SettingsAccountsCalendarAccountsListCard = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const navigate = useNavigate(); const { records: _accounts, loading } = useFindManyRecords({ diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx index 2fc6154f1..7999f062b 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx @@ -20,7 +20,7 @@ const StyledRowRightContainer = styled.div` `; export const SettingsAccountsEmailsAccountsListCard = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const navigate = useNavigate(); const { records: accounts, loading: accountsLoading } = diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx index 28646b9d8..03e6a9e25 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx @@ -12,7 +12,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title'; import { Section } from '@/ui/layout/section/components/Section'; export const SettingsAccountsEmailsBlocklistSection = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { records: blocklist } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.Blocklist, diff --git a/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyFamilyState.ts b/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyFamilyState.ts index 329e1b648..f12c24e7d 100644 --- a/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyFamilyState.ts +++ b/packages/twenty-front/src/modules/settings/developers/states/generatedApiKeyFamilyState.ts @@ -1,9 +1,9 @@ -import { atomFamily } from 'recoil'; +import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState'; -export const generatedApiKeyFamilyState = atomFamily< +export const generatedApiKeyFamilyState = createFamilyState< string | null | undefined, string >({ key: 'generatedApiKeyFamilyState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx b/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx index ee6097152..eb08cd045 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx @@ -9,7 +9,7 @@ import { useEmailPasswordResetLinkMutation } from '~/generated/graphql'; export const ChangePassword = () => { const { enqueueSnackBar } = useSnackBar(); - const currentUser = useRecoilValue(currentUserState); + const currentUser = useRecoilValue(currentUserState()); const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation(); diff --git a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx index d3e52ad09..bd0de3f17 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx @@ -15,7 +15,7 @@ export const DeleteAccount = () => { useState(false); const [deleteUserAccount] = useDeleteUserAccountMutation(); - const currentUser = useRecoilValue(currentUserState); + const currentUser = useRecoilValue(currentUserState()); const userEmail = currentUser?.email; const { signOut } = useAuth(); const navigate = useNavigate(); diff --git a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx b/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx index 4264bd928..b0fcdf121 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx @@ -17,7 +17,7 @@ export const DeleteWorkspace = () => { useState(false); const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation(); - const currentUser = useRecoilValue(currentUserState); + const currentUser = useRecoilValue(currentUserState()); const userEmail = currentUser?.email; const { signOut } = useAuth(); const navigate = useNavigate(); diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx index 02c1e8734..80494ebbb 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx @@ -4,7 +4,7 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { TextInput } from '@/ui/input/components/TextInput'; export const EmailField = () => { - const currentUser = useRecoilValue(currentUserState); + const currentUser = useRecoilValue(currentUserState()); return ( { - const currentUser = useRecoilValue(currentUserState); + const currentUser = useRecoilValue(currentUserState()); const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const [firstName, setFirstName] = useState( diff --git a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx index 751422c6f..47a8f4033 100644 --- a/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx +++ b/packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx @@ -15,7 +15,7 @@ export const ProfilePictureUploader = () => { useUploadProfilePictureMutation(); const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const [uploadController, setUploadController] = diff --git a/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx b/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx index f7337f984..1b0fb6cdc 100644 --- a/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx +++ b/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx @@ -27,7 +27,7 @@ export const NameField = ({ autoSave = true, onNameUpdate, }: NameFieldProps) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const [displayName, setDisplayName] = useState( currentWorkspace?.displayName ?? '', diff --git a/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx b/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx index 453cfc21d..ebb909ede 100644 --- a/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx +++ b/packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx @@ -9,7 +9,7 @@ export const ToggleImpersonate = () => { const { enqueueSnackBar } = useSnackBar(); const [currentWorkspace, setCurrentWorkspace] = useRecoilState( - currentWorkspaceState, + currentWorkspaceState(), ); const [updateWorkspace] = useUpdateWorkspaceMutation(); diff --git a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx index 7f004a599..b8ca38179 100644 --- a/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx +++ b/packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx @@ -13,7 +13,7 @@ export const WorkspaceLogoUploader = () => { const [uploadLogo] = useUploadWorkspaceLogoMutation(); const [updateWorkspce] = useUpdateWorkspaceMutation(); const [currentWorkspace, setCurrentWorkspace] = useRecoilState( - currentWorkspaceState, + currentWorkspaceState(), ); const onUpload = async (file: File) => { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx b/packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx index c54a5498a..a29480663 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/hooks/__tests__/useSpreadsheetImport.test.tsx @@ -44,7 +44,7 @@ describe('useSpreadsheetImport', () => { const { result } = renderHook( () => ({ useSpreadsheetImport: useSpreadsheetImport(), - spreadsheetImportState: useRecoilState(spreadsheetImportState)[0], + spreadsheetImportState: useRecoilState(spreadsheetImportState())[0], }), { wrapper: Wrapper, diff --git a/packages/twenty-front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.ts b/packages/twenty-front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.ts index 0259faad6..160ba49ca 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.ts +++ b/packages/twenty-front/src/modules/spreadsheet-import/hooks/useSpreadsheetImport.ts @@ -4,7 +4,7 @@ import { spreadsheetImportState } from '@/spreadsheet-import/states/spreadsheetI import { SpreadsheetOptions } from '@/spreadsheet-import/types'; export const useSpreadsheetImport = () => { - const setSpreadSheetImport = useSetRecoilState(spreadsheetImportState); + const setSpreadSheetImport = useSetRecoilState(spreadsheetImportState()); const openSpreadsheetImport = ( options: Omit, 'isOpen' | 'onClose'>, diff --git a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx index 5c5b7a137..3bec78269 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx @@ -11,7 +11,7 @@ export const SpreadsheetImportProvider = ( props: SpreadsheetImportProviderProps, ) => { const [spreadsheetImport, setSpreadsheetImport] = useRecoilState( - spreadsheetImportState, + spreadsheetImportState(), ); const handleClose = () => { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts index d1f0da412..5bb6d2fda 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts +++ b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportState.ts @@ -1,4 +1,4 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { SpreadsheetOptions } from '../types'; @@ -7,9 +7,9 @@ export type SpreadsheetImportState = { options: Omit, 'isOpen' | 'onClose'> | null; }; -export const spreadsheetImportState = atom>({ +export const spreadsheetImportState = createState>({ key: 'spreadsheetImportState', - default: { + defaultValue: { isOpen: false, options: null, }, diff --git a/packages/twenty-front/src/modules/support/components/SupportChat.tsx b/packages/twenty-front/src/modules/support/components/SupportChat.tsx index 7a0818c7b..a9c609ccb 100644 --- a/packages/twenty-front/src/modules/support/components/SupportChat.tsx +++ b/packages/twenty-front/src/modules/support/components/SupportChat.tsx @@ -33,9 +33,9 @@ const insertScript = ({ }; export const SupportChat = () => { - const currentUser = useRecoilValue(currentUserState); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); - const supportChat = useRecoilValue(supportChatState); + const currentUser = useRecoilValue(currentUserState()); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); + const supportChat = useRecoilValue(supportChatState()); const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false); const configureFront = useCallback( diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx index 918d7d32d..16112d90f 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx +++ b/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx @@ -8,7 +8,7 @@ type IconsProviderProps = { }; export const IconsProvider = ({ children }: IconsProviderProps) => { - const setIcons = useSetRecoilState(iconsState); + const setIcons = useSetRecoilState(iconsState()); useEffect(() => { import('../constants/index').then((lazyLoadedIcons) => { diff --git a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts b/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts index 4efd71e7f..e3619b770 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts +++ b/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts @@ -4,7 +4,7 @@ import { Icon123 } from '@/ui/display/icon'; import { iconsState } from '@/ui/display/icon/states/iconsState'; export const useIcons = () => { - const icons = useRecoilValue(iconsState); + const icons = useRecoilValue(iconsState()); const defaultIcon = Icon123; const getIcons = () => { diff --git a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts b/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts index 4f489150a..e2d7a2e8e 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts +++ b/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts @@ -1,8 +1,7 @@ -import { atom } from 'recoil'; - import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const iconsState = atom>({ +export const iconsState = createState>({ key: 'iconsState', - default: {}, + defaultValue: {}, }); diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts index 428596e8f..fb6183db8 100644 --- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type DialogManagerScopeInternalContextProps = StateScopeMapKey; +type DialogManagerScopeInternalContextProps = ComponentStateKey; export const DialogManagerScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts index 13bc5cb7d..4f8c44a34 100644 --- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts +++ b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts @@ -1,4 +1,4 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { DialogOptions } from '../types/DialogOptions'; @@ -7,7 +7,7 @@ type DialogState = { queue: DialogOptions[]; }; -export const dialogInternalScopedState = createStateScopeMap({ +export const dialogInternalScopedState = createComponentState({ key: 'dialog/internal-state', defaultValue: { maxQueue: 2, diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts index 274d356a8..75b7e1e13 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type SnackBarManagerScopeInternalContextProps = StateScopeMapKey; +type SnackBarManagerScopeInternalContextProps = ComponentStateKey; export const SnackBarManagerScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts index e6f613fcd..a880abccc 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts +++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts @@ -1,4 +1,4 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { SnackBarProps } from '../components/SnackBar'; @@ -11,7 +11,7 @@ export type SnackBarState = { queue: SnackBarOptions[]; }; -export const snackBarInternalScopedState = createStateScopeMap({ +export const snackBarInternalScopedState = createComponentState({ key: 'snackBarState', defaultValue: { maxQueue: 3, diff --git a/packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts b/packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts index 141431c71..998dd0dee 100644 --- a/packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts +++ b/packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts @@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil'; import { iconPickerState } from '../states/iconPickerState'; export const useIconPicker = () => { - const [iconPicker, setIconPicker] = useRecoilState(iconPickerState); + const [iconPicker, setIconPicker] = useRecoilState(iconPickerState()); return { Icon: iconPicker.Icon, diff --git a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts index f2698c007..5a2926bb9 100644 --- a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts +++ b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts @@ -1,14 +1,13 @@ -import { atom } from 'recoil'; - import { IconApps } from '@/ui/display/icon'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { createState } from '@/ui/utilities/state/utils/createState'; type IconPickerState = { Icon: IconComponent; iconKey: string; }; -export const iconPickerState = atom({ +export const iconPickerState = createState({ key: 'iconPickerState', - default: { Icon: IconApps, iconKey: 'IconApps' }, + defaultValue: { Icon: IconApps, iconKey: 'IconApps' }, }); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts index b0f35ce58..c976f2bd0 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts @@ -1,9 +1,9 @@ import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext'; -import { dropdownHotkeyStateScopeMap } from '@/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap'; -import { dropdownWidthStateScopeMap } from '@/ui/layout/dropdown/states/dropdownWidthStateScopeMap'; -import { isDropdownOpenStateScopeMap } from '@/ui/layout/dropdown/states/isDropdownOpenStateScopeMap'; +import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState'; +import { dropdownWidthComponentState } from '@/ui/layout/dropdown/states/dropdownWidthComponentState'; +import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; type UseDropdownStatesProps = { dropdownScopeId?: string; @@ -19,8 +19,17 @@ export const useDropdownStates = ({ return { scopeId, - dropdownHotkeyScopeState: getState(dropdownHotkeyStateScopeMap, scopeId), - dropdownWidthState: getState(dropdownWidthStateScopeMap, scopeId), - isDropdownOpenState: getState(isDropdownOpenStateScopeMap, scopeId), + dropdownHotkeyScopeState: extractComponentState( + dropdownHotkeyComponentState, + scopeId, + ), + dropdownWidthState: extractComponentState( + dropdownWidthComponentState, + scopeId, + ), + isDropdownOpenState: extractComponentState( + isDropdownOpenComponentState, + scopeId, + ), }; }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts index 5b6ae045b..0d117b23f 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type DropdownScopeInternalContextProps = StateScopeMapKey; +type DropdownScopeInternalContextProps = ComponentStateKey; export const DropdownScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyComponentState.ts new file mode 100644 index 000000000..729472555 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyComponentState.ts @@ -0,0 +1,9 @@ +import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const dropdownHotkeyComponentState = createComponentState< + HotkeyScope | null | undefined +>({ + key: 'dropdownHotkeyComponentState', + defaultValue: null, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts deleted file mode 100644 index 60951e8f5..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const dropdownHotkeyStateScopeMap = createStateScopeMap< - HotkeyScope | null | undefined ->({ - key: 'dropdownHotkeyStateScopeMap', - defaultValue: null, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts new file mode 100644 index 000000000..a9879b5f0 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const dropdownWidthComponentState = createComponentState< + number | undefined +>({ + key: 'dropdownWidthComponentState', + defaultValue: 160, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts deleted file mode 100644 index 9a39a52fd..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const dropdownWidthStateScopeMap = createStateScopeMap< - number | undefined ->({ - key: 'dropdownWidthStateScopeMap', - defaultValue: 160, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts new file mode 100644 index 000000000..22aa5bc66 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const isDropdownOpenComponentState = createComponentState({ + key: 'isDropdownOpenComponentState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts deleted file mode 100644 index 124ae55be..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const isDropdownOpenStateScopeMap = createStateScopeMap({ - key: 'isDropdownOpenStateScopeMap', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx index 1543b1f67..69289ef3d 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx @@ -2,7 +2,7 @@ import { useRef } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener'; @@ -41,12 +41,12 @@ const StyledRightDrawer = styled.div` export const RightDrawer = () => { const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState( - isRightDrawerOpenState, + isRightDrawerOpenState(), ); - const [isRightDrawerExpanded] = useRecoilState(isRightDrawerExpandedState); + const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState()); - const [rightDrawerPage] = useRecoilState(rightDrawerPageState); + const rightDrawerPage = useRecoilValue(rightDrawerPageState()); const { closeRightDrawer } = useRightDrawer(); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx index d35dc5781..cb981739b 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx @@ -28,7 +28,7 @@ const StyledRightDrawerBody = styled.div` `; export const RightDrawerRouter = () => { - const [rightDrawerPage] = useRecoilState(rightDrawerPageState); + const [rightDrawerPage] = useRecoilState(rightDrawerPageState()); let page = <>; let topBar = <>; diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx index 701c69edf..d22700e73 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx @@ -10,7 +10,7 @@ import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState export const RightDrawerTopBarExpandButton = () => { const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState( - isRightDrawerExpandedState, + isRightDrawerExpandedState(), ); const handleButtonClick = () => { diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx index 843de0118..727f6a7ca 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx @@ -12,10 +12,12 @@ describe('useRightDrawer', () => { it('Should test the default behavior of useRightDrawer and change the states as the function calls', async () => { const useCombinedHooks = () => { const { openRightDrawer, closeRightDrawer } = useRightDrawer(); - const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState); - const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState); + const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState()); + const isRightDrawerExpanded = useRecoilValue( + isRightDrawerExpandedState(), + ); - const rightDrawerPage = useRecoilValue(rightDrawerPageState); + const rightDrawerPage = useRecoilValue(rightDrawerPageState()); return { openRightDrawer, diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts index 08cb391cc..a6cb22d7f 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts @@ -1,4 +1,4 @@ -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState'; import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState'; @@ -7,14 +7,15 @@ import { RightDrawerPages } from '../types/RightDrawerPages'; export const useRightDrawer = () => { const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState( - isRightDrawerOpenState, + isRightDrawerOpenState(), ); - const [, setIsRightDrawerExpanded] = useRecoilState( - isRightDrawerExpandedState, + const setIsRightDrawerExpanded = useSetRecoilState( + isRightDrawerExpandedState(), ); - const [rightDrawerPage, setRightDrawerPage] = - useRecoilState(rightDrawerPageState); + const [rightDrawerPage, setRightDrawerPage] = useRecoilState( + rightDrawerPageState(), + ); const openRightDrawer = (rightDrawerPage: RightDrawerPages) => { setRightDrawerPage(rightDrawerPage); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts index 09a450fc1..8a871b261 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerExpandedState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isRightDrawerExpandedState = atom({ +export const isRightDrawerExpandedState = createState({ key: 'isRightDrawerExpandedState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts index fcfd62975..749bb1b00 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isRightDrawerOpenState = atom({ +export const isRightDrawerOpenState = createState({ key: 'ui/layout/is-right-drawer-open', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts index 8d0de858e..ba023e66d 100644 --- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts +++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts @@ -1,8 +1,8 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { RightDrawerPages } from '../types/RightDrawerPages'; -export const rightDrawerPageState = atom({ +export const rightDrawerPageState = createState({ key: 'ui/layout/right-drawer-page', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListStates.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListStates.ts index 97179525c..004132921 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListStates.ts +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListStates.ts @@ -1,11 +1,11 @@ import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext'; -import { selectableItemIdsStateScopeMap } from '@/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap'; -import { selectableListOnEnterStateScopeMap } from '@/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap'; -import { selectedItemIdStateScopeMap } from '@/ui/layout/selectable-list/states/selectedItemIdStateScopeMap'; -import { isSelectedItemIdFamilySelectorScopeMap } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap'; +import { selectableItemIdsComponentState } from '@/ui/layout/selectable-list/states/selectableItemIdsComponentState'; +import { selectableListOnEnterComponentState } from '@/ui/layout/selectable-list/states/selectableListOnEnterComponentState'; +import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; +import { isSelectedItemIdFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelector'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; type useSelectableListStatesProps = { selectableListScopeId?: string; @@ -21,15 +21,21 @@ export const useSelectableListStates = ({ return { scopeId, - isSelectedItemIdSelector: getFamilyState( - isSelectedItemIdFamilySelectorScopeMap, + isSelectedItemIdSelector: extractComponentFamilyState( + isSelectedItemIdFamilySelector, scopeId, ), - selectableItemIdsState: getState(selectableItemIdsStateScopeMap, scopeId), - selectableListOnEnterState: getState( - selectableListOnEnterStateScopeMap, + selectableItemIdsState: extractComponentState( + selectableItemIdsComponentState, + scopeId, + ), + selectableListOnEnterState: extractComponentState( + selectableListOnEnterComponentState, + scopeId, + ), + selectedItemIdState: extractComponentState( + selectedItemIdComponentState, scopeId, ), - selectedItemIdState: getState(selectedItemIdStateScopeMap, scopeId), }; }; diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts index 7857bfdd3..c347ce3f0 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type SelectableListScopeInternalContextProps = StateScopeMapKey; +type SelectableListScopeInternalContextProps = ComponentStateKey; export const SelectableListScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState.ts new file mode 100644 index 000000000..8dcbeb829 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState.ts @@ -0,0 +1,9 @@ +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; + +export const isSelectedItemIdComponentFamilyState = createComponentFamilyState< + boolean, + string +>({ + key: 'isSelectedItemIdComponentFamilyState', + defaultValue: false, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap.ts deleted file mode 100644 index 84bc20fd4..000000000 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -export const isSelectedItemIdFamilyStateScopeMap = createFamilyStateScopeMap< - boolean, - string ->({ - key: 'isSelectedItemIdMapScopedFamilyState', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsComponentState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsComponentState.ts new file mode 100644 index 000000000..05a239e56 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const selectableItemIdsComponentState = createComponentState( + { + key: 'selectableItemIdsComponentState', + defaultValue: [[]], + }, +); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap.ts deleted file mode 100644 index 19c3e68eb..000000000 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const selectableItemIdsStateScopeMap = createStateScopeMap({ - key: 'selectableItemIdsScopedState', - defaultValue: [[]], -}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterComponentState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterComponentState.ts new file mode 100644 index 000000000..f0cbc21ea --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const selectableListOnEnterComponentState = createComponentState< + ((itemId: string) => void) | undefined +>({ + key: 'selectableListOnEnterComponentState', + defaultValue: undefined, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap.ts deleted file mode 100644 index 055b1d117..000000000 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const selectableListOnEnterStateScopeMap = createStateScopeMap< - ((itemId: string) => void) | undefined ->({ - key: 'selectableListOnEnterScopedState', - defaultValue: undefined, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdComponentState.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdComponentState.ts new file mode 100644 index 000000000..8587373a1 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdComponentState.ts @@ -0,0 +1,8 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const selectedItemIdComponentState = createComponentState( + { + key: 'selectedItemIdComponentState', + defaultValue: null, + }, +); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdStateScopeMap.ts deleted file mode 100644 index 8445a2c2e..000000000 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectedItemIdStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const selectedItemIdStateScopeMap = createStateScopeMap({ - key: 'selectedItemIdScopedState', - defaultValue: null, -}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelector.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelector.ts new file mode 100644 index 000000000..a93df20ce --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelector.ts @@ -0,0 +1,28 @@ +import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState'; +import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector'; + +export const isSelectedItemIdFamilySelector = createComponentFamilySelector< + boolean, + string +>({ + key: 'isSelectedItemIdFamilySelector', + get: + ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) => + ({ get }) => + get( + isSelectedItemIdComponentFamilyState({ + scopeId: scopeId, + familyKey: familyKey, + }), + ), + set: + ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) => + ({ set }, newValue) => + set( + isSelectedItemIdComponentFamilyState({ + scopeId: scopeId, + familyKey: familyKey, + }), + newValue, + ), +}); diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap.ts deleted file mode 100644 index 6eae4ad0c..000000000 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { isSelectedItemIdFamilyStateScopeMap } from '@/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap'; -import { createFamilySelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap'; - -export const isSelectedItemIdFamilySelectorScopeMap = - createFamilySelectorScopeMap({ - key: 'isSelectedItemIdScopedFamilySelector', - get: - ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) => - ({ get }) => - get( - isSelectedItemIdFamilyStateScopeMap({ - scopeId: scopeId, - familyKey: familyKey, - }), - ), - set: - ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) => - ({ set }, newValue) => - set( - isSelectedItemIdFamilyStateScopeMap({ - scopeId: scopeId, - familyKey: familyKey, - }), - newValue, - ), - }); diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx index fee1454b6..3b75efe62 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx @@ -26,7 +26,7 @@ export const ShowPageMoreButton = ({ objectNameSingular: string; }) => { const { closeDropdown, toggleDropdown } = useDropdown('more-show-page'); - const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState); + const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState()); const navigate = useNavigate(); const { deleteOneRecord } = useDeleteOneRecord({ diff --git a/packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts b/packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts index c1a47b9ca..691585254 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts +++ b/packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts @@ -1,7 +1,7 @@ import { TabListScopeInternalContext } from '@/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext'; -import { activeTabIdStateScopeMap } from '@/ui/layout/tab/states/activeTabIdStateScopeMap'; +import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; type useTabListStatesProps = { tabListScopeId?: string; @@ -15,6 +15,9 @@ export const useTabListStates = ({ tabListScopeId }: useTabListStatesProps) => { return { scopeId, - getActiveTabIdState: getState(activeTabIdStateScopeMap, scopeId), + getActiveTabIdState: extractComponentState( + activeTabIdComponentState, + scopeId, + ), }; }; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext.ts index be207055b..878955256 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/layout/tab/scopes/scope-internal-context/TabListScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type TabListScopeInternalContextProps = StateScopeMapKey; +type TabListScopeInternalContextProps = ComponentStateKey; export const TabListScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdComponentState.ts b/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdComponentState.ts new file mode 100644 index 000000000..fcb07559b --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdComponentState.ts @@ -0,0 +1,6 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const activeTabIdComponentState = createComponentState({ + key: 'activeTabIdComponentState', + defaultValue: null, +}); diff --git a/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdStateScopeMap.ts b/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdStateScopeMap.ts deleted file mode 100644 index 500ccc57a..000000000 --- a/packages/twenty-front/src/modules/ui/layout/tab/states/activeTabIdStateScopeMap.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const activeTabIdStateScopeMap = createStateScopeMap({ - key: 'activeTabIdStateScopeMap', - defaultValue: null, -}); diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx index bf5c2586a..2c7b9db3b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx @@ -28,8 +28,8 @@ const StyledContainerActionBar = styled.div` `; export const ActionBar = () => { - const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState); - const actionBarEntries = useRecoilValue(actionBarEntriesState); + const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState()); + const actionBarEntries = useRecoilValue(actionBarEntriesState()); const wrapperRef = useRef(null); if (contextMenuIsOpen) { diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx index 24daaea85..460ee2048 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx @@ -9,7 +9,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState'; import { ActionBar } from '../ActionBar'; const FilledActionBar = () => { - const setActionBarOpenState = useSetRecoilState(actionBarOpenState); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState()); setActionBarOpenState(true); return ; }; diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts b/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts index 2e9d0cf61..d4ead4317 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarEntriesState.ts @@ -1,8 +1,8 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { ActionBarEntry } from '../types/ActionBarEntry'; -export const actionBarEntriesState = atom({ +export const actionBarEntriesState = createState({ key: 'actionBarEntriesState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts b/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts index 3d150e978..30f620362 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/states/actionBarIsOpenState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const actionBarOpenState = atom({ +export const actionBarOpenState = createState({ key: 'actionBarOpenState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx b/packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx index 8a3a1cfd0..519c6bf87 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx @@ -37,10 +37,10 @@ const StyledContainerContextMenu = styled.div` `; export const ContextMenu = () => { - const contextMenuPosition = useRecoilValue(contextMenuPositionState); - const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState); - const contextMenuEntries = useRecoilValue(contextMenuEntriesState); - const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); + const contextMenuPosition = useRecoilValue(contextMenuPositionState()); + const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState()); + const contextMenuEntries = useRecoilValue(contextMenuEntriesState()); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState()); const wrapperRef = useRef(null); useListenClickOutside({ diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx index ee9eddd2f..d0a5f4a79 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx @@ -10,12 +10,12 @@ import { contextMenuPositionState } from '../../states/contextMenuPositionState' import { ContextMenu } from '../ContextMenu'; const FilledContextMenu = () => { - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + const setContextMenuPosition = useSetRecoilState(contextMenuPositionState()); setContextMenuPosition({ x: 100, y: 10, }); - const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState()); setContextMenuOpenState(true); return ; }; diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts index e5ba5396d..1d4977249 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuEntriesState.ts @@ -1,8 +1,8 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { ContextMenuEntry } from '../types/ContextMenuEntry'; -export const contextMenuEntriesState = atom({ +export const contextMenuEntriesState = createState({ key: 'contextMenuEntriesState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts index a41032e21..60b54873a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuIsOpenState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const contextMenuIsOpenState = atom({ +export const contextMenuIsOpenState = createState({ key: 'contextMenuIsOpenState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts index efa4c4473..dbc877de0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/states/contextMenuPositionState.ts @@ -1,10 +1,9 @@ -import { atom } from 'recoil'; - import { PositionType } from '@/ui/navigation/context-menu/types/PositionType'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const contextMenuPositionState = atom({ +export const contextMenuPositionState = createState({ key: 'contextMenuPositionState', - default: { + defaultValue: { x: null, y: null, }, diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 30f478a93..14f4cc3b6 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx @@ -37,7 +37,7 @@ export const NavigationDrawerBackButton = ({ }: NavigationDrawerBackButtonProps) => { const theme = useTheme(); const navigate = useNavigate(); - const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState); + const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState()); return ( diff --git a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts index 6537c265a..27076c1d5 100644 --- a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const navigationMemorizedUrlState = atom({ +export const navigationMemorizedUrlState = createState({ key: 'navigationMemorizedUrlState', - default: '/', + defaultValue: '/', }); diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx index 9acd228fb..5dfbd9c79 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx @@ -11,7 +11,7 @@ const renderHooks = (initialStep: number) => { const { nextStep, prevStep, reset, setStep } = useStepBar({ initialStep, }); - const stepBarInternal = useRecoilValue(stepBarInternalState); + const stepBarInternal = useRecoilValue(stepBarInternalState()); return { nextStep, diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts b/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts index 0bc144942..f567d9c4d 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts @@ -8,8 +8,9 @@ export type StepsOptions = { }; export const useStepBar = ({ initialStep }: StepsOptions) => { - const [stepBarInternal, setStepBarInternal] = - useRecoilState(stepBarInternalState); + const [stepBarInternal, setStepBarInternal] = useRecoilState( + stepBarInternalState(), + ); const nextStep = () => { setStepBarInternal((prevState) => ({ diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts index 5917096d9..55fe12522 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts +++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts @@ -1,12 +1,12 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; export type StepsState = { activeStep: number; }; -export const stepBarInternalState = atom({ +export const stepBarInternalState = createState({ key: 'step-bar/internal-state', - default: { + defaultValue: { activeStep: -1, }, }); diff --git a/packages/twenty-front/src/modules/ui/theme/hooks/__tests__/useColorScheme.test.tsx b/packages/twenty-front/src/modules/ui/theme/hooks/__tests__/useColorScheme.test.tsx index f84692bfa..841253061 100644 --- a/packages/twenty-front/src/modules/ui/theme/hooks/__tests__/useColorScheme.test.tsx +++ b/packages/twenty-front/src/modules/ui/theme/hooks/__tests__/useColorScheme.test.tsx @@ -32,7 +32,7 @@ describe('useColorScheme', () => { const colorScheme = useColorScheme(); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); setCurrentWorkspaceMember(workspaceMember); diff --git a/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts b/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts index e3b46c7ad..46cfa9357 100644 --- a/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts +++ b/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts @@ -8,7 +8,7 @@ import { ColorScheme } from '@/workspace-member/types/WorkspaceMember'; export const useColorScheme = () => { const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const { updateOneRecord: updateOneWorkspaceMember } = useUpdateOneRecord({ diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts index d332b9df0..d3eb6d043 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts @@ -13,7 +13,7 @@ export const usePreviousHotkeyScope = () => { ({ snapshot, set }) => () => { const previousHotkeyScope = snapshot - .getLoadable(previousHotkeyScopeState) + .getLoadable(previousHotkeyScopeState()) .getValue(); if (!previousHotkeyScope) { @@ -25,7 +25,7 @@ export const usePreviousHotkeyScope = () => { previousHotkeyScope.customScopes, ); - set(previousHotkeyScopeState, null); + set(previousHotkeyScopeState(), null); }, [setHotkeyScope], ); @@ -34,11 +34,11 @@ export const usePreviousHotkeyScope = () => { ({ snapshot, set }) => (scope: string, customScopes?: CustomHotkeyScopes) => { const currentHotkeyScope = snapshot - .getLoadable(currentHotkeyScopeState) + .getLoadable(currentHotkeyScopeState()) .getValue(); setHotkeyScope(scope, customScopes); - set(previousHotkeyScopeState, currentHotkeyScope); + set(previousHotkeyScopeState(), currentHotkeyScope); }, [setHotkeyScope], ); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts index 6e3d2d102..92ebc8b89 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts @@ -24,7 +24,7 @@ export const useScopedHotkeyCallback = () => preventDefault?: boolean; }) => { const currentHotkeyScopes = snapshot - .getLoadable(internalHotkeysEnabledScopesState) + .getLoadable(internalHotkeysEnabledScopesState()) .getValue(); if (!currentHotkeyScopes.includes(scope)) { diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts index b8c7ff31d..b8059643c 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts @@ -22,7 +22,8 @@ export const useScopedHotkeys = ( preventDefault: true, }, ) => { - const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState); + const [pendingHotkey, setPendingHotkey] = + useRecoilState(pendingHotkeyState()); const callScopedHotkeyCallback = useScopedHotkeyCallback(); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts index 6f3d795fa..144d74813 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts @@ -20,7 +20,8 @@ export const useSequenceHotkeys = ( }, deps: any[] = [], ) => { - const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState); + const [pendingHotkey, setPendingHotkey] = + useRecoilState(pendingHotkeyState()); const callScopedHotkeyCallback = useScopedHotkeyCallback(); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts index 83b12c2fc..4d6a4f677 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts @@ -26,7 +26,7 @@ export const useSetHotkeyScope = () => ({ snapshot, set }) => async (hotkeyScopeToSet: string, customScopes?: CustomHotkeyScopes) => { const currentHotkeyScope = snapshot - .getLoadable(currentHotkeyScopeState) + .getLoadable(currentHotkeyScopeState()) .getValue(); if (currentHotkeyScope.scope === hotkeyScopeToSet) { @@ -76,8 +76,8 @@ export const useSetHotkeyScope = () => } scopesToSet.push(newHotkeyScope.scope); - set(internalHotkeysEnabledScopesState, scopesToSet); - set(currentHotkeyScopeState, newHotkeyScope); + set(internalHotkeysEnabledScopesState(), scopesToSet); + set(currentHotkeyScopeState(), newHotkeyScope); }, [], ); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts index 98eeabde6..c948f65b7 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts @@ -1,9 +1,9 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope'; import { HotkeyScope } from '../../types/HotkeyScope'; -export const currentHotkeyScopeState = atom({ +export const currentHotkeyScopeState = createState({ key: 'currentHotkeyScopeState', - default: INITIAL_HOTKEYS_SCOPE, + defaultValue: INITIAL_HOTKEYS_SCOPE, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts index 5bc666110..b86f4f7da 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const internalHotkeysEnabledScopesState = atom({ +export const internalHotkeysEnabledScopesState = createState({ key: 'internalHotkeysEnabledScopesState', - default: [], + defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts index da2dbf173..fe3e81b27 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts @@ -1,7 +1,8 @@ import { Keys } from 'react-hotkeys-hook/dist/types'; -import { atom } from 'recoil'; -export const pendingHotkeyState = atom({ +import { createState } from '@/ui/utilities/state/utils/createState'; + +export const pendingHotkeyState = createState({ key: 'pendingHotkeyState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts index fd076d8e2..a39c86315 100644 --- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts @@ -1,8 +1,8 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; import { HotkeyScope } from '../../types/HotkeyScope'; -export const previousHotkeyScopeState = atom({ +export const previousHotkeyScopeState = createState({ key: 'previousHotkeyScopeState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts index 0d96571b3..335acb58c 100644 --- a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const currentPageLocationState = atom({ +export const currentPageLocationState = createState({ key: 'currentPageLocationState', - default: '', + defaultValue: '', }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts index 9ca424aef..dc2675440 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts @@ -1,25 +1,25 @@ -import { clickOutsideListenerCallbacksStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap'; -import { clickOutsideListenerIsActivatedStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap'; -import { clickOutsideListenerIsMouseDownInsideStateScopeMap } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap'; +import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState'; +import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState'; +import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState'; import { lockedListenerIdState } from '@/ui/utilities/pointer-event/states/lockedListenerIdState'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; -import { getState } from '@/ui/utilities/recoil-scope/utils/getState'; +import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; export const useClickOustideListenerStates = (componentId: string) => { const scopeId = getScopeIdFromComponentId(componentId); return { scopeId, - getClickOutsideListenerCallbacksState: getState( - clickOutsideListenerCallbacksStateScopeMap, + getClickOutsideListenerCallbacksState: extractComponentState( + clickOutsideListenerCallbacksComponentState, scopeId, ), - getClickOutsideListenerIsMouseDownInsideState: getState( - clickOutsideListenerIsMouseDownInsideStateScopeMap, + getClickOutsideListenerIsMouseDownInsideState: extractComponentState( + clickOutsideListenerIsMouseDownInsideComponentState, scopeId, ), - getClickOutsideListenerIsActivatedState: getState( - clickOutsideListenerIsActivatedStateScopeMap, + getClickOutsideListenerIsActivatedState: extractComponentState( + clickOutsideListenerIsActivatedComponentState, scopeId, ), lockedListenerIdState, diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts new file mode 100644 index 000000000..d0c1ec291 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksComponentState.ts @@ -0,0 +1,9 @@ +import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const clickOutsideListenerCallbacksComponentState = createComponentState< + ClickOutsideListenerCallback[] +>({ + key: 'clickOutsideListenerCallbacksComponentState', + defaultValue: [], +}); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts deleted file mode 100644 index 425c3ca81..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerCallbacksStateScopeMap.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const clickOutsideListenerCallbacksStateScopeMap = createStateScopeMap< - ClickOutsideListenerCallback[] ->({ - key: 'clickOutsideListenerCallbacksStateScopeMap', - defaultValue: [], -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts new file mode 100644 index 000000000..8c08b27de --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const clickOutsideListenerIsActivatedComponentState = + createComponentState({ + key: 'clickOutsideListenerIsActivatedComponentState', + defaultValue: true, + }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts deleted file mode 100644 index 61367a9ae..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const clickOutsideListenerIsActivatedStateScopeMap = - createStateScopeMap({ - key: 'clickOutsideListenerIsActivatedStateScopeMap', - defaultValue: true, - }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts new file mode 100644 index 000000000..47bb8f0f5 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState.ts @@ -0,0 +1,7 @@ +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const clickOutsideListenerIsMouseDownInsideComponentState = + createComponentState({ + key: 'clickOutsideListenerIsMouseDownInsideComponentState', + defaultValue: false, + }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts deleted file mode 100644 index cf4253139..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideStateScopeMap.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; - -export const clickOutsideListenerIsMouseDownInsideStateScopeMap = - createStateScopeMap({ - key: 'clickOutsideListenerIsMouseDownInsideStateScopeMap', - defaultValue: false, - }); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts index 1349627fc..c7739cc95 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/states/lockedListenerIdState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const lockedListenerIdState = atom({ +export const lockedListenerIdState = createState({ key: 'lockedListenerIdState', - default: null, + defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedFamilyState.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedFamilyState.test.tsx deleted file mode 100644 index d670a9554..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedFamilyState.test.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { RecoilRoot, RecoilState } from 'recoil'; -import { undefined } from 'zod'; - -import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState'; -import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey'; -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -const testState = createFamilyStateScopeMap({ - key: 'sampleKey', - defaultValue: 'defaultValue', -}); - -describe('useRecoilScopedFamilyState', () => { - it('Should work as expected', async () => { - const { result, rerender } = renderHook( - ({ - recoilState, - scopeId, - familyKey, - }: { - recoilState: ( - scopedFamilyKey: FamilyStateScopeMapKey, - ) => RecoilState; - scopeId: string; - familyKey?: string; - }) => useRecoilScopedFamilyState(recoilState, scopeId, familyKey), - { - wrapper: RecoilRoot, - initialProps: { - recoilState: testState, - scopeId: 'scopeId', - }, - }, - ); - - expect(result.current).toEqual([undefined, undefined]); - - rerender({ - recoilState: testState, - scopeId: 'scopeId', - familyKey: 'familyKey', - }); - - const [value, setValue] = result.current; - - expect(value).toBe('defaultValue'); - expect(setValue).toBeInstanceOf(Function); - - act(() => { - setValue?.('newValue'); - }); - - expect(result.current[0]).toBe('newValue'); - - rerender({ - recoilState: testState, - scopeId: 'scopeId1', - familyKey: 'familyKey', - }); - - expect(result.current[0]).toBe('defaultValue'); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedState.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedState.test.tsx deleted file mode 100644 index 706e72f90..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedState.test.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { createContext } from 'react'; -import { act, renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot } from 'recoil'; - -import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; - -const testScopedState = atomFamily({ - key: 'testKey', - default: null, -}); - -const mockedContextValue = 'mocked-scope-id'; -const MockedContext = createContext(mockedContextValue); -const nullContext = createContext(null); - -const ERROR_MESSAGE = - 'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.'; - -describe('useRecoilScopedState', () => { - it('Should return the getter and setter for the state and context passed and work properly', async () => { - const { result } = renderHook( - () => useRecoilScopedState(testScopedState, MockedContext), - { - wrapper: ({ children }) => ( - - {children} - - ), - }, - ); - - const [scopedState, setScopedState] = result.current; - - expect(scopedState).toBeNull(); - - await act(async () => { - setScopedState('testValue'); - }); - - const [scopedStateAfterSetter] = result.current; - - expect(scopedStateAfterSetter).toEqual('testValue'); - }); - - it('Should throw an error when the recoilScopeId is not found by the context', () => { - expect(() => { - renderHook(() => useRecoilScopedState(testScopedState, nullContext)); - }).toThrow(ERROR_MESSAGE); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValue.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValue.test.tsx deleted file mode 100644 index 500612163..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValue.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { createContext } from 'react'; -import { renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot } from 'recoil'; - -import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; - -const testScopedState = atomFamily({ - key: 'testKey', - default: null, -}); - -const mockedContextValue = 'mocked-scope-id'; -const MockedContext = createContext(mockedContextValue); -const nullContext = createContext(null); - -const ERROR_MESSAGE = - 'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.'; - -describe('useRecoilScopedValue', () => { - it('Should return the getter and setter for the state and context passed and work properly', async () => { - const { result } = renderHook( - () => useRecoilScopedValue(testScopedState, MockedContext), - { - wrapper: ({ children }) => ( - - {children} - - ), - }, - ); - - const scopedState = result.current; - - expect(scopedState).toBeNull(); - }); - - it('Should throw an error when the recoilScopeId is not found by the context', () => { - expect(() => { - renderHook(() => useRecoilScopedValue(testScopedState, nullContext)); - }).toThrow(ERROR_MESSAGE); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValueV2.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValueV2.test.tsx deleted file mode 100644 index ddd9230c4..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useRecoilScopedValueV2.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot } from 'recoil'; - -import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2'; -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -const scopedAtom = atomFamily({ - key: 'scopedAtomKey', - default: 'initialValue', -}); - -describe('useRecoilScopedValueV2', () => { - const mockedScopeId = 'mocked-scope-id'; - - it('Should return the scoped value using useRecoilScopedValueV2', () => { - const { result } = renderHook( - () => useRecoilScopedValueV2(scopedAtom, mockedScopeId), - { - wrapper: RecoilRoot, - }, - ); - - const scopedValue = result.current; - - expect(scopedValue).toBe('initialValue'); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedFamilyState.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedFamilyState.test.tsx deleted file mode 100644 index f2d1a2592..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedFamilyState.test.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot } from 'recoil'; - -import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState'; -import { useSetRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState'; -import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey'; - -const mockedScopedFamilyState = atomFamily< - string, - FamilyStateScopeMapKey ->({ - key: 'scopedAtomKey', - default: 'initialValue', -}); - -describe('useSetRecoilScopedFamilyState', () => { - const mockedScopeId = 'mocked-scope-id'; - const mockedFamilyKey = 'test-key-value'; - - it('Should return a setter that updates the state value and work properly', async () => { - const useCombinedHooks = () => { - const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState( - mockedScopedFamilyState, - mockedScopeId, - mockedFamilyKey, - ); - - const [mocked] = useRecoilScopedFamilyState( - mockedScopedFamilyState, - mockedScopeId, - mockedFamilyKey, - ); - - return { - setRecoilScopedFamilyState, - scopedFamilyState: mocked, - }; - }; - - const { result } = renderHook(() => useCombinedHooks(), { - wrapper: RecoilRoot, - }); - - expect(result.current.scopedFamilyState).toBe('initialValue'); - expect(result.current.setRecoilScopedFamilyState).toBeInstanceOf(Function); - - await act(async () => { - result.current.setRecoilScopedFamilyState?.('testValue'); - }); - - expect(result.current.scopedFamilyState).toBe('testValue'); - }); - - it('Should return undefined when familyKey is missing', async () => { - const useCombinedHooks = () => { - const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState( - mockedScopedFamilyState, - mockedScopeId, - ); - - const [mocked] = useRecoilScopedFamilyState( - mockedScopedFamilyState, - mockedScopeId, - ); - - return { - setRecoilScopedFamilyState, - scopedFamilyState: mocked, - }; - }; - - const { result } = renderHook(() => useCombinedHooks(), { - wrapper: RecoilRoot, - }); - - expect(result.current.scopedFamilyState).toBeUndefined(); - expect(result.current.setRecoilScopedFamilyState).toBeUndefined(); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedStateV2.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedStateV2.test.tsx deleted file mode 100644 index da1b93ba2..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/__tests__/useSetRecoilScopedStateV2.test.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot } from 'recoil'; - -import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2'; -import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2'; -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -const scopedAtom = atomFamily({ - key: 'scopedAtomKey', - default: 'initialValue', -}); - -describe('useSetRecoilScopedStateV2', () => { - const mockedScopeId = 'mocked-scope-id'; - - it('Should return a setter that updates the state value', async () => { - const useCombinedHooks = () => { - const setRecoilScopedStateV2 = useSetRecoilScopedStateV2( - scopedAtom, - mockedScopeId, - ); - - const recoilScopedStateValue = useRecoilScopedValueV2( - scopedAtom, - mockedScopeId, - ); - - return { - setRecoilScopedStateV2, - recoilScopedStateValue, - }; - }; - - const { result } = renderHook(() => useCombinedHooks(), { - wrapper: RecoilRoot, - }); - - expect(result.current.recoilScopedStateValue).toBe('initialValue'); - expect(result.current.setRecoilScopedStateV2).toBeInstanceOf(Function); - - await act(async () => { - result.current.setRecoilScopedStateV2('testValue'); - }); - - expect(result.current.recoilScopedStateValue).toBe('testValue'); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts deleted file mode 100644 index 457a8fb09..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { RecoilState, SerializableParam, useRecoilState } from 'recoil'; - -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; - -export const useRecoilScopedFamilyState = < - StateType, - FamilyKey extends SerializableParam, ->( - recoilState: ( - scopedFamilyKey: FamilyStateScopeMapKey, - ) => RecoilState, - scopeId: string, - familyKey?: FamilyKey, -) => { - const familyState = useRecoilState( - recoilState({ - scopeId, - familyKey: familyKey || ('' as FamilyKey), - }), - ); - - if (!familyKey) { - return [undefined, undefined]; - } - - return familyState; -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts deleted file mode 100644 index a4c37a620..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedState.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Context, useContext } from 'react'; -import { RecoilState, useRecoilState } from 'recoil'; - -import { RecoilScopeContext } from '../states/RecoilScopeContext'; - -export const useRecoilScopedState = ( - recoilState: (param: string) => RecoilState, - CustomRecoilScopeContext?: Context, -) => { - const recoilScopeId = useContext( - CustomRecoilScopeContext ?? RecoilScopeContext, - ); - - if (!recoilScopeId) - throw new Error( - `Using a scoped atom without a RecoilScope : ${ - recoilState('').key - }, verify that you are using a RecoilScope with a specific context if you intended to do so.`, - ); - - return useRecoilState(recoilState(recoilScopeId)); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts index 389a4aa32..952fbfb0e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts @@ -1,9 +1,9 @@ import { RecoilState, useRecoilState } from 'recoil'; -import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; export const useRecoilScopedStateV2 = ( - recoilState: (scopedKey: StateScopeMapKey) => RecoilState, + recoilState: (scopedKey: ComponentStateKey) => RecoilState, scopeId: string, ) => { return useRecoilState( diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts deleted file mode 100644 index 413b55605..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValue.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Context, useContext } from 'react'; -import { RecoilState, RecoilValueReadOnly, useRecoilValue } from 'recoil'; - -import { RecoilScopeContext } from '../states/RecoilScopeContext'; - -/** - * @deprecated use useRecoilScopedStateV2 instead - */ -export const useRecoilScopedValue = ( - recoilState: (param: string) => RecoilState | RecoilValueReadOnly, - CustomRecoilScopeContext?: Context, -) => { - const recoilScopeId = useContext( - CustomRecoilScopeContext ?? RecoilScopeContext, - ); - - if (!recoilScopeId) - throw new Error( - `Using a scoped atom without a RecoilScope : ${ - recoilState('').key - }, verify that you are using a RecoilScope with a specific context if you intended to do so.`, - ); - - return useRecoilValue(recoilState(recoilScopeId)); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts deleted file mode 100644 index f3f90d1e8..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { RecoilState, useRecoilValue } from 'recoil'; - -import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey'; - -export const useRecoilScopedValueV2 = ( - recoilState: (scopedKey: StateScopeMapKey) => RecoilState, - scopeId: string, -) => { - return useRecoilValue( - recoilState({ - scopeId, - }), - ); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts deleted file mode 100644 index e74d1f171..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { RecoilState, SerializableParam, useSetRecoilState } from 'recoil'; - -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; - -export const useSetRecoilScopedFamilyState = < - StateType, - FamilyKey extends SerializableParam, ->( - recoilState: ( - scopedFamilyKey: FamilyStateScopeMapKey, - ) => RecoilState, - scopeId: string, - familyKey?: FamilyKey, -) => { - const familyState = useSetRecoilState( - recoilState({ - scopeId, - familyKey: familyKey || ('' as FamilyKey), - }), - ); - - if (!familyKey) { - return; - } - - return familyState; -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts deleted file mode 100644 index 35396eebc..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { RecoilState, useSetRecoilState } from 'recoil'; - -import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey'; - -export const useSetRecoilScopedStateV2 = ( - recoilState: (scopedKey: StateScopeMapKey) => RecoilState, - scopeId: string, -) => { - return useSetRecoilState( - recoilState({ - scopeId, - }), - ); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopeInternalContextOrThrow.test.tsx b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopeInternalContextOrThrow.test.tsx deleted file mode 100644 index c83c7d246..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopeInternalContextOrThrow.test.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { createContext } from 'react'; -import { renderHook } from '@testing-library/react'; - -import { useScopeInternalContextOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow'; -import { ScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopeInternalContext'; - -const mockedContextValue = 'mocked-scope-id'; -const MockedContext = createContext(mockedContextValue); -const nullContext = createContext(null); - -const ERROR_MESSAGE = - 'Using a scope context without a ScopeInternalContext.Provider wrapper for context'; - -const Wrapper = ({ children }: { children: React.ReactNode }) => ( - - {children} - -); - -describe('useScopeInternalContextOrThrow', () => { - it('should work as expected', () => { - const { result } = renderHook( - () => - useScopeInternalContextOrThrow( - MockedContext as ScopeInternalContext<{ scopeId: string }>, - ), - { - wrapper: Wrapper, - }, - ); - - expect(result.current).toBe(mockedContextValue); - }); - - it('should throw an error when used outside of the specified context', () => { - expect(() => { - renderHook(() => - useScopeInternalContextOrThrow( - nullContext as ScopeInternalContext<{ scopeId: string }>, - ), - ); - }).toThrow(ERROR_MESSAGE); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopedState.test.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopedState.test.ts deleted file mode 100644 index 1e5374797..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useScopedState.test.ts +++ /dev/null @@ -1,192 +0,0 @@ -import { expect } from '@storybook/test'; -import { act, renderHook } from '@testing-library/react'; -import { - atomFamily, - RecoilRoot, - selector, - useRecoilCallback, - useRecoilState, - useRecoilValue, -} from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; -import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector'; -import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector'; -import { getSelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector'; - -import { useScopedState } from '../useScopedState'; - -const scopeId = 'scopeId'; - -// scoped state -const defaultScopedState = 'defaultString'; -const scopedState = atomFamily({ - key: 'ScopedStateKey', - default: defaultScopedState, -}); -const scopedStateScopeInjector = getScopeInjector(scopedState); - -// scoped selector -const anotherScopedState = atomFamily({ - key: 'ScopedStateKey', - default: [1, 2, 3, 4, 5], -}); -const scopedSelector = ({ scopeId }: StateScopeMapKey) => - selector({ - key: 'FilteredState', - get: ({ get }) => { - const scopedStateValue = get(anotherScopedState({ scopeId })); - return scopedStateValue.filter((value) => value % 2 === 0); - }, - }); -const selectorScopeInjector = getSelectorScopeInjector(scopedSelector); - -// family state -const defaultValue = 'defaultString'; -const scopedFamilyState = createFamilyStateScopeMap({ - key: 'FamilyStateKey', - defaultValue, -}); -const familyScopeInjector = getFamilyScopeInjector(scopedFamilyState); - -describe('useScopedState', () => { - it('should get scoped state', () => { - const { - result: { - current: { getScopedState }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const scopedState = getScopedState(scopedStateScopeInjector); - - const { result } = renderHook( - () => { - const [scoped, setScoped] = useRecoilState(scopedState); - return { scoped, setScoped }; - }, - { - wrapper: RecoilRoot, - }, - ); - - expect(result.current.scoped).toBe(defaultScopedState); - - const newValue = 'anotherValue'; - - act(() => { - result.current.setScoped(newValue); - }); - - expect(result.current.scoped).toBe(newValue); - }); - - it('should get scoped snapshot value', () => { - const { - result: { - current: { getScopedSnapshotValue }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const { result } = renderHook( - () => - useRecoilCallback( - ({ snapshot }) => - () => - getScopedSnapshotValue(snapshot, scopedStateScopeInjector), - )(), - { wrapper: RecoilRoot }, - ); - - expect(result.current).toBe(defaultScopedState); - }); - - it('should get scoped selector', () => { - const { - result: { - current: { getScopedSelector }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const recoilValue = getScopedSelector(selectorScopeInjector); - - const { result } = renderHook(() => useRecoilValue(recoilValue), { - wrapper: RecoilRoot, - }); - - expect(result.current).toEqual([2, 4]); - }); - - it('should get scoped selector snapshot value', () => { - const { - result: { - current: { getScopedSelectorSnapshotValue }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const { result } = renderHook( - () => - useRecoilCallback( - ({ snapshot }) => - () => - getScopedSelectorSnapshotValue(snapshot, selectorScopeInjector), - )(), - { wrapper: RecoilRoot }, - ); - - expect(result.current).toEqual([2, 4]); - }); - - it('should get scoped family state', () => { - const { - result: { - current: { getScopedFamilyState }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const scopedFamilyState = getScopedFamilyState(familyScopeInjector); - - const { result } = renderHook( - () => { - const [familyState, setFamilyState] = useRecoilState( - scopedFamilyState('familyKey'), - ); - - return { familyState, setFamilyState }; - }, - { - wrapper: RecoilRoot, - }, - ); - - expect(result.current.familyState).toBe('defaultString'); - - const newValue = 'newValue'; - - act(() => { - result.current.setFamilyState(newValue); - }); - - expect(result.current.familyState).toBe(newValue); - }); - - it('should get scoped family snapshot value', () => { - const { - result: { - current: { getScopedFamilySnapshotValue }, - }, - } = renderHook(() => useScopedState(scopeId)); - - const { result } = renderHook( - () => - useRecoilCallback( - ({ snapshot }) => - () => - getScopedFamilySnapshotValue(snapshot, familyScopeInjector), - )(), - { wrapper: RecoilRoot }, - ); - - expect(result.current('sampleKey')).toBe('defaultString'); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts deleted file mode 100644 index 4c199e8d9..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useContext } from 'react'; - -import { isNonNullable } from '~/utils/isNonNullable'; - -import { ScopeInternalContext } from '../types/ScopeInternalContext'; - -export const useScopeInternalContextOrThrow = ( - Context: ScopeInternalContext, -) => { - const context = useContext(Context); - - if (!isNonNullable(context)) { - throw new Error( - `Using a scope context without a ScopeInternalContext.Provider wrapper for context : ${Context.displayName}.`, - ); - } - - return context; -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts deleted file mode 100644 index a1a82a184..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { SerializableParam, Snapshot } from 'recoil'; - -import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector'; -import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector'; -import { SelectorScopeInjector } from '@/ui/utilities/recoil-scope/utils/getSelectorScopeInjector'; -import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; - -export const useScopedState = (scopeId: string) => { - const getScopedState = (scopeInjector: ScopeInjector) => - scopeInjector(scopeId); - - const getScopedSelector = ( - scopeInjector: SelectorScopeInjector, - ) => scopeInjector(scopeId); - - const getScopedFamilyState = - ( - familyScopeInjector: FamilyScopeInjector, - ) => - (familyKey: FamilyKey) => - familyScopeInjector(scopeId, familyKey); - - const getScopedSnapshotValue = ( - snapshot: Snapshot, - scopeInjector: ScopeInjector, - ) => getSnapshotValue(snapshot, scopeInjector(scopeId)); - - const getScopedSelectorSnapshotValue = ( - snapshot: Snapshot, - scopeInjector: SelectorScopeInjector, - ) => getSnapshotValue(snapshot, scopeInjector(scopeId)); - - const getScopedFamilySnapshotValue = - ( - snapshot: Snapshot, - familyScopeInjector: FamilyScopeInjector, - ) => - (familyKey: FamilyKey) => - getSnapshotValue(snapshot, familyScopeInjector(scopeId, familyKey)); - - return { - scopeId, - getScopedState, - getScopedSelector, - getScopedFamilyState, - getScopedSnapshotValue, - getScopedSelectorSnapshotValue, - getScopedFamilySnapshotValue, - }; -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts deleted file mode 100644 index 3915d9478..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type StateScopeMapKey = { - scopeId: string; -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts index 8789a1572..78911a1ab 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext.ts @@ -1,10 +1,10 @@ import { Context, createContext } from 'react'; -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type ScopeInternalContext = Context; +type ScopeInternalContext = Context; -export const createScopeInternalContext = ( +export const createScopeInternalContext = ( initialValue?: T, ) => { return createContext( diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts index 698035600..8e92014b5 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts @@ -1,7 +1,7 @@ import { RecoilValueReadOnly } from 'recoil'; -import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; export type RecoilScopedSelector = ( - scopedKey: StateScopeMapKey, + scopedKey: ComponentStateKey, ) => RecoilValueReadOnly; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts index ace7ab39e..beb36d9e9 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts @@ -1,7 +1,7 @@ import { RecoilState } from 'recoil'; -import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; export type RecoilScopedState = ( - scopedKey: StateScopeMapKey, + scopedKey: ComponentStateKey, ) => RecoilState; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getFamilyScopeInjector.test.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getFamilyScopeInjector.test.ts deleted file mode 100644 index 559221bcb..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getFamilyScopeInjector.test.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { RecoilRoot, useRecoilState } from 'recoil'; - -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; - -import { getFamilyScopeInjector } from '../getFamilyScopeInjector'; - -const defaultValue = 'defaultString'; - -const testState = createFamilyStateScopeMap({ - key: 'familyStateKey', - defaultValue, -}); - -describe('getFamilyScopeInjector', () => { - it('should return a scoped family state', () => { - const familyScopeInjector = getFamilyScopeInjector(testState); - const familyState = familyScopeInjector('scopeId', 'familyKey'); - - const { result } = renderHook( - () => { - const [family, setFamily] = useRecoilState(familyState); - return { family, setFamily }; - }, - { - wrapper: RecoilRoot, - }, - ); - - expect(result.current.family).toBe(defaultValue); - - const newValue = 'anotherValue'; - - act(() => { - result.current.setFamily(newValue); - }); - - expect(result.current.family).toBe(newValue); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getScopeInjector.test.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getScopeInjector.test.ts deleted file mode 100644 index ef8ab5993..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getScopeInjector.test.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { act, renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot, useRecoilState } from 'recoil'; - -import { getScopeInjector } from '../getScopeInjector'; - -const defaultValue = 'defaultString'; - -const scopedState = atomFamily< - string, - { - scopeId: string; - } ->({ - key: 'myStateKey', - default: defaultValue, -}); - -describe('getScopeInjector', () => { - it('should return the scoped state for the given scopeId', () => { - const scopeInjector = getScopeInjector(scopedState); - - const scopeId = 'scopeId'; - const recoilState = scopeInjector(scopeId); - - const { result } = renderHook( - () => { - const [recoil, setRecoil] = useRecoilState(recoilState); - return { recoil, setRecoil }; - }, - { - wrapper: RecoilRoot, - }, - ); - - expect(result.current.recoil).toBe(defaultValue); - - const newValue = 'anotherValue'; - - act(() => { - result.current.setRecoil(newValue); - }); - - expect(result.current.recoil).toBe(newValue); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getSelectorScopeInjector.test.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getSelectorScopeInjector.test.ts deleted file mode 100644 index 0f3e6d0bd..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/__tests__/getSelectorScopeInjector.test.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { atomFamily, RecoilRoot, selector, useRecoilValue } from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -import { getSelectorScopeInjector } from '../getSelectorScopeInjector'; - -const scopedState = atomFamily< - number[], - { - scopeId: string; - } ->({ - key: 'myStateKey', - default: [1, 2, 3, 4, 5], -}); - -const scopedSelector = ({ scopeId }: StateScopeMapKey) => - selector({ - key: 'FilteredState', - get: ({ get }) => { - const scopedStateValue = get(scopedState({ scopeId })); - return scopedStateValue.filter((value) => value % 2 === 0); - }, - }); - -describe('getSelectorScopeInjector', () => { - it('should return a valid SelectorScopeInjector', () => { - const selectorScopeInjector = getSelectorScopeInjector(scopedSelector); - const recoilValue = selectorScopeInjector('scopeId'); - - const { result } = renderHook(() => useRecoilValue(recoilValue), { - wrapper: RecoilRoot, - }); - - expect(result.current).toEqual([2, 4]); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap.ts deleted file mode 100644 index cdfbc6a10..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - DefaultValue, - GetCallback, - GetRecoilValue, - Loadable, - RecoilValue, - ResetRecoilState, - selectorFamily, - SerializableParam, - SetRecoilState, - WrappedValue, -} from 'recoil'; - -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; - -type SelectorGetter = ( - param: P, -) => (opts: { - get: GetRecoilValue; - getCallback: GetCallback; -}) => Promise | RecoilValue | Loadable | WrappedValue | T; - -type SelectorSetter = ( - param: P, -) => ( - opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState }, - newValue: T | DefaultValue, -) => void; - -export const createFamilySelectorScopeMap = < - ValueType, - FamilyKey extends SerializableParam, ->({ - key, - get, - set, -}: { - key: string; - get: SelectorGetter>; - set: SelectorSetter>; -}) => { - return selectorFamily>({ - key, - get, - set, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts deleted file mode 100644 index 8b537fdf9..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - GetCallback, - GetRecoilValue, - Loadable, - RecoilValue, - selectorFamily, - WrappedValue, -} from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -type SelectorGetter = ( - param: P, -) => (opts: { - get: GetRecoilValue; - getCallback: GetCallback; -}) => Promise | RecoilValue | Loadable | WrappedValue | T; - -export const createSelectorReadOnlyScopeMap = ({ - key, - get, -}: { - key: string; - get: SelectorGetter; -}) => { - return selectorFamily({ - key, - get, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts deleted file mode 100644 index 81e34b8af..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createSelectorScopeMap.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { - DefaultValue, - GetCallback, - GetRecoilValue, - Loadable, - RecoilValue, - ResetRecoilState, - selectorFamily, - SetRecoilState, - WrappedValue, -} from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -type SelectorGetter = ( - param: P, -) => (opts: { - get: GetRecoilValue; - getCallback: GetCallback; -}) => Promise | RecoilValue | Loadable | WrappedValue | T; - -type SelectorSetter = ( - param: P, -) => ( - opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState }, - newValue: T | DefaultValue, -) => void; - -export const createSelectorScopeMap = ({ - key, - get, - set, -}: { - key: string; - get: SelectorGetter; - set: SelectorSetter; -}) => { - return selectorFamily({ - key, - get, - set, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createStateScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createStateScopeMap.ts deleted file mode 100644 index 58efdf2ec..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createStateScopeMap.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -export const createStateScopeMap = ({ - key, - defaultValue, -}: { - key: string; - defaultValue: ValueType; -}) => { - return atomFamily({ - key, - default: defaultValue, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts deleted file mode 100644 index ffde95aa1..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { RecoilState, SerializableParam } from 'recoil'; - -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; - -export type FamilyScopeInjector< - StateType, - FamilyKey extends SerializableParam, -> = (scopeId: string, familyKey: FamilyKey) => RecoilState; - -export const getFamilyScopeInjector = < - StateType, - FamilyKey extends SerializableParam, ->( - scopedFamilyState: ( - scopedFamilyKey: FamilyStateScopeMapKey, - ) => RecoilState, -) => { - return (scopeId: string, familyKey: FamilyKey) => - scopedFamilyState({ - scopeId, - familyKey: familyKey || ('' as FamilyKey), - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyState.ts deleted file mode 100644 index 932920bab..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyState.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { RecoilState, SerializableParam } from 'recoil'; - -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; - -export const getFamilyState = ( - familyStateScopeMap: ( - scopedFamilyKey: FamilyStateScopeMapKey, - ) => RecoilState, - scopeId: string, -) => { - return (familyKey: FamilyKey) => - familyStateScopeMap({ - scopeId, - familyKey: familyKey || ('' as FamilyKey), - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts deleted file mode 100644 index 453372700..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { RecoilState } from 'recoil'; - -import { RecoilScopedState } from '../types/RecoilScopedState'; - -export type ScopeInjector = ( - scopeId: string, -) => RecoilState; - -export const getScopeInjector = ( - scopedState: RecoilScopedState, -): ScopeInjector => { - return (scopeId: string) => - scopedState({ - scopeId, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts index 771d61a1c..89dad50b9 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts +++ b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts @@ -1,13 +1,13 @@ import { RecoilState, SerializableParam } from 'recoil'; -import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey'; +import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey'; export const getScopedFamilyStateDeprecated = < StateType, FamilyKey extends SerializableParam, >( recoilState: ( - scopedFamilyKey: FamilyStateScopeMapKey, + scopedFamilyKey: ComponentFamilyStateKey, ) => RecoilState, scopeId: string, familyKey: FamilyKey, diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts deleted file mode 100644 index e81a0c600..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelector.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { RecoilState } from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -export const getSelector = ( - stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState, - scopeId: string, -) => { - return () => stateScopeMap({ scopeId }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts deleted file mode 100644 index ff40618a3..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorReadOnly.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { RecoilValueReadOnly } from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -export const getSelectorReadOnly = ( - stateScopeMap: ( - stateScopeMapKey: StateScopeMapKey, - ) => RecoilValueReadOnly, - scopeId: string, -) => { - return () => stateScopeMap({ scopeId }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts deleted file mode 100644 index ffd4e4986..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSelectorScopeInjector.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { RecoilValueReadOnly } from 'recoil'; - -import { RecoilScopedSelector } from '@/ui/utilities/recoil-scope/types/RecoilScopedSelector'; - -export type SelectorScopeInjector = ( - scopeId: string, -) => RecoilValueReadOnly; - -export const getSelectorScopeInjector = ( - scopedSelector: RecoilScopedSelector, -): SelectorScopeInjector => { - return (scopeId: string) => - scopedSelector({ - scopeId, - }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts deleted file mode 100644 index 556edb66c..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getState.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { RecoilState } from 'recoil'; - -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; - -export const getState = ( - stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState, - scopeId: string, -) => { - return () => stateScopeMap({ scopeId }); -}; diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx index 8ac2c33c3..1829a0142 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx @@ -24,7 +24,7 @@ describe('useListenScroll', () => { const { result } = renderHook( () => { useListenScroll({ scrollableRef: containerRef }); - const isScrolling = useRecoilValue(isScrollingState); + const isScrolling = useRecoilValue(isScrollingState()); return { isScrolling }; }, diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts index c6039fc2a..825cb82c5 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts @@ -13,7 +13,7 @@ export const useListenScroll = ({ scrollableRef: React.RefObject; }) => { const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => { - const isScrolling = snapshot.getLoadable(isScrollingState).getValue(); + const isScrolling = snapshot.getLoadable(isScrollingState()).getValue(); if (!isScrolling) { scrollableRef.current?.classList.remove('scrolling'); @@ -21,17 +21,17 @@ export const useListenScroll = ({ }); const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => { - set(isScrollingState, true); + set(isScrollingState(), true); scrollableRef.current?.classList.add('scrolling'); const target = event.target as HTMLElement; - set(scrollTopState, target.scrollTop); - set(scrollLeftState, target.scrollLeft); + set(scrollTopState(), target.scrollTop); + set(scrollLeftState(), target.scrollLeft); }); const handleScrollEnd = useRecoilCallback(({ set }) => () => { - set(isScrollingState, false); + set(isScrollingState(), false); debounce(hideScrollBarsCallback, 1000)(); }); diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts index 5dad01cf4..08ba13a85 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const isScrollingState = atom({ +export const isScrollingState = createState({ key: 'scroll/isScollingState', - default: false, + defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts index 97ab75dff..7335341d5 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const scrollLeftState = atom({ +export const scrollLeftState = createState({ key: 'scroll/scrollLeftState', - default: 0, + defaultValue: 0, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts index cc8ceef32..091b369b0 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopState.ts @@ -1,6 +1,6 @@ -import { atom } from 'recoil'; +import { createState } from '@/ui/utilities/state/utils/createState'; -export const scrollTopState = atom({ +export const scrollTopState = createState({ key: 'scroll/scrollTopState', - default: 0, + defaultValue: 0, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateKey.ts similarity index 54% rename from packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts rename to packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateKey.ts index 96733c979..e5b9fa304 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentFamilyStateKey.ts @@ -1,6 +1,6 @@ import { SerializableParam } from 'recoil'; -export type FamilyStateScopeMapKey = { +export type ComponentFamilyStateKey = { scopeId: string; familyKey: FamilyKey; }; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts new file mode 100644 index 000000000..fb69c4c12 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/types/ComponentStateKey.ts @@ -0,0 +1,3 @@ +export type ComponentStateKey = { + scopeId: string; +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelector.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelector.ts new file mode 100644 index 000000000..af2c6c427 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelector.ts @@ -0,0 +1,24 @@ +import { selectorFamily, SerializableParam } from 'recoil'; + +import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey'; +import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; +import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter'; + +export const createComponentFamilySelector = < + ValueType, + FamilyKey extends SerializableParam, +>({ + key, + get, + set, +}: { + key: string; + get: SelectorGetter>; + set: SelectorSetter>; +}) => { + return selectorFamily>({ + key, + get, + set, + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyState.ts similarity index 51% rename from packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap.ts rename to packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyState.ts index 0c44711cc..fea9894e1 100644 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyState.ts @@ -1,8 +1,8 @@ import { atomFamily, SerializableParam } from 'recoil'; -import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey'; +import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey'; -export const createFamilyStateScopeMap = < +export const createComponentFamilyState = < ValueType, FamilyKey extends SerializableParam, >({ @@ -12,7 +12,7 @@ export const createFamilyStateScopeMap = < key: string; defaultValue: ValueType; }) => { - return atomFamily>({ + return atomFamily>({ key, default: defaultValue, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts new file mode 100644 index 000000000..3369abc77 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentReadOnlySelector.ts @@ -0,0 +1,17 @@ +import { selectorFamily } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; +import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; + +export const createComponentReadOnlySelector = ({ + key, + get, +}: { + key: string; + get: SelectorGetter; +}) => { + return selectorFamily({ + key, + get, + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts new file mode 100644 index 000000000..c4dfc647b --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelector.ts @@ -0,0 +1,21 @@ +import { selectorFamily } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; +import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; +import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter'; + +export const createComponentSelector = ({ + key, + get, + set, +}: { + key: string; + get: SelectorGetter; + set: SelectorSetter; +}) => { + return selectorFamily({ + key, + get, + set, + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts new file mode 100644 index 000000000..2e2cd8ada --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentState.ts @@ -0,0 +1,16 @@ +import { atomFamily } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; + +export const createComponentState = ({ + key, + defaultValue, +}: { + key: string; + defaultValue: ValueType; +}) => { + return atomFamily({ + key, + default: defaultValue, + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentFamilyState.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentFamilyState.ts new file mode 100644 index 000000000..85ada7fd6 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentFamilyState.ts @@ -0,0 +1,19 @@ +import { RecoilState, SerializableParam } from 'recoil'; + +import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey'; + +export const extractComponentFamilyState = < + StateType, + FamilyKey extends SerializableParam, +>( + componentfamilyState: ( + componentFamilyStateKey: ComponentFamilyStateKey, + ) => RecoilState, + scopeId: string, +) => { + return (familyKey: FamilyKey) => + componentfamilyState({ + scopeId, + familyKey: familyKey || ('' as FamilyKey), + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts new file mode 100644 index 000000000..98489a266 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector.ts @@ -0,0 +1,12 @@ +import { RecoilValueReadOnly } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; + +export const extractComponentReadOnlySelector = ( + componentSelector: ( + componentStateKey: ComponentStateKey, + ) => RecoilValueReadOnly, + scopeId: string, +) => { + return () => componentSelector({ scopeId }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts new file mode 100644 index 000000000..60f6fa75d --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentSelector.ts @@ -0,0 +1,12 @@ +import { RecoilState } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; + +export const extractComponentSelector = ( + componentSelector: ( + componentStateKey: ComponentStateKey, + ) => RecoilState, + scopeId: string, +) => { + return () => componentSelector({ scopeId }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts new file mode 100644 index 000000000..c9b6478c2 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts @@ -0,0 +1,12 @@ +import { RecoilState } from 'recoil'; + +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; + +export const extractComponentState = ( + componentState: ( + componentStateKey: ComponentStateKey, + ) => RecoilState, + scopeId: string, +) => { + return () => componentState({ scopeId }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorGetter.ts b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorGetter.ts new file mode 100644 index 000000000..330fa568d --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorGetter.ts @@ -0,0 +1,14 @@ +import { + GetCallback, + GetRecoilValue, + Loadable, + RecoilValue, + WrappedValue, +} from 'recoil'; + +export type SelectorGetter = ( + param: P, +) => (opts: { + get: GetRecoilValue; + getCallback: GetCallback; +}) => Promise | RecoilValue | Loadable | WrappedValue | T; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorSetter.ts b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorSetter.ts new file mode 100644 index 000000000..d21af0380 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/types/SelectorSetter.ts @@ -0,0 +1,13 @@ +import { + DefaultValue, + GetRecoilValue, + ResetRecoilState, + SetRecoilState, +} from 'recoil'; + +export type SelectorSetter = ( + param: P, +) => ( + opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState }, + newValue: T | DefaultValue, +) => void; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/utils/createFamilyState.ts b/packages/twenty-front/src/modules/ui/utilities/state/utils/createFamilyState.ts new file mode 100644 index 000000000..8fc8a5d94 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/createFamilyState.ts @@ -0,0 +1,17 @@ +import { atomFamily, SerializableParam } from 'recoil'; + +export const createFamilyState = < + ValueType, + FamilyKey extends SerializableParam, +>({ + key, + defaultValue, +}: { + key: string; + defaultValue: ValueType; +}) => { + return atomFamily({ + key, + default: defaultValue, + }); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts b/packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts new file mode 100644 index 000000000..b2fdfcdd0 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts @@ -0,0 +1,18 @@ +import { atom, AtomEffect } from 'recoil'; + +export const createState = ({ + key, + defaultValue, + effects, +}: { + key: string; + defaultValue: ValueType; + effects?: ReadonlyArray>; +}) => { + const recoilState = atom({ + key, + default: defaultValue, + effects, + }); + return () => recoilState; +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/utils/getSnapshotValue.ts b/packages/twenty-front/src/modules/ui/utilities/state/utils/getSnapshotValue.ts new file mode 100644 index 000000000..711d21a4a --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/getSnapshotValue.ts @@ -0,0 +1,8 @@ +import { RecoilState, RecoilValueReadOnly, Snapshot } from 'recoil'; + +export const getSnapshotValue = ( + snapshot: Snapshot, + state: RecoilState | RecoilValueReadOnly, +) => { + return snapshot.getLoadable(state).getValue(); +}; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/utils/guardRecoilDefaultValue.ts b/packages/twenty-front/src/modules/ui/utilities/state/utils/guardRecoilDefaultValue.ts new file mode 100644 index 000000000..843496011 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/state/utils/guardRecoilDefaultValue.ts @@ -0,0 +1,8 @@ +import { DefaultValue } from 'recoil'; + +export const guardRecoilDefaultValue = ( + candidate: any, +): candidate is DefaultValue => { + if (candidate instanceof DefaultValue) return true; + return false; +}; diff --git a/packages/twenty-front/src/modules/users/components/UserProvider.tsx b/packages/twenty-front/src/modules/users/components/UserProvider.tsx index fe73117ad..98ecb8704 100644 --- a/packages/twenty-front/src/modules/users/components/UserProvider.tsx +++ b/packages/twenty-front/src/modules/users/components/UserProvider.tsx @@ -12,11 +12,11 @@ import { isNonNullable } from '~/utils/isNonNullable'; export const UserProvider = ({ children }: React.PropsWithChildren) => { const [isLoading, setIsLoading] = useState(true); - const setCurrentUser = useSetRecoilState(currentUserState); - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); + const setCurrentUser = useSetRecoilState(currentUserState()); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const { loading: queryLoading, data: queryData } = useQuery(GET_CURRENT_USER); diff --git a/packages/twenty-front/src/modules/views/scopes/scope-internal-context/ViewScopeInternalContext.ts b/packages/twenty-front/src/modules/views/scopes/scope-internal-context/ViewScopeInternalContext.ts index 39dcf9684..d9affe26c 100644 --- a/packages/twenty-front/src/modules/views/scopes/scope-internal-context/ViewScopeInternalContext.ts +++ b/packages/twenty-front/src/modules/views/scopes/scope-internal-context/ViewScopeInternalContext.ts @@ -1,7 +1,7 @@ -import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey'; import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext'; +import { ComponentStateKey } from '@/ui/utilities/state/component-state/types/ComponentStateKey'; -type ViewScopeInternalContextProps = StateScopeMapKey; +type ViewScopeInternalContextProps = ComponentStateKey; export const ViewScopeInternalContext = createScopeInternalContext(); diff --git a/packages/twenty-front/src/modules/views/states/availableFieldDefinitionsScopedState.ts b/packages/twenty-front/src/modules/views/states/availableFieldDefinitionsScopedState.ts index cf7744d4f..39e08739f 100644 --- a/packages/twenty-front/src/modules/views/states/availableFieldDefinitionsScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/availableFieldDefinitionsScopedState.ts @@ -1,8 +1,8 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const availableFieldDefinitionsScopedState = createStateScopeMap< +export const availableFieldDefinitionsScopedState = createComponentState< ColumnDefinition[] >({ key: 'availableFieldDefinitionsScopedState', diff --git a/packages/twenty-front/src/modules/views/states/availableFilterDefinitionsScopedState.ts b/packages/twenty-front/src/modules/views/states/availableFilterDefinitionsScopedState.ts index 4ed3c9ce7..8433868e1 100644 --- a/packages/twenty-front/src/modules/views/states/availableFilterDefinitionsScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/availableFilterDefinitionsScopedState.ts @@ -1,7 +1,7 @@ import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const availableFilterDefinitionsScopedState = createStateScopeMap< +export const availableFilterDefinitionsScopedState = createComponentState< FilterDefinition[] >({ key: 'availableFilterDefinitionsScopedState', diff --git a/packages/twenty-front/src/modules/views/states/availableSortDefinitionsScopedState.ts b/packages/twenty-front/src/modules/views/states/availableSortDefinitionsScopedState.ts index 43912ec24..ad93c3092 100644 --- a/packages/twenty-front/src/modules/views/states/availableSortDefinitionsScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/availableSortDefinitionsScopedState.ts @@ -1,7 +1,7 @@ import { SortDefinition } from '@/object-record/object-sort-dropdown/types/SortDefinition'; -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const availableSortDefinitionsScopedState = createStateScopeMap< +export const availableSortDefinitionsScopedState = createComponentState< SortDefinition[] >({ key: 'availableSortDefinitionsScopedState', diff --git a/packages/twenty-front/src/modules/views/states/currentViewFieldsScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/currentViewFieldsScopedFamilyState.ts index 4c071e69b..2e73a4f2a 100644 --- a/packages/twenty-front/src/modules/views/states/currentViewFieldsScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/currentViewFieldsScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewField } from '../types/ViewField'; -export const currentViewFieldsScopedFamilyState = createFamilyStateScopeMap< +export const currentViewFieldsScopedFamilyState = createComponentFamilyState< ViewField[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/currentViewFiltersScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/currentViewFiltersScopedFamilyState.ts index fa807a56d..8365c3a02 100644 --- a/packages/twenty-front/src/modules/views/states/currentViewFiltersScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/currentViewFiltersScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewFilter } from '../types/ViewFilter'; -export const currentViewFiltersScopedFamilyState = createFamilyStateScopeMap< +export const currentViewFiltersScopedFamilyState = createComponentFamilyState< ViewFilter[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/currentViewIdScopedState.ts b/packages/twenty-front/src/modules/views/states/currentViewIdScopedState.ts index 98a46cbbd..806a02384 100644 --- a/packages/twenty-front/src/modules/views/states/currentViewIdScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/currentViewIdScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const currentViewIdScopedState = createStateScopeMap( - { - key: 'currentViewIdScopedState', - defaultValue: undefined, - }, -); +export const currentViewIdScopedState = createComponentState< + string | undefined +>({ + key: 'currentViewIdScopedState', + defaultValue: undefined, +}); diff --git a/packages/twenty-front/src/modules/views/states/currentViewSortsScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/currentViewSortsScopedFamilyState.ts index f12bd2626..bb209e6d0 100644 --- a/packages/twenty-front/src/modules/views/states/currentViewSortsScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/currentViewSortsScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewSort } from '../types/ViewSort'; -export const currentViewSortsScopedFamilyState = createFamilyStateScopeMap< +export const currentViewSortsScopedFamilyState = createComponentFamilyState< ViewSort[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/entityCountInCurrentViewScopedState.ts b/packages/twenty-front/src/modules/views/states/entityCountInCurrentViewScopedState.ts index 6bea66a6d..e78260b1e 100644 --- a/packages/twenty-front/src/modules/views/states/entityCountInCurrentViewScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/entityCountInCurrentViewScopedState.ts @@ -1,6 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const entityCountInCurrentViewScopedState = createStateScopeMap({ - key: 'entityCountInCurrentViewScopedState', - defaultValue: 0, -}); +export const entityCountInCurrentViewScopedState = createComponentState( + { + key: 'entityCountInCurrentViewScopedState', + defaultValue: 0, + }, +); diff --git a/packages/twenty-front/src/modules/views/states/isPersistingViewScopedState.ts b/packages/twenty-front/src/modules/views/states/isPersistingViewScopedState.ts index 24b11da0c..ad648dc44 100644 --- a/packages/twenty-front/src/modules/views/states/isPersistingViewScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/isPersistingViewScopedState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const isPersistingViewScopedState = createStateScopeMap({ +export const isPersistingViewScopedState = createComponentState({ key: 'isPersistingViewScopedState', defaultValue: false, }); diff --git a/packages/twenty-front/src/modules/views/states/isViewBarExpandedScopedState.ts b/packages/twenty-front/src/modules/views/states/isViewBarExpandedScopedState.ts index acd1a312e..c809b4087 100644 --- a/packages/twenty-front/src/modules/views/states/isViewBarExpandedScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/isViewBarExpandedScopedState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const isViewBarExpandedScopedState = createStateScopeMap({ +export const isViewBarExpandedScopedState = createComponentState({ key: 'isViewBarExpandedScopedState', defaultValue: true, }); diff --git a/packages/twenty-front/src/modules/views/states/noneScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/noneScopedFamilyState.ts index 0c318836d..8e8f45838 100644 --- a/packages/twenty-front/src/modules/views/states/noneScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/noneScopedFamilyState.ts @@ -1,6 +1,6 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; -export const noneScopedFamilyState = createFamilyStateScopeMap({ +export const noneScopedFamilyState = createComponentFamilyState({ key: 'noneScopedFamilyState', defaultValue: null, }); diff --git a/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts b/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts index c1e18cbaa..267682f96 100644 --- a/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts +++ b/packages/twenty-front/src/modules/views/states/onViewCompactModeChangeScopeState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const onViewCompactModeChangeScopeState = createStateScopeMap< +export const onViewCompactModeChangeScopeState = createComponentState< ((isCompactModeActive: boolean) => void | Promise) | undefined >({ key: 'onViewCompactModeChangeScopeState', diff --git a/packages/twenty-front/src/modules/views/states/onViewFieldsChangeScopedState.ts b/packages/twenty-front/src/modules/views/states/onViewFieldsChangeScopedState.ts index baed107d6..e7e002f35 100644 --- a/packages/twenty-front/src/modules/views/states/onViewFieldsChangeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/onViewFieldsChangeScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewField } from '../types/ViewField'; -export const onViewFieldsChangeScopedState = createStateScopeMap< +export const onViewFieldsChangeScopedState = createComponentState< ((fields: ViewField[]) => void | Promise) | undefined >({ key: 'onViewFieldsChangeScopedState', diff --git a/packages/twenty-front/src/modules/views/states/onViewFiltersChangeScopedState.ts b/packages/twenty-front/src/modules/views/states/onViewFiltersChangeScopedState.ts index a2abce59f..2e16b7ab4 100644 --- a/packages/twenty-front/src/modules/views/states/onViewFiltersChangeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/onViewFiltersChangeScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewFilter } from '@/views/types/ViewFilter'; -export const onViewFiltersChangeScopedState = createStateScopeMap< +export const onViewFiltersChangeScopedState = createComponentState< ((filters: ViewFilter[]) => void | Promise) | undefined >({ key: 'onViewFiltersChangeScopedState', diff --git a/packages/twenty-front/src/modules/views/states/onViewSortsChangeScopedState.ts b/packages/twenty-front/src/modules/views/states/onViewSortsChangeScopedState.ts index d72a0dfa9..551c165de 100644 --- a/packages/twenty-front/src/modules/views/states/onViewSortsChangeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/onViewSortsChangeScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewSort } from '@/views/types/ViewSort'; -export const onViewSortsChangeScopedState = createStateScopeMap< +export const onViewSortsChangeScopedState = createComponentState< ((sorts: ViewSort[]) => void | Promise) | undefined >({ key: 'onViewSortsChangeScopedState', diff --git a/packages/twenty-front/src/modules/views/states/onViewTypeChangeScopedState.ts b/packages/twenty-front/src/modules/views/states/onViewTypeChangeScopedState.ts index cc40b91ff..b48c3f29e 100644 --- a/packages/twenty-front/src/modules/views/states/onViewTypeChangeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/onViewTypeChangeScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewType } from '@/views/types/ViewType'; -export const onViewTypeChangeScopedState = createStateScopeMap< +export const onViewTypeChangeScopedState = createComponentState< ((viewType: ViewType) => void | Promise) | undefined >({ key: 'onViewTypeChangeScopedState', diff --git a/packages/twenty-front/src/modules/views/states/savedViewFieldsScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/savedViewFieldsScopedFamilyState.ts index 1610e5d6b..d0fd3ddac 100644 --- a/packages/twenty-front/src/modules/views/states/savedViewFieldsScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/savedViewFieldsScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewField } from '../types/ViewField'; -export const savedViewFieldsScopedFamilyState = createFamilyStateScopeMap< +export const savedViewFieldsScopedFamilyState = createComponentFamilyState< ViewField[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/savedViewFiltersScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/savedViewFiltersScopedFamilyState.ts index 06a49096b..cc90fa73d 100644 --- a/packages/twenty-front/src/modules/views/states/savedViewFiltersScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/savedViewFiltersScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewFilter } from '../types/ViewFilter'; -export const savedViewFiltersScopedFamilyState = createFamilyStateScopeMap< +export const savedViewFiltersScopedFamilyState = createComponentFamilyState< ViewFilter[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/savedViewSortsScopedFamilyState.ts b/packages/twenty-front/src/modules/views/states/savedViewSortsScopedFamilyState.ts index ea0a9811d..a6d0eceb5 100644 --- a/packages/twenty-front/src/modules/views/states/savedViewSortsScopedFamilyState.ts +++ b/packages/twenty-front/src/modules/views/states/savedViewSortsScopedFamilyState.ts @@ -1,8 +1,8 @@ -import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap'; +import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState'; import { ViewSort } from '../types/ViewSort'; -export const savedViewSortsScopedFamilyState = createFamilyStateScopeMap< +export const savedViewSortsScopedFamilyState = createComponentFamilyState< ViewSort[], string >({ diff --git a/packages/twenty-front/src/modules/views/states/selectors/currentViewScopedSelector.ts b/packages/twenty-front/src/modules/views/states/selectors/currentViewComponentSelector.ts similarity index 72% rename from packages/twenty-front/src/modules/views/states/selectors/currentViewScopedSelector.ts rename to packages/twenty-front/src/modules/views/states/selectors/currentViewComponentSelector.ts index 3719da07f..7f8770d6c 100644 --- a/packages/twenty-front/src/modules/views/states/selectors/currentViewScopedSelector.ts +++ b/packages/twenty-front/src/modules/views/states/selectors/currentViewComponentSelector.ts @@ -1,11 +1,11 @@ -import { createSelectorReadOnlyScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorReadOnlyScopeMap'; +import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector'; import { GraphQLView } from '@/views/types/GraphQLView'; import { currentViewIdScopedState } from '../currentViewIdScopedState'; import { viewsByIdScopedSelector } from './viewsByIdScopedSelector'; -export const currentViewScopedSelector = createSelectorReadOnlyScopeMap< +export const currentViewComponentSelector = createComponentReadOnlySelector< GraphQLView | undefined >({ key: 'currentViewScopedSelector', diff --git a/packages/twenty-front/src/modules/views/states/viewEditModeScopedState.ts b/packages/twenty-front/src/modules/views/states/viewEditModeScopedState.ts index 5234afb96..638502faf 100644 --- a/packages/twenty-front/src/modules/views/states/viewEditModeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/viewEditModeScopedState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const viewEditModeScopedState = createStateScopeMap< +export const viewEditModeScopedState = createComponentState< 'none' | 'edit' | 'create' >({ key: 'viewEditModeScopedState', diff --git a/packages/twenty-front/src/modules/views/states/viewObjectMetadataIdScopeState.ts b/packages/twenty-front/src/modules/views/states/viewObjectMetadataIdScopeState.ts index a67bc387d..12e397f55 100644 --- a/packages/twenty-front/src/modules/views/states/viewObjectMetadataIdScopeState.ts +++ b/packages/twenty-front/src/modules/views/states/viewObjectMetadataIdScopeState.ts @@ -1,6 +1,6 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; -export const viewObjectMetadataIdScopeState = createStateScopeMap< +export const viewObjectMetadataIdScopeState = createComponentState< string | undefined >({ key: 'viewObjectMetadataIdScopeState', diff --git a/packages/twenty-front/src/modules/views/states/viewTypeScopedState.ts b/packages/twenty-front/src/modules/views/states/viewTypeScopedState.ts index 2424bc19c..899166dd8 100644 --- a/packages/twenty-front/src/modules/views/states/viewTypeScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/viewTypeScopedState.ts @@ -1,8 +1,8 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { ViewType } from '../types/ViewType'; -export const viewTypeScopedState = createStateScopeMap({ +export const viewTypeScopedState = createComponentState({ key: 'viewTypeScopedState', defaultValue: ViewType.Table, }); diff --git a/packages/twenty-front/src/modules/views/states/viewsScopedState.ts b/packages/twenty-front/src/modules/views/states/viewsScopedState.ts index 23c2c29b0..6186528b8 100644 --- a/packages/twenty-front/src/modules/views/states/viewsScopedState.ts +++ b/packages/twenty-front/src/modules/views/states/viewsScopedState.ts @@ -1,7 +1,7 @@ -import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; import { GraphQLView } from '@/views/types/GraphQLView'; -export const viewsScopedState = createStateScopeMap({ +export const viewsScopedState = createComponentState({ key: 'viewsScopedState', defaultValue: [], }); diff --git a/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts b/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts index eb47990c9..5e3d5f29b 100644 --- a/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts +++ b/packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts @@ -5,7 +5,8 @@ import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedStat import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState'; import { onViewCompactModeChangeScopeState } from '@/views/states/onViewCompactModeChangeScopeState'; import { onViewTypeChangeScopedState } from '@/views/states/onViewTypeChangeScopedState'; -import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector'; +import { currentViewComponentSelector } from '@/views/states/selectors/currentViewComponentSelector'; +import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector'; import { availableFieldDefinitionsScopedState } from '../../states/availableFieldDefinitionsScopedState'; import { availableFilterDefinitionsScopedState } from '../../states/availableFilterDefinitionsScopedState'; @@ -23,7 +24,6 @@ import { savedViewFiltersScopedFamilyState } from '../../states/savedViewFilters import { savedViewSortsScopedFamilyState } from '../../states/savedViewSortsScopedFamilyState'; import { canPersistViewFiltersScopedFamilySelector } from '../../states/selectors/canPersistViewFiltersScopedFamilySelector'; import { canPersistViewSortsScopedFamilySelector } from '../../states/selectors/canPersistViewSortsScopedFamilySelector'; -import { savedViewFieldByKeyScopedFamilySelector } from '../../states/selectors/savedViewFieldByKeyScopedFamilySelector'; import { savedViewFiltersByKeyScopedFamilySelector } from '../../states/selectors/savedViewFiltersByKeyScopedFamilySelector'; import { savedViewSortsByKeyScopedFamilySelector } from '../../states/selectors/savedViewSortsByKeyScopedFamilySelector'; import { viewEditModeScopedState } from '../../states/viewEditModeScopedState'; @@ -182,7 +182,7 @@ export const getViewScopedStates = ({ ); const currentViewSelector = getScopedSelectorDeprecated( - currentViewScopedSelector, + currentViewComponentSelector, viewScopeId, ); diff --git a/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts b/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts index 31906107d..ac3786d37 100644 --- a/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts +++ b/packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts @@ -4,7 +4,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { FeatureFlagKey } from '@/workspace/types/FeatureFlagKey'; export const useIsFeatureEnabled = (featureKey: FeatureFlagKey) => { - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const featureFlag = currentWorkspace?.featureFlags?.find( (flag) => flag.key === featureKey, diff --git a/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx index 66b0b6402..7e2d02baf 100644 --- a/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx +++ b/packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx @@ -43,7 +43,7 @@ const StyledBenefitsContainer = styled.div` `; export const ChooseYourPlan = () => { - const billing = useRecoilValue(billingState); + const billing = useRecoilValue(billingState()); const [planSelected, setPlanSelected] = useState('month'); diff --git a/packages/twenty-front/src/pages/auth/CreateProfile.tsx b/packages/twenty-front/src/pages/auth/CreateProfile.tsx index edbaa99bc..554c14bea 100644 --- a/packages/twenty-front/src/pages/auth/CreateProfile.tsx +++ b/packages/twenty-front/src/pages/auth/CreateProfile.tsx @@ -58,7 +58,7 @@ export const CreateProfile = () => { const { enqueueSnackBar } = useSnackBar(); const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); const { updateOneRecord } = useUpdateOneRecord({ diff --git a/packages/twenty-front/src/pages/auth/PlanRequired.tsx b/packages/twenty-front/src/pages/auth/PlanRequired.tsx index 8c8a18fb7..6cf1f55af 100644 --- a/packages/twenty-front/src/pages/auth/PlanRequired.tsx +++ b/packages/twenty-front/src/pages/auth/PlanRequired.tsx @@ -16,7 +16,7 @@ const StyledButtonContainer = styled.div` `; export const PlanRequired = () => { - const billing = useRecoilValue(billingState); + const billing = useRecoilValue(billingState()); const handleButtonClick = () => { billing?.billingUrl && window.location.replace(billing.billingUrl); diff --git a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx b/packages/twenty-front/src/pages/auth/VerifyEffect.tsx index cda60b1bc..c4ba1c21b 100644 --- a/packages/twenty-front/src/pages/auth/VerifyEffect.tsx +++ b/packages/twenty-front/src/pages/auth/VerifyEffect.tsx @@ -10,7 +10,7 @@ import { AppPath } from '@/types/AppPath'; export const VerifyEffect = () => { const [searchParams] = useSearchParams(); const loginToken = searchParams.get('loginToken'); - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const isLogged = useIsLogged(); const navigate = useNavigate(); diff --git a/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx index 61d2f8316..1d1fe2f84 100644 --- a/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx +++ b/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx @@ -21,7 +21,7 @@ const meta: Meta = { component: CreateWorkspace, decorators: [ (Story) => { - const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); + const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState()); setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace); return ; }, diff --git a/packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx b/packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx index f4eaae8ff..d8090655c 100644 --- a/packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx +++ b/packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx @@ -14,8 +14,8 @@ export const ImpersonateEffect = () => { const navigate = useNavigate(); const { userId } = useParams(); - const [currentUser, setCurrentUser] = useRecoilState(currentUserState); - const setTokenPair = useSetRecoilState(tokenPairState); + const [currentUser, setCurrentUser] = useRecoilState(currentUserState()); + const setTokenPair = useSetRecoilState(tokenPairState()); const [impersonate] = useImpersonateMutation(); diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx index fd24ab76f..0ea96ca43 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx @@ -27,7 +27,7 @@ export const RecordIndexPageHeader = ({ findObjectMetadataItemByNamePlural(objectNamePlural)?.icon, ); - const recordIndexViewType = useRecoilValue(recordIndexViewTypeState); + const recordIndexViewType = useRecoilValue(recordIndexViewTypeState()); return ( diff --git a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx index 466f627f0..ebecdfdab 100644 --- a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx @@ -30,8 +30,8 @@ const StyledInvisibleChat = styled.div` export const SettingsBilling = () => { const onboardingStatus = useOnboardingStatus(); - const supportChat = useRecoilValue(supportChatState); - const currentWorkspace = useRecoilValue(currentWorkspaceState); + const supportChat = useRecoilValue(supportChatState()); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); const { data, loading } = useBillingPortalSessionQuery({ variables: { returnUrlPath: '/settings/billing', diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx index bd63e8978..48345f869 100644 --- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -42,8 +42,8 @@ export const SettingsWorkspaceMembers = () => { const { deleteOneRecord: deleteOneWorkspaceMember } = useDeleteOneRecord({ objectNameSingular: CoreObjectNameSingular.WorkspaceMember, }); - const currentWorkspace = useRecoilValue(currentWorkspaceState); - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspace = useRecoilValue(currentWorkspaceState()); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const handleRemoveWorkspaceMember = async (workspaceMemberId: string) => { await deleteOneWorkspaceMember?.(workspaceMemberId); diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx index 72576db59..6b66c4826 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx @@ -14,7 +14,7 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader'; export const SettingsAccounts = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { records: accounts, loading } = useFindManyRecords({ objectNameSingular: 'connectedAccount', diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx index 145ff3100..e65204f01 100644 --- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx +++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx @@ -17,7 +17,7 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb'; import { mockedConnectedAccounts } from '~/testing/mock-data/accounts'; export const SettingsAccountsCalendars = () => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { records: _accounts } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.ConnectedAccount, filter: { diff --git a/packages/twenty-front/src/pages/tasks/TasksEffect.tsx b/packages/twenty-front/src/pages/tasks/TasksEffect.tsx index 588383510..9dc18238b 100644 --- a/packages/twenty-front/src/pages/tasks/TasksEffect.tsx +++ b/packages/twenty-front/src/pages/tasks/TasksEffect.tsx @@ -13,7 +13,7 @@ type TasksEffectProps = { }; export const TasksEffect = ({ filterDropdownId }: TasksEffectProps) => { - const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState); + const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState()); const { setSelectedFilter, setAvailableFilterDefinitions, diff --git a/packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx b/packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx index a657c9953..ec961a870 100644 --- a/packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx @@ -8,9 +8,9 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members'; export const ObjectMetadataItemsDecorator: Decorator = (Story) => { - const objectMetadataItems = useRecoilValue(objectMetadataItemsState); + const objectMetadataItems = useRecoilValue(objectMetadataItemsState()); const setCurrentWorkspaceMember = useSetRecoilState( - currentWorkspaceMemberState, + currentWorkspaceMemberState(), ); useEffect(