"Add Popover component and support for adding reactions to comments"

actions/dashboard/studentActions.ts

@@ -5,6 +5,7 @@ import { revalidatePath } from 'next/cache'
 import { updateUserProfileSchema } from '@/components/dashboards/student/account/EditProfileForm'
 import { createResponse } from '@/utils/functions'
 import { createClient } from '@/utils/supabase/server'
+import { Tables } from '@/utils/supabase/supabase'
 
 export async function studentSubmitLessonComment (state: {
     comment: string
@@ -90,3 +91,91 @@ export async function updateUserProfile ({
     revalidatePath('/dashboard/student/account/profile', 'layout')
     return createResponse('success', 'Profile updated successfully', null, null)
 }
+
+export async function addReactionToComment ({
+    commentId,
+    reactionType,
+    isReactionPresent
+}: {
+    commentId: number
+    reactionType: Tables<'comment_reactions'>['reaction_type']
+    isReactionPresent: Tables<'comment_reactions'>
+}) {
+    const supabase = createClient()
+    const userData = await supabase.auth.getUser()
+
+    if (userData.error) {
+        return createResponse('error', 'Error user not found', null, 'Error user not found')
+    }
+
+    if (isReactionPresent) {
+        // check if the reaction is the same as the one present
+        // if it is, delete the reaction else update the reaction
+        const selectedReaction = isReactionPresent.reaction_type
+        if (selectedReaction === reactionType) {
+            const reactionDelete = await supabase
+                .from('comment_reactions')
+                .delete()
+                .eq('id', isReactionPresent.id)
+
+            if (reactionDelete.error) {
+                return createResponse('error', 'Error deleting reaction', null, 'Error deleting reaction')
+            }
+
+            revalidatePath('/dashboard/student/courses/[courseId]/lessons/[lessonId]', 'layout')
+            return createResponse('success', 'Reaction deleted successfully', null, null)
+        } else {
+            const reactionUpdate = await supabase
+                .from('comment_reactions')
+                .update({
+                    reaction_type: reactionType
+                })
+                .eq('id', isReactionPresent.id)
+
+            if (reactionUpdate.error) {
+                return createResponse('error', 'Error updating reaction', null, 'Error updating reaction')
+            }
+
+            revalidatePath('/dashboard/student/courses/[courseId]/lessons/[lessonId]', 'layout')
+            return createResponse('success', 'Reaction updated successfully', null, null)
+        }
+    }
+
+    const studentId = userData.data.user?.id
+
+    const reactionInsert = await supabase.from('comment_reactions').insert({
+        user_id: studentId,
+        comment_id: commentId,
+        reaction_type: reactionType
+    })
+
+    if (reactionInsert.error) {
+        return createResponse('error', 'Error adding reaction', null, 'Error adding reaction')
+    }
+
+    revalidatePath('/dashboard/student/courses/[courseId]/lessons/[lessonId]', 'layout')
+    return createResponse('success', 'Reaction added successfully', null, null)
+}
+
+export async function updateComment ({
+    commentId,
+    content
+}: {
+    commentId: number
+    content: string
+}) {
+    const supabase = createClient()
+    const commentUpdate = await supabase
+        .from('lesson_comments')
+        .update({
+            content
+        })
+        .eq('id', commentId)
+
+    if (commentUpdate.error) {
+        return createResponse('error', 'Error updating comment', null, 'Error updating comment')
+    }
+
+    revalidatePath('/dashboard/student/courses/[courseId]/lessons/[lessonId]', 'layout')
+    return createResponse('success', 'Comment updated successfully', null, null)
+}

app/api/chat/route.ts

@@ -5,7 +5,7 @@ export async function POST (req: Request) {
     const { messages } = await req.json()
 
     const result = await streamText({
-        model: google('models/gemini-1.5-flash-latest'),
+        model: google('models/gemini-1.5-pro-latest'),
         messages,
         temperature: 0
     })

app/api/lessons/chat/student/route.ts

@@ -18,7 +18,7 @@ export async function POST (req: Request) {
         const supabase = createClient()
 
         const result = await streamText({
-            model: google('models/gemini-1.5-flash-latest'),
+            model: google('models/gemini-1.5-pro-latest'),
             onFinish: async (event) => {
                 const userData = await supabase.auth.getUser()
                 if (userData.error) {

app/api/lessons/chat/teacher/route.ts

@@ -15,7 +15,7 @@ export async function POST (req: Request) {
         } = await req.json()
 
         const result = await streamText({
-            model: google('models/gemini-1.5-flash-latest'),
+            model: google('models/gemini-1.5-pro-latest'),
             messages: convertToCoreMessages(messages),
             tools: {
                 // server-side tool with execute function:

app/dashboard/student/courses/[courseId]/lessons/[lessonsId]/page.tsx

@@ -41,7 +41,8 @@ export default async function StudentLessonPage ({
         .select(`*,
             courses(*),
 			lesson_comments(*,
-				profiles(*)
+				profiles(*),
+                comment_reactions(*)
 			),
             lessons_ai_tasks(*),
             lessons_ai_task_messages(*)

components/dashboards/Common/CommentsSections.tsx

@@ -1,30 +1,18 @@
 import dayjs from 'dayjs'
-import { User2 } from 'lucide-react'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle
-} from '@/components/ui/card'
-import ViewMarkdown from '@/components/ui/markdown/ViewMarkdown'
-import { Separator } from '@/components/ui/separator'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { createClient } from '@/utils/supabase/server'
-import { Tables } from '@/utils/supabase/supabase'
 
 import CommentEditor from '../student/course/lessons/CommentEditor'
+import CommentCard from './comments/CommentsCard'
 
 export default async function CommentsSections ({
     lesson_id,
     lesson_comments
-}: {
-    lesson_id: number
-    lesson_comments: Array<Tables<'lesson_comments'>>
 }) {
     const supabase = createClient()
     const usersIds = lesson_comments.map((comment) => comment.user_id)
+    const currentUser = await supabase.auth.getUser()
     const profiles = await supabase
         .from('profiles')
         .select('*')
@@ -36,23 +24,35 @@ export default async function CommentsSections ({
     }
 
     return (
-        <div className="flex flex-col gap-4">
-            {lesson_comments?.map((comment) => (
-                <CommentCard
-                    key={comment.id}
-                    name={profiles.data[comment.user_id]?.full_name || 'Unknown'}
-                    comment={comment.content}
-                    date={dayjs(comment.created_at).format('DD/MM/YYYY: HH:mm')}
-                />
-            ))}
-            <Card>
-                <CardHeader>
-                    <Avatar>
-                        <AvatarImage src="/img/favicon.png" alt="profile" />
-                        <AvatarFallback>
-                            <User2 className="h-6 w-6" />
-                        </AvatarFallback>
-                    </Avatar>
+        <div className="flex flex-col gap-4 p-4">
+            <h2 className="text-xl font-semibold mb-4">Comments</h2>
+            {lesson_comments
+                .filter(comment => comment.parent_comment_id === null)
+                .map((comment) => {
+                    const user = profiles.data.find((profile) => profile.id === comment.user_id)
+                    const isReactionPresent = comment.comment_reactions.find(
+                        (reaction) => reaction.user_id === currentUser.data.user.id
+                    )
+
+                    return (
+                        <CommentCard
+                            key={comment.id}
+                            comment={comment}
+                            name={user?.full_name || 'Unknown'}
+                            avatar={user?.avatar_url || '/img/favicon.png'}
+                            isAuthor={comment.user_id === currentUser.data.user.id}
+                            comment_reactions={comment.comment_reactions}
+                            isReactionPresent={isReactionPresent}
+                            date={dayjs(comment.created_at).format('DD/MM/YYYY: HH:mm')}
+                            allComments={lesson_comments}
+                            profiles={profiles.data} // Pass profiles data here
+                            currentUser={currentUser.data.user}
+                        />
+                    )
+                })}
+            <Card className="mt-6">
+                <CardHeader className="flex items-center gap-2">
+
                     <CardTitle className="text-lg font-medium">Add a Comment</CardTitle>
                 </CardHeader>
                 <CardContent>
@@ -62,37 +62,3 @@ export default async function CommentsSections ({
         </div>
     )
 }
-
-const CommentCard = ({
-    name,
-    comment,
-    date
-}: {
-    name: string
-    comment: string
-    date: string
-}) => {
-    return (
-        <Card>
-            <CardHeader className="flex p-2 flex-row flex-wrap items-baseline gap-2">
-                <Avatar>
-                    <AvatarImage src="/img/favicon.png" alt="profile" />
-                    <AvatarFallback>{name[0]}</AvatarFallback>
-                </Avatar>
-                <CardTitle className="text-lg font-medium">{name}</CardTitle>
-                <CardDescription className="text-xs text-gray-400">
-                    {date}
-                </CardDescription>
-            </CardHeader>
-            <Separator />
-            <CardContent
-                className='p-4'
-            >
-                <div className="flex flex-col">
-                    <div className="flex items-center gap-2"></div>
-                    <ViewMarkdown markdown={comment} />
-                </div>
-            </CardContent>
-        </Card>
-    )
-}