Introduce ComponentState (#4386)

* Proof of concept ComponentState

* Migrate to createState and createFamilyState

* Refactor

* Fix

* Fix tests

* Fix lint

* Fix tests

* Re-enable coverage

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

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

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<BlocklistItem>({
     objectNameSingular: CoreObjectNameSingular.Blocklist,

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

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

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

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

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

packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx

@@ -29,9 +29,9 @@ export const NameFields = ({
   onFirstNameUpdate,
   onLastNameUpdate,
 }: NameFieldsProps) => {
-  const currentUser = useRecoilValue(currentUserState);
+  const currentUser = useRecoilValue(currentUserState());
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-    currentWorkspaceMemberState,
+    currentWorkspaceMemberState(),
   );
 
   const [firstName, setFirstName] = useState(

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] =

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 ?? '',

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

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