+ {floatingCards.map((card) => (
+
+
+
+
+ ))}
);
}
-export default HeroFloatingCards;
\ No newline at end of file
+export default HeroFloatingCards;
diff --git a/src/components/Manga/MangaCard.jsx b/src/components/Manga/MangaCard.jsx
index f9f4c85..1ec0012 100644
--- a/src/components/Manga/MangaCard.jsx
+++ b/src/components/Manga/MangaCard.jsx
@@ -1,3 +1,4 @@
+import { memo } from 'react'
import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { FaHeart, FaShoppingCart, FaStar } from 'react-icons/fa'
@@ -5,6 +6,7 @@ import { ROUTES } from '@/constants/routes'
import { useCart } from '@/context/CartContext'
import { useWishlist } from '@/context/WishlistContext'
import { formatCurrency } from '@/utils/formatCurrency'
+import PropTypes from 'prop-types'
import toast from 'react-hot-toast'
function MangaCard({ manga, index = 0 }) {
@@ -83,4 +85,18 @@ function MangaCard({ manga, index = 0 }) {
)
}
-export default MangaCard
+MangaCard.propTypes = {
+ manga: PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ title: PropTypes.string.isRequired,
+ image: PropTypes.string,
+ price: PropTypes.number,
+ authors: PropTypes.arrayOf(PropTypes.string),
+ score: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ type: PropTypes.string,
+ chapters: PropTypes.number,
+ }).isRequired,
+ index: PropTypes.number,
+}
+
+export default memo(MangaCard)
diff --git a/src/components/Movies/MovieCard.jsx b/src/components/Movies/MovieCard.jsx
index f1c24ca..b35f546 100644
--- a/src/components/Movies/MovieCard.jsx
+++ b/src/components/Movies/MovieCard.jsx
@@ -6,6 +6,8 @@ import { ROUTES } from "@/constants/routes";
import { useCart } from "@/context/CartContext";
import { useWishlist } from "@/context/WishlistContext";
import { formatCurrency } from "@/utils/formatCurrency";
+import { memo } from "react";
+import PropTypes from "prop-types";
import toast from "react-hot-toast";
function MovieCard({ movie, index = 0 }) {
@@ -94,4 +96,16 @@ function MovieCard({ movie, index = 0 }) {
);
}
-export default MovieCard;
+MovieCard.propTypes = {
+ movie: PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ title: PropTypes.string.isRequired,
+ poster_path: PropTypes.string,
+ vote_average: PropTypes.number,
+ release_date: PropTypes.string,
+ price: PropTypes.number,
+ }).isRequired,
+ index: PropTypes.number,
+}
+
+export default memo(MovieCard);
diff --git a/src/components/Movies/MovieCast.jsx b/src/components/Movies/MovieCast.jsx
index 9716b3b..114cb22 100644
--- a/src/components/Movies/MovieCast.jsx
+++ b/src/components/Movies/MovieCast.jsx
@@ -1,35 +1,29 @@
import { IMAGE_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function MovieCast({ cast }) {
if (!cast || cast.length === 0) return null;
return (
-
+
+
+
+ {card.title}
+Explore now
+
-
- Top Billed Cast
+
- Top Billed Cast
+
+
+ Top Billed{" "}
+ Cast
-
- {/* Smooth horizontal scroll container */}
+
{cast.slice(0, 10).map((member) => (
-
- {/* Cast Profile Image */}
-
+
-
- {/* Names & Characters */}
{member.name}
@@ -43,4 +37,15 @@ function MovieCast({ cast }) {
);
}
-export default MovieCast;
\ No newline at end of file
+MovieCast.propTypes = {
+ cast: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string,
+ character: PropTypes.string,
+ profile_path: PropTypes.string,
+ })
+ ),
+};
+
+export default MovieCast;
diff --git a/src/components/Movies/MovieGallery.jsx b/src/components/Movies/MovieGallery.jsx
index 6d4297a..4fa7471 100644
--- a/src/components/Movies/MovieGallery.jsx
+++ b/src/components/Movies/MovieGallery.jsx
@@ -1,46 +1,34 @@
import { IMAGE_BASE_URL } from "@/constants/tmdb";
import { motion } from "framer-motion";
+import PropTypes from 'prop-types';
function MovieGallery({ images }) {
if (!images?.backdrops?.length) return null;
return (
-
-
+
+
- Gallery
+ Movie{" "}
+ Gallery
-
-
- Official movie stills
-
+ Official movie stills
- {images.backdrops.slice(0, 6).map((image) => (
+ {images.backdrops.slice(0, 6).map((image, i) => (
))}
@@ -49,4 +37,19 @@ function MovieGallery({ images }) {
);
}
-export default MovieGallery;
\ No newline at end of file
+MovieGallery.propTypes = {
+ images: PropTypes.shape({
+ backdrops: PropTypes.arrayOf(
+ PropTypes.shape({
+ file_path: PropTypes.string,
+ })
+ ),
+ posters: PropTypes.arrayOf(
+ PropTypes.shape({
+ file_path: PropTypes.string,
+ })
+ ),
+ }),
+};
+
+export default MovieGallery;
diff --git a/src/components/Movies/MovieHero.jsx b/src/components/Movies/MovieHero.jsx
index bc9424e..6dc6087 100644
--- a/src/components/Movies/MovieHero.jsx
+++ b/src/components/Movies/MovieHero.jsx
@@ -1,107 +1,87 @@
import { FaStar, FaHeart, FaShoppingCart } from "react-icons/fa";
import { BACKDROP_BASE_URL, IMAGE_BASE_URL } from "@/constants/tmdb";
import heroBg from "@/assets/images/hero-bg.png";
+import PropTypes from 'prop-types';
function MovieHero({ movie }) {
return (
- {/* Background */}
{
- e.target.src = heroBg;
- }}
+ onError={(e) => { e.target.src = heroBg; }}
/>
+
+
+
- {/* Overlay */}
-
-
- {/* Gradient */}
-
-
- {/* Content */}
-
- {/* Poster */}
- {/* Movie Info */}
-
-
+
{movie.title}
-
-
-
-
+
{movie.overview}
- {/* Buttons */}
-
-
-
-
);
}
-export default MovieHero;
\ No newline at end of file
+MovieHero.propTypes = {
+ movie: PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ backdrop_path: PropTypes.string,
+ poster_path: PropTypes.string,
+ vote_average: PropTypes.number.isRequired,
+ release_date: PropTypes.string,
+ runtime: PropTypes.number,
+ overview: PropTypes.string,
+ genres: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ })
+ ),
+ }),
+};
+
+export default MovieHero;
diff --git a/src/components/Movies/MovieInfo.jsx b/src/components/Movies/MovieInfo.jsx
index 2b85b8f..1a4bf6b 100644
--- a/src/components/Movies/MovieInfo.jsx
+++ b/src/components/Movies/MovieInfo.jsx
@@ -1,25 +1,21 @@
import { FaPlay } from "react-icons/fa";
+import PropTypes from 'prop-types';
function MovieInfo({ movie, videos }) {
const trailer = videos?.find(
- (video) =>
- video.site === "YouTube" &&
- video.type === "Trailer"
+ (video) => video.site === "YouTube" && video.type === "Trailer"
);
return (
-
-
- {/* Left */}
-
-
- About this movie
+
+ About{" "}
+ this movie
-
+
{movie.overview}
@@ -28,101 +24,78 @@ function MovieInfo({ movie, videos }) {
href={`https://www.youtube.com/watch?v=${trailer.key}`}
target="_blank"
rel="noopener noreferrer"
- className="mt-8 inline-flex items-center gap-3 rounded-xl bg-red-600 px-6 py-3 font-semibold transition hover:bg-red-700"
+ className="group mt-8 inline-flex items-center gap-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 px-6 py-3 font-semibold text-white shadow-lg shadow-red-500/25 hover:from-red-500 hover:to-rose-500 transition-all duration-300"
>
-
- Original Language
-
-
-
- {movie.original_language.toUpperCase()}
-
+ Original Language
+ {movie.original_language.toUpperCase()}
-
-
- Status
-
-
-
- {movie.status}
-
+ Status
+ {movie.status}
-
-
- Runtime
-
-
-
- {movie.runtime} mins
-
+ Runtime
+ {movie.runtime} mins
-
-
- Budget
-
-
-
- ${movie.budget.toLocaleString()}
-
+ Budget
+ ${movie.budget.toLocaleString()}
-
-
- Revenue
-
-
-
- ${movie.revenue.toLocaleString()}
-
+ Revenue
+ ${movie.revenue.toLocaleString()}
-
-
- Genres
-
-
+ Genres
{movie.genres?.map((genre) => (
-
+
{genre.name}
))}
-
-
- Rating
-
-
-
- ⭐ {movie.vote_average.toFixed(1)} / 10
-
+ Rating
+ ⭐ {movie.vote_average.toFixed(1)} / 10
-
-
-
);
}
-export default MovieInfo;
\ No newline at end of file
+MovieInfo.propTypes = {
+ movie: PropTypes.shape({
+ overview: PropTypes.string,
+ original_language: PropTypes.string,
+ status: PropTypes.string,
+ runtime: PropTypes.number,
+ budget: PropTypes.number,
+ revenue: PropTypes.number,
+ genres: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ })
+ ),
+ vote_average: PropTypes.number,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ })
+ ),
+};
+
+export default MovieInfo;
diff --git a/src/components/Movies/MovieReviews.jsx b/src/components/Movies/MovieReviews.jsx
index 2262639..bb79c8a 100644
--- a/src/components/Movies/MovieReviews.jsx
+++ b/src/components/Movies/MovieReviews.jsx
@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { FaStar, FaUserCircle } from "react-icons/fa";
+import PropTypes from 'prop-types';
function MovieReviews({ reviews }) {
if (!reviews?.length) return null;
@@ -75,4 +76,18 @@ function MovieReviews({ reviews }) {
);
}
+MovieReviews.propTypes = {
+ reviews: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ author: PropTypes.string,
+ content: PropTypes.string,
+ created_at: PropTypes.string,
+ author_details: PropTypes.shape({
+ rating: PropTypes.number,
+ }),
+ })
+ ),
+};
+
export default MovieReviews;
\ No newline at end of file
diff --git a/src/components/Movies/MovieSkeleton.jsx b/src/components/Movies/MovieSkeleton.jsx
index acea49a..782f568 100644
--- a/src/components/Movies/MovieSkeleton.jsx
+++ b/src/components/Movies/MovieSkeleton.jsx
@@ -11,4 +11,6 @@ function MovieSkeleton() {
);
}
+MovieSkeleton.propTypes = {};
+
export default MovieSkeleton;
diff --git a/src/components/Movies/MovieTrailer.jsx b/src/components/Movies/MovieTrailer.jsx
index 5059eca..8e3c0c9 100644
--- a/src/components/Movies/MovieTrailer.jsx
+++ b/src/components/Movies/MovieTrailer.jsx
@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
import { FaPlay, FaStar, FaClock, FaCalendarAlt } from "react-icons/fa";
import { BACKDROP_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function MovieTrailer({ movie, videos }) {
const trailer = videos?.find(
@@ -191,4 +192,22 @@ function MovieTrailer({ movie, videos }) {
);
}
+MovieTrailer.propTypes = {
+ movie: PropTypes.shape({
+ backdrop_path: PropTypes.string,
+ title: PropTypes.string,
+ vote_average: PropTypes.number,
+ runtime: PropTypes.number,
+ release_date: PropTypes.string,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ name: PropTypes.string,
+ })
+ ),
+};
+
export default MovieTrailer;
\ No newline at end of file
diff --git a/src/components/Movies/SimilarMovies.jsx b/src/components/Movies/SimilarMovies.jsx
index 5d4a1f2..365871f 100644
--- a/src/components/Movies/SimilarMovies.jsx
+++ b/src/components/Movies/SimilarMovies.jsx
@@ -1,46 +1,57 @@
+import { motion } from "framer-motion";
import { IMAGE_BASE_URL } from "@/constants/tmdb";
import { ROUTES } from "@/constants/routes";
import { Link } from "react-router-dom";
+import PropTypes from 'prop-types';
function SimilarMovies({ movies }) {
if (!movies || movies.length === 0) return null;
return (
-
-
- Similar Movies You Might Like
+
+
+ Similar{" "}
+ Movies
-
- {/* Responsive grid for movie cards */}
+
- {movies.slice(0, 5).map((simMovie) => (
- (
+
- {/* Poster Wrapper with Zoom effect */}
-
-
-
-
- {/* Movie Title */}
-
- {simMovie.title}
-
-
+
+
+
+
+ 
+
+
+
+ {simMovie.title}
+
+
+
))}
);
}
-export default SimilarMovies;
\ No newline at end of file
+SimilarMovies.propTypes = {
+ movies: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ title: PropTypes.string,
+ poster_path: PropTypes.string,
+ })
+ ),
+};
+
+export default SimilarMovies;
diff --git a/src/components/Movies/WatchProviders.jsx b/src/components/Movies/WatchProviders.jsx
index ca28eca..bc7a973 100644
--- a/src/components/Movies/WatchProviders.jsx
+++ b/src/components/Movies/WatchProviders.jsx
@@ -1,4 +1,5 @@
import { IMAGE_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function WatchProviders({ providers }) {
const nigeria = providers?.NG || providers?.US;
@@ -6,41 +7,27 @@ function WatchProviders({ providers }) {
if (!nigeria?.flatrate?.length) return null;
return (
-
-
+
+
- Where to Watch
+ Where to{" "}
+ Watch
-
-
- Available on
-
+ Available on
{nigeria.flatrate.map((provider) => (
-
-
- {provider.provider_name}
-
+ {provider.provider_name}
))}
@@ -48,4 +35,27 @@ function WatchProviders({ providers }) {
);
}
-export default WatchProviders;
\ No newline at end of file
+WatchProviders.propTypes = {
+ providers: PropTypes.shape({
+ NG: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ US: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ }),
+};
+
+export default WatchProviders;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 4935d06..ccd3908 100644
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,6 +1,7 @@
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/context/AuthContext'
import { ROUTES } from '@/constants/routes'
+import PropTypes from 'prop-types'
export function ProtectedRoute({ children, roles }) {
const { isAuthenticated, role, loading } = useAuth()
@@ -24,3 +25,8 @@ export function ProtectedRoute({ children, roles }) {
return children
}
+
+ProtectedRoute.propTypes = {
+ children: PropTypes.node,
+ roles: PropTypes.arrayOf(PropTypes.string),
+}
diff --git a/src/components/Reviews/ReviewForm.jsx b/src/components/Reviews/ReviewForm.jsx
index 6c89638..b73911d 100644
--- a/src/components/Reviews/ReviewForm.jsx
+++ b/src/components/Reviews/ReviewForm.jsx
@@ -1,15 +1,25 @@
import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
import { FaStar } from 'react-icons/fa'
import { useAuth } from '@/context/AuthContext'
import { supabase } from '@/lib/supabase'
import toast from 'react-hot-toast'
+import PropTypes from 'prop-types'
+
+const reviewSchema = z.object({
+ comment: z.string().min(1, 'Please write a comment'),
+})
function ReviewForm({ productId, onReviewAdded }) {
const { user } = useAuth()
const [rating, setRating] = useState(0)
const [hover, setHover] = useState(0)
- const [comment, setComment] = useState('')
- const [submitting, setSubmitting] = useState(false)
+
+ const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({
+ resolver: zodResolver(reviewSchema),
+ })
if (!user) {
return (
@@ -19,12 +29,9 @@ function ReviewForm({ productId, onReviewAdded }) {
)
}
- const handleSubmit = async (e) => {
- e.preventDefault()
+ const onSubmit = async ({ comment }) => {
if (rating === 0) { toast.error('Please select a rating'); return }
- if (!comment.trim()) { toast.error('Please write a comment'); return }
- setSubmitting(true)
const { error } = await supabase.from('reviews').insert({
user_id: user.id,
product_id: productId,
@@ -32,8 +39,6 @@ function ReviewForm({ productId, onReviewAdded }) {
comment: comment.trim(),
}).select().single()
- setSubmitting(false)
-
if (error) {
if (error.code === '23505') {
toast.error('You already reviewed this product')
@@ -45,13 +50,13 @@ function ReviewForm({ productId, onReviewAdded }) {
toast.success('Review submitted!')
setRating(0)
- setComment('')
+ reset()
onReviewAdded?.()
}
return (
-
+ Top Billed{" "} + Cast
- - {/* Smooth horizontal scroll container */} +
{cast.slice(0, 10).map((member) => (
-
- {/* Cast Profile Image */}
-
+
-
- {/* Names & Characters */}
-
{member.name}
@@ -43,4 +37,15 @@ function MovieCast({ cast }) { ); } -export default MovieCast; \ No newline at end of file +MovieCast.propTypes = { + cast: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + name: PropTypes.string, + character: PropTypes.string, + profile_path: PropTypes.string, + }) + ), +}; + +export default MovieCast; diff --git a/src/components/Movies/MovieGallery.jsx b/src/components/Movies/MovieGallery.jsx index 6d4297a..4fa7471 100644 --- a/src/components/Movies/MovieGallery.jsx +++ b/src/components/Movies/MovieGallery.jsx @@ -1,46 +1,34 @@ import { IMAGE_BASE_URL } from "@/constants/tmdb"; import { motion } from "framer-motion"; +import PropTypes from 'prop-types'; function MovieGallery({ images }) { if (!images?.backdrops?.length) return null; return ( -
+
+
- Gallery + Movie{" "} + Gallery
- -- Official movie stills -
+Official movie stills
- {images.backdrops.slice(0, 6).map((image) => (
+ {images.backdrops.slice(0, 6).map((image, i) => (
))}
@@ -49,4 +37,19 @@ function MovieGallery({ images }) {
);
}
-export default MovieGallery;
\ No newline at end of file
+MovieGallery.propTypes = {
+ images: PropTypes.shape({
+ backdrops: PropTypes.arrayOf(
+ PropTypes.shape({
+ file_path: PropTypes.string,
+ })
+ ),
+ posters: PropTypes.arrayOf(
+ PropTypes.shape({
+ file_path: PropTypes.string,
+ })
+ ),
+ }),
+};
+
+export default MovieGallery;
diff --git a/src/components/Movies/MovieHero.jsx b/src/components/Movies/MovieHero.jsx
index bc9424e..6dc6087 100644
--- a/src/components/Movies/MovieHero.jsx
+++ b/src/components/Movies/MovieHero.jsx
@@ -1,107 +1,87 @@
import { FaStar, FaHeart, FaShoppingCart } from "react-icons/fa";
import { BACKDROP_BASE_URL, IMAGE_BASE_URL } from "@/constants/tmdb";
import heroBg from "@/assets/images/hero-bg.png";
+import PropTypes from 'prop-types';
function MovieHero({ movie }) {
return (
- {/* Background */}
{
- e.target.src = heroBg;
- }}
+ onError={(e) => { e.target.src = heroBg; }}
/>
+
+
+
- {/* Overlay */}
-
-
- {/* Gradient */}
-
-
- {/* Content */}
-
- {/* Poster */}
- {/* Movie Info */}
-
-
+
+
{movie.title}
-
-
-
-
+
{movie.overview}
- {/* Buttons */}
-
-
-
-
);
}
-export default MovieHero;
\ No newline at end of file
+MovieHero.propTypes = {
+ movie: PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ backdrop_path: PropTypes.string,
+ poster_path: PropTypes.string,
+ vote_average: PropTypes.number.isRequired,
+ release_date: PropTypes.string,
+ runtime: PropTypes.number,
+ overview: PropTypes.string,
+ genres: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ })
+ ),
+ }),
+};
+
+export default MovieHero;
diff --git a/src/components/Movies/MovieInfo.jsx b/src/components/Movies/MovieInfo.jsx
index 2b85b8f..1a4bf6b 100644
--- a/src/components/Movies/MovieInfo.jsx
+++ b/src/components/Movies/MovieInfo.jsx
@@ -1,25 +1,21 @@
import { FaPlay } from "react-icons/fa";
+import PropTypes from 'prop-types';
function MovieInfo({ movie, videos }) {
const trailer = videos?.find(
- (video) =>
- video.site === "YouTube" &&
- video.type === "Trailer"
+ (video) => video.site === "YouTube" && video.type === "Trailer"
);
return (
-
-
- {/* Left */}
-
-
- About this movie
+
+ About{" "}
+ this movie
-
+
{movie.overview}
@@ -28,101 +24,78 @@ function MovieInfo({ movie, videos }) {
href={`https://www.youtube.com/watch?v=${trailer.key}`}
target="_blank"
rel="noopener noreferrer"
- className="mt-8 inline-flex items-center gap-3 rounded-xl bg-red-600 px-6 py-3 font-semibold transition hover:bg-red-700"
+ className="group mt-8 inline-flex items-center gap-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 px-6 py-3 font-semibold text-white shadow-lg shadow-red-500/25 hover:from-red-500 hover:to-rose-500 transition-all duration-300"
>
-
- Original Language
-
-
-
- {movie.original_language.toUpperCase()}
-
+ Original Language
+ {movie.original_language.toUpperCase()}
-
-
- Status
-
-
-
- {movie.status}
-
+ Status
+ {movie.status}
-
-
- Runtime
-
-
-
- {movie.runtime} mins
-
+ Runtime
+ {movie.runtime} mins
-
-
- Budget
-
-
-
- ${movie.budget.toLocaleString()}
-
+ Budget
+ ${movie.budget.toLocaleString()}
-
-
- Revenue
-
-
-
- ${movie.revenue.toLocaleString()}
-
+ Revenue
+ ${movie.revenue.toLocaleString()}
-
-
- Genres
-
-
+ Genres
{movie.genres?.map((genre) => (
-
+
{genre.name}
))}
-
-
- Rating
-
-
-
- ⭐ {movie.vote_average.toFixed(1)} / 10
-
+ Rating
+ ⭐ {movie.vote_average.toFixed(1)} / 10
-
-
-
);
}
-export default MovieInfo;
\ No newline at end of file
+MovieInfo.propTypes = {
+ movie: PropTypes.shape({
+ overview: PropTypes.string,
+ original_language: PropTypes.string,
+ status: PropTypes.string,
+ runtime: PropTypes.number,
+ budget: PropTypes.number,
+ revenue: PropTypes.number,
+ genres: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ })
+ ),
+ vote_average: PropTypes.number,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ })
+ ),
+};
+
+export default MovieInfo;
diff --git a/src/components/Movies/MovieReviews.jsx b/src/components/Movies/MovieReviews.jsx
index 2262639..bb79c8a 100644
--- a/src/components/Movies/MovieReviews.jsx
+++ b/src/components/Movies/MovieReviews.jsx
@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { FaStar, FaUserCircle } from "react-icons/fa";
+import PropTypes from 'prop-types';
function MovieReviews({ reviews }) {
if (!reviews?.length) return null;
@@ -75,4 +76,18 @@ function MovieReviews({ reviews }) {
);
}
+MovieReviews.propTypes = {
+ reviews: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ author: PropTypes.string,
+ content: PropTypes.string,
+ created_at: PropTypes.string,
+ author_details: PropTypes.shape({
+ rating: PropTypes.number,
+ }),
+ })
+ ),
+};
+
export default MovieReviews;
\ No newline at end of file
diff --git a/src/components/Movies/MovieSkeleton.jsx b/src/components/Movies/MovieSkeleton.jsx
index acea49a..782f568 100644
--- a/src/components/Movies/MovieSkeleton.jsx
+++ b/src/components/Movies/MovieSkeleton.jsx
@@ -11,4 +11,6 @@ function MovieSkeleton() {
);
}
+MovieSkeleton.propTypes = {};
+
export default MovieSkeleton;
diff --git a/src/components/Movies/MovieTrailer.jsx b/src/components/Movies/MovieTrailer.jsx
index 5059eca..8e3c0c9 100644
--- a/src/components/Movies/MovieTrailer.jsx
+++ b/src/components/Movies/MovieTrailer.jsx
@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
import { FaPlay, FaStar, FaClock, FaCalendarAlt } from "react-icons/fa";
import { BACKDROP_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function MovieTrailer({ movie, videos }) {
const trailer = videos?.find(
@@ -191,4 +192,22 @@ function MovieTrailer({ movie, videos }) {
);
}
+MovieTrailer.propTypes = {
+ movie: PropTypes.shape({
+ backdrop_path: PropTypes.string,
+ title: PropTypes.string,
+ vote_average: PropTypes.number,
+ runtime: PropTypes.number,
+ release_date: PropTypes.string,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ name: PropTypes.string,
+ })
+ ),
+};
+
export default MovieTrailer;
\ No newline at end of file
diff --git a/src/components/Movies/SimilarMovies.jsx b/src/components/Movies/SimilarMovies.jsx
index 5d4a1f2..365871f 100644
--- a/src/components/Movies/SimilarMovies.jsx
+++ b/src/components/Movies/SimilarMovies.jsx
@@ -1,46 +1,57 @@
+import { motion } from "framer-motion";
import { IMAGE_BASE_URL } from "@/constants/tmdb";
import { ROUTES } from "@/constants/routes";
import { Link } from "react-router-dom";
+import PropTypes from 'prop-types';
function SimilarMovies({ movies }) {
if (!movies || movies.length === 0) return null;
return (
-
-
- Similar Movies You Might Like
+
+
+ Similar{" "}
+ Movies
-
- {/* Responsive grid for movie cards */}
+
- {movies.slice(0, 5).map((simMovie) => (
- (
+
- {/* Poster Wrapper with Zoom effect */}
-
-
-
-
- {/* Movie Title */}
-
- {simMovie.title}
-
-
+
+
+
+
+
+
+
+
+ {simMovie.title}
+
+
+
))}
);
}
-export default SimilarMovies;
\ No newline at end of file
+SimilarMovies.propTypes = {
+ movies: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ title: PropTypes.string,
+ poster_path: PropTypes.string,
+ })
+ ),
+};
+
+export default SimilarMovies;
diff --git a/src/components/Movies/WatchProviders.jsx b/src/components/Movies/WatchProviders.jsx
index ca28eca..bc7a973 100644
--- a/src/components/Movies/WatchProviders.jsx
+++ b/src/components/Movies/WatchProviders.jsx
@@ -1,4 +1,5 @@
import { IMAGE_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function WatchProviders({ providers }) {
const nigeria = providers?.NG || providers?.US;
@@ -6,41 +7,27 @@ function WatchProviders({ providers }) {
if (!nigeria?.flatrate?.length) return null;
return (
-
-
+
+
- Where to Watch
+ Where to{" "}
+ Watch
-
-
- Available on
-
+ Available on
{nigeria.flatrate.map((provider) => (
-
-
- {provider.provider_name}
-
+ {provider.provider_name}
))}
@@ -48,4 +35,27 @@ function WatchProviders({ providers }) {
);
}
-export default WatchProviders;
\ No newline at end of file
+WatchProviders.propTypes = {
+ providers: PropTypes.shape({
+ NG: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ US: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ }),
+};
+
+export default WatchProviders;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 4935d06..ccd3908 100644
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,6 +1,7 @@
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/context/AuthContext'
import { ROUTES } from '@/constants/routes'
+import PropTypes from 'prop-types'
export function ProtectedRoute({ children, roles }) {
const { isAuthenticated, role, loading } = useAuth()
@@ -24,3 +25,8 @@ export function ProtectedRoute({ children, roles }) {
return children
}
+
+ProtectedRoute.propTypes = {
+ children: PropTypes.node,
+ roles: PropTypes.arrayOf(PropTypes.string),
+}
diff --git a/src/components/Reviews/ReviewForm.jsx b/src/components/Reviews/ReviewForm.jsx
index 6c89638..b73911d 100644
--- a/src/components/Reviews/ReviewForm.jsx
+++ b/src/components/Reviews/ReviewForm.jsx
@@ -1,15 +1,25 @@
import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
import { FaStar } from 'react-icons/fa'
import { useAuth } from '@/context/AuthContext'
import { supabase } from '@/lib/supabase'
import toast from 'react-hot-toast'
+import PropTypes from 'prop-types'
+
+const reviewSchema = z.object({
+ comment: z.string().min(1, 'Please write a comment'),
+})
function ReviewForm({ productId, onReviewAdded }) {
const { user } = useAuth()
const [rating, setRating] = useState(0)
const [hover, setHover] = useState(0)
- const [comment, setComment] = useState('')
- const [submitting, setSubmitting] = useState(false)
+
+ const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({
+ resolver: zodResolver(reviewSchema),
+ })
if (!user) {
return (
@@ -19,12 +29,9 @@ function ReviewForm({ productId, onReviewAdded }) {
)
}
- const handleSubmit = async (e) => {
- e.preventDefault()
+ const onSubmit = async ({ comment }) => {
if (rating === 0) { toast.error('Please select a rating'); return }
- if (!comment.trim()) { toast.error('Please write a comment'); return }
- setSubmitting(true)
const { error } = await supabase.from('reviews').insert({
user_id: user.id,
product_id: productId,
@@ -32,8 +39,6 @@ function ReviewForm({ productId, onReviewAdded }) {
comment: comment.trim(),
}).select().single()
- setSubmitting(false)
-
if (error) {
if (error.code === '23505') {
toast.error('You already reviewed this product')
@@ -45,13 +50,13 @@ function ReviewForm({ productId, onReviewAdded }) {
toast.success('Review submitted!')
setRating(0)
- setComment('')
+ reset()
onReviewAdded?.()
}
return (
-
+
+
- {/* Genres */}
-
-
+
-
{movie.genres?.map((genre) => (
-
+
{genre.name}
))}
-
- {/* Overview */}
- +
{movie.overview}
- {/* Buttons */}
-
-
-
-
- {/* Left */}
-
-
- About this movie
+
- {/* Right */}
-
- About this movie
+
+ About{" "}
+ this movie
-
+
{movie.overview}
@@ -28,101 +24,78 @@ function MovieInfo({ movie, videos }) { href={`https://www.youtube.com/watch?v=${trailer.key}`} target="_blank" rel="noopener noreferrer" - className="mt-8 inline-flex items-center gap-3 rounded-xl bg-red-600 px-6 py-3 font-semibold transition hover:bg-red-700" + className="group mt-8 inline-flex items-center gap-3 rounded-xl bg-gradient-to-r from-red-600 to-rose-600 px-6 py-3 font-semibold text-white shadow-lg shadow-red-500/25 hover:from-red-500 hover:to-rose-500 transition-all duration-300" > -
-
+
-
-
);
}
-export default MovieInfo;
\ No newline at end of file
+MovieInfo.propTypes = {
+ movie: PropTypes.shape({
+ overview: PropTypes.string,
+ original_language: PropTypes.string,
+ status: PropTypes.string,
+ runtime: PropTypes.number,
+ budget: PropTypes.number,
+ revenue: PropTypes.number,
+ genres: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number,
+ name: PropTypes.string,
+ })
+ ),
+ vote_average: PropTypes.number,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ })
+ ),
+};
+
+export default MovieInfo;
diff --git a/src/components/Movies/MovieReviews.jsx b/src/components/Movies/MovieReviews.jsx
index 2262639..bb79c8a 100644
--- a/src/components/Movies/MovieReviews.jsx
+++ b/src/components/Movies/MovieReviews.jsx
@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { FaStar, FaUserCircle } from "react-icons/fa";
+import PropTypes from 'prop-types';
function MovieReviews({ reviews }) {
if (!reviews?.length) return null;
@@ -75,4 +76,18 @@ function MovieReviews({ reviews }) {
);
}
+MovieReviews.propTypes = {
+ reviews: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ author: PropTypes.string,
+ content: PropTypes.string,
+ created_at: PropTypes.string,
+ author_details: PropTypes.shape({
+ rating: PropTypes.number,
+ }),
+ })
+ ),
+};
+
export default MovieReviews;
\ No newline at end of file
diff --git a/src/components/Movies/MovieSkeleton.jsx b/src/components/Movies/MovieSkeleton.jsx
index acea49a..782f568 100644
--- a/src/components/Movies/MovieSkeleton.jsx
+++ b/src/components/Movies/MovieSkeleton.jsx
@@ -11,4 +11,6 @@ function MovieSkeleton() {
);
}
+MovieSkeleton.propTypes = {};
+
export default MovieSkeleton;
diff --git a/src/components/Movies/MovieTrailer.jsx b/src/components/Movies/MovieTrailer.jsx
index 5059eca..8e3c0c9 100644
--- a/src/components/Movies/MovieTrailer.jsx
+++ b/src/components/Movies/MovieTrailer.jsx
@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
import { FaPlay, FaStar, FaClock, FaCalendarAlt } from "react-icons/fa";
import { BACKDROP_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function MovieTrailer({ movie, videos }) {
const trailer = videos?.find(
@@ -191,4 +192,22 @@ function MovieTrailer({ movie, videos }) {
);
}
+MovieTrailer.propTypes = {
+ movie: PropTypes.shape({
+ backdrop_path: PropTypes.string,
+ title: PropTypes.string,
+ vote_average: PropTypes.number,
+ runtime: PropTypes.number,
+ release_date: PropTypes.string,
+ }),
+ videos: PropTypes.arrayOf(
+ PropTypes.shape({
+ site: PropTypes.string,
+ type: PropTypes.string,
+ key: PropTypes.string,
+ name: PropTypes.string,
+ })
+ ),
+};
+
export default MovieTrailer;
\ No newline at end of file
diff --git a/src/components/Movies/SimilarMovies.jsx b/src/components/Movies/SimilarMovies.jsx
index 5d4a1f2..365871f 100644
--- a/src/components/Movies/SimilarMovies.jsx
+++ b/src/components/Movies/SimilarMovies.jsx
@@ -1,46 +1,57 @@
+import { motion } from "framer-motion";
import { IMAGE_BASE_URL } from "@/constants/tmdb";
import { ROUTES } from "@/constants/routes";
import { Link } from "react-router-dom";
+import PropTypes from 'prop-types';
function SimilarMovies({ movies }) {
if (!movies || movies.length === 0) return null;
return (
-
-
-
- Original Language -
- -- {movie.original_language.toUpperCase()} -
+Original Language
+{movie.original_language.toUpperCase()}
-
-
- Status -
- -- {movie.status} -
+Status
+{movie.status}
-
-
- Runtime -
- -- {movie.runtime} mins -
+Runtime
+{movie.runtime} mins
-
-
- Budget -
- -- ${movie.budget.toLocaleString()} -
+Budget
+${movie.budget.toLocaleString()}
-
-
- Revenue -
- -- ${movie.revenue.toLocaleString()} -
+Revenue
+${movie.revenue.toLocaleString()}
-
-
- Genres -
- +Genres
{movie.genres?.map((genre) => (
-
+
{genre.name}
))}
-
-
- Rating -
- -- ⭐ {movie.vote_average.toFixed(1)} / 10 -
+Rating
+⭐ {movie.vote_average.toFixed(1)} / 10
-
- Similar Movies You Might Like
+
- Similar Movies You Might Like
+
+
+ Similar{" "}
+ Movies
-
- {/* Responsive grid for movie cards */}
+
- {movies.slice(0, 5).map((simMovie) => (
- (
+
- {/* Poster Wrapper with Zoom effect */}
-
-
-
-
- {/* Movie Title */}
-
- {simMovie.title}
-
-
+
+
+
+
+
+
+
+
+ {simMovie.title}
+
+
+
))}
);
}
-export default SimilarMovies;
\ No newline at end of file
+SimilarMovies.propTypes = {
+ movies: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ title: PropTypes.string,
+ poster_path: PropTypes.string,
+ })
+ ),
+};
+
+export default SimilarMovies;
diff --git a/src/components/Movies/WatchProviders.jsx b/src/components/Movies/WatchProviders.jsx
index ca28eca..bc7a973 100644
--- a/src/components/Movies/WatchProviders.jsx
+++ b/src/components/Movies/WatchProviders.jsx
@@ -1,4 +1,5 @@
import { IMAGE_BASE_URL } from "@/constants/tmdb";
+import PropTypes from 'prop-types';
function WatchProviders({ providers }) {
const nigeria = providers?.NG || providers?.US;
@@ -6,41 +7,27 @@ function WatchProviders({ providers }) {
if (!nigeria?.flatrate?.length) return null;
return (
-
-
+
+
- Where to Watch
+ Where to{" "}
+ Watch
-
-
- Available on
-
+ Available on
{nigeria.flatrate.map((provider) => (
-
-
- {provider.provider_name}
-
+ {provider.provider_name}
))}
@@ -48,4 +35,27 @@ function WatchProviders({ providers }) {
);
}
-export default WatchProviders;
\ No newline at end of file
+WatchProviders.propTypes = {
+ providers: PropTypes.shape({
+ NG: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ US: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ }),
+};
+
+export default WatchProviders;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 4935d06..ccd3908 100644
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,6 +1,7 @@
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/context/AuthContext'
import { ROUTES } from '@/constants/routes'
+import PropTypes from 'prop-types'
export function ProtectedRoute({ children, roles }) {
const { isAuthenticated, role, loading } = useAuth()
@@ -24,3 +25,8 @@ export function ProtectedRoute({ children, roles }) {
return children
}
+
+ProtectedRoute.propTypes = {
+ children: PropTypes.node,
+ roles: PropTypes.arrayOf(PropTypes.string),
+}
diff --git a/src/components/Reviews/ReviewForm.jsx b/src/components/Reviews/ReviewForm.jsx
index 6c89638..b73911d 100644
--- a/src/components/Reviews/ReviewForm.jsx
+++ b/src/components/Reviews/ReviewForm.jsx
@@ -1,15 +1,25 @@
import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
import { FaStar } from 'react-icons/fa'
import { useAuth } from '@/context/AuthContext'
import { supabase } from '@/lib/supabase'
import toast from 'react-hot-toast'
+import PropTypes from 'prop-types'
+
+const reviewSchema = z.object({
+ comment: z.string().min(1, 'Please write a comment'),
+})
function ReviewForm({ productId, onReviewAdded }) {
const { user } = useAuth()
const [rating, setRating] = useState(0)
const [hover, setHover] = useState(0)
- const [comment, setComment] = useState('')
- const [submitting, setSubmitting] = useState(false)
+
+ const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({
+ resolver: zodResolver(reviewSchema),
+ })
if (!user) {
return (
@@ -19,12 +29,9 @@ function ReviewForm({ productId, onReviewAdded }) {
)
}
- const handleSubmit = async (e) => {
- e.preventDefault()
+ const onSubmit = async ({ comment }) => {
if (rating === 0) { toast.error('Please select a rating'); return }
- if (!comment.trim()) { toast.error('Please write a comment'); return }
- setSubmitting(true)
const { error } = await supabase.from('reviews').insert({
user_id: user.id,
product_id: productId,
@@ -32,8 +39,6 @@ function ReviewForm({ productId, onReviewAdded }) {
comment: comment.trim(),
}).select().single()
- setSubmitting(false)
-
if (error) {
if (error.code === '23505') {
toast.error('You already reviewed this product')
@@ -45,13 +50,13 @@ function ReviewForm({ productId, onReviewAdded }) {
toast.success('Review submitted!')
setRating(0)
- setComment('')
+ reset()
onReviewAdded?.()
}
return (
-
+ Similar{" "} + Movies
- - {/* Responsive grid for movie cards */} +
- {movies.slice(0, 5).map((simMovie) => (
- (
+
- {/* Poster Wrapper with Zoom effect */}
-
))}
-
-
-
- {/* Movie Title */}
- - {simMovie.title} -
- + +
+
+
+
+
+
+ + {simMovie.title} +
+ +
+
+
- Where to Watch + Where to{" "} + Watch
- - - Available on - +Available on
{nigeria.flatrate.map((provider) => (
-
-
- {provider.provider_name}
-
+ {provider.provider_name}
))}
@@ -48,4 +35,27 @@ function WatchProviders({ providers }) {
);
}
-export default WatchProviders;
\ No newline at end of file
+WatchProviders.propTypes = {
+ providers: PropTypes.shape({
+ NG: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ US: PropTypes.shape({
+ flatrate: PropTypes.arrayOf(
+ PropTypes.shape({
+ provider_id: PropTypes.number,
+ logo_path: PropTypes.string,
+ provider_name: PropTypes.string,
+ })
+ ),
+ }),
+ }),
+};
+
+export default WatchProviders;
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 4935d06..ccd3908 100644
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -1,6 +1,7 @@
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '@/context/AuthContext'
import { ROUTES } from '@/constants/routes'
+import PropTypes from 'prop-types'
export function ProtectedRoute({ children, roles }) {
const { isAuthenticated, role, loading } = useAuth()
@@ -24,3 +25,8 @@ export function ProtectedRoute({ children, roles }) {
return children
}
+
+ProtectedRoute.propTypes = {
+ children: PropTypes.node,
+ roles: PropTypes.arrayOf(PropTypes.string),
+}
diff --git a/src/components/Reviews/ReviewForm.jsx b/src/components/Reviews/ReviewForm.jsx
index 6c89638..b73911d 100644
--- a/src/components/Reviews/ReviewForm.jsx
+++ b/src/components/Reviews/ReviewForm.jsx
@@ -1,15 +1,25 @@
import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
import { FaStar } from 'react-icons/fa'
import { useAuth } from '@/context/AuthContext'
import { supabase } from '@/lib/supabase'
import toast from 'react-hot-toast'
+import PropTypes from 'prop-types'
+
+const reviewSchema = z.object({
+ comment: z.string().min(1, 'Please write a comment'),
+})
function ReviewForm({ productId, onReviewAdded }) {
const { user } = useAuth()
const [rating, setRating] = useState(0)
const [hover, setHover] = useState(0)
- const [comment, setComment] = useState('')
- const [submitting, setSubmitting] = useState(false)
+
+ const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm({
+ resolver: zodResolver(reviewSchema),
+ })
if (!user) {
return (
@@ -19,12 +29,9 @@ function ReviewForm({ productId, onReviewAdded }) {
)
}
- const handleSubmit = async (e) => {
- e.preventDefault()
+ const onSubmit = async ({ comment }) => {
if (rating === 0) { toast.error('Please select a rating'); return }
- if (!comment.trim()) { toast.error('Please write a comment'); return }
- setSubmitting(true)
const { error } = await supabase.from('reviews').insert({
user_id: user.id,
product_id: productId,
@@ -32,8 +39,6 @@ function ReviewForm({ productId, onReviewAdded }) {
comment: comment.trim(),
}).select().single()
- setSubmitting(false)
-
if (error) {
if (error.code === '23505') {
toast.error('You already reviewed this product')
@@ -45,13 +50,13 @@ function ReviewForm({ productId, onReviewAdded }) {
toast.success('Review submitted!')
setRating(0)
- setComment('')
+ reset()
onReviewAdded?.()
}
return (
-