feature/reorder-lessons

app/(admin)/admin/courses/[courseId]/lessons/[lessonId]/page.tsx

@@ -29,7 +29,7 @@ export default async function AdminLessonEdit({
     const video = await dbGetVideoByLessonId(lessonId);
 
     return (
-        <div className="grid md:grid-cols-2">
+        <div className="grid md:grid-cols-2 p-4">
             <div>
                 <Heading as="h2">{lesson.name}</Heading>
                 <LessonForm lesson={lesson} courseId={courseId} />

app/(admin)/admin/courses/[courseId]/page.tsx

@@ -5,6 +5,7 @@ import { CourseForm } from "features/courses/components/forms/CourseForm";
 import { dbGetCourseAndDetailsAndLessonsById } from "lib/database/dbFuncs";
 import { CourseMaterialCard } from "features/courses/components/CourseMaterialCard";
 import { errorMessages } from "lib/config/errorMessages";
+import { CourseLessonsSortable } from "features/courses/components/CourseLessonsSortable";
 
 export const metadata = {};
 
@@ -32,50 +33,51 @@ export default async function AdminCourseEdit({
                     <CourseForm course={course} />
                 </div>
 
-                <div>
-                    <Heading as="h4">Course Details</Heading>
-                    {course.details ? (
-                        <CourseMaterialCard
-                            href={`/admin/courses/${courseId}/course-details/${course.details.id}`}
-                            heading="General details of the course"
-                            id={course.details.id}
-                            modelName="CourseDetails"
-                        />
-                    ) : (
-                        <div>
-                            <p>None yet.</p>
-                            <Link
-                                href={`/admin/courses/${courseId}/course-details/new`}
-                            >
-                                <button className="d-btn d-btn-primary">
-                                    Add details
-                                </button>
-                            </Link>
-                        </div>
-                    )}
-                    <Heading as="h4">Lessons</Heading>
-                    {course.lessons.length > 0 ? (
-                        <>
-                            {course.lessons.map((lesson) => (
-                                <CourseMaterialCard
-                                    key={lesson.id}
-                                    href={`/admin/courses/${course.id}/lessons/${lesson.id}`}
-                                    heading={lesson.name}
-                                    id={lesson.id}
-                                    modelName="Lesson"
-                                />
-                            ))}
-                        </>
-                    ) : (
-                        <div>
-                            <p>None yet.</p>
-                        </div>
-                    )}
-                    <Link href={`/admin/courses/${course.id}/lessons/new`}>
-                        <button className="d-btn d-btn-primary">
-                            Add a lesson
-                        </button>
-                    </Link>
+                <div className="flex flex-col gap-6">
+                    <div>
+                        <Heading as="h4">Course Details</Heading>
+                        {course.details ? (
+                            <CourseMaterialCard
+                                href={`/admin/courses/${courseId}/course-details/${course.details.id}`}
+                                heading="General details of the course"
+                                id={course.details.id}
+                                modelName="CourseDetails"
+                            />
+                        ) : (
+                            <div>
+                                <p>None yet.</p>
+                                <Link
+                                    href={`/admin/courses/${courseId}/course-details/new`}
+                                >
+                                    <button className="d-btn d-btn-primary">
+                                        Add details
+                                    </button>
+                                </Link>
+                            </div>
+                        )}
+                    </div>
+
+                    <div>
+                        <Heading as="h4">Lessons</Heading>
+                        {course.lessons.length > 0 ? (
+                            <CourseLessonsSortable
+                                courseId={course.id}
+                                lessons={course.lessons}
+                            />
+                        ) : (
+                            <div>
+                                <p>None yet.</p>
+                            </div>
+                        )}
+                    </div>
+
+                    <div className="flex justify-center">
+                        <Link href={`/admin/courses/${course.id}/lessons/new`}>
+                            <button className="d-btn d-btn-primary">
+                                Add a lesson
+                            </button>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>

app/globals.css

@@ -33,9 +33,6 @@
 @utility container {
     margin-inline: auto;
     padding-inline: 2rem;
-    @media (width >= --theme(--breakpoint-sm)) {
-        max-width: none;
-    }
     @media (width >= 1400px) {
         max-width: 1400px;
     }

cspell.json

@@ -11,7 +11,9 @@
         "public",
         "package-lock.json",
         "package.json",
-        "next.config.mjs"
+        "next.config.mjs",
+        ".env",
+        ".env.*"
     ],
     "dictionaryDefinitions": [],
     "dictionaries": [],
@@ -30,6 +32,7 @@
         "Clientside",
         "clsx",
         "cockroachdb",
+        "cuid",
         "Daseiendes",
         "Dasein",
         "defaultdb",
@@ -52,6 +55,7 @@
         "itselfness",
         "Keon",
         "lccn",
+        "livemode",
         "lxviii",
         "mctaggart",
         "mdxeditor",

features/courses/components/CourseFrontPage.tsx

@@ -32,7 +32,7 @@ export async function CourseFrontPage({ slug }: { slug: string }) {
     }
 
     return (
-        <FadeIn>
+        <FadeIn className="w-full">
             <div className="flex flex-col justify-center items-center py-10">
                 <div className="flex justify-center gap-20 flex-wrap">
                     <div className="flex flex-col">
@@ -59,12 +59,15 @@ export async function CourseFrontPage({ slug }: { slug: string }) {
                         </div>
                     )}
                 </div>
+
                 <div className="flex justify-center gap-20 flex-wrap-reverse mt-10 md:mt-1">
-                    {course?.details?.mdxCompiled ? (
-                        <MDXRenderer data={course.details.mdxCompiled} />
-                    ) : (
-                        <div>No course details</div>
-                    )}
+                    <div className="max-w-[800px]">
+                        {course?.details?.mdxCompiled ? (
+                            <MDXRenderer data={course.details.mdxCompiled} />
+                        ) : (
+                            <div>No course details</div>
+                        )}
+                    </div>
 
                     <div className="flex flex-col justify-start items-center md:items-end md:pt-8">
                         <CourseEnroll slug={slug} />

features/courses/components/CourseLessonsSortable.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Lesson } from "@prisma/client";
+import { SortableItem, SortableList } from "lib/components/SortableList";
+import { CourseMaterialCard } from "./CourseMaterialCard";
+import { actionUpdateLessonOrder } from "../server/actions";
+
+export const CourseLessonsSortable = ({
+    courseId,
+    lessons,
+}: {
+    courseId: string;
+    lessons: Lesson[];
+}) => {
+    return (
+        <SortableList items={lessons} onOrderChange={actionUpdateLessonOrder}>
+            {(items) =>
+                items.map((lesson) => (
+                    <SortableItem
+                        key={lesson.id}
+                        id={lesson.id}
+                        className="flex items-center gap-1 w-full"
+                    >
+                        <CourseMaterialCard
+                            key={lesson.id}
+                            href={`/admin/courses/${courseId}/lessons/${lesson.id}`}
+                            heading={lesson.name}
+                            id={lesson.id}
+                            modelName="Lesson"
+                        />
+                    </SortableItem>
+                ))
+            }
+        </SortableList>
+    );
+};

features/courses/components/CourseMaterialCard.tsx

@@ -47,14 +47,15 @@ export function CourseMaterialCard({
     };
 
     return (
-        <div className="flex border border-gray-200 rounded-lg mb-6 hover:bg-slate-200 duration-300 justify-between items-center">
-            <Link className="flex grow" href={href}>
-                <div className="flex p-2">
-                    <Heading as="h6">{heading}</Heading>
-                </div>
+        <div className="flex w-full border border-gray-200 rounded-lg hover:bg-slate-100 duration-300 justify-between items-center">
+            <div className="flex grow p-2">
+                <Heading as="h6">{heading}</Heading>
+            </div>
+            <Link className="flex" href={href}>
+                <button className="d-btn d-btn-accent mr-2 ">Edit</button>
             </Link>
             <button
-                className="d-btn d-btn-square mr-2 "
+                className="d-btn d-btn-square mr-2 hover:bg-red-500"
                 disabled={isPending}
                 onClick={() => setIsDialogOpen(true)}
             >

features/courses/components/TableOfLessons.tsx

@@ -21,21 +21,10 @@ export function TableOfLessons({
     if (lessons.length > 0) {
         return (
             <div className="mt-4 md:py-8 max-w-[320px]">
-                <div className="hidden md:block">
+                <div>
                     <Heading as="h3">Lessons</Heading>
                     <LessonsMap lessons={lessons} courseSlug={courseSlug} />
                 </div>
-                <div
-                    tabIndex={0}
-                    className="md:hidden d-collapse d-collapse-arrow"
-                >
-                    <div className="d-collapse-title text-xl font-medium">
-                        <Heading as="h3">Lessons</Heading>
-                    </div>
-                    <div className="d-collapse-content">
-                        <LessonsMap lessons={lessons} courseSlug={courseSlug} />
-                    </div>
-                </div>
             </div>
         );
     }
@@ -45,12 +34,12 @@ export function TableOfLessons({
 
 function LessonsMap({ lessons, courseSlug }: CourseLessonContentsProps) {
     return (
-        <ul className="menu max-w-xs">
+        <ul className="max-w-xs">
             {lessons.map((lesson: any, index) => {
                 return (
                     <li key={lesson.slug}>
                         <Link
-                            className="dark:hover:bg-dark-green-hsl transition-colors duration-300 flex p-1 hover:rounded-sm"
+                            className="dark:hover:bg-dark-green-hsl hover:bg-slate-200/90 transition-all duration-300 flex p-1 rounded-md"
                             href={`${links.courses}/${courseSlug}/${lesson.slug}`}
                         >
                             <svg

features/courses/server/actions.ts

@@ -6,7 +6,7 @@ import {
     bucketGenerateReadSignedUrl,
     bucketGenerateSignedUploadUrl,
 } from "lib/bucket/bucketFuncs";
-import { dbUpsertLessonById } from "lib/database/dbFuncs";
+import { dbReorderLessons, dbUpsertLessonById } from "lib/database/dbFuncs";
 import {
     ctrlCreateOrUpdateCourse,
     ctrlDeleteModelEntry,
@@ -165,3 +165,27 @@ export async function actionDeleteModelEntry(
     revalidateTag("allPublicCurses");
     return { data };
 }
+
+const reorderModelsSchema = z.array(z.string());
+
+type ActionUpdateLessonsOrder = z.infer<typeof reorderModelsSchema>;
+
+export async function actionUpdateLessonOrder(input: ActionUpdateLessonsOrder) {
+    const isAdmin = await validateAdminAccess();
+    if (!isAdmin) {
+        return { error: true, message: "Unauthorized" };
+    }
+    const parsedInput = reorderModelsSchema.safeParse(input);
+    if (!parsedInput.success) {
+        return {
+            error: true,
+            message: `Bad request ${parsedInput.error.message}`,
+        };
+    }
+
+    await dbReorderLessons({ orderedLessonIds: input });
+
+    revalidatePath("/(admin)/admin", "layout");
+    revalidateTag("allPublicCurses");
+    return { error: false, message: "Successfully reordered your lessons" };
+}

features/editor/components/EditorInternals.tsx

@@ -173,13 +173,6 @@ export default function EditorInternals({ material, title }: EditorProps) {
                     ]}
                 />
             </EditorContext.Provider>
-
-            <button
-                className="d-btn d-btn-warning d-btn-xs mt-4"
-                onClick={() => console.info(editorRef.current?.getMarkdown())}
-            >
-                DEBUG:Print markdown to console
-            </button>
         </div>
     );
 }