{
- if (confirmation.confirmationProps?.onSubmit) {
- confirmation.confirmationProps.onSubmit();
+ onOk={async () => {
+ try {
+ await confirmation.confirmationProps?.onSubmit?.();
+ } finally {
+ setConfirmationModal('confirmation', undefined, undefined, false);
}
}}
onCancel={() => {
if (confirmation.confirmationProps?.onCancel) {
- confirmation.confirmationProps?.onCancel();
+ confirmation.confirmationProps.onCancel();
+ } else {
+ setConfirmationModal('confirmation', undefined, undefined, false);
}
- setConfirmationModal('confirmation');
}}
>
{(confirmation.confirmationProps?.text)
diff --git a/src/app/common/components/modals/InterestingFacts/FactsAdminModal/InterestingFactsAdminModal.component.tsx b/src/app/common/components/modals/InterestingFacts/FactsAdminModal/InterestingFactsAdminModal.component.tsx
index 6ddcb8f..66c6578 100644
--- a/src/app/common/components/modals/InterestingFacts/FactsAdminModal/InterestingFactsAdminModal.component.tsx
+++ b/src/app/common/components/modals/InterestingFacts/FactsAdminModal/InterestingFactsAdminModal.component.tsx
@@ -1,87 +1,205 @@
-import './InterestingFactsAdminModal.style.scss';
+import './InterestingFactsAdminModal.styles.scss';
+import '@features/AdminPage/AdminModal.styles.scss';
import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import CancelBtn from '@assets/images/utils/Cancel_btn.svg';
-import useMobx from '@stores/root-store';
+import useMobx, { useModalContext } from '@stores/root-store';
-import { Button, Form, Modal, Upload } from 'antd';
+import {
+ Button, Form, Input, Modal, message,
+} from 'antd';
import FormItem from 'antd/es/form/FormItem';
+import TextArea from 'antd/es/input/TextArea';
import { UploadFile } from 'antd/lib/upload/interface';
-import Image, { ImageCreate } from '@/models/media/image.model';
-import { Fact, FactCreate } from '@/models/streetcode/text-contents.model';
+import FileUploader from '@/app/common/components/FileUploader/FileUploader.component';
+import { FactAdminSavePayload } from '@/models/streetcode/text-contents.model';
-const InterestingFactsModal = () => {
- const { modalStore, factsStore, imagesStore: { getImageArray } } = useMobx();
- const { setModal, modalsState: { adminFacts } } = modalStore;
- const [factContent, setFactContent] = useState('');
+import INTERESTING_FACTS_ADMIN_MODAL_MESSAGES from './interesting-facts-admin-modal.constants';
+import useFactsAdminModalForm from './useFactsAdminModalForm.hook';
- const characterCount = factContent.length | 0;
+const SymbolsLeft = ({ current, max }: { current: number; max: number }) => (
+
+ {INTERESTING_FACTS_ADMIN_MODAL_MESSAGES.SYMBOLS_LEFT}
+ {' '}
+ {Math.max(0, max - current)}
+
+);
- const onFinish = (values: any) => {
- const uploadedFile = values.picture.file as UploadFile;
+const InterestingFactsAdminModal = () => {
+ const { factsStore } = useMobx();
+ const { modalStore: { setModal, modalsState: { adminFacts } } } = useModalContext();
- const image: ImageCreate = {
- blobName: uploadedFile.name ?? '',
- mimeType: uploadedFile.type ?? '',
- };
+ const editingFactId = adminFacts.fromCardId;
+ const isEditMode = typeof editingFactId === 'number' && editingFactId > 0;
+
+ const {
+ form,
+ imageId,
+ titleLength,
+ contentLength,
+ descriptionLength,
+ setTitleLength,
+ setContentLength,
+ setDescriptionLength,
+ onSuccessUpload,
+ onRemove,
+ validateImageSelected,
+ titleMax,
+ contentMax,
+ descriptionMax,
+ } = useFactsAdminModalForm(adminFacts.isOpen, editingFactId, factsStore);
+
+ const closeModal = () => setModal('adminFacts', undefined, false);
+
+ const onFinish = async (values: {
+ title: string;
+ factContent: string;
+ imageDescription?: string;
+ picture?: { fileList?: UploadFile[] };
+ }) => {
+ const streetcodeId = factsStore.adminStreetcodeId;
+ if (!streetcodeId) {
+ message.error(INTERESTING_FACTS_ADMIN_MODAL_MESSAGES.MISSING_STREETCODE);
+ return;
+ }
+
+ if (!validateImageSelected() || !imageId) {
+ return;
+ }
- const fact: FactCreate = {
- title: values.title,
- factContent,
- image,
+ const payload: FactAdminSavePayload = {
+ title: values.title.trim(),
+ factContent: values.factContent.trim(),
+ imageId,
+ imageDescription: values.imageDescription?.trim() || undefined,
};
- factsStore.addFactToCreate(fact);
+ const existingFactId = isEditMode ? editingFactId : undefined;
+
+ try {
+ await factsStore.saveAdminFact(
+ payload,
+ streetcodeId,
+ existingFactId,
+ );
+ message.success(INTERESTING_FACTS_ADMIN_MODAL_MESSAGES.SAVE_SUCCESS);
+ closeModal();
+ } catch {
+ message.error(factsStore.lastError ?? INTERESTING_FACTS_ADMIN_MODAL_MESSAGES.SAVE_FAILED);
+ }
};
return (
setModal('adminFacts')}
+ onCancel={closeModal}
footer={null}
maskClosable
centered
closeIcon={}
+ destroyOnClose
>
- ![\"SoftServe](\"https://raw.githubusercontent.com/ita-social-projects/StreetCode/master/StreerCodeLogo.jpg\" "\\"SoftServe")