add Languages components, add models, actions, effects

public/locales/en/languages.json

@@ -0,0 +1,21 @@
+{
+    "language_page_title": "Languages",
+    "add_language": "Add language",
+    "add_folder": "Add folder",
+    "add_word": "Add word",
+    "update_language": "Update language",
+    "update_folder": "Update folder",
+    "update_word": "Update word",
+    "remove_language": "Remove language",
+    "remove_folder": "Remove folder",
+    "remove_word": "Remove word",
+    "add_item": "Add",
+    "check_word": "Check as remembered",
+    "uncheck_word": "Check as forgotten",
+    "language_title": "Language title",
+    "folder_title": "Folder title",
+    "word_original": "Word in original",
+    "word_translations": "Translations",
+    "word_notice": "Notice",
+    "no_folder_selected": "Folder not selected"
+}

public/locales/ru/languages.json

@@ -0,0 +1,21 @@
+{
+    "language_page_title": "Языки",
+    "add_language": "Добавить язык",
+    "add_folder": "Добавить папку",
+    "add_word": "Добавить слово",
+    "update_language": "Изменить язык",
+    "update_folder": "Изменить папку",
+    "update_word": "Изменить слово",
+    "remove_language": "Удалить язык",
+    "remove_folder": "Удалить папку",
+    "remove_word": "Удалить слово",
+    "add_item": "Добавить",
+    "check_word": "Отметить как запомненное",
+    "uncheck_word": "Отметить как забытое",
+    "language_title": "Название языка",
+    "folder_title": "Название папки",
+    "word_original": "Слово в оригинале",
+    "word_translations": "Переводы",
+    "word_notice": "Заметка",
+    "no_folder_selected": "Папка не выбрана"
+}

src/app/action/languages/removeLanguage/removeLanguage.action.ts

@@ -0,0 +1,13 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageDeletedData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageDeletedData';
+
+
+export const removeLanguageAction = function (languageId: string) {
+    return request(
+        `v1/language/${ languageId }`,
+        { method: 'DELETE' },
+        isDomainNotificationLanguageDeletedData,
+    );
+};

src/app/action/languages/removeLanguageFolder/removeLanguageFolder.action.ts

@@ -0,0 +1,13 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageFolderDeletedData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageFolderDeletedData';
+
+
+export const removeLanguageFolderAction = function (folderId: string) {
+    return request(
+        `v1/language/folder/${ folderId }`,
+        { method: 'DELETE' },
+        isDomainNotificationLanguageFolderDeletedData,
+    );
+};

src/app/action/languages/removeLanguageWord/removeLanguageWord.action.ts

@@ -0,0 +1,13 @@
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageWordDeletedData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageWordDeletedData';
+
+
+export const removeLanguageWordAction = function (wordId: string) {
+    return request(
+        `v1/language/word/${ wordId }`,
+        { method: 'DELETE' },
+        isDomainNotificationLanguageWordDeletedData,
+    );
+};

src/app/action/languages/updateLanguage/updateLanguage.action.ts

@@ -0,0 +1,16 @@
+import {
+    DomainLanguageUpdateData,
+} from 'product-types/dist/language/DomainLanguageUpdateData';
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageUpdateData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageUpdateData';
+
+
+export const updateLanguageAction = function (languageId: string, updateData: DomainLanguageUpdateData) {
+    return request(
+        `v1/language/${ languageId }`,
+        { method: 'PATCH', body: JSON.stringify(updateData) },
+        isDomainNotificationLanguageUpdateData,
+    );
+};

src/app/action/languages/updateLanguageFolder/updateLanguageFolder.action.ts

@@ -0,0 +1,16 @@
+import {
+    DomainLanguageFolderUpdateData,
+} from 'product-types/dist/language/DomainLanguageFolderUpdateData';
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageFolderUpdateData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageFolderUpdateData';
+
+
+export const updateLanguageFolderAction = function (folderId: string, updateData: DomainLanguageFolderUpdateData) {
+    return request(
+        `v1/language/folder/${ folderId }`,
+        { method: 'PATCH', body: JSON.stringify(updateData) },
+        isDomainNotificationLanguageFolderUpdateData,
+    );
+};

src/app/action/languages/updateLanguageWord/updateLanguageWord.action.ts

