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/activities/timeline/components/Timeline.tsx

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

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

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

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

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

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

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