move to reatom

.eslintrc.cjs

@@ -7,7 +7,6 @@ module.exports = configure({
     presets.prettier(),
     presets.typescript(),
     presets.react({ newJSXTransform: true }),
-    presets.effector(),
   ],
   extend: {
     plugins: ['@reatom'],

readme.md

@@ -16,4 +16,4 @@
 
 Tasks are stored in IndexedDB.
 
-This app is built with with [React](https://reactjs.org/) [TypeScript](https://www.typescriptlang.org/), [Vite](https://vitejs.dev/), [TailwindCSS](https://tailwindcss.com/), [Material Tailwind](https://www.material-tailwind.com/), [Effector](https://effector.dev), [Atomic Router](https://atomic-router.github.io/), [Storybook](https://storybook.js.org/) and [GitHub Actions](https://docs.github.com/en/actions). Deployed with [Vercel](https://vercel.app).
+This app is built with with [React](https://reactjs.org/) [TypeScript](https://www.typescriptlang.org/), [Vite](https://vitejs.dev/), [TailwindCSS](https://tailwindcss.com/), [Material Tailwind](https://www.material-tailwind.com/), [Reatom](https://reatom.dev), [Atomic Router](https://atomic-router.github.io/), [Storybook](https://storybook.js.org/) and [GitHub Actions](https://docs.github.com/en/actions). Deployed with [Vercel](https://vercel.app).

src/app/providers/index.ts

@@ -1,6 +1,6 @@
 import compose from 'compose-function';
-import { withEffectorScope } from './with-effector-scope';
+import { withReatomContext } from './with-reatom-context';
 import { withRouting } from './with-routing';
 import { withTheme } from './with-theme';
 
-export const withProviders = compose(withTheme, withRouting, withEffectorScope);
+export const withProviders = compose(withTheme, withRouting, withReatomContext);

src/app/providers/with-reatom-context.tsx

@@ -0,0 +1,10 @@
+import { createCtx } from '@reatom/core';
+import { reatomContext } from '@reatom/npm-react';
+
+const ctx = createCtx();
+
+export const withReatomContext = (children: () => React.ReactNode) => () => {
+  return (
+    <reatomContext.Provider value={ctx}>{children()}</reatomContext.Provider>
+  );
+};

src/entities/task/model.ts

@@ -1,22 +1,11 @@
-import { combine, createEvent } from 'effector';
+import { action, atom } from '@reatom/framework';
+import { withLocalStorage } from '@reatom/persist-web-storage';
 import { arrayMove } from '~/shared/lib/array';
-import { createLocalStorageStore } from '~/shared/lib/effector-localstorage';
 import { Id } from '~/shared/lib/id';
 import { Optional } from '~/shared/lib/typescript';
 
 type TaskStatus = 'active' | 'completed';
 
-export interface Filter {
-  status: TaskStatus | undefined;
-}
-
-const DEFAULT_FILTER: Filter = {
-  status: undefined,
-};
-
-export const { $store: $filter, getLocalStorageValueFx: getFilterValueFx } =
-  createLocalStorageStore<Filter>('filter', DEFAULT_FILTER);
-
 type TaskId = Id;
 
 export interface Task {
@@ -32,22 +21,15 @@ export type TaskDataWithoutStatus = Omit<TaskData, 'status'>;
 
 export type TaskDataOptional = Optional<TaskData>;
 
-const updatedTask = (task: Task, updatedTaskData: TaskDataOptional): Task => ({
-  ...task,
-  ...updatedTaskData,
-});
-
-export const taskUpdated = createEvent<{
-  id: TaskId;
-  data: TaskDataOptional;
-}>();
+export interface Filter {
+  status: TaskStatus | undefined;
+}
 
-export const taskMoved = createEvent<{
-  from: number;
-  to: number;
-}>();
+const DEFAULT_FILTER: Filter = {
+  status: undefined,
+};
 
-const initialTasks: Array<Task> = [
+const INITIAL_TASKS: Array<Task> = [
   {
     id: '1',
     status: 'active',
@@ -61,26 +43,50 @@ const initialTasks: Array<Task> = [
   },
 ];
 
-export const { $store: $tasks, getLocalStorageValueFx: getTasksValueFx } =
-  createLocalStorageStore('tasks', initialTasks);
+export const filterAtom = atom(DEFAULT_FILTER, 'filterAtom').pipe(
+  withLocalStorage('filter'),
+);
 
-export const $visibleTasks = combine($tasks, $filter, (tasks, filter) =>
-  tasks.filter(
-    (task) => filter.status === undefined || filter.status === task.status,
-  ),
+export const tasksAtom = atom(INITIAL_TASKS, 'tasksAtom').pipe(
+  withLocalStorage('tasks'),
 );
 
-$tasks.on(
-  taskUpdated,
-  (currentTasks, { id: updatedTaskId, data: updatedTaskData }) =>
-    currentTasks.map((task) => {
-      if (task.id === updatedTaskId) {
-        return updatedTask(task, updatedTaskData);
+export const visibleTasksAtom = atom((ctx) => {
+  const tasks = ctx.spy(tasksAtom);
+
+  const filter = ctx.spy(filterAtom);
+
+  return tasks.filter(
+    (task) => filter.status === undefined || filter.status === task.status,
+  );
+}, 'visibleTasksAtom');
+
+const updatedTask = (task: Task, updatedTaskData: TaskDataOptional): Task => ({
+  ...task,
+  ...updatedTaskData,
+});
+
+export const updateTask = action(
+  (ctx, { id, data }: { id: TaskId; data: TaskDataOptional }) => {
+    const oldTasks = ctx.get(tasksAtom);
+
+    const newTasks = oldTasks.map((task) => {
+      if (task.id === id) {
+        return updatedTask(task, data);
       }
       return task;
-    }),
+    });
+
+    tasksAtom(ctx, newTasks);
+  },
+  'updateTask',
 );
 
-$tasks.on(taskMoved, (currentTasks, { from, to }) =>
-  arrayMove(currentTasks, { from, to }),
+export const moveTask = action(
+  (ctx, { from, to }: { from: number; to: number }) => {
+    const oldTasks = ctx.get(tasksAtom);
+    const newTasks = arrayMove(oldTasks, { from, to });
+    tasksAtom(ctx, newTasks);
+  },
+  'moveTask',
 );

src/entities/task/ui/task-card/ui.stories.tsx

@@ -1,31 +1,27 @@
+import { reatomContext, useCreateCtx } from '@reatom/npm-react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { fork } from 'effector';
-import { Provider } from 'effector-react/scope';
-import { $tasks } from '../../model';
+import { taskModel } from '../..';
 import { TaskCard } from './ui';
 
 export default {
   title: 'Entities/Task/TaskCard',
   component: TaskCard,
   decorators: [
     (storyFn) => {
-      const scope = fork({
-        values: [
-          [
-            $tasks,
-            [
-              {
-                id: '1',
-                status: 'active',
-                title: 'Make a leather wallet',
-                description: 'Check YouTube for tutorial',
-              },
-            ],
-          ],
-        ],
-      });
+      const ctx = useCreateCtx((ctx) => {});
 
-      return <Provider value={scope}>{storyFn()}</Provider>;
+      taskModel.tasksAtom(ctx, [
+        {
+          id: '1',
+          status: 'active',
+          title: 'Make a leather wallet',
+          description: 'Check YouTube for tutorial',
+        },
+      ]);
+
+      return (
+        <reatomContext.Provider value={ctx}>{storyFn()}</reatomContext.Provider>
+      );
     },
   ],
 } as ComponentMeta<typeof TaskCard>;

src/entities/task/ui/task-card/ui.tsx

@@ -1,11 +1,11 @@
 import { Typography } from '@material-tailwind/react';
+import { useAtom } from '@reatom/npm-react';
 import cn from 'classnames';
-import { useStoreMap } from 'effector-react/scope';
 import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { getEntityById } from '~/shared/lib/effector';
+import { getEntityById } from '~/shared/lib/entity';
 import { mergeRefs } from '~/shared/lib/react';
-import { $tasks, Task } from '../../model';
+import { Task, tasksAtom } from '../../model';
 
 export interface TaskCardProps {
   id: Task['id'];
@@ -24,10 +24,10 @@ export const TaskCard = ({
   onDelete,
   onEdit,
 }: TaskCardProps) => {
-  const task = useStoreMap({
-    store: $tasks,
-    keys: [id],
-    fn: (tasks, [taskId]) => getEntityById(tasks, taskId),
+  const [task] = useAtom((ctx) => {
+    const tasks = ctx.spy(tasksAtom);
+
+    return getEntityById(tasks, id);
   });
 
   const idStr = React.useMemo(() => `task-card-${id}`, [id]);
@@ -67,7 +67,7 @@ export const TaskCard = ({
             {task.title}
           </Typography>
           <Typography variant='small' className='truncate text-gray-500'>
-            {task.description}
+            {task.description ?? ''}
           </Typography>
           <div className='absolute top-0 right-0 flex gap-1 bg-white opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-focus:bg-gray-100 '>
             {EditSlot}

src/entities/task/ui/task-editor/ui.stories.tsx

@@ -1,6 +1,5 @@
+import { reatomContext, useCreateCtx } from '@reatom/npm-react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { fork } from 'effector';
-import { Provider } from 'effector-react/scope';
 import { TaskEditor } from './ui';
 
 export default {
@@ -18,9 +17,11 @@ export default {
   },
   decorators: [
     (storyFn) => {
-      const scope = fork();
+      const ctx = useCreateCtx();
 
-      return <Provider value={scope}>{storyFn()}</Provider>;
+      return (
+        <reatomContext.Provider value={ctx}>{storyFn()}</reatomContext.Provider>
+      );
     },
   ],
 } as ComponentMeta<typeof TaskEditor>;

src/features/add-task/model.ts

@@ -1,17 +1,18 @@
-import { createEvent } from 'effector';
+import { action } from '@reatom/framework';
 import { taskModel } from '~/entities/task';
+import { TaskDataWithoutStatus } from '~/entities/task/model';
 import { getId } from '~/shared/lib/id';
 
-const taskCreated = createEvent<taskModel.Task>();
-
-export const taskCreatedByUser =
-  taskCreated.prepend<taskModel.TaskDataWithoutStatus>((taskData) => ({
+export const createTask = action((ctx, data: TaskDataWithoutStatus) => {
+  const newTask = {
     id: getId(),
     status: 'active',
-    ...taskData,
-  }));
+    ...data,
+  } as taskModel.Task;
+
+  const tasks = ctx.get(taskModel.tasksAtom);
+
+  const newTasks = [...tasks, newTask];
 
-taskModel.$tasks.on(taskCreated, (currentTasks, newTask) => [
-  ...currentTasks,
-  newTask,
-]);
+  taskModel.tasksAtom(ctx, newTasks);
+}, 'createTask');

src/features/add-task/ui.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@material-tailwind/react';
-import { useUnit } from 'effector-react/scope';
+import { useAction } from '@reatom/npm-react';
 import { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { TaskEditor, taskModel } from '~/entities/task';
-import { taskCreatedByUser } from './model';
+import { createTask } from './model';
 
 export const AddTask = () => {
   const [showForm, setShowForm] = useState(false);
@@ -13,7 +13,7 @@ export const AddTask = () => {
 
   const submitButtonText = 'Add task';
 
-  const onSubmit = useUnit(taskCreatedByUser);
+  const onSubmit = useAction(createTask);
 
   const handleSubmit = (payload: taskModel.TaskDataWithoutStatus) => {
     setEditorKey((key) => key + 1);

src/features/delete-task/model.ts

@@ -1,8 +1,8 @@
-import { createEvent } from 'effector';
-import { taskModel } from '~/entities/task';
+import { action } from '@reatom/framework';
+import { tasksAtom } from '~/entities/task/model';
 
-export const taskRemoved = createEvent<taskModel.Task['id']>();
+export const removeTask = action((ctx, id) => {
+  const tasks = ctx.get(tasksAtom);
 
-taskModel.$tasks.on(taskRemoved, (currentTasks, removedTaskId) =>
-  currentTasks.filter((task) => task.id !== removedTaskId),
-);
+  return tasks.filter((task) => task.id !== id);
+}, 'removeTask');

src/features/delete-task/ui.tsx

@@ -6,12 +6,13 @@ import {
   DialogHeader,
   IconButton,
 } from '@material-tailwind/react';
-import { useStoreMap, useUnit } from 'effector-react/scope';
+import { useAction, useAtom } from '@reatom/npm-react';
 import { useCallback, useState } from 'react';
 import { taskModel } from '~/entities/task';
-import { getEntityById } from '~/shared/lib/effector';
+import { tasksAtom } from '~/entities/task/model';
+import { getEntityById } from '~/shared/lib/entity';
 import { Icon } from '~/shared/ui';
-import { taskRemoved } from './model';
+import { removeTask } from './model';
 
 interface DeleteTaskProps {
   id: taskModel.Task['id'];
@@ -28,10 +29,9 @@ const taskTitleString = (task: taskModel.Task | undefined): string => {
 };
 
 export const DeleteTask = ({ id }: DeleteTaskProps) => {
-  const task = useStoreMap({
-    store: taskModel.$tasks,
-    keys: [id],
-    fn: (tasks, [taskId]) => getEntityById(tasks, taskId),
+  const [task] = useAtom((ctx) => {
+    const tasks = ctx.spy(tasksAtom);
+    return getEntityById(tasks, id);
   });
 
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -41,10 +41,10 @@ export const DeleteTask = ({ id }: DeleteTaskProps) => {
     [],
   );
 
-  const removeTask = useUnit(taskRemoved);
+  const onRemove = useAction(removeTask);
 
   const onSubmit = () => {
-    removeTask(id);
+    onRemove(id);
     handleConfirmation();
   };