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

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

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

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

packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<PageDecoratorArgs> = {
   component: CreateWorkspace,
   decorators: [
     (Story) => {
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
       setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
       return <Story />;
     },

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

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 (
     <PageHeader title={capitalize(objectNamePlural)} Icon={Icon}>

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

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

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<ConnectedAccount>({
     objectNameSingular: 'connectedAccount',

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<ConnectedAccount>({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
     filter: {

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,