From 6f224ed1ef6d8b59ee1020042b484cd8493c9ae1 Mon Sep 17 00:00:00 2001
From: degradin <maks.demin2002@mail.ru>
Date: Wed, 7 May 2025 15:21:19 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminMediaPage.jsx | 311 ++++++++++++++---------------------
 src/pages/ProfilePage.jsx    | 211 ++++++++++++------------
 src/pages/RegisterPage.jsx   |   4 +-
 3 files changed, 232 insertions(+), 294 deletions(-)

diff --git a/src/pages/AdminMediaPage.jsx b/src/pages/AdminMediaPage.jsx
index d760274..5505a8d 100644
--- a/src/pages/AdminMediaPage.jsx
+++ b/src/pages/AdminMediaPage.jsx
@@ -1,219 +1,150 @@
-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 React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../services/supabase';
+import MediaForm from '../components/admin/MediaForm';
 
 const AdminMediaPage = () => {
+  const navigate = useNavigate();
+  const { user, userProfile, loading: authLoading } = useAuth();
   const [media, setMedia] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const navigate = useNavigate();
-  const { currentUser, userProfile } = useAuth();
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-
-  const [mediaData, setMediaData] = useState({
-    title: "",
-    type: "movie",
-    poster_url: "",
-    backdrop_url: "",
-    overview: "",
-    release_date: "",
-    is_published: false,
-  });
-
-  // Проверка прав доступа
-  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">Доступ запрещен</h2>
-          <p>У вас нет прав для доступа к этой странице.</p>
-        </div>
-      </div>
-    );
-  }
+  const [showForm, setShowForm] = useState(false);
 
   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);
-      }
-    };
+    console.log('AdminMediaPage mounted, user:', user);
+    
+    if (!authLoading && !user) {
+      console.log('No user, redirecting to login');
+      navigate('/login');
+      return;
+    }
 
-    fetchMedia();
-  }, []); // Запускаем только при монтировании компонента
+    if (userProfile?.role !== 'admin') {
+      console.log('Access denied');
+      navigate('/');
+      return;
+    }
 
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setMediaData((prev) => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
+    loadMedia();
+  }, [user, userProfile, authLoading, navigate]);
 
+  const loadMedia = async () => {
     try {
-      const newMedia = await createMedia({
-        ...mediaData,
-        created_by: currentUser.id,
-      });
+      setLoading(true);
+      const { data, error } = await supabase
+        .from('media')
+        .select('*')
+        .order('created_at', { ascending: false });
 
-      setMedia(prev => [newMedia, ...prev]);
-      setMediaData({
-        title: "",
-        type: "movie",
-        poster_url: "",
-        backdrop_url: "",
-        overview: "",
-        release_date: "",
-        is_published: false,
-      });
+      if (error) throw error;
+
+      setMedia(data || []);
     } catch (err) {
-      setError("Ошибка при создании медиа. Пожалуйста, попробуйте снова.");
-      console.error("Error creating media:", err);
+      console.error('Error loading media:', err);
+      setError(err.message);
     } finally {
       setLoading(false);
     }
   };
 
