From d4a15cfef476d7118b68d0afc1e35a0c3f7aee35 Mon Sep 17 00:00:00 2001 From: teabyte Date: Tue, 20 Feb 2024 17:49:30 +0300 Subject: [PATCH] Refactroing, Fixing issues --- components/Collapse.tsx | 7 ++++- components/CourseCard.tsx | 15 ++++++----- components/Courses.tsx | 36 ++++++++++--------------- components/Drawer.tsx | 11 +++++--- components/EditButton.tsx | 6 ++++- components/EditorSplit.tsx | 6 ++++- components/MarkdownSplit.tsx | 22 ++++++++------- deno.json | 2 +- fresh.gen.ts | 2 -- islands/CodeBox.tsx | 52 ------------------------------------ islands/Editor.tsx | 1 + islands/ProgressBar.tsx | 6 ++++- islands/ProgressCheck.tsx | 7 ++++- islands/ProgressSection.tsx | 11 +++++--- islands/ThemeToggle.tsx | 4 +-- routes/[...slug].tsx | 2 -- routes/index.tsx | 2 -- utils/course.ts | 14 +++++----- utils/precode.ts | 6 ++--- utils/testingcode.ts | 8 +++--- 20 files changed, 98 insertions(+), 122 deletions(-) delete mode 100644 islands/CodeBox.tsx diff --git a/components/Collapse.tsx b/components/Collapse.tsx index 0bad849..238f310 100644 --- a/components/Collapse.tsx +++ b/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 (
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx index 43ba55b..40c283f 100644 --- a/components/CourseCard.tsx +++ b/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 ( -

- +

+ {course.title}

); -} +} \ No newline at end of file diff --git a/components/Courses.tsx b/components/Courses.tsx index 6617092..3c4284f 100644 --- a/components/Courses.tsx +++ b/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 ( <>
- +
-
+
{courses.map((course, index) => { // Group of courses if ("courses" in course) { return ( -
- +
+
); } else { // Single course return (
- +
); } })}
-

نعمل على الدروس القادمة...

+

نعمل على الدروس القادمة...

