Refactroing, Fixing issues

components/Collapse.tsx

@@ -1,8 +1,13 @@
 import ProgressCheck from "@/islands/ProgressCheck.tsx";
 import { Course } from "../utils/types.ts";
 
+interface CloseProps {
+  title: string;
+  courses: Course[];
+}
+
 export default function Collapse(
-  { title, courses }: { title: string; courses: Course[] },
+  { title, courses }: CloseProps,
 ) {
   return (
     <div class="collapse collapse-arrow bg-base-300">

components/CourseCard.tsx

@@ -1,20 +1,23 @@
 import { Course } from "@/utils/types.ts";
-
 import ProgressCheck from "@/islands/ProgressCheck.tsx";
 
-export default function CourseCard(props: { course: Course }) {
+interface CourseCardProps {
+  course: Course;
+}
+
+export default function CourseCard(props: CourseCardProps) {
   const { course } = props;
   return (
     <a
       title={course.title}
       href={`/${course.slug}`}
-      class="gray-200 hover:opacity-75 list-none"
+      className="gray-200 hover:opacity-75 list-none"
       style={{ order: course.order }}
     >
-      <h3 class="text-gray-500 font-bold flex gap-1 items-center bg-base-200 rounded-btn px-2 py-4">
-        <ProgressCheck slug={props.course.slug} />
+      <h3 className="text-gray-500 font-bold flex gap-1 items-center bg-base-200 rounded-btn px-2 py-4">
+        <ProgressCheck slug={course.slug} />
         {course.title}
       </h3>
     </a>
   );
-}
+}

components/Courses.tsx

@@ -1,52 +1,44 @@
-import { getNumberOfCourses } from "@/utils/course.ts";
 import { Course, CourseGroup } from "@/utils/types.ts";
 
 import Collapse from "./Collapse.tsx";
 import CourseCard from "./CourseCard.tsx";
 import ProgressSection from "@/islands/ProgressSection.tsx";
 
-export default function Courses(
-  { courses, total }: {
-    courses: (Course | CourseGroup)[];
-    total: number;
-  },
-) {
+interface CoursesProps {
+  courses: (Course | CourseGroup)[];
+  total: number;
+}
+
+export default function Courses({ courses, total }: CoursesProps) {
   return (
     <>
       <div className="py-2 bg-base-300 p-4 rounded-md">
-        <ProgressSection
-          total={total}
-        />
+        <ProgressSection total={total} />
       </div>
-      <section class="flex flex-col gap-2 mb-4 mt-6" f-client-nav={false}>
+      <section className="flex flex-col gap-2 mb-4 mt-6" f-client-nav={false}>
         {courses.map((course, index) => {
           // Group of courses
           if ("courses" in course) {
             return (
-              <div key={index}>
-                <Collapse
-                  title={course.label}
-                  courses={course.courses}
-                />
+              <div key={course.label}>
+                <Collapse title={course.label} courses={course.courses} />
               </div>
             );
           } else {
             // Single course
             return (
               <div key={course.slug}>
-                <CourseCard
-                  course={course}
-                />
+                <CourseCard course={course} />
               </div>
             );
           }
         })}
 
         <div>
-          <p class="mt-3 text-2xl">نعمل على الدروس القادمة...</p>
+          <p className="mt-3 text-2xl">نعمل على الدروس القادمة...</p>
           <a
             href="https://github.com/TeaByte/NakhlahJS"
-            class="text-gray-500 hover:underline"
+            className="text-gray-500 hover:underline"
             target="_blank"
           >
             هل تود المساهمه في الموقع ؟
@@ -55,4 +47,4 @@ export default function Courses(
       </section>
     </>
   );
-}
+}

components/Drawer.tsx

@@ -6,8 +6,12 @@ import Collapse from "./Collapse.tsx";
 import IconLayoutSidebarLeftCollapse from "https://deno.land/x/[email protected]/tsx/layout-sidebar-left-collapse.tsx";
 import IconChevronDown from "https://deno.land/x/[email protected]/tsx/chevron-down.tsx";
 
+interface DrawerProps {
+  courses: (Course | CourseGroup)[];
+}
+
 export default function Drawer(
-  { courses }: { courses: (Course | CourseGroup)[] },
+  { courses }: DrawerProps,
 ) {
   return (
     <div class="drawer">
@@ -36,12 +40,13 @@ export default function Drawer(
             <p class="text-lg">قائمة الدروس</p>
             <IconChevronDown />
           </div>
-          {courses.map((course, index) => {
+          {courses.map((course) => {
             // Group of courses
             if ("courses" in course) {
               return (
                 <Collapse
-                  title={course.label || "بدون عنوان"}
+                  key={course.label}
+                  title={course.label}
                   courses={course.courses}
                 />
               );

components/EditButton.tsx

@@ -1,4 +1,8 @@
-export default function EditButton({ slug }: { slug: string }) {
+interface EditButtonProps {
+  slug: string;
+}
+
+export default function EditButton({ slug }: EditButtonProps) {
   return (
     <a
       target="_blank"

components/EditorSplit.tsx

@@ -2,7 +2,11 @@ import Editor from "../islands/Editor.tsx";
 import { getPreCode } from "../utils/precode.ts";
 import { getTestingCode } from "../utils/testingcode.ts";
 
-export default function EditorSplit(props: { slug: string }) {
+interface EditorSplitProps {
+  slug: string;
+}
+
+export default function EditorSplit(props: EditorSplitProps) {
   const precode = getPreCode(props.slug);
   const testingcode = getTestingCode(props.slug);
   return (

components/MarkdownSplit.tsx

@@ -1,22 +1,26 @@
-import { render } from "https://deno.land/x/gfm/mod.ts";
+import { render } from "$gfm";
 import { Course } from "../utils/types.ts";
+
+import EditButton from "../components/EditButton.tsx";
+
 import IconPlayerTrackNext from "https://deno.land/x/[email protected]/tsx/player-track-next.tsx";
 import IconPlayerTrackPrev from "https://deno.land/x/[email protected]/tsx/player-track-prev.tsx";
-import EditButton from "../components/EditButton.tsx";
+
+interface MarkdownSplitProps {
+  course: Course;
+  lable: string | undefined;
+  lableSlug: string | undefined;
+  nextCourse: string | undefined;
+  prevCourse: string | undefined;
+}
 
 export default function MarkdownSplit({
   course,
   lable,
   lableSlug,
   nextCourse,
   prevCourse,
-}: {
-  course: Course;
-  lable: string | undefined;
-  lableSlug: string | undefined;
-  nextCourse: string | undefined;
-  prevCourse: string | undefined;
-}) {
+}: MarkdownSplitProps) {
   return (
     <>
       <div class="flex px-2 pt-2 gap-2">

deno.json

@@ -25,7 +25,7 @@
     "tailwindcss/": "npm:/[email protected]/",
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$std/": "https://deno.land/[email protected]/",
-    "$gfm": "https://deno.land/x/gfm@0.1.26/mod.ts",
+    "$gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
     "daisyui": "npm:daisyui@latest"
   },
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },

fresh.gen.ts

@@ -11,7 +11,6 @@ import * as $courses from "./routes/courses.tsx";
 import * as $group_slug_ from "./routes/group/[slug].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $offline from "./routes/offline.tsx";
-import * as $CodeBox from "./islands/CodeBox.tsx";
 import * as $Editor from "./islands/Editor.tsx";
 import * as $ProgressBar from "./islands/ProgressBar.tsx";
 import * as $ProgressCheck from "./islands/ProgressCheck.tsx";
@@ -33,7 +32,6 @@ const manifest = {
     "./routes/offline.tsx": $offline,
   },
   islands: {
-    "./islands/CodeBox.tsx": $CodeBox,
     "./islands/Editor.tsx": $Editor,
     "./islands/ProgressBar.tsx": $ProgressBar,
     "./islands/ProgressCheck.tsx": $ProgressCheck,

islands/Editor.tsx

@@ -51,6 +51,7 @@ export default function Editor(props: EditorProps) {
       setTesting(false);
       return;
     }
+    // isPass will get changed from the testcase javascript file
     // deno-lint-ignore prefer-const
     let isPass = false;
     // deno-lint-ignore prefer-const

islands/ProgressBar.tsx

@@ -1,4 +1,8 @@
-export default function ProgressBar(props: { progress: number }) {
+interface ProgressBarProps {
+  progress: number;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
   // min default must be 5 for better style
   const defultWidth = (props.progress < 5 && props.progress > 0) ? 5 : props.progress;
   const widthStyle = { width: `${defultWidth}%` };

islands/ProgressCheck.tsx

@@ -2,7 +2,12 @@ import IconCircleCheckFilled from "https://deno.land/x/[email protected]/ts
 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 }) {
+
+interface ProgressCheckProps {
+    slug: string;
+}
+
+export default function ProgressCheck(props: ProgressCheckProps) {
     const [isPassed, setIsPassed] = useState<boolean>(false);
     useEffect(() => {
         const passedTEXT = localStorage.getItem("passedCourses");

islands/ProgressSection.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useState } from "preact/hooks";
 import ProgressBar from "./ProgressBar.tsx";
 
+interface ProgressSectionProps {
+  total: number;
+  className?: string;
+}
+
 export default function ProgressSection(
-  props: { total: number; className?: string },
+  props: ProgressSectionProps,
 ) {
-  const [completed, setCompleted] = useState(0);
+  const [completed, setCompleted] = useState<number>(0);
   useEffect(() => {
     const passedTEXT = localStorage.getItem("passedCourses");
     let passed: string[] = [];
@@ -14,7 +19,7 @@ export default function ProgressSection(
     setCompleted(passed.length);
   }, []);
   return (
-    <div class={"flex-col py-2 " + props?.className}>
+    <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)}

islands/ThemeToggle.tsx

@@ -15,11 +15,11 @@ export default function ThemeToggle() {
       if (theme === "dim") {
         documentDiv.setAttribute("data-color-mode", "dark");
         documentDiv.setAttribute("data-dark-theme", "dark");
-        window.monaco && window.monaco.editor.setTheme("vs-dark");
+        window.monaco?.editor.setTheme("vs-dark");
       } else {
         documentDiv.setAttribute("data-color-mode", "light");
         documentDiv.setAttribute("data-light-theme", "light");
-        window.monaco && window.monaco.editor.setTheme("vs-light");
+        window.monaco?.editor.setTheme("vs-light");
       }
     }
   };

routes/[...slug].tsx

@@ -22,9 +22,7 @@ interface Props {
 export const handler: Handlers<Props> = {
   async GET(_req, ctx) {
     try {
-      let lable: string | undefined;
       const course = await getCourse(ctx.params.slug);
-      if (course === null) return ctx.renderNotFound();
       const nextCourse = findNextCourse(ctx.params.slug);
       const prevCourse = findPrevCourse(ctx.params.slug);
       if (ctx.params.slug.includes("/")) {

routes/index.tsx

@@ -3,7 +3,6 @@ import { Head } from "$fresh/runtime.ts";
 import Footer from "../components/Footer.tsx";
 import IconArrowBigRightLines from "https://deno.land/x/[email protected]/tsx/arrow-big-right-lines.tsx";
 import AboutIcons from "@/components/AboutIcons.tsx";
-// import CodeBox from "@/islands/CodeBox.tsx";
 
 export default function IndexPage() {
   return (
@@ -30,7 +29,6 @@ export default function IndexPage() {
                 <span class="bg-gradient-to-br from-yellow-500 to-yellow-300 bg-clip-text text-transparent font-bold">JS</span>
                 <span class="ml-2 bg-gradient-to-bl from-base-content to-base-content/80 bg-clip-text text-transparent font-bold">نخلة</span>
               </h1>
-              {/* <CodeBox /> | It don't really look good and in small screen its an issue */}
               <p class="text-3xl mb-2">
                 تعلم بسهولة وفعالية
               </p>