@astral/features

Сущности общей предметной области Астрал.Софт.

Сервисы

$3

Цель сервиса: предоставить централизованное и декларативное управление компонентом AutoSaveIndicator

Область применения: screens с автоматическим сохранением изменений на ней
(пример: форма с сохранением при вводе)

#### Составные части
AutoSaveIndicatorStore - mobx-стор, использующий внутри AutoSaveIndicatorService и дающий публичное API
для использования.

useInitAutoSaveIndicatorStore - хук для инициализации стора.

#### API AutoSaveIndicatorStore
Свойства:

- `values - пропсы, необходимые для работы компонента
- isVisible - флаг, определяющий видимость индикатора на странице

Методы:

show - Установка значения isVisible в true

hide - Установка значения isVisible в false

progress - Установка индикации автосохранения (аналог setIsLoading)

success - Установка успешного состояния автосохранения

setError - Установка состояния ошибки.

Параметры метода:
- message - сообщение об ошибке, которое будет отображаться над кнопкой повторения запроса
- onRetry - коллбэк, который будет выполнен при нажатии на кнопку повторения запроса.

reset - Сброс состояния стора до изначального.

#### Инициализация

1. Необходимо создать инстанс AutoSaveIndicatorStore,

`
shared/stores

import { AutoSaveIndicatorStore } from "@astral/features"

export const autoSaveIndicatorInstance = new AutoSaveIndicatorStore();
`

2. Вызвать хук на скрине, где предполагается использование индикатора автосохранения и передать в него созданный инстанс

Внутри данного хука содержится следующая логика:
- При монтировании вызывается метод show.
- При размонтировании вызывается метод hide и reset. Вызов последнего необходим, так как предполагается использование
данного стора в качестве синглтона

` ts
screen

import { autoSaveIndicatorInstance } from "@example/shared"

export const BasicUsageScreen = observer(() => {
const [autoSaveIndicatorStore] = useState(autoSaveIndicatorStoreInstance);

useInitAutoSaveIndicatorStore(autoSaveIndicatorStore);

return (
header={{ title: 'Example Screen' }}
content={{ children: null }}
/>
);
});
`

Пример использования AutoSaveIndicator на лэйауте будет выглядеть следующим образом:

` tsx
modules/layout/features/MainLayout/Header

import { autoSaveIndicatorStoreInstance } from "@example/shared"

export const Header = observer(() => {
const [autoSaveIndicatorStore] = useState(autoSaveIndicatorStoreInstance);

return (
autoSaveIndicatorStore.isVisible && (

)
);
});
`

#### Использование

` ts
import {
type AutoSaveIndicatorStore,
autoSaveIndicatorStoreInstance,
} from '@example/shared';

class UIStore {
constructor(
private readonly repository: Repository,
private readonly autosaveIndicatorStore: AutoSaveIndicatorStore,
) {
makeAutoObservable(
this,
{},
{
autoBind: true,
},
);
}

public makeMutation = (requestParam: string) => {
this.autosaveIndicatorStore.progress();

this.repository.makeMutation
.async({
requestParam,
})
.then(() => {
this.autosaveIndicatorStore.success()
})
.catch((e) => {
this.autosaveIndicatorStore.setError({
message: 'Что-то пошло не так',
onRetry: () => {
this.makeMutation(requestParam);
},
});
});
};
}

export const createUIStore = (repository: Repository) =>
new UIStore(repository, autoSaveIndicatorStoreInstance);
``