still working on the admin/courses/[id] page. right now im implementing being able to change order of course.

Author: adanrsantos

package.json

@@ -18,6 +18,7 @@
     "esbuild"
   ],
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "@hookform/resolvers": "^5.2.2",
     "@libsql/client": "^0.15.15",
     "@radix-ui/react-accordion": "^1.2.12",

pnpm-lock.yaml

@@ -2,9 +2,10 @@
 import { revalidatePath } from "next/cache";
 import { db } from "@/db/index";
 import { lessons, units } from "@/db/schema";
+import type { Lesson } from "@/db/schema";
 import { lessonFormSchema } from "@/lib/validations/lesson";
 import { actionClient } from "@/lib/safe-action";
-import { eq, asc } from "drizzle-orm";
+import { eq, asc, sql } from "drizzle-orm";
 
 export const createLessonAction = actionClient
   .schema(lessonFormSchema)
@@ -18,16 +19,26 @@ export const createLessonAction = actionClient
       contentUrl,
     } = parsedInput;
 
+    const [maxPosition] = await db
+      .select({ maxPosition: sql<number>`MAX(${lessons.position})` })
+      .from(lessons)
+      .where(eq(lessons.unitId, unitId))
+
+    const newPosition = (maxPosition?.maxPosition ?? 0) + 1;
+
     const metadata = JSON.stringify({
       title,
       description: description ?? "",
     });
 
     await db.insert(lessons).values({
       unitId,
+      title,
+      description,
       mediaType,   // now real value from the form
       metadata,
       contentUrl,  // real URL from the form
+      position: newPosition,
       // contentBlobId stays null
     });
 
@@ -36,20 +47,25 @@ export const createLessonAction = actionClient
     return { success: true };
 });
 
-export async function getLessonsForCourse(courseId: number) {
-  return await db
+export async function getLessonsForCourse(courseId: number): Promise<Lesson[]> {
+  const rows = await db
     .select({
-      lessonId: lessons.id,
+      id: lessons.id,
       unitId: lessons.unitId,
+      title: lessons.title,
+      description: lessons.description,
       mediaType: lessons.mediaType,
       contentUrl: lessons.contentUrl,
       contentBlobId: lessons.contentBlobId,
       metadata: lessons.metadata,
-      lessonPosition: lessons.position,
-      unitPosition: units.position,
+      position: lessons.position,
+      createdAt: lessons.createdAt,
+      updatedAt: lessons.updatedAt,
     })
     .from(units)
     .innerJoin(lessons, eq(units.id, lessons.unitId))
     .where(eq(units.courseId, courseId))
     .orderBy(asc(units.position), asc(lessons.position));
+
+  return rows;
 }

src/actions/admin/lesson.ts

@@ -1,8 +1,16 @@
-// import CourseId from "@/components/admin/CourseId";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+
+import CourseController from "@/components/admin/course/CourseController";
 import { getCourseById } from "@/actions/admin/course";
 import { getUnitsForCourse } from "@/actions/admin/units";
 import { getLessonsForCourse } from "@/actions/admin/lesson";
-import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
 export default async function CourseIdPage({ 
@@ -21,14 +29,33 @@ export default async function CourseIdPage({
   console.log("Units:", units);
   console.log("Lessons:", lessons);
 
+  if (!course) {
+    return (
+      // Should be 404 we need one
+      <div className="">empty</div>
+    );
+  }
+
   return (
-    <div className="">
-      <Link href={`/admin/courses/${id}/units/create`}>
-        <Button variant={"outline"} className="cursor-pointer">Create Unit</Button>
-      </Link>
-      <Link href={`/admin/courses/${id}/lesson/create`}>
-        <Button variant={"outline"} className="cursor-pointer">Create Lesson</Button>
-      </Link>
+    <div className="flex flex-col gap-4">
+      <div className="flex justify-end gap-4">
+        <Link href={`/admin/courses/${id}/lesson/create`}>
+          <Button variant={"outline"} className="cursor-pointer">Create Lesson</Button>
+        </Link>
+        <Link href={`/admin/courses/${id}/units/create`}>
+          <Button variant={"outline"} className="cursor-pointer">Create Unit</Button>
+        </Link>
+      </div>
+      <Card>
+        <CardTitle className="px-6 text-3xl">
+          <span className="font-semibold">Course: </span>
+          <span className="font-light">{course.title}</span>
+        </CardTitle>
+        <CardDescription className="px-6 text-md">{course.description}</CardDescription>
+        <CardContent>
+          <CourseController units={units} lessons={lessons} />
+        </CardContent>
+      </Card>
     </div>
   )
 }