Majhcc/issue26

components/Collapse.tsx

@@ -2,7 +2,7 @@ import { Course } from "../utils/types.ts";
 import CourseCard from "./CourseCard.tsx";
 
 export default function Collapse(
-  { title, courses, completed }: { title: string; courses: Course[]; completed: string[] },
+  { title, courses }: { title: string; courses: Course[]; },
 ) {
   return (
     <div class="collapse collapse-arrow bg-base-300">
@@ -12,7 +12,7 @@ export default function Collapse(
       </div>
       <div class="collapse-content flex flex-col">
         {courses.map((course) => (
-          <CourseCard isDone={completed ? completed.includes(course.slug.replace("\\", "/")) : false} key={course.slug} course={course} />
+          <CourseCard key={course.slug} course={course} />
         ))}
       </div>
     </div>

components/CourseCard.tsx

@@ -1,8 +1,8 @@
-import { Course } from "../utils/types.ts";
+import { Course } from "@/utils/types.ts";
 
-import ProgressCheck from "./ProgressCheck.tsx";
+import ProgressCheck from "@/islands/ProgressCheck.tsx"
 
-export default function CourseCard(props: { course: Course; isDone: boolean }) {
+export default function CourseCard(props: { course: Course}) {
   const { course } = props;
   return (
     <a
@@ -12,7 +12,7 @@ export default function CourseCard(props: { course: Course; isDone: boolean }) {
       style={{ order: course.order }}
     >
       <h3 class="text-gray-500 font-bold flex gap-1 items-center">
-        <ProgressCheck isDone={props.isDone} />
+        <ProgressCheck slug={props.course.slug} />
         {course.title}
       </h3>
     </a>

components/Courses.tsx

@@ -1,22 +1,20 @@
-import { getNumberOfCourses } from "../utils/course.ts";
-import { Course, CourseGroup } from "../utils/types.ts";
+import { getNumberOfCourses } from "@/utils/course.ts";
+import { Course, CourseGroup } from "@/utils/types.ts";
 
 import Collapse from "./Collapse.tsx";
 import CourseCard from "./CourseCard.tsx";
-import ProgressPageSplit from "./ProgressPageSplit.tsx";
+import ProgressSection from "@/islands/ProgressSection.tsx";
 
 export default function Courses(
-  { courses, completed }: {
+  { courses }: {
     courses: (Course | CourseGroup)[];
-    completed: string[];
   },
 ) {
   const total = getNumberOfCourses(courses);
   return (
     <>
       <div className="py-2 bg-base-300 p-4 rounded-md">
-        <ProgressPageSplit
-          completed={completed.length}
+        <ProgressSection
           total={total}
         />
       </div>
@@ -32,7 +30,6 @@ export default function Courses(
             return (
               <div key={index} class="mt-1">
                 <Collapse
-                  completed={completed}
                   title={course.label}
                   courses={course.courses}
                 />
@@ -44,9 +41,6 @@ export default function Courses(
               <div key={course.slug}>
                 <CourseCard
                   course={course}
-                  isDone={completed
-                    ? completed.includes(course.slug.replace("\\", "/"))
-                    : false}
                 />
               </div>
             );

components/Drawer.tsx

@@ -6,7 +6,7 @@ import CourseCard from "./CourseCard.tsx";
 import IconLayoutSidebarLeftCollapse from "https://deno.land/x/[email protected]/tsx/layout-sidebar-left-collapse.tsx";
 
 export default function Drawer(
-  { courses, completed }: { courses: (Course | CourseGroup)[], completed: string[] },
+  { courses }: { courses: (Course | CourseGroup)[] },
 ) {
   return (
     <div class="drawer">
@@ -35,17 +35,14 @@ export default function Drawer(
             if ("courses" in course) {
               return (
                 <Collapse
-                  completed={completed}
                   title={course.label || "بدون عنوان"}
                   courses={course.courses}
                 />
               );
             } else {
               return (
                 <li key={course.slug}>
-                  <CourseCard course={course} isDone={completed
-                    ? completed.includes(course.slug.replace("\\", "/"))
-                    : false} />
+                  <CourseCard course={course} />
                 </li>
               );
             }

components/Nav.tsx

@@ -4,7 +4,6 @@ import ThemeToggle from "../islands/ThemeToggle.tsx";
 import Drawer from "./Drawer.tsx";
 
 export default function NavBar(
-  { completed }: { completed: string[] },
 ) {
   return (
     <nav class="bg-base-300 w-full py-4 px-4 flex items-center gap-4 border-b-2 nav">
@@ -32,7 +31,7 @@ export default function NavBar(
       </div>
       <div class="flex gap-2 items-center">
         <ThemeToggle />
-        <Drawer courses={cache.courses} completed={completed} />
+        <Drawer courses={cache.courses} />
       </div>
     </nav>
   );

deno.json

@@ -12,6 +12,7 @@
   "lint": { "rules": { "tags": ["fresh", "recommended"] } },
   "exclude": ["**/_fresh/*"],
   "imports": {
+    "@/": "./",
     "$fresh/": "https://deno.land/x/[email protected]/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",

fresh.gen.ts

@@ -5,12 +5,13 @@
 import * as $_slug_ from "./routes/[...slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_layout from "./routes/_layout.tsx";
-import * as $_middleware from "./routes/_middleware.ts";
 import * as $about from "./routes/about.tsx";
-import * as $api_test_finsh from "./routes/api/test/finsh.ts";
 import * as $group_slug_ from "./routes/group/[slug].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $Editor from "./islands/Editor.tsx";
+import * as $ProgressBar from "./islands/ProgressBar.tsx";
+import * as $ProgressCheck from "./islands/ProgressCheck.tsx";
+import * as $ProgressSection from "./islands/ProgressSection.tsx";
 import * as $ThemeToggle from "./islands/ThemeToggle.tsx";
 import * as $Toast from "./islands/Toast.tsx";
 import * as $signals_store from "./islands/signals/store.ts";
@@ -22,14 +23,15 @@ const manifest = {
     "./routes/[...slug].tsx": $_slug_,
     "./routes/_404.tsx": $_404,
     "./routes/_layout.tsx": $_layout,
-    "./routes/_middleware.ts": $_middleware,
     "./routes/about.tsx": $about,
-    "./routes/api/test/finsh.ts": $api_test_finsh,
     "./routes/group/[slug].tsx": $group_slug_,
     "./routes/index.tsx": $index,
   },
   islands: {
     "./islands/Editor.tsx": $Editor,
+    "./islands/ProgressBar.tsx": $ProgressBar,
+    "./islands/ProgressCheck.tsx": $ProgressCheck,
+    "./islands/ProgressSection.tsx": $ProgressSection,
     "./islands/ThemeToggle.tsx": $ThemeToggle,
     "./islands/Toast.tsx": $Toast,
     "./islands/signals/store.ts": $signals_store,

islands/Editor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
 import { useToast } from "./useToast.ts";
-
+import { newPassSignal } from "./signals/store.ts"
 interface EditorProps {
   preCode: string;
   testingCode: string;
@@ -36,7 +36,7 @@ export default function Editor(props: EditorProps) {
     window.editor.setValue("");
     setOutput("");
   }
-  async function handleCodeTest() {
+  function handleCodeTest() {
     setTesting(true);
     const code: string = window.editor.getValue() || "";
     if (props.testingCode === "") {
@@ -49,7 +49,6 @@ export default function Editor(props: EditorProps) {
       setTesting(false);
       return;
     }
-
     // deno-lint-ignore prefer-const
     let isPass = false;
     // deno-lint-ignore prefer-const
@@ -58,40 +57,32 @@ export default function Editor(props: EditorProps) {
       eval(props.testingCode);
       if (isPass) {
         let courseSlug: string;
-        // THIS FOR DEV MODE ONLY IT WILL BE REMOVED IN PRODUCTION
-        // if (props.slug.includes("/")) {
-        //   courseSlug = props.slug.split("/")[0] + "\\" + props.slug.split("/")[1]
-        // } else {
-        //   courseSlug = props.slug;
-        // }
         courseSlug = props.slug;
-        const res = await fetch("/api/test/finsh", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            courseslug: courseSlug,
-          }),
-        });
-        if (!res.ok) {
-          showToast({
-            msg: "لم يتم تسجيل الاختبارات",
-            type: "error",
-          });
-          setTesting(false);
-          return;
+        const passedCourses = localStorage.getItem("passedCourses");
+        // check if there are a value in the local storage
+        if (passedCourses) {
+          const passedCoursesArray = JSON.parse(passedCourses);
+          // check if the course is already passed if not add it to the array and if yes do nothing
+          if (!passedCoursesArray.includes(courseSlug)) {
+            passedCoursesArray.push(courseSlug);
+            localStorage.setItem(
+              "passedCourses",
+              JSON.stringify(passedCoursesArray),
+            );
+          }
         } else {
-          showToast({
-            msg: "تم تجاوز الاختبارات بنجاح",
-            type: "success",
-          });
+          localStorage.setItem("passedCourses", JSON.stringify([courseSlug]));
         }
+        showToast({
+          msg: "تم تجاوز الاختبارات بنجاح",
+          type: "success",
+        });
+        newPassSignal.value = newPassSignal.value + 1;
         setTesting(false);
         return;
       } else {
         showToast({
-          msg: msg,
+          msg,
           type: "error",
         });
         setTesting(false);
@@ -178,7 +169,7 @@ export default function Editor(props: EditorProps) {
           className={" bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 grow " +
             (isError ? "text-error" : "")}
         >
-        {output}
+          {output}
         </pre>
       </div>
     </>

islands/ProgressCheck.tsx

@@ -0,0 +1,20 @@
+import IconCircleCheckFilled from "https://deno.land/x/[email protected]/tsx/circle-check-filled.tsx";
+import IconCircle from "https://deno.land/x/[email protected]/tsx/circle.tsx";
+import { useEffect, useState } from "preact/hooks";
+import { newPassSignal } from "./signals/store.ts";
+export default function ProgressCheck(props: {slug : string}) {
+    const [isPassed, setIsPassed] = useState<boolean>(false);
+    useEffect(() => {
+        const passedTEXT = localStorage.getItem("passedCourses");
+        let passed: string[] = [];
+        if (passedTEXT) {
+            passed = JSON.parse(passedTEXT);
+        }
+        if (passed.includes(props.slug.replace("\\", "/"))) {
+            setIsPassed(true);
+        }
+    }, [newPassSignal.value]);
+    return isPassed
+    ? <IconCircleCheckFilled aria-hidden="true" class="h-4 w-4" />
+    : <IconCircle aria-hidden="true" class="h-4 w-4" />;
+}

islands/ProgressSection.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "preact/hooks";
+import ProgressBar from "./ProgressBar.tsx";
+
+export default function ProgressSection(
+  props: { total: number; className?: string },
+) {
+  const [completed, setCompleted] = useState(0);
+  useEffect(() => {
+    const passedTEXT = localStorage.getItem("passedCourses");
+    let passed: string[] = [];
+    if (passedTEXT) {
+      passed = JSON.parse(passedTEXT);
+    }
+    setCompleted(passed.length);
+  }, []);
+  return (
+    <div class={"flex-col py-2 " + props?.className}>
+      <h2 className="text-xl font-bold pb-2">تقدمك في إنجاز الدروس</h2>
+      <ProgressBar
+        progress={Math.floor((completed / props.total) * 100)}
+      />
+    </div>
+  );
+}

islands/signals/store.ts

@@ -1,2 +1,3 @@
 import { signal } from "@preact/signals";
-export const ToastSignal = signal({ show: false, message: "", type: "" });
+export const ToastSignal = signal({ show: false, message: "", type: "" });
+export const newPassSignal = signal(0);

routes/_layout.tsx

@@ -1,14 +1,10 @@
 import { FreshContext, Handlers, type PageProps } from "$fresh/server.ts";
-import { getCookies } from "$std/http/mod.ts";
 import NavBar from "../components/Nav.tsx";
 import Toast from "../islands/Toast.tsx";
-import { getStudent } from "../utils/KV.ts";
 import { populateCache } from "../utils/course-cache.ts";
 
 populateCache();
 export default async function Layout(req: Request, ctx: FreshContext) {
-  const session = getCookies(req.headers)["sessionId"] ?? "";
-  const completed = (await getStudent(session))?.completedCourses ?? [];
   return (
     // Don't delete data-theme="dracula", used for defult theme and styles
     <html dir="rtl" lang="ar" data-theme="dracula">
@@ -30,7 +26,7 @@ export default async function Layout(req: Request, ctx: FreshContext) {
       </head>
       <body>
         <div class="h-screen">
-          <NavBar completed={completed} />
+          <NavBar />
           <ctx.Component />
           <Toast />
         </div>