From 8942bf58206039df572e7953c0d32bf7c27838e5 Mon Sep 17 00:00:00 2001
From: teabyte <yazan4code@gmail.com>
Date: Sun, 7 Jan 2024 20:17:13 +0300
Subject: [PATCH] sort by group

---
 components/EditButton.tsx    |  2 +-
 courses/functions/_data.json |  2 +-
 fresh.gen.ts                 |  2 ++
 routes/group/[slug].tsx      | 44 ++++++++++++++++++++++++++++++++++++
 routes/index.tsx             | 12 ++++++----
 5 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 routes/group/[slug].tsx

diff --git a/components/EditButton.tsx b/components/EditButton.tsx
index 2960d38..3557640 100644
--- a/components/EditButton.tsx
+++ b/components/EditButton.tsx
@@ -2,7 +2,7 @@ export default function EditButton({ slug }: { slug: string }) {
   return (
     <a
       target="_blank"
-      href={`https://github.com/TeaByte/NakhlahJS/edit/main/courses/${slug}.md`}
+      href={`https://github.com/TeaByte/NakhlahJS/blob/main/courses/${slug}.md`}
       class="pl-3 flex items-center gap-1 hover:opacity-75"
       title="تعديل الملف"
     >
diff --git a/courses/functions/_data.json b/courses/functions/_data.json
index 0190e26..b8f04cf 100644
--- a/courses/functions/_data.json
+++ b/courses/functions/_data.json
@@ -1,4 +1,4 @@
 {
   "label": "الدوال",
-  "order": 8
+  "order": 9
 }
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 83c1626..b6b0c62 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -6,6 +6,7 @@ import * as $_slug_ from "./routes/[...slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $api_test from "./routes/api/test.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 { type Manifest } from "$fresh/server.ts";
@@ -16,6 +17,7 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/api/test.ts": $api_test,
+    "./routes/group/[slug].tsx": $group_slug_,
     "./routes/index.tsx": $index,
   },
   islands: {
diff --git a/routes/group/[slug].tsx b/routes/group/[slug].tsx
new file mode 100644
index 0000000..f415c72
--- /dev/null
+++ b/routes/group/[slug].tsx
@@ -0,0 +1,44 @@
+import { Course, CourseGroup } from "../../utils/types.ts";
+import { getCourse } from "../../utils/course.ts";
+import { Handlers } from "$fresh/server.ts";
+import { PageProps } from "$fresh/server.ts";
+import { CSS, render } from "$gfm";
+import { Head } from "$fresh/runtime.ts";
+import { cache, populateCache } from "../../utils/course-cache.ts";
+import CourseCard from "../../components/CourseCard.tsx";
+
+import IconChevronDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/chevron-down.tsx";
+
+populateCache();
+
+// TODO - FIX TYPES
+export const handler: Handlers<CourseGroup> = {
+  GET(_req, ctx) {
+    const foundCourseGroup = cache.merged.find((c) => {
+      return "courses" in c && c.courses.length > 0 &&
+        c.order === parseInt(ctx.params.slug, 10);
+    });
+    if (!foundCourseGroup) return ctx.renderNotFound();
+    return ctx.render(foundCourseGroup as CourseGroup);
+  },
+};
+
+export default function CoursePage(props: PageProps<CourseGroup>) {
+  const foundCourseGroup = props.data;
+
+  return (
+    <main class="max-w-screen-md px-4 pt-12 mx-auto mb-6">
+      <div class="flex gap-1 items-center">
+        <h2 class="text-3xl font-bold">
+          {foundCourseGroup.label}
+        </h2>
+        <IconChevronDown />
+      </div>
+      <div class="flex flex-col mt-2 pr-3">
+        {foundCourseGroup.courses.map((innerCourse) => (
+          <CourseCard key={innerCourse.slug} course={innerCourse} />
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/routes/index.tsx b/routes/index.tsx
index b271414..425601a 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,13 +1,14 @@
 import { Handlers } from "$fresh/server.ts";
 import { Head } from "$fresh/runtime.ts";
 import { PageProps } from "$fresh/server.ts";
-
 import CourseCard from "../components/CourseCard.tsx";
 import { getCourses } from "../utils/course.ts";
 import { Course, CourseGroup } from "../utils/types.ts";
 import { cache, populateCache } from "../utils/course-cache.ts";
 import Footer from "../components/Footer.tsx";
 
+import IconChevronDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/chevron-down.tsx";
+
 populateCache();
 
 export const handler: Handlers<{ merged: (Course | CourseGroup)[] }> = {
@@ -46,9 +47,12 @@ export default function BlogIndexPage(
             if ("courses" in course) {
               return (
                 <div class="" key={index}>
-                  <h2 class="text-3xl font-bold">
-                    {course.label}
-                  </h2>
+                  <div class="flex gap-1 items-center">
+                    <h2 class="text-3xl font-bold hover:opacity-75">
+                      <a href={`/group/${course.order}`}>{course.label}</a>
+                    </h2>
+                    <IconChevronDown />
+                  </div>
                   <div class="flex flex-col mt-2 pr-3">
                     {course.courses.map((innerCourse) => (
                       <CourseCard key={innerCourse.slug} course={innerCourse} />