upload mission modal

2025-11-04 14:59:45 +03:00
parent 2e3a8779fc
commit 3cd8e14288
7 changed files with 380 additions and 250 deletions
--- a/src/views/home/missions/ModalCreate.tsx
+++ b/src/views/home/missions/ModalCreate.tsx
@@ -0,0 +1,160 @@
+import { FC, useEffect, useState } from 'react';
+import { Modal } from '../../../components/modal/Modal';
+import { PrimaryButton } from '../../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../../components/button/SecondaryButton';
+import { Input } from '../../../components/input/Input';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import {
+    setMissionsStatus,
+    uploadMission,
+} from '../../../redux/slices/missions';
+
+interface ModalCreateProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+}
+
+const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
+    const [name, setName] = useState<string>('');
+    const [difficulty, setDifficulty] = useState<number>(1);
+    const [file, setFile] = useState<File | null>(null);
+    const [tagInput, setTagInput] = useState<string>('');
+    const [tags, setTags] = useState<string[]>([]);
+
+    const status = useAppSelector((state) => state.missions.statuses.upload);
+    const dispatch = useAppDispatch();
+
+    const addTag = () => {
+        const newTag = tagInput.trim();
+        if (newTag && !tags.includes(newTag)) {
+            setTags([...tags, newTag]);
+            setTagInput('');
+        }
+    };
+
+    const removeTag = (tagToRemove: string) => {
+        setTags(tags.filter((tag) => tag !== tagToRemove));
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files[0]) {
+            setFile(e.target.files[0]);
+        }
+    };
+
+    const handleSubmit = async () => {
+        if (!file) return alert('Выберите файл миссии!');
+        dispatch(uploadMission({ file, name, difficulty, tags }));
+    };
+
+    useEffect(() => {
+        if (status === 'successful') {
+            alert('Миссия успешно загружена!');
+            setName('');
+            setDifficulty(1);
+            setTags([]);
+            setFile(null);
+            dispatch(setMissionsStatus({ key: 'upload', status: 'idle' }));
+            setActive(false);
+        }
+    }, [status]);
+
+    return (
+        <Modal
+            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
+            onOpenChange={setActive}
+            open={active}
+            backdrop="blur"
+        >
+            <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="В яблочко"
+                />
+
+                <Input
+                    name="difficulty"
+                    autocomplete="difficulty"
+                    className="mt-[10px]"
+                    type="number"
+                    label="Сложность"
+                    defaultState={'' + difficulty}
+                    onChange={(v) => setDifficulty(Number(v))}
+                    placeholder="1"
+                />
+
+                <div className="mt-4">
+                    <label className="block mb-2">Файл задачи</label>
+                    <input
+                        type="file"
+                        onChange={handleFileChange}
+                        accept=".zip"
+                        required
+                    />
+                </div>
+
+                {/* Теги */}
+                <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();
+                            }}
+                        />
+                        <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 className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text={status === 'loading' ? 'Загрузка...' : 'Создать'}
+                        disabled={status === 'loading'}
+                    />
+                    <SecondaryButton
+                        onClick={() => setActive(false)}
+                        text="Отмена"
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ModalCreate;