fix : #216 Mark as complete button UI sync

src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import {
   Accordion,
   AccordionContent,
@@ -13,6 +13,7 @@ import { useRecoilState } from 'recoil';
 import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
 import { useEffect, useState } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
+import { markAsCompleteAtom } from '@/store/atoms/markAsComplete';
 
 export function Sidebar({
   courseId,
@@ -61,6 +62,12 @@ export function Sidebar({
       router.push(path);
     }
   };
+  const getContentPath = (contentId: any) => {
+    const pathArray = findPathToContent(fullCourseContent, contentId);
+    if (pathArray) {
+      return `/courses/${courseId}/${pathArray.join('/')}`;
+    }
+  };
 
   const renderContent = (contents: any) => {
     return contents.map((content: any) => {
@@ -101,7 +108,7 @@ export function Sidebar({
             </div>
             {content.type === 'video' ? (
               <div className="flex flex-col justify-center ml-2">
-                <Check content={content} />
+                <Check content={content} pathCheck = {getContentPath}/>
               </div>
             ) : null}
           </div>
@@ -232,17 +239,25 @@ function NotionIcon() {
 }
 
 // Todo: Fix types here
-function Check({ content }: { content: any }) {
+function Check({ content , pathCheck } : { content: any  , pathCheck : any}) {
   const [completed, setCompleted] = useState(
     content?.videoProgress?.markAsCompleted || false,
-  );
+  ); 
+  const [currentPath] = useState(usePathname());
+  const [markAsComplete , setMarkAsComplete] = useRecoilState(markAsCompleteAtom);
+
   return (
     <>
       <input
-        defaultChecked={completed}
-        onClick={async (e) => {
+        checked={markAsComplete.isValid && markAsComplete?.path === pathCheck(content.id) ? markAsComplete.isCompleted : completed}
+        onChange={async (e) => {
           setCompleted(!completed);
           handleMarkAsCompleted(!completed, content.id);
+          setMarkAsComplete({
+            isValid: true,
+            path: currentPath,
+            isCompleted: !completed
+          });
           e.stopPropagation();
         }}
         type="checkbox"

src/components/admin/ContentRendererClient.tsx

@@ -1,10 +1,12 @@
 'use client';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 // import { QualitySelector } from '../QualitySelector';
 import { VideoPlayerSegment } from '@/components/VideoPlayerSegment';
 import VideoContentChapters from '../VideoContentChapters';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { handleMarkAsCompleted } from '@/lib/utils';
+import { useRecoilState } from 'recoil';
+import { markAsCompleteAtom } from '@/store/atoms/markAsComplete';
 
 export const ContentRendererClient = ({
   metadata,
@@ -70,7 +72,10 @@ export const ContentRendererClient = ({
       type: 'video/mp4',
     };
   }
+  const [currentPath] = useState(usePathname());
+  const [markAsComplete , setMarkAsComplete] = useRecoilState(markAsCompleteAtom);
 
+
   const toggleShowChapters = () => {
     setShowChapters((prev) => !prev);
   };
@@ -86,8 +91,12 @@ export const ContentRendererClient = ({
       setContentCompleted((prev) => !prev);
     }
     setLoadingMarkAs(false);
+    setMarkAsComplete({
+      isValid : true,
+      path : currentPath,
+      isCompleted : contentCompleted
+    })
   };
-
   return (
     <div className="flex gap-2 items-start flex-col lg:flex-row">
       <div className="flex-1 w-full">
@@ -130,7 +139,8 @@ export const ContentRendererClient = ({
               disabled={loadingMarkAs}
               onClick={handleMarkCompleted}
             >
-              {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
+              {markAsComplete.isValid && markAsComplete?.path === currentPath ? (markAsComplete?.isCompleted ? "Mark as Incomplete" : "Mark as completed") : (contentCompleted ? "Mark as Incomplete" : "Mark as completed")}
+              {/* {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'} */}
             </button>
           </div>
 

src/store/atoms/markAsComplete.ts

@@ -0,0 +1,12 @@
+import {atom} from 'recoil';
+
+interface markAsCompleteParams {
+    isValid : boolean
+    path? : string,
+    isCompleted? : boolean
+}
+
+export const markAsCompleteAtom = atom<markAsCompleteParams>({
+  key: 'markAsCompleteAtom',
+  default: {isValid: false}
+});