refactor(activities): rewrite spheres model

src/entities/activities/lib/use-activity-actions.ts

@@ -1,6 +1,6 @@
 import { useAtom } from '@reatom/npm-react';
 
-import { ActivityActions, activityActionsModel } from '../model';
+import { ActivityActions, activityActionsModel } from '../models';
 
 export interface UseActivityActionsResult {
 	readonly data: ActivityActions;

src/entities/activities/lib/use-activity-spheres.ts

@@ -1,10 +1,17 @@
-import { useUnit } from 'effector-react';
+import { useAtom } from '@reatom/npm-react';
 
-import { activitySpheresModel } from '../model';
+import { ActivitySpheres, activitySpheresModel } from '../models';
 
-/**
- * @deprecated
- */
-export const useActivitySpheres = () => {
-	return useUnit(activitySpheresModel.query);
+export interface UseActivitySpheresResult {
+	readonly data: ActivitySpheres;
+	readonly pending: boolean;
+}
+
+export const useActivitySpheres = (): UseActivitySpheresResult => {
+	const model = activitySpheresModel.create();
+
+	const [data] = useAtom(model.spheresAtom);
+	const [pending] = useAtom(model.pendingAtom);
+
+	return { data, pending, };
 };

src/entities/activities/models/index.ts

@@ -1,3 +1,3 @@
 export * from './actions';
+export * from './spheres';
 export * as activitiesInRoomModel from './activities-in-room';
-export * as activitySpheresModel from './activity-spheres';

src/entities/activities/models/spheres/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * as activitySpheresModel from './model';

src/entities/activities/models/spheres/model.spec.ts

@@ -0,0 +1,57 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { create } from './model';
+import { ActivitySpheresModel } from './types';
+
+import { TestCtx, spheres, createTestCtx, waitNextTick } from '~/test-utils';
+
+describe('src/entities/activitites/models/spheres/model', () => {
+	let ctx: TestCtx;
+	let model: ActivitySpheresModel;
+
+	const createModel = () => {
+		model = create();
+	};
+
+	beforeEach(() => {
+		ctx = createTestCtx();
+	});
+
+	test('should create signleton model', () => {
+		createModel();
+
+		const anotherModel = create();
+
+		expect(model).toBe(anotherModel);
+	});
+
+	test('should stale model only after last susbcriber unsubscribe', () => {
+		createModel();
+		const anotherModel = create();
+
+		const track = ctx.subscribeTrack(model.spheresAtom);
+		const anotherTrack = ctx.subscribeTrack(anotherModel.spheresAtom);
+
+		expect(model).toBe(anotherModel);
+
+		anotherTrack.unsubscribe();
+
+		expect(model).toBe(create());
+
+		track.unsubscribe();
+
+		expect(model).not.toBe(create());
+	});
+
+	test('should load all spheres', async () => {
+		createModel();
+
+		const track = ctx.subscribeTrack(model.spheresAtom);
+
+		await waitNextTick();
+
+		expect(track.lastInput()).toStrictEqual(spheres);
+
+		track.unsubscribe();
+	});
+});

src/entities/activities/models/spheres/model.ts

@@ -0,0 +1,45 @@
+import {
+	atom,
+	onDisconnect,
+	reatomResource,
+	withCache,
+	withDataAtom
+} from '@reatom/framework';
+
+import { activitiesApi } from '@/shared/api';
+import {
+	constructName,
+	createSingletonFactory,
+	mapStandardResponse
+} from '@/shared/lib';
+
+import { ActivitySpheres, ActivitySpheresModel } from './types';
+
+const modelName = constructName('activitites', 'spheres');
+
+export const create = createSingletonFactory(
+	(): ActivitySpheresModel => {
+		const getSpheres = reatomResource(async (ctx) => {
+			return ctx.schedule(() => activitiesApi.getSpheres());
+		}, constructName(modelName, 'getSpheres')).pipe(
+			withDataAtom([] as ActivitySpheres, mapStandardResponse),
+			withCache()
+		);
+
+		const pendingAtom = atom(
+			(ctx) => !!ctx.spy(getSpheres.pendingAtom),
+			constructName(modelName, 'pendingAtom')
+		);
+
+		return {
+			spheresAtom: getSpheres.dataAtom,
+			pendingAtom,
+		};
+	},
+	{
+		key: modelName,
+		hooks: {
+			staleOn: (result, stale) => onDisconnect(result.spheresAtom, stale),
+		},
+	}
+);

src/entities/activities/models/spheres/types.ts

@@ -0,0 +1,15 @@
+import { Atom } from '@reatom/framework';
+import { Number, Record, Static, String } from 'runtypes';
+
+export const activitySphereRT = Record({
+	id: Number,
+	name: String,
+}).asReadonly();
+
+export interface ActivitySphere extends Static<typeof activitySphereRT> {}
+export type ActivitySpheres = ActivitySphere[];
+
+export interface ActivitySpheresModel {
+	readonly spheresAtom: Atom<ActivitySpheres>;
+	readonly pendingAtom: Atom<boolean>;
+}

src/entities/activities/ui/activities-spheres-picker/activities-spheres-picker.tsx

@@ -2,12 +2,12 @@ import { Autocomplete, Chip, ListItem, ListItemText } from '@mui/material';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { ActivitySphere } from '@/shared/api';
 import { preparePickerHandler, preparePickerSelectedValue } from '@/shared/lib';
 import { CommonProps, PickerProps } from '@/shared/types';
 import { Field, FieldProps } from '@/shared/ui';
 
 import { useActivitySpheres } from '../../lib';
+import { ActivitySphere } from '../../models';
 
 export type ActivitiesSpheresPickerProps = CommonProps &
 	PickerProps<number> &

src/pages/room-activities/model.ts

@@ -3,10 +3,7 @@ import { createEvent, sample } from 'effector';
 
 import { activitiesFiltersModel } from '@/features/activities';
 
-import {
-	activitiesInRoomModel,
-	activitySpheresModel
-} from '@/entities/activities';
+import { activitiesInRoomModel } from '@/entities/activities';
 import { roomModel, roomsModel } from '@/entities/rooms';
 import { usersInRoomModel } from '@/entities/users';
 
@@ -35,8 +32,7 @@ const formApplied = createEvent<void>();
 const queries = [
 	activitiesInRoomModel.query,
 	usersInRoomModel.query,
-	roomsModel.query,
-	activitySpheresModel.query
+	roomsModel.query
 ];
 const sorting = {
 	by: 'createdAt',

src/shared/api/activities/requests.ts

@@ -5,7 +5,7 @@ import { instance, normalizeQuery } from '../request';
 import {
 	Activity,
 	ActivityActionDto,
-	ActivitySphere,
+	ActivitySphereDto,
 	GetActivitiesInRoomParams
 } from './types';
 
@@ -29,5 +29,5 @@ export const getActions = async () => {
 export const getSpheres = async () => {
 	return instance
 		.get('activities/spheres/all')
-		.json<StandardResponse<ActivitySphere[]>>();
+		.json<StandardResponse<ActivitySphereDto[]>>();
 };

src/shared/api/activities/types.ts

@@ -19,12 +19,12 @@ export interface ActivityActionDto {
 	readonly name: string;
 }
 
-export const activitySphere = Record({
+const activitySphere = Record({
 	id: Number,
 	name: String,
 }).asReadonly();
 
-export interface ActivitySphere extends Static<typeof activitySphere> {}
+export interface ActivitySphereDto extends Static<typeof activitySphere> {}
 
 export const activity = Record({
 	id: Number,

test-utils/fixtures/activities.ts

@@ -1,8 +1,6 @@
-import { ActivityActions } from '@/entities/activities';
+import { ActivityActionDto, ActivitySphereDto } from '@/shared/api';
 
-import { ActivitySphere } from '@/shared/api';
-
-export const actions: ActivityActions = [
+export const actions: ActivityActionDto[] = [
 	{
 		id: 1,
 		name: 'created',
@@ -17,7 +15,7 @@ export const actions: ActivityActions = [
 	}
 ];
 
-export const spheres: ActivitySphere[] = [
+export const spheres: ActivitySphereDto[] = [
 	{
 		id: 1,
 		name: 'task',