-  if (loading) {
-    return <div className="text-center">Загрузка...</div>;
+  const handleDelete = async (id) => {
+    if (!window.confirm('Вы уверены, что хотите удалить этот медиа-контент?')) {
+      return;
+    }
+
+    try {
+      const { error } = await supabase
+        .from('media')
+        .delete()
+        .eq('id', id);
+
+      if (error) throw error;
+
+      setMedia(media.filter(item => item.id !== id));
+    } catch (err) {
+      console.error('Error deleting media:', err);
+      setError(err.message);
+    }
+  };
+
+  if (authLoading) {
+    return <div className="flex justify-center items-center h-screen">Загрузка...</div>;
   }
 
-  if (error) {
-    return <div className="text-red-500">{error}</div>;
+  if (!user || userProfile?.role !== 'admin') {
+    return null;
   }
 
   return (
-    <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 className="container-custom pt-20">
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-campfire-amber">Управление медиа</h1>
+        <button
+          onClick={() => setShowForm(true)}
+          className="btn-primary"
+        >
+          Добавить медиа
+        </button>
       </div>
 
-      {/* Форма создания медиа */}
-      <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-sm font-medium mb-1">Название</label>
-            <input
-              type="text"
-              name="title"
-              value={mediaData.title}
-              onChange={handleInputChange}
-              required
-              className="input w-full"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">Тип</label>
-            <select
-              name="type"
-              value={mediaData.type}
-              onChange={handleInputChange}
-              className="input w-full"
+      {error && (
+        <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg mb-6">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="text-center py-8">Загрузка...</div>
+      ) : media.length === 0 ? (
+        <div className="text-center py-8 text-campfire-light">
+          Медиа-контент не найден
+        </div>
+      ) : (
+        <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-campfire-charcoal rounded-lg overflow-hidden border border-campfire-ash/20"
             >
-              <option value="movie">Фильм</option>
-              <option value="series">Сериал</option>
-              <option value="game">Игра</option>
-            </select>
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">URL постера</label>
-            <input
-              type="url"
-              name="poster_url"
-              value={mediaData.poster_url}
-              onChange={handleInputChange}
-              className="input w-full"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">URL фона</label>
-            <input
-              type="url"
-              name="backdrop_url"
-              value={mediaData.backdrop_url}
-              onChange={handleInputChange}
-              className="input w-full"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">Описание</label>
-            <textarea
-              name="overview"
-              value={mediaData.overview}
-              onChange={handleInputChange}
-              className="input w-full h-32"
-            />
-          </div>
-          
-          <div>
-            <label className="block text-sm font-medium mb-1">Дата выхода</label>
-            <input
-              type="date"
-              name="release_date"
-              value={mediaData.release_date}
-              onChange={handleInputChange}
-              className="input w-full"
-            />
-          </div>
-          
-          <div className="flex items-center">
-            <input
-              type="checkbox"
-              name="is_published"
-              checked={mediaData.is_published}
-              onChange={handleInputChange}
-              className="mr-2"
-            />
-            <label className="text-sm font-medium">Опубликовать сразу</label>
-          </div>
-          
-          <button
-            type="submit"
-            disabled={loading}
-            className="btn-primary w-full"
-          >
-            {loading ? "Создание..." : "Создать медиа"}
-          </button>
-        </form>
-      </div>
+              {item.poster_path && (
+                <img
+                  src={item.poster_path}
+                  alt={item.title}
+                  className="w-full h-48 object-cover"
+                />
+              )}
+              <div className="p-4">
+                <h3 className="text-xl font-semibold text-campfire-amber mb-2">
+                  {item.title}
+                </h3>
+                <p className="text-campfire-light mb-4">
+                  {item.type === 'movie' ? 'Фильм' : 'Сериал'}
+                </p>
+                <div className="flex justify-end space-x-2">
+                  <button
+                    onClick={() => handleDelete(item.id)}
+                    className="text-red-500 hover:text-red-400"
+                  >
+                    Удалить
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showForm && (
+        <MediaForm
+          onClose={() => setShowForm(false)}
+          onSuccess={() => {
+            setShowForm(false);
+            loadMedia();
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
index 0a7ce16..726194a 100644
--- a/src/pages/ProfilePage.jsx
+++ b/src/pages/ProfilePage.jsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useAuth } from "../contexts/AuthContext";
-import { getUserProfile, getUserReviews } from "../services/supabase";
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { supabase } from '../services/supabase';
 import {
   FiEdit,
   FiSettings,
@@ -14,52 +14,59 @@ import {
 import ReviewCard from "../components/reviews/ReviewCard";
 import RatingChart from "../components/reviews/RatingChart";
 
-function ProfilePage() {
-  const { userId } = useParams();
-  const navigate = useNavigate();
-  const { currentUser, userProfile } = useAuth();
+const ProfilePage = () => {
   const [profile, setProfile] = useState(null);
   const [reviews, setReviews] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const { username } = useParams();
+  const { user } = useAuth();
 
   useEffect(() => {
     const loadProfile = async () => {
       try {
         setLoading(true);
         setError(null);
-        
-        // Если userId не указан, показываем профиль текущего пользователя
-        const targetUserId = userId || currentUser?.id;
-        if (!targetUserId) {
-          navigate('/login');
-          return;
-        }
 
-        const profileData = await getUserProfile(targetUserId);
+        // Получаем профиль по username
+        const { data: profileData, error: profileError } = await supabase
+          .from('users')
+          .select('*')
+          .eq('username', username)
+          .single();
+
+        if (profileError) throw profileError;
         setProfile(profileData);
 
-        const reviewsData = await getUserReviews(targetUserId);
+        // Получаем отзывы пользователя
+        const { data: reviewsData, error: reviewsError } = await supabase
+          .from('reviews')
+          .select(`
+            *,
+            media(title, type, poster_url)
+          `)
+          .eq('user_id', profileData.id)
+          .order('created_at', { ascending: false });
+
+        if (reviewsError) throw reviewsError;
         setReviews(reviewsData);
       } catch (err) {
-        setError("Ошибка при загрузке профиля");
-        console.error("Error loading profile:", err);
+        console.error('Error loading profile:', err);
+        setError('Не удалось загрузить профиль');
       } finally {
         setLoading(false);
       }
     };
 
     loadProfile();
-  }, [userId, currentUser, navigate]);
+  }, [username]);
 
   if (loading) {
     return (
-      <div className="pt-20 container-custom py-12">
-        <div className="animate-pulse">
-          <div className="h-32 bg-campfire-charcoal rounded-lg mb-6"></div>
-          <div className="space-y-4">
-            <div className="h-4 bg-campfire-charcoal rounded w-1/4"></div>
-            <div className="h-4 bg-campfire-charcoal rounded w-1/2"></div>
+      <div className="min-h-screen bg-campfire-dark pt-20">
+        <div className="container-custom py-12">
+          <div className="flex justify-center items-center h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
           </div>
         </div>
       </div>
@@ -68,10 +75,11 @@ function ProfilePage() {
 
   if (error) {
     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">Ошибка</h2>
-          <p>{error}</p>
+      <div className="min-h-screen bg-campfire-dark pt-20">
+        <div className="container-custom py-12">
+          <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
+            {error}
+          </div>
         </div>
       </div>
     );
@@ -79,95 +87,94 @@ function ProfilePage() {
 
   if (!profile) {
     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">Профиль не найден</h2>
-          <p>Пользователь с таким ID не существует.</p>
+      <div className="min-h-screen bg-campfire-dark pt-20">
+        <div className="container-custom py-12">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-campfire-light mb-4">
+              Профиль не найден
+            </h1>
+            <Link to="/" className="text-campfire-amber hover:text-campfire-ember">
+              Вернуться на главную
+            </Link>
+          </div>
         </div>
       </div>
     );
   }
 
-  const isOwnProfile = currentUser?.id === profile.id;
-
   return (
-    <div className="pt-20 container-custom py-12">
-      <div className="bg-campfire-charcoal rounded-lg overflow-hidden">
-        {/* Заголовок профиля */}
-        <div className="relative h-48 bg-gradient-to-r from-campfire-amber to-campfire-ember">
-          {profile.profile_picture && (
-            <img
-              src={profile.profile_picture}
-              alt={profile.username}
-              className="absolute -bottom-16 left-8 w-32 h-32 rounded-full border-4 border-campfire-charcoal object-cover"
-            />
-          )}
-        </div>
-
-        <div className="pt-20 px-8 pb-8">
-          <div className="flex justify-between items-start mb-6">
+    <div className="min-h-screen bg-campfire-dark pt-20">
+      <div className="container-custom py-12">
+        <div className="bg-campfire-charcoal rounded-lg shadow-lg border border-campfire-ash/20 p-8">
+          <div className="flex items-center gap-6 mb-8">
+            <div className="w-24 h-24 rounded-full bg-campfire-ash/20 flex items-center justify-center">
+              {profile.profile_picture ? (
+                <img
+                  src={profile.profile_picture}
+                  alt={profile.username}
+                  className="w-full h-full rounded-full object-cover"
+                />
+              ) : (
+                <span className="text-3xl text-campfire-amber">
+                  {profile.username[0].toUpperCase()}
+                </span>
+              )}
+            </div>
             <div>
-              <h1 className="text-3xl font-bold mb-2">{profile.username}</h1>
+              <h1 className="text-2xl font-bold text-campfire-light mb-2">
+                {profile.username}
+              </h1>
               <p className="text-campfire-ash">
-                {profile.is_critic ? "Критик" : "Пользователь"}
+                {profile.is_critic ? 'Критик' : 'Пользователь'}
               </p>
             </div>
-            {isOwnProfile && (
-              <button
-                onClick={() => navigate('/settings')}
-                className="btn-secondary"
-              >
-                Редактировать профиль
-              </button>
-            )}
           </div>
 
-          {profile.bio && (
-            <div className="mb-8">
-              <h2 className="text-xl font-bold mb-2">О себе</h2>
-              <p className="text-campfire-light">{profile.bio}</p>
-            </div>
-          )}
-
-          {/* Отзывы пользователя */}
-          <div>
-            <h2 className="text-2xl font-bold mb-4">Отзывы</h2>
-            {reviews.length === 0 ? (
-              <p className="text-campfire-ash">Пока нет отзывов</p>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {reviews.map((review) => (
-                  <div key={review.id} className="card p-4">
-                    <div className="flex items-center mb-4">
-                      <img
-                        src={review.media.poster_url}
-                        alt={review.media.title}
-                        className="w-16 h-24 object-cover rounded-lg mr-4"
-                      />
-                      <div>
-                        <h3 className="font-bold">{review.media.title}</h3>
-                        <p className="text-sm text-campfire-ash">
-                          {review.media.type === 'movie' ? 'Фильм' : 
-                           review.media.type === 'series' ? 'Сериал' : 'Игра'}
-                        </p>
-                      </div>
-                    </div>
-                    <p className="text-sm mb-4 line-clamp-3">{review.content}</p>
-                    <button
-                      onClick={() => navigate(`/media/${review.media_id}`)}
-                      className="btn-secondary w-full"
+          <div className="space-y-8">
+            <div>
+              <h2 className="text-xl font-semibold text-campfire-light mb-4">
+                Отзывы
+              </h2>
+              {reviews.length > 0 ? (
+                <div className="space-y-4">
+                  {reviews.map((review) => (
+                    <div
+                      key={review.id}
+                      className="bg-campfire-dark rounded-lg p-4 border border-campfire-ash/20"
                     >
-                      Читать полностью
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
+                      <div className="flex items-center gap-4 mb-2">
+                        <img
+                          src={review.media.poster_url}
+                          alt={review.media.title}
+                          className="w-16 h-24 object-cover rounded"
+                        />
+                        <div>
+                          <Link
+                            to={`/media/${review.media_id}`}
+                            className="text-lg font-medium text-campfire-light hover:text-campfire-amber"
+                          >
+                            {review.media.title}
+                          </Link>
+                          <p className="text-sm text-campfire-ash">
+                            {new Date(review.created_at).toLocaleDateString()}
+                          </p>
+                        </div>
+                      </div>
+                      <p className="text-campfire-light">{review.content}</p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-campfire-ash">
+                  Пользователь еще не оставил ни одного отзыва
+                </p>
+              )}
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default ProfilePage;
diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx
index ff3663a..fa5075c 100644
--- a/src/pages/RegisterPage.jsx
+++ b/src/pages/RegisterPage.jsx
@@ -10,7 +10,7 @@ function RegisterPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
-  const { signup } = useAuth();
+  const { signUp } = useAuth();
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
@@ -34,7 +34,7 @@ function RegisterPage() {
     try {
       setError("");
       setLoading(true);
-      await signup(email, password, username);
+      await signUp(email, password, username);
       navigate("/");
     } catch (err) {
       setError(