Edit course form fixed (I think)

src/components/forms/course/CourseForm.js

@@ -7,6 +7,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { useToast } from '@/hooks/useToast';
+import { parseEvent } from '@/utils/nostr';
 import { useResourcesQuery } from '@/hooks/nostrQueries/content/useResourcesQuery';
 import { useWorkshopsQuery } from '@/hooks/nostrQueries/content/useWorkshopsQuery';
 import { useDraftsQuery } from '@/hooks/apiQueries/useDraftsQuery';
@@ -20,7 +21,7 @@ const CourseForm = ({ draft = null }) => {
     const [price, setPrice] = useState(draft?.price || 0);
     const [coverImage, setCoverImage] = useState(draft?.image || '');
     const [topics, setTopics] = useState(draft?.topics || ['']);
-    const [lessons, setLessons] = useState(draft?.resources?.map((resource, index) => ({ ...resource, index })) || []);
+    const [lessons, setLessons] = useState([]);
     const [allContent, setAllContent] = useState([]);
 
     const { data: session } = useSession();
@@ -30,6 +31,23 @@ const CourseForm = ({ draft = null }) => {
     const { workshops, workshopsLoading, workshopsError } = useWorkshopsQuery();
     const { drafts, draftsLoading, draftsError } = useDraftsQuery();
 
+    useEffect(() => {
+        if (draft && resources && workshops && drafts) {
+            const populatedLessons = draft.draftLessons.map((lesson, index) => {
+                if (lesson?.resource) {
+                    const matchingResource = resources.find((resource) => resource.d === lesson.resource.d);
+                    return { ...parseEvent(matchingResource), index };
+                } else if (lesson?.draft) {
+                    const matchingDraft = drafts.find((draft) => draft.id === lesson.draft.id);
+                    return { ...matchingDraft, index };
+                }
+                return null;
+            }).filter(Boolean);
+
+            setLessons(populatedLessons);
+        }
+    }, [draft, resources, workshops, drafts]);
+
     useEffect(() => {
         if (!resourcesLoading && !workshopsLoading && !draftsLoading && resources && workshops && drafts) {
             setAllContent([...resources, ...workshops, ...drafts]);
@@ -153,7 +171,7 @@ const CourseForm = ({ draft = null }) => {
                 <Button type="button" icon="pi pi-plus" onClick={addTopic} className="p-button-outlined mt-2" />
             </div>
             <div className="flex justify-center mt-8">
-                <Button type="submit" label="Create Course Draft" className="p-button-raised p-button-success" />
+                <Button type="submit" label={draft ? 'Update Course Draft' : 'Create Course Draft'} className="p-button-raised p-button-success" />
             </div>
         </form>
     );

src/components/forms/course/LessonSelector.js

@@ -16,6 +16,7 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent }) => {
 
     useEffect(() => {
         updateContentOptions();
+        console.log("lessons", lessons);
     }, [allContent, isPaidCourse, lessons]);
 
     const updateContentOptions = () => {

src/pages/course/[slug]/draft/edit.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 import { useRouter } from "next/router";
-import EditCourseForm from "@/components/forms/EditCourseForm";
+import CourseForm from "@/components/forms/course/CourseForm";
 import { useNDKContext } from "@/context/NDKContext";
 import { useToast } from "@/hooks/useToast";
 
@@ -34,7 +34,7 @@ export default function Edit() {
     return (
         <div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center">
             <h2 className="text-center mb-8">Edit Course Draft</h2>
-            {draft && <EditCourseForm draft={draft} />}
+            {draft && <CourseForm draft={draft} />}
         </div>
     );
 }