From 690c18e6011f58ca853a03e230f287904c6e1de8 Mon Sep 17 00:00:00 2001
From: degradin <maks.demin2002@mail.ru>
Date: Wed, 7 May 2025 13:38:46 +0300
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B4=D0=BC=D0=B8=D0=BD=20=D0=BF=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BB=D1=8C=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BC=D0=B5=D0=B4=D0=B8=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Пользователи с ролью "editor" и "admin" могут создавать и в дальнейшем редактировать медиа
---
 src/pages/AdminMediaPage.jsx | 200 ++++++++++++++++++-----------------
 1 file changed, 104 insertions(+), 96 deletions(-)

diff --git a/src/pages/AdminMediaPage.jsx b/src/pages/AdminMediaPage.jsx
index dabfa4a..d760274 100644
--- a/src/pages/AdminMediaPage.jsx
+++ b/src/pages/AdminMediaPage.jsx
@@ -1,13 +1,19 @@
-import { useState } from "react";
+import React, { useEffect, useState } from 'react';
+import { useMedia } from '../contexts/MediaContext';
+import { listMedia } from '../services/supabase';
+import { mediaTypes } from '../services/mediaService';
+import { useAuth } from "../contexts/AuthContext";
 import { useNavigate } from "react-router-dom";
 import { createMedia } from "../services/supabase";
-import { useAuth } from "../contexts/AuthContext";
 