@@ -0,0 +1,16 @@
+import {
+    DomainLanguageWordUpdateData,
+} from 'product-types/dist/language/DomainLanguageWordUpdateData';
+import { request } from '@/app/lib/fetch/request.ts';
+import {
+    isDomainNotificationLanguageWordUpdateData,
+} from 'product-types/dist/notification/notification-data-types/language/DomainNotificationLanguageWordUpdateData';
+
+
+export const updateLanguageWordAction = function (wordId: string, updateData: DomainLanguageWordUpdateData) {
+    return request(
+        `v1/language/word/${ wordId }`,
+        { method: 'PATCH', body: JSON.stringify(updateData) },
+        isDomainNotificationLanguageWordUpdateData,
+    );
+};

src/app/model/languages/languages.model.ts

@@ -20,11 +20,35 @@ import {
 import {
     getMyLanguageFolderWordsAction,
 } from '@/app/action/languages/getMyLanguageFolderWords/getMyLanguageFolderWords.action.ts';
+import {
+    removeLanguageWordAction,
+} from '@/app/action/languages/removeLanguageWord/removeLanguageWord.action.ts';
+import {
+    updateLanguageAction,
+} from '@/app/action/languages/updateLanguage/updateLanguage.action.ts';
+import {
+    updateLanguageFolderAction,
+} from '@/app/action/languages/updateLanguageFolder/updateLanguageFolder.action.ts';
+import {
+    updateLanguageWordAction,
+} from '@/app/action/languages/updateLanguageWord/updateLanguageWord.action.ts';
+import {
+    removeLanguageAction,
+} from '@/app/action/languages/removeLanguage/removeLanguage.action.ts';
+import {
+    removeLanguageFolderAction,
+} from '@/app/action/languages/removeLanguageFolder/removeLanguageFolder.action.ts';
 
 
 export const createLanguageEffect           = effect(createLanguageAction);
 export const createLanguageFolderEffect     = effect(createLanguageFolderAction);
 export const createLanguageWordEffect       = effect(createLanguageWordAction);
+export const updateLanguageEffect           = effect(updateLanguageAction);
+export const updateLanguageFolderEffect     = effect(updateLanguageFolderAction);
+export const updateLanguageWordEffect       = effect(updateLanguageWordAction);
+export const removeLanguageEffect           = effect(removeLanguageAction);
+export const removeLanguageFolderEffect     = effect(removeLanguageFolderAction);
+export const removeLanguageWordEffect       = effect(removeLanguageWordAction);
 export const getMyLanguagesEffect           = effect(getMyLanguagesAction);
 export const getMyLanguageFolderWordsEffect = effect(getMyLanguageFolderWordsAction);
 
@@ -60,6 +84,58 @@ export const $languagesList = store<Array<DomainLanguageWithFolders>>([])
                     : language,
             )
                : state;
+    })
+    .on(updateLanguageEffect, 'onSuccess', (state, { result }) => {
+        return state.map((language) => {
+            if (language.id === result.language.id) {
+                return { ...language, ...result.language };
+            }
+
+            return language;
+        });
+    })
+    .on(updateLanguageFolderEffect, 'onSuccess', (state, { result }) => {
+        return state.map((language) => {
+            if (language.id === result.language.id) {
+                const folders = language.folders.map((folder) => {
+                    if (folder.id === result.folder.id) {
+                        return { ...folder, ...result.folder };
+                    }
+
+                    return folder;
+                });
+
+                return { ...language, folders };
+            }
+
+            return language;
+        });
+    })
+    .on(removeLanguageEffect, 'onSuccess', (state, { result }) => {
+        return state.filter((language) => {
+            if (language.id === result.language.id) {
+                return false;
+            }
+
+            return true;
+        });
+    })
+    .on(removeLanguageFolderEffect, 'onSuccess', (state, { result }) => {
+        return state.map((language) => {
+            if (language.id === result.language.id) {
+                const folders = language.folders.filter((folder) => {
+                    if (folder.id === result.folder.id) {
+                        return false;
+                    }
+
+                    return true;
+                });
+
+                return { ...language, folders };
+            }
+
+            return language;
+        });
     });
 
 export const $currentFolderId = store<string>('')
@@ -76,4 +152,30 @@ export const $languageFolderWordsList = store<Array<DomainLanguageWord>>([])
             }
             return state;
         },
