Lab_6

src/components/EventForm.jsx

@@ -9,8 +9,32 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
     typeId: 1
   });
 
+  const [categories, setCategories] = useState([]);
+  const [types, setTypes] = useState([]);
+
+  // Загружаем категории и типы при монтировании
+  useEffect(() => {
+    const fetchCategoriesAndTypes = async () => {
+      try {
+        const [categoriesResponse, typesResponse] = await Promise.all([
+          fetch('http://localhost:8080/api/categories'),
+          fetch('http://localhost:8080/api/types')
+        ]);
+
+        const categoriesData = await categoriesResponse.json();
+        const typesData = await typesResponse.json();
+
+        setCategories(categoriesData);
+        setTypes(typesData);
+      } catch (error) {
+        console.error('Ошибка загрузки категорий и типов:', error);
+      }
+    };
+
+    fetchCategoriesAndTypes();
+  }, []);
+
   useEffect(() => {
-    console.log('📝 EventForm mounted with initialData:', initialData);
     if (initialData) {
       setFormData({
         title: initialData.title || '',
@@ -19,14 +43,6 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
         categoryId: initialData.categoryId || 1,
         typeId: initialData.typeId || 1
       });
-    } else {
-      setFormData({
-        title: '',
-        description: '',
-        imageUrl: '',
-        categoryId: 1,
-        typeId: 1
-      });
     }
   }, [initialData]);
 
@@ -34,14 +50,12 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
     const { name, value } = e.target;
     setFormData(prev => ({
       ...prev,
-      [name]: value
+      [name]: name === 'categoryId' || name === 'typeId' ? parseInt(value) : value
     }));
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log('📤 Form submitted with data:', formData);
-    
     const dataToSubmit = initialData 
       ? { ...formData, id: initialData.id } 
       : formData;
@@ -50,19 +64,15 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
   };
 
   const handleCancel = () => {
-    console.log('🚫 Form cancelled');
     onClose();
   };
 
   const handleOverlayClick = (e) => {
     if (e.target === e.currentTarget) {
-      console.log('🎯 Overlay clicked, closing form');
       onClose();
     }
   };
 
-  console.log('🎨 EventForm rendering, isFormOpen should be true');
-
   return (
     <div className="event-form-overlay" onClick={handleOverlayClick}>
       <div className="event-form-container" onClick={(e) => e.stopPropagation()}>
@@ -110,6 +120,7 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
             />
           </div>
 
+          {/* Выбор категории */}
           <div className="mb-3">
             <label htmlFor="eventCategory" className="form-label">Категория</label>
             <select
@@ -118,13 +129,18 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
               name="categoryId"
               value={formData.categoryId}
               onChange={handleChange}
+              required
             >
-              <option value={1}>Киберспорт</option>
-              <option value={2}>Музыка</option>
-              <option value={3}>Искусство</option>
+              <option value="">Выберите категорию</option>
+              {categories.map(category => (
+                <option key={category.id} value={category.id}>
+                  {category.name}
+                </option>
+              ))}
             </select>
           </div>
 
+          {/* Выбор типа */}
           <div className="mb-3">
             <label htmlFor="eventType" className="form-label">Тип</label>
             <select
@@ -133,10 +149,14 @@ const EventForm = ({ initialData, onSubmit, onClose }) => {
               name="typeId"
               value={formData.typeId}
               onChange={handleChange}
+              required
             >
-              <option value={1}>Трансляция</option>
-              <option value={2}>Фестиваль</option>
-              <option value={3}>Выставка</option>
+              <option value="">Выберите тип</option>
+              {types.map(type => (
+                <option key={type.id} value={type.id}>
+                  {type.name}
+                </option>
+              ))}
             </select>
           </div>