scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-31 12:47:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Introduce ComponentState (#4386)

Browse Source 
* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage
This commit is contained in:
Charles Bochet
2024-03-09 11:31:00 +01:00
committed by GitHub
parent 17511be0cf
commit 86c0f311f5
451 changed files with 1718 additions and 2557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ci-front.yaml vendored
View File

@@ -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
run: yarn nx coverage twenty-front

2
packages/twenty-front/package.json
View File

@@ -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",

2
packages/twenty-front/src/effect-components/CommandMenuEffect.tsx
View File

@@ -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(() => {

2
packages/twenty-front/src/effect-components/PageChangeEffect.tsx
View File

@@ -45,7 +45,7 @@ export const PageChangeEffect = () => {
const openCreateActivity = useOpenCreateActivityDrawer();
const isSignUpDisabled = useRecoilValue(isSignUpDisabledState);
const isSignUpDisabled = useRecoilValue(isSignUpDisabledState());
useEffect(() => {
if (!previousLocation || previousLocation !== location.pathname) {

2
packages/twenty-front/src/modules/activities/comment/__stories__/Comment.stories.tsx
View File

@@ -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');

2
packages/twenty-front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx
View File

@@ -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');

2
packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
View File

@@ -118,7 +118,7 @@ export const ActivityBodyEditor = ({
);
const [canCreateActivity, setCanCreateActivity] = useRecoilState(
canCreateActivityState,
canCreateActivityState(),
);
const slashMenuItems = getSlashMenu();

2
packages/twenty-front/src/modules/activities/components/ActivityComments.tsx
View File

@@ -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,

8
packages/twenty-front/src/modules/activities/components/ActivityEditorEffect.tsx
View File

@@ -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 ||

2
packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx
View File

@@ -71,7 +71,7 @@ export const ActivityTitle = ({ activityId }: ActivityTitleProps) => {
const activity = activityInStore as Activity;
const [canCreateActivity, setCanCreateActivity] = useRecoilState(
canCreateActivityState,
canCreateActivityState(),
);
const { upsertActivity } = useUpsertActivity();

9
packages/twenty-front/src/modules/activities/emails/hooks/internal/useEmailThreadStates.ts
View File

@@ -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,
),
};
};

6
packages/twenty-front/src/modules/activities/emails/hooks/useEmailThread.ts
View File

@@ -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();

2
packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/useRightDrawerEmailThread.ts
View File

@@ -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({

12
packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageComponentState.ts Normal file
View File

@@ -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<EmailThreadsPageType>({
key: 'emailThreadsPageComponentState',
defaultValue: { pageNumber: 1, hasNextPage: true },
});

12
packages/twenty-front/src/modules/activities/emails/state/emailThreadsPageStateScopeMap.ts
View File

@@ -1,12 +0,0 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
export type EmailThreadsPageType = {
pageNumber: number;
hasNextPage: boolean;
};
export const emailThreadsPageStateScopeMap =
createStateScopeMap<EmailThreadsPageType>({
key: 'emailThreadsPageStateScopeMap',
defaultValue: { pageNumber: 1, hasNextPage: true },
});

6
packages/twenty-front/src/modules/activities/emails/state/viewableEmailThreadIdState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const viewableEmailThreadIdState = atom<string | null>({
export const viewableEmailThreadIdState = createState<string | null>({
key: 'viewableEmailThreadIdState',
default: null,
defaultValue: null,
});

2
packages/twenty-front/src/modules/activities/files/hooks/useUploadAttachmentFile.tsx
View File

@@ -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 } =

4
packages/twenty-front/src/modules/activities/hooks/__tests__/useActivityConnectionUtils.test.tsx
View File

@@ -58,7 +58,7 @@ describe('useActivityConnectionUtils', () => {
<RecoilRoot
initializeState={(snapshot) => {
snapshot.set(
objectMetadataItemsState,
objectMetadataItemsState(),
getObjectMetadataItemsMock(),
);
}}
@@ -86,7 +86,7 @@ describe('useActivityConnectionUtils', () => {
<RecoilRoot
initializeState={(snapshot) => {
snapshot.set(
objectMetadataItemsState,
objectMetadataItemsState(),
getObjectMetadataItemsMock(),
);
}}

2
packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts
View File

@@ -14,7 +14,7 @@ export const useActivityTargetObjectRecords = ({
}: {
activityId: string;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItems = useRecoilValue(objectMetadataItemsState());
const { records: activityTargets, loading: loadingActivityTargets } =
useFindManyRecords<ActivityTarget>({

2
packages/twenty-front/src/modules/activities/hooks/useCreateActivityInCache.ts
View File

@@ -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,

6
packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
View File

@@ -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) => {

16
packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
View File

@@ -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 ({

6
packages/twenty-front/src/modules/activities/hooks/useUpsertActivity.ts
View File

@@ -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<Activity>({
@@ -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,

4
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
View File

@@ -34,7 +34,9 @@ export const ActivityTargetInlineCellEditMode = ({
activity,
activityTargetWithTargetRecords,
}: ActivityTargetInlineCellEditModeProps) => {
const [isActivityInCreateMode] = useRecoilState(isActivityInCreateModeState);
const [isActivityInCreateMode] = useRecoilState(
isActivityInCreateModeState(),
);
const selectedTargetObjectIds = activityTargetWithTargetRecords.map(
(activityTarget) => ({

16
packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
View File

@@ -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(

2
packages/twenty-front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx
View File

@@ -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 (
<>

2
packages/twenty-front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx
View File

@@ -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 (
<>

6
packages/twenty-front/src/modules/activities/states/activityBodyFamilyState.ts
View File

@@ -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: '',
});

6
packages/twenty-front/src/modules/activities/states/activityIdInDrawerState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const activityIdInDrawerState = atom<string | null>({
export const activityIdInDrawerState = createState<string | null>({
key: 'activityIdInDrawerState',
default: null,
defaultValue: null,
});

6
packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
View File

@@ -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: [],
});

6
packages/twenty-front/src/modules/activities/states/activityTitleFamilyState.ts
View File

@@ -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: '',
});

6
packages/twenty-front/src/modules/activities/states/activityTitleHasBeenSetFamilyState.ts
View File

@@ -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,
});

6
packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const canCreateActivityState = atom<boolean>({
export const canCreateActivityState = createState<boolean>({
key: 'canCreateActivityState',
default: false,
defaultValue: false,
});

6
packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isActivityInCreateModeState = atom<boolean>({
export const isActivityInCreateModeState = createState<boolean>({
key: 'isActivityInCreateModeState',
default: false,
defaultValue: false,
});

6
packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isUpsertingActivityInDBState = atom<boolean>({
export const isUpsertingActivityInDBState = createState<boolean>({
key: 'isUpsertingActivityInDBState',
default: false,
defaultValue: false,
});

9
packages/twenty-front/src/modules/activities/states/targetableObjectsInDrawerState.ts
View File

@@ -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<ActivityTargetableObject[]>({
export const targetableObjectsInDrawerState = createState<
ActivityTargetableObject[]
>({
key: 'targetableObjectsInDrawerState',
default: [],
defaultValue: [],
});

12
packages/twenty-front/src/modules/activities/states/temporaryActivityForEditorState.ts
View File

@@ -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<ActivityForEditor | null>({
key: 'temporaryActivityForEditorState',
default: null,
});
export const temporaryActivityForEditorState =
createState<ActivityForEditor | null>({
key: 'temporaryActivityForEditorState',
defaultValue: null,
});

6
packages/twenty-front/src/modules/activities/states/viewableActivityIdState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const viewableActivityIdState = atom<string | null>({
export const viewableActivityIdState = createState<string | null>({
key: 'activities/viewable-activity-id',
default: null,
defaultValue: null,
});

4
packages/twenty-front/src/modules/activities/tasks/components/CurrentUserDueTaskCountEffect.tsx
View File

@@ -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({

2
packages/twenty-front/src/modules/activities/tasks/hooks/useCurrentUserDueTaskCount.ts
View File

@@ -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,

6
packages/twenty-front/src/modules/activities/tasks/states/currentUserTaskCountState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const currentUserDueTaskCountState = atom<number>({
default: 0,
export const currentUserDueTaskCountState = createState<number>({
defaultValue: 0,
key: 'currentUserDueTaskCountState',
});

2
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@@ -33,7 +33,7 @@ export const Timeline = ({
targetableObject: ActivityTargetableObject;
}) => {
const { initialized, noActivities } = useRecoilValue(
timelineActivitiesNetworkingState,
timelineActivitiesNetworkingState(),
);
const showEmptyState = noActivities;

2
packages/twenty-front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx
View File

@@ -26,7 +26,7 @@ const StyledScrollWrapper = styled(ScrollWrapper)``;
export const TimelineItemsContainer = () => {
const timelineActivitiesForGroup = useRecoilValue(
timelineActivitiesForGroupState,
timelineActivitiesForGroupState(),
);
const groupedActivities = groupActivitiesByMonth(timelineActivitiesForGroup);

4
packages/twenty-front/src/modules/activities/timeline/components/TimelineQueryEffect.tsx
View File

@@ -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)) {

7
packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesFamilyState.ts
View File

@@ -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,
});

15
packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesForGroupState.ts
View File

@@ -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<ActivityForActivityGroup[]>(
{
key: 'timelineActivitiesForGroupState',
default: [],
},
);
export const timelineActivitiesForGroupState = createState<
ActivityForActivityGroup[]
>({
key: 'timelineActivitiesForGroupState',
defaultValue: [],
});

6
packages/twenty-front/src/modules/activities/timeline/states/timelineActivitiesNetworkingState.ts
View File

@@ -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,
},

7
packages/twenty-front/src/modules/activities/timeline/states/timelineActivityFirstLevelFamilySelector.ts
View File

@@ -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<Activity, 'id' | 'title' | 'createdAt' | 'author' | 'type'> | null,
string
>({
key: 'timelineActivityFirstLevelFamilySelector',
default: null,
defaultValue: null,
});

4
packages/twenty-front/src/modules/analytics/hooks/useEventTracker.ts
View File

@@ -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(

4
packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts
View File

@@ -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<ApolloFactory<NormalizedCacheObject> | 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({

14
packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
View File

@@ -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,

2
packages/twenty-front/src/modules/auth/hooks/__test__/useIsLogged.test.ts
View File

@@ -9,7 +9,7 @@ const renderHooks = () => {
const { result } = renderHook(
() => {
const isLogged = useIsLogged();
const setTokenPair = useSetRecoilState(tokenPairState);
const setTokenPair = useSetRecoilState(tokenPairState());
return {
isLogged,

10
packages/twenty-front/src/modules/auth/hooks/__test__/useOnboardingStatus.test.ts
View File

@@ -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,

38
packages/twenty-front/src/modules/auth/hooks/useAuth.ts
View File

@@ -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;
});

4
packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts
View File

@@ -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;
};

6
packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts
View File

@@ -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({

2
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
View File

@@ -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();

2
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts
View File

@@ -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,

2
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
View File

@@ -19,7 +19,7 @@ const validationSchema = z
export type Form = z.infer<typeof validationSchema>;
export const useSignInUpForm = () => {
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
const isSignInPrefilled = useRecoilValue(isSignInPrefilledState());
const form = useForm<Form>({
mode: 'onChange',
defaultValues: {

7
packages/twenty-front/src/modules/auth/states/currentUserState.ts
View File

@@ -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<CurrentUser | null>({
export const currentUserState = createState<CurrentUser | null>({
key: 'currentUserState',
default: null,
defaultValue: null,
});

7
packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
View File

@@ -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<Omit<
export const currentWorkspaceMemberState = createState<Omit<
WorkspaceMember,
'createdAt' | 'updatedAt' | 'userId' | 'userEmail'
> | null>({
key: 'currentWorkspaceMemberState',
default: null,
defaultValue: null,
});

7
packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
View File

@@ -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<CurrentWorkspace | null>({
export const currentWorkspaceState = createState<CurrentWorkspace | null>({
key: 'currentWorkspaceState',
default: null,
defaultValue: null,
});

6
packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isVerifyPendingState = atom<boolean>({
export const isVerifyPendingState = createState<boolean>({
key: 'isVerifyPendingState',
default: false,
defaultValue: false,
});

7
packages/twenty-front/src/modules/auth/states/tokenPairState.ts
View File

@@ -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<AuthTokenPair | null>({
export const tokenPairState = createState<AuthTokenPair | null>({
key: 'tokenPairState',
default: null,
defaultValue: null,
effects: [cookieStorageEffect('tokenPair')],
});

16
packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx
View File

@@ -15,17 +15,17 @@ import { isNonNullable } from '~/utils/isNonNullable';
export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
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();

7
packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
View File

@@ -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<AuthProviders>({
export const authProvidersState = createState<AuthProviders>({
key: 'authProvidersState',
default: { google: false, magicLink: false, password: true },
defaultValue: { google: false, magicLink: false, password: true },
});

7
packages/twenty-front/src/modules/client-config/states/billingState.ts
View File

@@ -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<Billing | null>({
export const billingState = createState<Billing | null>({
key: 'billingState',
default: null,
defaultValue: null,
});

6
packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isDebugModeState = atom<boolean>({
export const isDebugModeState = createState<boolean>({
key: 'isDebugModeState',
default: false,
defaultValue: false,
});

6
packages/twenty-front/src/modules/client-config/states/isSignInPrefilledState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isSignInPrefilledState = atom<boolean>({
export const isSignInPrefilledState = createState<boolean>({
key: 'isSignInPrefilledState',
default: false,
defaultValue: false,
});

6
packages/twenty-front/src/modules/client-config/states/isSignUpDisabledState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const isSignUpDisabledState = atom<boolean>({
export const isSignUpDisabledState = createState<boolean>({
key: 'isSignUpDisabledState',
default: false,
defaultValue: false,
});

7
packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
View File

@@ -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<Sentry | null>({
export const sentryConfigState = createState<Sentry | null>({
key: 'sentryConfigState',
default: null,
defaultValue: null,
});

7
packages/twenty-front/src/modules/client-config/states/supportChatState.ts
View File

@@ -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<Support>({
export const supportChatState = createState<Support>({
key: 'supportChatState',
default: {
defaultValue: {
supportDriver: 'none',
supportFrontChatId: null,
},

7
packages/twenty-front/src/modules/client-config/states/telemetryState.ts
View File

@@ -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<Telemetry>({
export const telemetryState = createState<Telemetry>({
key: 'telemetryState',
default: { enabled: true, anonymizationEnabled: true },
defaultValue: { enabled: true, anonymizationEnabled: true },
});

4
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@@ -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<HTMLInputElement>) => {

4
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
View File

@@ -27,9 +27,9 @@ const meta: Meta<typeof CommandMenu> = {
component: CommandMenu,
decorators: [
(Story) => {
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
const setCurrentWorkspaceMember = useSetRecoilState(
currentWorkspaceMemberState,
currentWorkspaceMemberState(),
);
const { addToCommandMenu, setToInitialCommandMenu, openCommandMenu } =
useCommandMenu();

2
packages/twenty-front/src/modules/command-menu/hooks/__test__/useCommandMenu.test.tsx
View File

@@ -25,7 +25,7 @@ const renderHooks = () => {
const commandMenu = useCommandMenu();
const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
commandMenuCommandsState,
commandMenuCommandsState(),
);
return {

4
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@@ -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();

6
packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts
View File

@@ -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<Command[]>({
export const commandMenuCommandsState = createState<Command[]>({
key: 'command-menu/commandMenuCommandsState',
default: [
defaultValue: [
{
id: '',
to: '',

6
packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
View File

@@ -1,6 +1,6 @@
import { atom } from 'recoil';
import { createState } from '@/ui/utilities/state/utils/createState';
export const commandMenuSearchState = atom<string>({
export const commandMenuSearchState = createState<string>({
key: 'command-menu/commandMenuSearchState',
default: '',
defaultValue: '',
});

2
packages/twenty-front/src/modules/debug/components/ApolloDevLogEffect.tsx
View File

@@ -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) {

2
packages/twenty-front/src/modules/debug/components/RecoilDebugObserver.tsx
View File

@@ -15,7 +15,7 @@ const formatTitle = (stateName: string) => {
};
export const RecoilDebugObserverEffect = () => {
const isDebugMode = useRecoilValue(isDebugModeState);
const isDebugMode = useRecoilValue(isDebugModeState());
useRecoilTransactionObserver_UNSTABLE(({ snapshot }) => {
if (!isDebugMode) {

8
packages/twenty-front/src/modules/error-handler/components/SentryInitiEffect.tsx
View File

@@ -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);

16
packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx
View File

@@ -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();

2
packages/twenty-front/src/modules/favorites/hooks/useFavorites.ts
View File

@@ -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';

7
packages/twenty-front/src/modules/favorites/states/favoritesState.ts
View File

@@ -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<Favorite[]>({
export const favoritesState = createState<Favorite[]>({
key: 'favoritesState',
default: [],
defaultValue: [],
});

4
packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
View File

@@ -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'

6
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
View File

@@ -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 (

2
packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
View File

@@ -30,7 +30,7 @@ export const MobileNavigationBar = () => {
isNavigationDrawerOpenState,
);
const [currentMobileNavigationDrawer, setCurrentMobileNavigationDrawer] =
useRecoilState(currentMobileNavigationDrawerState);
useRecoilState(currentMobileNavigationDrawerState());
const activeItemName = isNavigationDrawerOpen
? currentMobileNavigationDrawer

2
packages/twenty-front/src/modules/navigation/components/__stories__/AppNavigationDrawer.stories.tsx
View File

@@ -24,7 +24,7 @@ const MobileNavigationDrawerStateSetterEffect = ({
isNavigationDrawerOpenState,
);
const setCurrentMobileNavigationDrawer = useSetRecoilState(
currentMobileNavigationDrawerState,
currentMobileNavigationDrawerState(),
);
useEffect(() => {

8
packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
View File

@@ -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',
});

2
packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx
View File

@@ -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({

2
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx
View File

@@ -10,7 +10,7 @@ export const ObjectMetadataItemsLoadEffect = () => {
useFindManyObjectMetadataItems();
const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
objectMetadataItemsState,
objectMetadataItemsState(),
);
useEffect(() => {

4
packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
View File

@@ -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;

2
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useFilterOutUnexistingObjectMetadataItems.test.tsx
View File

@@ -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();

2
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetObjectRecordIdentifierByNameSingular.test.tsx
View File

@@ -17,7 +17,7 @@ describe('useGetObjectRecordIdentifierByNameSingular', () => {
record: any;
objectNameSingular: string;
}) => {
const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
setMetadataItems(mockObjectMetadataItems);

2
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useGetRelationMetadata.test.tsx
View File

@@ -31,7 +31,7 @@ describe('useGetRelationMetadata', () => {
const { result } = renderHook(
() => {
const setMetadataItems = useSetRecoilState(objectMetadataItemsState);
const setMetadataItems = useSetRecoilState(objectMetadataItemsState());
useEffect(() => {
setMetadataItems(objectMetadataItems);

2
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useMapFieldMetadataToGraphQLQuery.test.tsx
View File

@@ -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 {

6
packages/twenty-front/src/modules/object-metadata/hooks/__tests__/useObjectMetadataItemForSettings.test.tsx
View File

@@ -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();

2
packages/twenty-front/src/modules/object-metadata/hooks/useGetObjectRecordIdentifierByNameSingular.ts
View File

@@ -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(

2
packages/twenty-front/src/modules/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery.ts
View File

@@ -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,

Some files were not shown because too many files have changed in this diff Show More