-    );
+    )
+    .on(updateLanguageWordEffect, 'onSuccess', (state, { result }) => {
+        if ($currentFolderId.get() === result.folder.id) {
+            return state.map((word) => {
+                if (word.id === result.word.id) {
+                    return { ...word, ...result.word };
+                }
+
+                return word;
+            });
+        }
+
+        return state;
+    })
+    .on(removeLanguageWordEffect, 'onSuccess', (state, { result }) => {
+        if ($currentFolderId.get() === result.folder.id) {
+            return state.filter((word) => {
+                if (word.id === result.word.id) {
+                    return false;
+                }
+
+                return true;
+            });
+        }
+
+        return state;
+    });

src/features/language/button/CreateLanguageFolderFormModalButton/ui/CreateLanguageFolderFormModalButton.tsx

@@ -0,0 +1,48 @@
+import { FC, memo } from 'react';
+import {
+    Button,
+    ButtonProps,
+} from '@/shared/ui-kit/buttons/Button/ui/Button.tsx';
+import {
+    useModalController,
+} from '@/shared/ui-kit/modal/Modal/hooks/useModalController.ts';
+import { Modal } from '@/shared/ui-kit/modal/Modal/ui/Modal.tsx';
+import { IoAddCircle } from 'react-icons/io5';
+import {
+    CreateLanguageFolderForm,
+} from '@/widgets/language/form/CreateLanguageFolderForm/ui/CreateLanguageFolderForm.tsx';
+import { PopOver } from '@/shared/ui-kit/modal/PopOver/ui/PopOver.tsx';
+import { useTranslation } from 'react-i18next';
+
+
+export type CreateLanguageFolderFormModalButtonProps =
+    {
+        languageId: string;
+    }
+    & ButtonProps;
+
+export const CreateLanguageFolderFormModalButton: FC<CreateLanguageFolderFormModalButtonProps> = memo(function CreateLanguageFolderFormModalButton (props) {
+    const { languageId, ...other } = props;
+    const modalController          = useModalController();
+    const { t }                    = useTranslation([ 'languages' ]);
+
+    return (
+        <>
+            <Modal controller={ modalController }>
+                <CreateLanguageFolderForm
+                    languageId={ languageId }
+                    onSubmitHandler={ () => modalController.setOpened(false) }
+                />
+            </Modal>
+            <PopOver popover={ t('add_folder') }>
+                <Button
+                    { ...other }
+                    onClick={ () => modalController.setOpened(true) }
+                    quad
+                >
+                    <IoAddCircle/>
+                </Button>
+            </PopOver>
+        </>
+    );
+});

src/features/language/button/CreateLanguageFormModalButton/ui/CreateLanguageFormModalButton.tsx

@@ -0,0 +1,45 @@
+import { FC, memo } from 'react';
+import {
+    Button,
+    ButtonProps,
+} from '@/shared/ui-kit/buttons/Button/ui/Button.tsx';
+import { IoAddCircle } from 'react-icons/io5';
+import { Modal } from '@/shared/ui-kit/modal/Modal/ui/Modal.tsx';
+import {
+    CreateLanguageForm,
+} from '@/widgets/language/form/CreateLanguageForm/ui/CreateLanguageForm.tsx';
+import {
+    useModalController,
+} from '@/shared/ui-kit/modal/Modal/hooks/useModalController.ts';
+import { PopOver } from '@/shared/ui-kit/modal/PopOver/ui/PopOver.tsx';
+import { useTranslation } from 'react-i18next';
+
+
+export type CreateLanguageFormModalButtonProps =
+    {}
+    & ButtonProps;
+
+export const CreateLanguageFormModalButton: FC<CreateLanguageFormModalButtonProps> = memo(function CreateLanguageFormModalButton (props) {
+    const { ...other }    = props;
+    const modalController = useModalController();
+    const { t }           = useTranslation([ 'languages' ]);
+
+    return (
+        <>
+            <Modal controller={ modalController }>
+                <CreateLanguageForm
+                    onSubmitHandler={ () => modalController.setOpened(false) }
+                />
+            </Modal>
+            <PopOver popover={ t('add_language') }>
+                <Button
+                    { ...other }
+                    onClick={ () => modalController.setOpened(true) }
+                    quad
+                >
+                    <IoAddCircle/>
+                </Button>
+            </PopOver>
+        </>
+    );
+});