Добавляет пагинацию

src/entities/task/model/index.ts

@@ -1,2 +1,3 @@
 export * as taskModel from './tasks';
 export * as taskQueryModel from './query-config';
+export * as taskPaginationModel from './pagination-config';

src/entities/task/model/pagination-config.ts

@@ -0,0 +1,39 @@
+import { createStore, createEvent } from 'effector';
+import { useUnit } from 'effector-react';
+import { persist } from 'effector-storage';
+import { createStorageAdapter } from '@/shared/utils';
+
+export interface PaginationConfig {
+  page: number;
+  size: number;
+}
+
+const setPaginationConfig = createEvent<Partial<PaginationConfig>>();
+
+const resetPaginationConfig = createEvent();
+
+export const $paginationConfig = createStore<PaginationConfig>({
+  page: 1,
+  size: 10,
+})
+  .on(setPaginationConfig, (store, payload) => ({ ...store, ...payload }))
+  .reset(resetPaginationConfig);
+
+persist({
+  key: 'pagination-config',
+  store: $paginationConfig,
+  adapter: createStorageAdapter(),
+});
+
+const usePagination = () => {
+  return useUnit($paginationConfig);
+};
+
+export const events = {
+  setPaginationConfig,
+  resetPaginationConfig,
+};
+
+export const selectors = {
+  usePagination,
+};

src/entities/task/model/tasks.ts

@@ -3,6 +3,7 @@ import { useUnit } from 'effector-react';
 import { persist } from 'effector-storage';
 import { nanoid } from 'nanoid';
 import { $queryConfig } from './query-config';
+import { $paginationConfig } from './pagination-config';
 import { compareText, compareExpiresIn } from '../utils';
 import {
   createStorageAdapter,
@@ -110,14 +111,28 @@ export const $tasksFiltered = combine(
     ),
 );
 
+export const $tasksPaged = combine(
+  $tasksFiltered,
+  $paginationConfig,
+  (tasks, pagination) => {
+    const offset = (pagination.page - 1) * pagination.size;
+
+    return tasks.slice(offset, offset + pagination.size);
+  },
+);
+
 persist({
   key: 'tasks',
   store: $tasks,
   adapter: createStorageAdapter(),
 });
 
 const useTasks = () => {
-  return useUnit($tasksFiltered);
+  return useUnit($tasksPaged);
+};
+
+const useTasksCount = () => {
+  return useUnit($tasksFiltered).length;
 };
 
 const useTask = (id?: TaskId) => {
@@ -142,5 +157,6 @@ export const events = {
 
 export const selectors = {
   useTasks,
+  useTasksCount,
   useTask,
 };

src/entities/task/ui/task-form/ui/TaskForm.tsx

@@ -85,6 +85,7 @@ export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
                   style={{ display: form.values.title ? undefined : 'none' }}
                 />
               }
+              data-autofocus
               {...form.getInputProps('title')}
             />
           </Grid.Col>

src/features/task/ui/index.ts

@@ -1,5 +1,6 @@
 export * from './tasks-filter';
 export * from './filtered-tasks';
+export * from './tasks-pagination';
 export * from './task-view';
 export * from './task-create-form';
 export * from './task-edit-form';

src/features/task/ui/tasks-pagination/const.ts

@@ -0,0 +1,2 @@
+export const pageSizes = ['10', '25', '50'];
+export const defaultPageSize = 10;

src/features/task/ui/tasks-pagination/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/features/task/ui/tasks-pagination/ui/TasksPagination.tsx

@@ -0,0 +1,43 @@
+import { Center, Group, Pagination, SegmentedControl } from '@mantine/core';
+import { pageSizes, defaultPageSize } from '../const';
+import { taskModel, taskPaginationModel } from '@/entities/task';
+import { tryParseInt } from '@/shared/utils';
+
+export const TasksPagination = () => {
+  const count = taskModel.selectors.useTasksCount();
+  const pagination = taskPaginationModel.selectors.usePagination();
+  const page = pagination.page ?? 1;
+  const size = pagination.size ?? defaultPageSize;
+  const total = Math.ceil(count / size);
+
+  const onPageChange = (value: number) => {
+    taskPaginationModel.events.setPaginationConfig({
+      page: value,
+    });
+  };
+
+  const onSizeChange = (value: string) => {
+    taskPaginationModel.events.setPaginationConfig({
+      page: 1,
+      size: tryParseInt(value, defaultPageSize),
+    });
+  };
+
+  if (count <= defaultPageSize) {
+    return null;
+  }
+
+  return (
+    <Center>
+      <Group>
+        <Pagination value={page} total={total} onChange={onPageChange} />
+        <SegmentedControl
+          value={size.toString()}
+          defaultValue={defaultPageSize.toString()}
+          data={pageSizes}
+          onChange={onSizeChange}
+        />
+      </Group>
+    </Center>
+  );
+};

src/features/task/ui/tasks-pagination/ui/index.ts

@@ -0,0 +1 @@
+export * from './TasksPagination';

src/shared/utils/data.ts

@@ -9,6 +9,27 @@ export const toDate = (value: Date | string) => {
   return new Date();
 };
 
+export const tryParseInt = (
+  value: number | string | null | undefined,
+  defaultValue = 0,
+  radix?: number,
+) => {
+  if (Number.isNaN(value) || value === null || value === undefined) {
+    return defaultValue;
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  const parsedValue = parseInt(value, radix);
+  if (Number.isNaN(parsedValue)) {
+    return defaultValue;
+  }
+
+  return parsedValue;
+};
+
 export const customCompareIf = <V, N>(
   value: V,
   needle: N | undefined,

src/widgets/task/ui/tasks-list/ui/TasksList.tsx

@@ -1,6 +1,6 @@
 import { Stack, Button } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
-import { TasksFilter, FilteredTasks } from '@/features/task';
+import { TasksFilter, FilteredTasks, TasksPagination } from '@/features/task';
 import { openCreateTaskModal } from '@/entities/task';
 
 export const TasksList = () => {
@@ -16,7 +16,9 @@ export const TasksList = () => {
         Добавить задачу
       </Button>
       <TasksFilter />
+      <TasksPagination />
       <FilteredTasks />
+      <TasksPagination />
     </Stack>
   );
 };