Fix TypeError Drawer.tsx #25

TeaByte · Jan 19, 2024 · 2e3da31 · 2e3da31
1 parent 94e7dd1
commit 2e3da31
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/components/Drawer.tsx b/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 }: { courses: (Course | CourseGroup)[] },
+  { courses, completed }: { courses: (Course | CourseGroup)[], completed: string[] },
 ) {
   return (
     <div class="drawer">
@@ -35,14 +35,17 @@ 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} />
+                  <CourseCard course={course} isDone={completed
+                    ? completed.includes(course.slug.replace("\\", "/"))
+                    : false} />
                 </li>
               );
             }

diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -3,7 +3,9 @@ import { cache } from "../utils/course-cache.ts";
 import ThemeToggle from "../islands/ThemeToggle.tsx";
 import Drawer from "./Drawer.tsx";
 
-export default function NavBar() {
+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">
       <div class="flex items-center flex-1">
@@ -30,7 +32,7 @@ export default function NavBar() {
       </div>
       <div class="flex gap-2 items-center">
         <ThemeToggle />
-        <Drawer courses={cache.courses} />
+        <Drawer courses={cache.courses} completed={completed} />
       </div>
     </nav>
   );

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -4,7 +4,7 @@
 
 import * as $_slug_ from "./routes/[...slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
-import * as $_app from "./routes/_app.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";
@@ -21,7 +21,7 @@ const manifest = {
   routes: {
     "./routes/[...slug].tsx": $_slug_,
     "./routes/_404.tsx": $_404,
-    "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/_middleware.ts": $_middleware,
     "./routes/about.tsx": $about,
     "./routes/api/test/finsh.ts": $api_test_finsh,

diff --git a/routes/_app.tsx → routes/_layout.tsx b/routes/_app.tsx → routes/_layout.tsx
@@ -1,10 +1,14 @@
 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 function App({ Component }: PageProps) {
+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">
@@ -26,8 +30,8 @@ export default function App({ Component }: PageProps) {
       </head>
       <body>
         <div class="h-screen">
-          <NavBar />
-          <Component />
+          <NavBar completed={completed} />
+          <ctx.Component />
           <Toast />
         </div>
       </body>