upload mission

src/views/mission/UploadMissionForm.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+import { uploadMission } from "../../redux/slices/missions";
+
+const UploadMissionForm: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { status, error } = useAppSelector(state => state.missions);
+
+  // Локальные состояния формы
+  const [name, setName] = useState("");
+  const [difficulty, setDifficulty] = useState(1);
+  const [tags, setTags] = useState<string[]>([]);
+  const [tagsValue, setTagsValue] = useState<string>("");
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file) return alert("Выберите файл миссии!");
+
+    try {
+      dispatch(uploadMission({ file, name, difficulty, tags }));
+      
+      alert("Миссия успешно загружена!");
+      setName("");
+      setDifficulty(1);
+      setTags([]);
+      setFile(null);
+    } catch (err) {
+      console.error(err);
+      alert("Ошибка при загрузке миссии: " + err);
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleTagsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTagsValue(e.target.value);
+    const value = e.target.value;
+    const tagsArray = value.split(",").map(tag => tag.trim()).filter(tag => tag);
+    setTags(tagsArray);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-md mx-auto p-4 border rounded">
+      <div className="mb-4">
+        <label className="block mb-1">Название миссии</label>
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+          className="w-full border px-2 py-1"
+          required
+        />
+      </div>
+
+      <div className="mb-4">
+        <label className="block mb-1">Сложность</label>
+        <input
+          type="number"
+          value={difficulty}
+          min={1}
+          max={5}
+          onChange={e => setDifficulty(Number(e.target.value))}
+          className="w-full border px-2 py-1"
+          required
+        />
+      </div>
+
+      <div className="mb-4">
+        <label className="block mb-1">Теги (через запятую)</label>
+        <input
+          type="text"
+          value={tagsValue}
+          onChange={handleTagsChange}
+          className="w-full border px-2 py-1"
+        />
+      </div>
+
+      <div className="mb-4">
+        <label className="block mb-1">Файл миссии</label>
+        <input type="file" onChange={handleFileChange} accept=".zip" required />
+      </div>
+
+      <button
+        type="submit"
+        disabled={status === "loading"}
+        className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
+      >
+        {status === "loading" ? "Загрузка..." : "Загрузить миссию"}
+      </button>
+
+      {status === "failed" && error && <p className="text-red-500 mt-2">{error}</p>}
+    </form>
+  );
+};
+
+export default UploadMissionForm;