😊 Add progress bar and progress page split components

components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-export default function ProgressBar(props: { progress: number, text: string }) {
+export default function ProgressBar(props: { progress: number }) {
   const widthStyle = { width: `${props.progress}%` };
   return (
     <div className="bg-white rounded-xl shadow-sm overflow-hidden p-1">

components/ProgressPageSplit.tsx

@@ -1,9 +1,7 @@
-import { Course, CourseGroup } from "../utils/types.ts";
+import Progress from "../islands/Progress.tsx";
 import Icon from "./Icon.tsx";
 
-export default function ProgressPageSplit(
-    props: { courses: (Course | CourseGroup)[] },
-) {
+export default function ProgressPageSplit() {
     return (
         <>
             <div className="flex gap-2">
@@ -16,6 +14,7 @@ export default function ProgressPageSplit(
             </p>
             <h2 className="text-xl font-bold">تقدمك في إنجاز الدروس:</h2>
             {/* TODO: Make this a component */}
+            <Progress /> 
         </>
     );
 }

fresh.gen.ts

@@ -11,6 +11,7 @@ import * as $group_slug_ from "./routes/group/[slug].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $DoTest from "./islands/DoTest.ts";
 import * as $Editor from "./islands/Editor.tsx";
+import * as $Progress from "./islands/Progress.tsx";
 import * as $ProgressCheck from "./islands/ProgressCheck.tsx";
 import * as $ProgressTrack from "./islands/ProgressTrack.tsx";
 import * as $ThemeToggle from "./islands/ThemeToggle.tsx";
@@ -32,6 +33,7 @@ const manifest = {
   islands: {
     "./islands/DoTest.ts": $DoTest,
     "./islands/Editor.tsx": $Editor,
+    "./islands/Progress.tsx": $Progress,
     "./islands/ProgressCheck.tsx": $ProgressCheck,
     "./islands/ProgressTrack.tsx": $ProgressTrack,
     "./islands/ThemeToggle.tsx": $ThemeToggle,

islands/Progress.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "preact/hooks";
+import ProgressBar from "../components/ProgressBar.tsx";
+
+function Progress() {
+  const [progress, setProgress] = useState(0);
+  const [done, setDone] = useState(0);
+  const [total, setTotal] = useState(0);
+  useEffect(() => {
+    console.log(localStorage);
+    const done = Object.keys(localStorage).filter((key) => {
+      return localStorage.getItem(key) === "done";
+    });
+    const notdone = Object.keys(localStorage).filter((key) => {
+      return localStorage.getItem(key) === "notdone";
+    });
+    setProgress(done.length / (done.length + notdone.length));
+    setDone(done.length);
+    setTotal(done.length + notdone.length);
+  }, []);
+  return (
+    <div className="flex flex-col gap-2">
+        <h1 className="text-sm">لقد تعلمت {done} من أصل {total} درس</h1>
+        <ProgressBar progress={Math.floor(progress * 100)}  />
+    </div>
+  );
+}
+
+export default Progress;

islands/ProgressCheck.tsx

@@ -13,7 +13,12 @@ export default function ProgressCheck(props: ProgressTrackProps) {
   );
 
   useEffect(() => {
-    setIsDone(localStorage.getItem(props.slug.replace(/\\/g, "/")) === "done");
+    const done = localStorage.getItem(props.slug.replace(/\\/g, "/")) === "done";
+    setIsDone(done);
+    if (!done) {
+      localStorage.setItem(props.slug.replace(/\\/g, "/"), "notdone");
+    }
+
   }, []);
 
   return isDone

routes/index.tsx

@@ -8,6 +8,7 @@ import { cache } from "../utils/course-cache.ts";
 
 import Footer from "../components/Footer.tsx";
 import Courses from "../components/Courses.tsx";
+import ProgressPageSplit from "../components/ProgressPageSplit.tsx";
 
 
 export const handler: Handlers<{ courses: (Course | CourseGroup)[] }> = {
@@ -46,7 +47,7 @@ export default function BlogIndexPage(
           <Courses courses={courses} />
         </div>
         <div className="max-sm:w-full w-1/2 p-4 flex flex-col gap-2">
-          <ProgressPageSplit courses={courses} />
+          <ProgressPageSplit />
         </div>
       </main> */}
       <Footer />