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