Изменена модалка добавления миссии

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>