-function AdminMediaPage() {
+const AdminMediaPage = () => {
+  const [media, setMedia] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
   const navigate = useNavigate();
   const { currentUser, userProfile } = useAuth();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
 
   const [mediaData, setMediaData] = useState({
     title: "",
@@ -19,21 +25,36 @@ function AdminMediaPage() {
     is_published: false,
   });
 
-  // Check if user has admin/moderator privileges
-  if (
-    !userProfile?.role ||
-    !["admin", "moderator"].includes(userProfile.role)
-  ) {
+  // Проверка прав доступа
+  if (!userProfile?.role || !["admin", "editor"].includes(userProfile.role)) {
     return (
       <div className="pt-20 container-custom py-12">
         <div className="bg-status-error bg-opacity-20 text-status-error p-6 rounded-lg">
-          <h2 className="text-xl font-bold mb-2">Access Denied</h2>
-          <p>You don't have permission to access this page.</p>
+          <h2 className="text-xl font-bold mb-2">Доступ запрещен</h2>
+          <p>У вас нет прав для доступа к этой странице.</p>
         </div>
       </div>
     );
   }
 
+  useEffect(() => {
+    const fetchMedia = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await listMedia(null, 1, 100); // Получаем все медиа
+        setMedia(data || []);
+      } catch (err) {
+        console.error('Error fetching media:', err);
+        setError('Не удалось загрузить медиа');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMedia();
+  }, []); // Запускаем только при монтировании компонента
+
   const handleInputChange = (e) => {
     const { name, value, type, checked } = e.target;
     setMediaData((prev) => ({
@@ -53,161 +74,148 @@ function AdminMediaPage() {
         created_by: currentUser.id,
       });
 
-      navigate(`/media/${newMedia.id}`);
+      setMedia(prev => [newMedia, ...prev]);
+      setMediaData({
+        title: "",
+        type: "movie",
+        poster_url: "",
+        backdrop_url: "",
+        overview: "",
+        release_date: "",
+        is_published: false,
+      });
     } catch (err) {
-      setError("Failed to create media. Please try again.");
+      setError("Ошибка при создании медиа. Пожалуйста, попробуйте снова.");
       console.error("Error creating media:", err);
     } finally {
       setLoading(false);
     }
   };
 
+  if (loading) {
+    return <div className="text-center">Загрузка...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500">{error}</div>;
+  }
+
   return (
-    <div className="pt-20 container-custom py-12">
-      <h1 className="text-3xl font-bold mb-6">Create New Media</h1>
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-8">Управление медиа</h1>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {media.map((item) => (
+          <div key={`${item.id}-${item.type}`} className="bg-white rounded-lg shadow-md p-4">
+            <h3 className="text-lg font-semibold mb-2">{item.title}</h3>
+            <p className="text-gray-600 mb-2">Тип: {item.type}</p>
+            {item.rating && (
+              <p className="text-gray-600">Рейтинг: {item.rating}</p>
+            )}
+          </div>
+        ))}
+      </div>
 
-      {error && (
-        <div className="bg-status-error bg-opacity-20 text-status-error p-4 rounded-md mb-6">
-          {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="max-w-2xl">
-        <div className="space-y-6">
+      {/* Форма создания медиа */}
+      <div className="bg-campfire-charcoal p-6 rounded-lg mb-8">
+        <h2 className="text-2xl font-bold mb-4">Создать новое медиа</h2>
+        {error && (
+          <div className="bg-status-error bg-opacity-20 text-status-error p-4 rounded-lg mb-4">
+            {error}
+          </div>
+        )}
+        <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-campfire-light mb-2" htmlFor="title">
-              Title *
-            </label>
+            <label className="block text-sm font-medium mb-1">Название</label>
             <input
               type="text"
-              id="title"
               name="title"
               value={mediaData.title}
               onChange={handleInputChange}
-              className="input w-full"
               required
+              className="input w-full"
             />
           </div>
-
+          
           <div>
-            <label className="block text-campfire-light mb-2" htmlFor="type">
-              Type *
-            </label>
+            <label className="block text-sm font-medium mb-1">Тип</label>
             <select
-              id="type"
               name="type"
               value={mediaData.type}
               onChange={handleInputChange}
               className="input w-full"
-              required
             >
-              <option value="movie">Movie</option>
-              <option value="tv">TV Show</option>
-              <option value="game">Game</option>
+              <option value="movie">Фильм</option>
+              <option value="series">Сериал</option>
+              <option value="game">Игра</option>
             </select>
           </div>
-
+          
           <div>
-            <label
-              className="block text-campfire-light mb-2"
-              htmlFor="poster_url"
-            >
-              Poster URL
-            </label>
+            <label className="block text-sm font-medium mb-1">URL постера</label>
             <input
               type="url"
-              id="poster_url"
               name="poster_url"
               value={mediaData.poster_url}
               onChange={handleInputChange}
               className="input w-full"
-              placeholder="https://example.com/poster.jpg"
             />
           </div>
-
+          
           <div>
-            <label
-              className="block text-campfire-light mb-2"
-              htmlFor="backdrop_url"
-            >
-              Backdrop URL
-            </label>
+            <label className="block text-sm font-medium mb-1">URL фона</label>
             <input
               type="url"
-              id="backdrop_url"
               name="backdrop_url"
               value={mediaData.backdrop_url}
               onChange={handleInputChange}
               className="input w-full"
-              placeholder="https://example.com/backdrop.jpg"
             />
           </div>
-
+          
           <div>
-            <label
-              className="block text-campfire-light mb-2"
-              htmlFor="overview"
-            >
-              Overview *
-            </label>
+            <label className="block text-sm font-medium mb-1">Описание</label>
             <textarea
-              id="overview"
               name="overview"
               value={mediaData.overview}
               onChange={handleInputChange}
               className="input w-full h-32"
-              required
             />
           </div>
-
+          
           <div>
-            <label
-              className="block text-campfire-light mb-2"
-              htmlFor="release_date"
-            >
-              Release Date
-            </label>
+            <label className="block text-sm font-medium mb-1">Дата выхода</label>
             <input
               type="date"
-              id="release_date"
               name="release_date"
               value={mediaData.release_date}
               onChange={handleInputChange}
               className="input w-full"
             />
           </div>
-
+          
           <div className="flex items-center">
             <input
               type="checkbox"
-              id="is_published"
               name="is_published"
               checked={mediaData.is_published}
               onChange={handleInputChange}
-              className="w-4 h-4 text-campfire-amber bg-campfire-dark border-campfire-ash rounded focus:ring-campfire-amber"
+              className="mr-2"
             />
-            <label className="ml-2 text-campfire-light" htmlFor="is_published">
-              Publish immediately
-            </label>
+            <label className="text-sm font-medium">Опубликовать сразу</label>
           </div>
-
-          <div className="flex justify-end gap-4">
-            <button
-              type="button"
-              onClick={() => navigate(-1)}
-              className="btn-secondary"
-              disabled={loading}
-            >
-              Cancel
-            </button>
-            <button type="submit" className="btn-primary" disabled={loading}>
-              {loading ? "Creating..." : "Create Media"}
-            </button>
-          </div>
-        </div>
-      </form>
+          
+          <button
+            type="submit"
+            disabled={loading}
+            className="btn-primary w-full"
+          >
+            {loading ? "Создание..." : "Создать медиа"}
+          </button>
+        </form>
+      </div>
     </div>
   );
-}
+};
 
 export default AdminMediaPage;