هل تود المساهمه في الموقع ؟ @@ -55,4 +47,4 @@ export default function Courses(
); -} +} \ No newline at end of file diff --git a/components/Drawer.tsx b/components/Drawer.tsx index d6450a4..8644c78 100644 --- a/components/Drawer.tsx +++ b/components/Drawer.tsx @@ -6,8 +6,12 @@ import Collapse from "./Collapse.tsx"; import IconLayoutSidebarLeftCollapse from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/layout-sidebar-left-collapse.tsx"; import IconChevronDown from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/chevron-down.tsx"; +interface DrawerProps { + courses: (Course | CourseGroup)[]; +} + export default function Drawer( - { courses }: { courses: (Course | CourseGroup)[] }, + { courses }: DrawerProps, ) { return (
@@ -36,12 +40,13 @@ export default function Drawer(

قائمة الدروس

- {courses.map((course, index) => { + {courses.map((course) => { // Group of courses if ("courses" in course) { return ( ); diff --git a/components/EditButton.tsx b/components/EditButton.tsx index b68e3db..8961d71 100644 --- a/components/EditButton.tsx +++ b/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 (
diff --git a/deno.json b/deno.json index 3cdd875..2c577ff 100644 --- a/deno.json +++ b/deno.json @@ -25,7 +25,7 @@ "tailwindcss/": "npm:/tailwindcss@3.3.5/", "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js", "$std/": "https://deno.land/std@0.208.0/", - "$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" }, diff --git a/fresh.gen.ts b/fresh.gen.ts index b77165d..3cbeda1 100644 --- a/fresh.gen.ts +++ b/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, diff --git a/islands/CodeBox.tsx b/islands/CodeBox.tsx deleted file mode 100644 index 989ff33..0000000 --- a/islands/CodeBox.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useEffect, useState } from "preact/hooks"; - -const words = [ - "Hello, World!", - "مرحبا يا عالم!", - "Hallo Welt!", -]; - -export default function CodeBox() { - const [code, setCode] = useState(""); - const [index, setIndex] = useState(0); - const [charIndex, setCharIndex] = useState(0); - const [isTyped, setIsTyped] = useState(false); - useEffect(() => { - const interval = setInterval(() => { - if (isTyped) { - setCode((code) => code.slice(0, -1)); - } - if (!isTyped) { - setCode((code) => code + words[index][charIndex]); - } - setCharIndex((charIndex) => { - if (charIndex < words[index].length - 1 && !isTyped) { - return charIndex + 1; - } else if (charIndex > 0 && isTyped) { - return charIndex - 1; - } else { - if (isTyped) { - setIndex((index) => (index + 1) % words.length); - } - setIsTyped(!isTyped); - return charIndex; - } - }); - }, 300); - - return () => clearInterval(interval); - }, [index, charIndex, isTyped]); - - return ( -
-

1

-

console

-

.

-

log

-

("

-

{code}

-

|

-

")

-
- ); -} \ No newline at end of file diff --git a/islands/Editor.tsx b/islands/Editor.tsx index 411b0eb..34a7678 100644 --- a/islands/Editor.tsx +++ b/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 diff --git a/islands/ProgressBar.tsx b/islands/ProgressBar.tsx index e2d66e2..57e87e0 100644 --- a/islands/ProgressBar.tsx +++ b/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}%` }; diff --git a/islands/ProgressCheck.tsx b/islands/ProgressCheck.tsx index 4f9bc22..7c035de 100644 --- a/islands/ProgressCheck.tsx +++ b/islands/ProgressCheck.tsx @@ -2,7 +2,12 @@ import IconCircleCheckFilled from "https://deno.land/x/tabler_icons_tsx@0.0.5/ts import IconCircle from "https://deno.land/x/tabler_icons_tsx@0.0.5/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(false); useEffect(() => { const passedTEXT = localStorage.getItem("passedCourses"); diff --git a/islands/ProgressSection.tsx b/islands/ProgressSection.tsx index e849657..944efab 100644 --- a/islands/ProgressSection.tsx +++ b/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(0); useEffect(() => { const passedTEXT = localStorage.getItem("passedCourses"); let passed: string[] = []; @@ -14,7 +19,7 @@ export default function ProgressSection( setCompleted(passed.length); }, []); return ( -
+

تقدمك في إنجاز الدروس

= { 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("/")) { diff --git a/routes/index.tsx b/routes/index.tsx index bfe68fc..4cdc5c7 100644 --- a/routes/index.tsx +++ b/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/tabler_icons_tsx@0.0.5/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() { JS نخلة

- {/* | It don't really look good and in small screen its an issue */}

تعلم بسهولة وفعالية

diff --git a/utils/course.ts b/utils/course.ts index b4b8165..a9aeea4 100644 --- a/utils/course.ts +++ b/utils/course.ts @@ -33,10 +33,10 @@ export async function getCourse( const courseAttrs = attrs as CourseAttributes; const course: Course = { slug, - title: courseAttrs.title || "بدون عنوان", - content: body || "لايوجد محتوى", - snippet: courseAttrs.snippet || "لا يوجد", - order: courseAttrs.order || 999, + title: courseAttrs.title ?? "بدون عنوان", + content: body ?? "لايوجد محتوى", + snippet: courseAttrs.snippet ?? "لا يوجد", + order: courseAttrs.order ?? 999, }; return course; } @@ -81,9 +81,9 @@ export async function getCourses( return { courses, - order: groupData?.order || 999, - label: groupData?.label || "بدون عنوان", - lableSlug: groupData?.lableSlug || "no-label", + order: groupData?.order ?? 999, + label: groupData?.label ?? "بدون عنوان", + lableSlug: groupData?.lableSlug ?? "no-label", }; }; diff --git a/utils/precode.ts b/utils/precode.ts index c54763e..e58133b 100644 --- a/utils/precode.ts +++ b/utils/precode.ts @@ -1,13 +1,13 @@ import { existsSync } from "https://deno.land/std@0.212.0/fs/mod.ts"; -// Geting the precode ( the default code on the editor ) code from precodes directory +// Getting the precode (the default code on the editor) code from precodes directory export function getPreCode(slug: string): string { if (!existsSync(`./precodes/${slug}.js`)) { return `console.log("سلام");`; } - const text = Deno.readTextFileSync(`./precodes/${slug}.js`); + const text: string = Deno.readTextFileSync(`./precodes/${slug}.js`); if (text.length > 0) { return text; } return `console.log("سلام");`; -} +} \ No newline at end of file diff --git a/utils/testingcode.ts b/utils/testingcode.ts index 89e87eb..254dd62 100644 --- a/utils/testingcode.ts +++ b/utils/testingcode.ts @@ -1,8 +1,10 @@ import { existsSync } from "https://deno.land/std@0.212.0/fs/mod.ts"; -// Geting the testcase code from testcase directory +// Getting the testcase code from testcase directory export function getTestingCode(slug: string): string { if (existsSync(`./testcases/${slug}.js`)) { - return Deno.readTextFileSync(`./testcases/${slug}.js`); - } else return ""; + return Deno.readTextFileSync(`./testcases/${slug}.js`).toString(); + } else { + return ""; + } } \ No newline at end of file