1
Этап 1: Техническое задание по реализации глобального сервиса модалок
Пишем глобальный сервис для модалок. Всегда открыта только одна модалка. Модалки хранятся в массиве и отображаются с помощью портала. Портал всегда отображает первую модалку в списке. Есть провайдер, следящий за состоянием модалок. Если очередь пустая, то портал ничего не рисует.
Предоставленный код и структура:
// */public/index.html
<body>
<div id="root"> ...react app <div>
<div id="popup-root"></div>
</body>// */services/ui-kit-provider.service.ts
export function UiKitProvider(): JSX.Element {
useEffect(() => {
uiKitService.init(...);
}, []);
return (
<>
{createPortal(...)}
</>
);
}// App.tsx
return(
<AppRouter…