feat: Add course_id to CommentsSections component

This commit adds the course_id prop to the CommentsSections component in multiple files. The course_id is used to ensure that comments are associated with the correct course when rendering and submitting comments. This enhancement improves the accuracy and functionality of the CommentsSections component.

Author: guillermoscript

app/dashboard/notifications/page.tsx

@@ -42,14 +42,14 @@ export default async function NotificationsPage ({ searchParams }: {
         <>
             <div className="flex justify-between items-center px-8 py-4 border-b border-gray-200 dark:border-gray-700">
                 <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-200">
-          Notifications
+            Notifications
                 </h1>
                 <button className="text-lg text-blue-500">Settings</button>
             </div>
             <div className="grid md:grid-cols-3 grid-cols-1 gap-4 mt-4 px-8">
                 <aside className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
                     <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
-            Filter by type
+              Filter by type
                     </h2>
                     <NotificationSidebarFilter />
                 </aside>
@@ -75,8 +75,17 @@ export default async function NotificationsPage ({ searchParams }: {
                                             <span>Like</span>
                                         </button> */}
                                         <NotificationsReadButton notification={notification}>
-                                            <Eye className="h-5 w-5" />
-                                            <span>View</span>
+                                            {notification.read ? (
+                                                <>
+                                                    <Eye className="h-5 w-5" />
+                                                    <span>Viewed</span>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Eye className="h-5 w-5" />
+                                                    <span>View</span>
+                                                </>
+                                            )}
                                         </NotificationsReadButton>
                                     </div>
                                 </div>

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

@@ -78,6 +78,7 @@ export default async function StudentLessonPage ({
                         <TabsContent value="comments">
                             <Suspense fallback={<div>Loading...</div>}>
                                 <CommentsSections
+                                    course_id={Number(params.courseId)}
                                     lesson_id={lessonData.data.id}
                                     lesson_comments={lessonData.data.lesson_comments}
                                 />

app/dashboard/teacher/courses/[courseId]/lessons/[lessonId]/page.tsx

@@ -46,6 +46,7 @@ export default async function TeacherLessonPage ({
             sideBar={
                 <CommentsSections
                     lesson_id={lesson?.data?.id}
+                    course_id={lesson?.data?.courses?.course_id}
                     lesson_comments={lesson?.data?.lesson_comments}
                 />
             }

components/dashboards/Common/CommentsSections.tsx

@@ -8,7 +8,13 @@ import CommentCard from './comments/CommentsCard'
 
 export default async function CommentsSections ({
     lesson_id,
+    course_id,
     lesson_comments
+}: {
+    lesson_id: number
+    course_id: number
+    lesson_comments: any[]
+
 }) {
     const supabase = createClient()
     const usersIds = lesson_comments.map((comment) => comment.user_id)
@@ -47,6 +53,7 @@ export default async function CommentsSections ({
                             allComments={lesson_comments}
                             profiles={profiles.data} // Pass profiles data here
                             currentUser={currentUser.data.user}
+                            course_id={course_id}
                         />
                     )
                 })}
@@ -56,7 +63,10 @@ export default async function CommentsSections ({
                     <CardTitle className="text-lg font-medium">Add a Comment</CardTitle>
                 </CardHeader>
                 <CardContent>
-                    <CommentEditor lesson_id={lesson_id} />
+                    <CommentEditor
+                        course_id={course_id}
+                        lesson_id={lesson_id}
+                    />
                 </CardContent>
             </Card>
         </div>

components/dashboards/Common/comments/CommentsCard.tsx

@@ -37,7 +37,8 @@ const CommentCard = ({
     isReactionPresent,
     allComments,
     profiles,
-    currentUser
+    currentUser,
+    course_id
 }: {
     comment: Tables<'lesson_comments'>
     name: string
@@ -49,6 +50,7 @@ const CommentCard = ({
     allComments: any[]
     profiles: Array<Tables<'profiles'>>
     currentUser: User
+    course_id: number
 }) => {
     const [showReplies, setShowReplies] = useState(false)
     const [isEditing, setIsEditing] = useState(false)
@@ -124,6 +126,7 @@ const CommentCard = ({
                         <CommentEditor
                             lesson_id={comment.lesson_id}
                             comment_id={comment.id}
+                            course_id={course_id}
                             parent_comment_id={comment.parent_comment_id}
                             callback={() => setIsEditing(false)}
                         />
@@ -133,7 +136,10 @@ const CommentCard = ({
                 {showReplies && (
                     <div className="ml-1 mt-2">
                         <div className="flex flex-col gap-4">
-                            <CommentEditor lesson_id={comment.lesson_id} parent_comment_id={comment.id} callback={() => { setShowReplies(false) }} />
+                            <CommentEditor
+                                course_id={course_id}
+                                lesson_id={comment.lesson_id} parent_comment_id={comment.id} callback={() => { setShowReplies(false) }}
+                            />
                             <Button variant="destructive" onClick={toggleReplies}>Cancel</Button>
                         </div>
                     </div>
@@ -190,6 +196,7 @@ const CommentCard = ({
                                         <CommentCard
                                             key={reply.id}
                                             comment={reply}
+                                            course_id={course_id}
                                             name={replyUser?.full_name || 'Unknown'}
                                             avatar={replyUser?.avatar_url || '/img/favicon.png'}
                                             date={dayjs(reply.created_at).format('DD/MM/YYYY: HH:mm')}

components/dashboards/student/course/lessons/CommentEditor.tsx

@@ -11,10 +11,12 @@ export default function CommentEditor ({
     lesson_id,
     parent_comment_id,
     comment_id,
+    course_id,
     callback
 }: {
     lesson_id: number
     parent_comment_id?: number
+    course_id: number
     comment_id?: number
     callback?: () => void
 }) {
@@ -23,7 +25,7 @@ export default function CommentEditor ({
     const { toast } = useToast()
 
     const submitComment = async () => {
-        const payload = comment_id ? { content: commentState, commentId: comment_id } : { comment: commentState, lesson_id, parent_comment_id }
+        const payload = comment_id ? { content: commentState, commentId: comment_id } : { comment: commentState, lesson_id, parent_comment_id, course_id }
         const action = comment_id ? updateComment : studentSubmitLessonComment
 
         try {