Mark as complete UI inconsistency issue resolved

code100x · Mar 13, 2024 · 8bdda89 · 8bdda89
1 parent 2bf6062
commit 8bdda89
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/components/Sidebar.tsx b/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,
@@ -58,9 +59,19 @@ export function Sidebar({
     const pathArray = findPathToContent(fullCourseContent, contentId);
     if (pathArray) {
       const path = `/courses/${courseId}/${pathArray.join('/')}`;
+      console.log(`Path is this ${path}`);
+
       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 +112,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 +243,26 @@ 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}
+        checked={markAsComplete.isValid && markAsComplete?.path === pathCheck(content.id) ? markAsComplete.isCompleted : completed}
         onClick={async (e) => {
           setCompleted(!completed);
           handleMarkAsCompleted(!completed, content.id);
+          setMarkAsComplete({
+            isValid : true,
+            path : currentPath,
+            isCompleted : !completed
+          })
           e.stopPropagation();
         }}
         type="checkbox"

diff --git a/src/store/atoms/markAsComplete.ts b/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}
+})