Main branch changes

2025-12-25 17:35:56 +03:00
parent 781945b358
commit 106510e3c9
4 changed files with 209 additions and 84 deletions
--- a/src/api/missionsUpload.ts
+++ b/src/api/missionsUpload.ts
@@ -0,0 +1,39 @@
+export interface UploadMissionRequest {
+    missionFile: File;
+    difficulty: number;
+    tags?: string[] | null;
+}
+
+export const buildUploadMissionFormData = (
+    request: UploadMissionRequest,
+): FormData => {
+    const formData = new FormData();
+
+    formData.append('missionFile', request.missionFile);
+    formData.append('difficulty', request.difficulty.toString());
+
+    // tags:
+    // - undefined => fromArchive (do not include tags key at all)
+    // - [] => empty list (not reliably representable via multipart without backend support)
+    // - [..] => custom tags, repeated keys
+    if (Array.isArray(request.tags)) {
+        request.tags.forEach((tag) => formData.append('tags', tag));
+    }
+
+    return formData;
+};
+
+export const getProblemXmlMissingNameMessage = (responseData: unknown) => {
+    const asText =
+        typeof responseData === 'string'
+            ? responseData
+            : responseData == null
+              ? ''
+              : JSON.stringify(responseData);
+
+    if (/problem\.xml/i.test(asText) || /Mission name was not found/i.test(asText)) {
+        return 'В архиве отсутствует имя в problem.xml';
+    }
+
+    return null;
+};
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -15,8 +15,8 @@ interface ModalProps {
 }

 const modalbgVariants = {
-    closed: { opacity: 0 },
-    open: { opacity: 1 },
+    closed: { opacity: 0, backdropFilter: 'blur(0px)' },
+    open: { opacity: 1, backdropFilter: 'blur(6px)' },
 };

 const modalVariants = {
@@ -47,13 +47,15 @@ export const Modal: React.FC<ModalProps> = ({
                        exit={modalbgVariants.closed}
                        transition={{ duration: 0.15 }}
                        className={cn(
-                            ' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-[background-color,backdrop-filter,opacity]  z-50',
-                            backdrop == 'blur' && open && 'backdrop-blur-sm',
-                            backdrop == 'opaque' &&
-                                open &&
-                                'bg-[#00000055] pointer-events-none',
+                            'fixed top-0 left-0 h-svh w-svw z-50',
+                            backdrop === 'opaque' && 'bg-[#00000055]',
                        )}
-                    ></motion.div>
+                        style={
+                            backdrop === 'blur'
+                                ? undefined
+                                : { backdropFilter: 'none' }
+                        }
+                    />
                )}
            </AnimatePresence>
            <div className="fixed top-0 left-0 h-svh w-svw flex items-center justify-center pointer-events-none  z-50">
--- a/src/redux/slices/missions.ts
+++ b/src/redux/slices/missions.ts
@@ -1,6 +1,11 @@
 import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 import axios from '../../axios';
 import { toastError } from '../../lib/toastNotification';
+import {
+    buildUploadMissionFormData,
+    getProblemXmlMissingNameMessage,
+    UploadMissionRequest,
+} from '../../api/missionsUpload';

 // ─── Типы ────────────────────────────────────────────

@@ -148,27 +153,45 @@ export const fetchMyMissions = createAsyncThunk(
 export const uploadMission = createAsyncThunk(
    'missions/uploadMission',
    async (
-        {
-            file,
-            name,
-            difficulty,
-            tags,
-        }: { file: File; name: string; difficulty: number; tags: string[] },
+        request: UploadMissionRequest,
        { rejectWithValue },
    ) => {
        try {
-            const formData = new FormData();
-            formData.append('MissionFile', file);
-            formData.append('Name', name);
-            formData.append('Difficulty', difficulty.toString());
-            tags.forEach((tag) => formData.append('Tags', tag));
+            const formData = buildUploadMissionFormData(request);

            const response = await axios.post('/missions/upload', formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
            });
            return response.data; // Mission
        } catch (err: any) {
-            return rejectWithValue(err.response?.data);
+            const status = err?.response?.status;
+            const responseData = err?.response?.data;
+
+            if (status === 400) {
+                const msg = getProblemXmlMissingNameMessage(responseData);
+                if (msg) {
+                    return rejectWithValue({
+                        errors: {
+                            missionFile: [msg],
+                        },
+                    });
+                }
+            }
+
+            if (responseData?.errors) {
+                return rejectWithValue(responseData);
+            }
+
+            const fallback =
+                typeof responseData === 'string'
+                    ? responseData
+                    : 'Не удалось загрузить миссию';
+
+            return rejectWithValue({
+                errors: {
+                    general: [fallback],
+                },
+            });
        }
    },
 );
@@ -351,17 +374,19 @@ const missionsSlice = createSlice({
            (state, action: PayloadAction<any>) => {
                state.statuses.upload = 'failed';

-                const errors = action.payload.errors as Record<
-                    string,
-                    string[]
-                >;
-                Object.values(errors).forEach((messages) => {
-                    messages.forEach((msg) => {
-                        toastError(msg);
+                const errors = action.payload?.errors as
+                    | Record<string, string[]>
+                    | undefined;
+                if (errors) {
+                    Object.values(errors).forEach((messages) => {
+                        messages.forEach((msg) => {
+                            toastError(msg);
+                        });
                    });
-                });
-
-                state.create.errors = errors;
+                    state.create.errors = errors;
+                } else {
+                    toastError('Не удалось загрузить миссию');
+                }
            },
        );

--- a/src/views/home/missions/ModalCreate.tsx
+++ b/src/views/home/missions/ModalCreate.tsx
@@ -12,6 +12,7 @@ import { toastSuccess } from '../../../lib/toastNotification';
 import { cn } from '../../../lib/cn';
 import { Link } from 'react-router-dom';
 import { NumberInput } from '../../../components/input/NumberInput';
+import { DropDownList, DropDownListItem } from '../../../components/input/DropDownList';

 interface ModalCreateProps {
    active: boolean;
@@ -19,23 +20,37 @@ interface ModalCreateProps {
 }

 const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
-    const [name, setName] = useState<string>('');
+    type TagsMode = 'fromArchive' | 'none' | 'custom';
    const [difficulty, setDifficulty] = useState<number>(1);
    const [file, setFile] = useState<File | null>(null);
    const [tagInput, setTagInput] = useState<string>('');
    const [tags, setTags] = useState<string[]>([]);
+    const [tagsMode, setTagsMode] = useState<TagsMode>('fromArchive');

    const status = useAppSelector((state) => state.missions.statuses.upload);
    const dispatch = useAppDispatch();

    const [clickSubmit, setClickSubmit] = useState<boolean>(false);

-    const addTag = () => {
-        const newTag = tagInput.trim();
-        if (newTag && !tags.includes(newTag)) {
-            setTags([...tags, newTag]);
-            setTagInput('');
+    const normalizeTags = (raw: string[]): string[] => {
+        const result: string[] = [];
+        const seen = new Set<string>();
+        for (const t of raw) {
+            const trimmed = t.trim();
+            if (!trimmed) continue;
+            const key = trimmed.toLowerCase();
+            if (seen.has(key)) continue;
+            seen.add(key);
+            result.push(trimmed);
        }
+        return result;
+    };
+
+    const addTag = () => {
+        const parts = tagInput.split(',').map((v) => v.trim());
+        const next = normalizeTags([...tags, ...parts]);
+        setTags(next);
+        setTagInput('');
    };

    const removeTag = (tagToRemove: string) => {
@@ -51,16 +66,27 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
    const handleSubmit = async () => {
        setClickSubmit(true);
        if (!file) return;
-        dispatch(uploadMission({ file, name, difficulty, tags }));
+
+        const payloadTags =
+            tagsMode === 'custom' ? normalizeTags(tags) : undefined;
+
+        dispatch(
+            uploadMission({
+                missionFile: file,
+                difficulty,
+                tags: payloadTags,
+            }),
+        );
    };

    useEffect(() => {
        if (status === 'successful') {
            toastSuccess('Миссия создана!');
-            setName('');
            setDifficulty(1);
            setTags([]);
            setFile(null);
+            setTagInput('');
+            setTagsMode('fromArchive');
            dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
            setActive(false);
        }
@@ -73,12 +99,32 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
        dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
    }, [active]);

-    const getNameErrorMessage = (): string => {
+    const getDifficultyErrorMessage = (): string => {
        if (!clickSubmit) return '';
-        if (name == '') return 'Поле не может быть пустым';
+        if (!Number.isFinite(difficulty) || difficulty < 1)
+            return 'Укажите сложность (минимум 1)';
        return '';
    };

+    const tagsModeItems: DropDownListItem[] = [
+        { text: 'Теги: из архива', value: 'fromArchive' },
+        { text: 'Теги: без тегов', value: 'none' },
+        { text: 'Теги: свои', value: 'custom' },
+    ];
+
+    const isTagsMode = (v: string): v is TagsMode =>
+        v === 'fromArchive' || v === 'none' || v === 'custom';
+
+    const currentTagsModeItem =
+        tagsModeItems.find((i) => i.value === tagsMode) ?? tagsModeItems[0];
+
+    useEffect(() => {
+        if (tagsMode === 'none') {
+            setTags([]);
+            setTagInput('');
+        }
+    }, [tagsMode]);
+
    return (
        <Modal
            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
@@ -89,18 +135,6 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
            <div className="w-[500px]">
                <div className="font-bold text-[30px]">Добавить задачу</div>

-                <Input
-                    name="name"
-                    autocomplete="name"
-                    className="mt-[10px]"
-                    type="text"
-                    label="Название"
-                    defaultState={name}
-                    onChange={setName}
-                    placeholder="В яблочко"
-                    error={getNameErrorMessage()}
-                />
-
                <NumberInput
                    name="difficulty"
                    className="mt-[10px]"
@@ -110,6 +144,7 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
                    maxValue={3500}
                    onChange={(v) => setDifficulty(v)}
                    placeholder="1"
+                    error={getDifficultyErrorMessage()}
                />

                <div className="mt-4">
@@ -137,42 +172,66 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {

                {/* Теги */}
                <div className="mb-[50px] max-w-[600px]">
-                    <div className="grid grid-cols-[1fr,140px] items-end gap-2">
-                        <Input
-                            name="articleTag"
-                            autocomplete="articleTag"
-                            className="mt-[20px] max-w-[600px]"
-                            type="text"
-                            label="Теги"
-                            onChange={(v) => setTagInput(v)}
-                            defaultState={tagInput}
-                            placeholder="arrays"
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter') addTag();
+                    <div className="mt-[20px]">
+                        <div className="text-[18px] text-liquid-white font-medium h-[23px] mb-[10px]">
+                            Режим тегов
+                        </div>
+                        <DropDownList
+                            items={tagsModeItems}
+                            defaultState={currentTagsModeItem}
+                            onChange={(v) => {
+                                if (isTagsMode(v)) setTagsMode(v);
                            }}
+                            weight="w-full"
                        />
-                        <PrimaryButton
-                            onClick={addTag}
-                            text="Добавить"
-                            className="h-[40px] w-[140px]"
-                        />
-                    </div>
-                    <div className="flex flex-wrap gap-[10px] mt-2">
-                        {tags.map((tag) => (
-                            <div
-                                key={tag}
-                                className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
-                            >
-                                <span>{tag}</span>
-                                <button
-                                    onClick={() => removeTag(tag)}
-                                    className="text-liquid-red font-bold ml-[5px]"
-                                >
-                                    ×
-                                </button>
+                        {tagsMode === 'none' && (
+                            <div className="text-liquid-red text-[14px] mt-[8px] whitespace-pre-line">
+                                Пустой список тегов сейчас не поддерживается в multipart.
+                                Будет использован режим “из архива”.
                            </div>
-                        ))}
+                        )}
                    </div>
+
+                    {tagsMode === 'custom' && (
+                        <>
+                            <div className="grid grid-cols-[1fr,140px] items-end gap-2">
+                                <Input
+                                    name="missionTags"
+                                    autocomplete="missionTags"
+                                    className="mt-[20px] max-w-[600px]"
+                                    type="text"
+                                    label="Теги (через запятую)"
+                                    onChange={(v) => setTagInput(v)}
+                                    defaultState={tagInput}
+                                    placeholder="arrays, dp"
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter') addTag();
+                                    }}
+                                />
+                                <PrimaryButton
+                                    onClick={addTag}
+                                    text="Добавить"
+                                    className="h-[40px] w-[140px]"
+                                />
+                            </div>
+                            <div className="flex flex-wrap gap-[10px] mt-2">
+                                {tags.map((tag) => (
+                                    <div
+                                        key={tag}
+                                        className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
+                                    >
+                                        <span>{tag}</span>
+                                        <button
+                                            onClick={() => removeTag(tag)}
+                                            className="text-liquid-red font-bold ml-[5px]"
+                                        >
+                                            ×
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </>
+                    )}
                </div>

                <div>