diff --git a/src/app/courses/[courseId]/page.tsx b/src/app/courses/[courseId]/page.tsx
index 0842b1e..d27876e 100644
--- a/src/app/courses/[courseId]/page.tsx
+++ b/src/app/courses/[courseId]/page.tsx
@@ -8,14 +8,18 @@ import CoursePageStats from "@/components/courses/course_page/CoursePageStats";
import CoursePageReviews from "@/components/courses/course_page/CoursePageReviews";
import RateThisCourse from "@/components/courses/course_page/RateThisCourse";
import Example from "@/components/courses/course_page/CoursePageLoader";
+import { use } from 'react';
+//
-export default function CoursePage({ params }: { params: { courseId: string } }) {
+
+export default function CoursePage({ params }: { params: Promise<{ courseId: string }> }) {
+ const { courseId } = use(params);
const { courses, isLoading } = useCourses();
const [averageRating, setAverageRating] = useState(0);
const [reviewCount, setReviewCount] = useState(0);
const [courseUUID, setCourseUUID] = useState
(null);
- const course = courses.find((course) => course.id === params.courseId);
+ const course = courses.find((course) => course.id === courseId);
/* ---------- Fetch Course UUID from Supabase ---------- */
useEffect(() => {
diff --git a/src/components/common/VoteButton.tsx b/src/components/common/VoteButton.tsx
new file mode 100644
index 0000000..90d9c00
--- /dev/null
+++ b/src/components/common/VoteButton.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import { VoteType } from '@/hooks/useVote';
+
+interface VoteButtonProps {
+ reviewId: string;
+ initialVoteType?: VoteType;
+ initialVoteCount?: number;
+ onVote?: (reviewId: string, voteType: VoteType) => void;
+ size?: 'sm' | 'md' | 'lg';
+}
+
+export function VoteButton({
+ reviewId,
+ initialVoteType = null,
+ initialVoteCount = 0,
+ onVote,
+ size = 'md',
+}: VoteButtonProps) {
+ const [currentVote, setCurrentVote] = useState(initialVoteType);
+ const [voteCount, setVoteCount] = useState(initialVoteCount);
+ const [isLoading, setIsLoading] = useState(false);
+
+ // Update state when props change (important for late-loading vote data)
+ useEffect(() => {
+ setCurrentVote(initialVoteType);
+ }, [initialVoteType]);
+
+ useEffect(() => {
+ setVoteCount(initialVoteCount);
+ }, [initialVoteCount]);
+
+ // Size variants (Reddit-style vertical layout)
+ const sizes = {
+ sm: {
+ container: 'gap-0',
+ icon: 'w-3.5 h-3.5',
+ text: 'text-[10px]',
+ padding: 'p-0.5',
+ },
+ md: {
+ container: 'gap-1',
+ icon: 'w-5 h-5',
+ text: 'text-sm',
+ padding: 'p-1',
+ },
+ lg: {
+ container: 'gap-1.5',
+ icon: 'w-6 h-6',
+ text: 'text-base',
+ padding: 'p-1.5',
+ },
+ };
+
+ const handleVote = async (voteType: 'helpful' | 'unhelpful') => {
+ if (isLoading) return;
+
+ setIsLoading(true);
+
+ try {
+ const oldVote = currentVote;
+ const oldCount = voteCount;
+
+ // Optimistic update
+ let newVote: VoteType;
+ let newCount = voteCount;
+
+ if (currentVote === voteType) {
+ // Toggle off - remove vote
+ newVote = null;
+ if (voteType === 'helpful') newCount--;
+ else newCount++;
+ } else {
+ // Switch vote or add new vote
+ newVote = voteType;
+
+ // Remove old vote effect
+ if (oldVote === 'helpful') newCount--;
+ else if (oldVote === 'unhelpful') newCount++;
+
+ // Add new vote effect
+ if (voteType === 'helpful') newCount++;
+ else newCount--;
+ }
+
+ setCurrentVote(newVote);
+ setVoteCount(newCount);
+
+ // API call
+ const response = await fetch('/api/ratings/vote', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ review_id: reviewId, vote_type: voteType }),
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to vote');
+ }
+
+ const data = await response.json();
+
+ if (!data.success) {
+ throw new Error(data.error || 'Failed to vote');
+ }
+
+ // Update with server response
+ setCurrentVote(data.vote_type);
+
+ // Callback
+ if (onVote) {
+ onVote(reviewId, data.vote_type);
+ }
+
+ } catch (error) {
+ console.error('Error voting:', error);
+ // Rollback on error
+ setCurrentVote(currentVote);
+ setVoteCount(voteCount);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+ {/* Upvote button */}
+
+
+ {/* Vote count display */}
+ 0
+ ? 'text-gray-700 dark:text-gray-300'
+ : voteCount < 0
+ ? 'text-gray-500 dark:text-gray-400'
+ : 'text-gray-500 dark:text-gray-400'
+ }
+ `}
+ >
+ {voteCount > 0 && '+'}{voteCount}
+
+
+ {/* Downvote button */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/courses/course_page/CoursePageReviews.tsx b/src/components/courses/course_page/CoursePageReviews.tsx
index 26d3b0f..ae8ac90 100644
--- a/src/components/courses/course_page/CoursePageReviews.tsx
+++ b/src/components/courses/course_page/CoursePageReviews.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
import AddReviewButton from "../AddReviewButton";
import { ChevronRight, ChevronDown } from "lucide-react";
import { supabase } from "@/lib/supabase";
+import { VoteButton } from "@/components/common/VoteButton";
interface CoursePageReviewsProps {
id: string; // Course ID
@@ -11,7 +12,7 @@ interface CoursePageReviewsProps {
}
/* Single Review Card (vertical format) */
-const CourseReviewItem = ({ review }: { review: any }) => {
+const CourseReviewItem = ({ review, userVote }: { review: any; userVote?: string | null }) => {
const formattedDate = new Date(review.created_at).toLocaleString("en-IN", {
dateStyle: "medium",
timeStyle: "short",
@@ -27,17 +28,34 @@ const CourseReviewItem = ({ review }: { review: any }) => {
return (
-
-
- {getAnonymousName(review.anonymous_id)}
-
-
- {formattedDate}
-
+
+ {/* Left side - Review content */}
+
+
+
+ {getAnonymousName(review.anonymous_id)}
+
+
+ {formattedDate}
+
+
+
+
+ {review.comment || "No comment provided."}
+
+
+
+ {/* Right side - Vote Button */}
+
+
+
-
- {review.comment || "No comment provided."}
-
);
};
@@ -45,36 +63,56 @@ const CourseReviewItem = ({ review }: { review: any }) => {
/* Main Reviews Component */
const CoursePageReviews = ({ id, reviewCount }: CoursePageReviewsProps) => {
const [reviews, setReviews] = useState
([]);
+ const [userVotes, setUserVotes] = useState>({});
const [loading, setLoading] = useState(true);
- const [showAll, setShowAll] = useState(false); // Toggle for View All
+ const [showAll, setShowAll] = useState(false);
useEffect(() => {
- const fetchReviews = async () => {
+ const fetchReviewsAndVotes = async () => {
setLoading(true);
// Fetch all reviews
- const { data, error } = await supabase
+ const { data: reviewsData, error: reviewsError } = await supabase
.from("reviews")
.select(`
id,
anonymous_id,
comment,
+ votes,
created_at
`)
.eq("target_id", id)
.eq("target_type", "course")
.order("created_at", { ascending: false });
- if (error) {
- console.error("Error fetching reviews:", error.message);
- } else {
- setReviews(data || []);
+ if (reviewsError) {
+ console.error("Error fetching reviews:", reviewsError.message);
+ setLoading(false);
+ return;
+ }
+
+ setReviews(reviewsData || []);
+
+ // Fetch user's votes for these reviews
+ if (reviewsData && reviewsData.length > 0) {
+ const reviewIds = reviewsData.map(r => r.id).join(',');
+
+ try {
+ const response = await fetch(`/api/ratings/vote?review_ids=${reviewIds}`);
+ const votesData = await response.json();
+
+ if (votesData.success) {
+ setUserVotes(votesData.votes || {});
+ }
+ } catch (error) {
+ console.error("Error fetching user votes:", error);
+ }
}
setLoading(false);
};
- fetchReviews();
+ fetchReviewsAndVotes();
}, [id]);
// Show only 3 unless expanded
@@ -102,7 +140,11 @@ const CoursePageReviews = ({ id, reviewCount }: CoursePageReviewsProps) => {
) : (
displayedReviews.map((review) => (
-
+
))
)}