New course form started, fixed usDraftsQuery to only grab drafts and not coursedrafts

src/components/content/dropdowns/ContentDropdownItem.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import Image from "next/image";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { formatUnixTimestamp } from "@/utils/time";
@@ -7,12 +7,16 @@ import { Button } from "primereact/button";
 const ContentDropdownItem = ({ content, onSelect }) => {
     const { returnImageProxy } = useImageProxy();
 
+    useEffect(() => {
+        console.log("content", content);
+    }, [content]);
+
     return (
         <div className="w-full border-t-2 border-gray-700 py-4">
             <div className="flex flex-row gap-4 p-2">
                 <Image
                     alt="content thumbnail"
-                    src={returnImageProxy(content.image)}
+                    src={returnImageProxy(content?.image)}
                     width={50}
                     height={50}
                     className="w-[100px] h-[100px] object-cover object-center border-round"

src/components/forms/course/CourseForm.js

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Button } from 'primereact/button';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { useToast } from '@/hooks/useToast';
+import { useResourcesQuery } from '@/hooks/nostrQueries/content/useResourcesQuery';
+import { useWorkshopsQuery } from '@/hooks/nostrQueries/content/useWorkshopsQuery';
+import { useDraftsQuery } from '@/hooks/apiQueries/useDraftsQuery';
+import axios from 'axios';
+import LessonSelector from './LessonSelector';
+
+const CourseForm = ({ draft = null }) => {
+    const [title, setTitle] = useState(draft?.title || '');
+    const [summary, setSummary] = useState(draft?.summary || '');
+    const [isPaidCourse, setIsPaidCourse] = useState(draft?.price ? true : false);
+    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 || []);
+    const [allContent, setAllContent] = useState([]);
+
+    const { data: session } = useSession();
+    const router = useRouter();
+    const { showToast } = useToast();
+    const { resources, resourcesLoading, resourcesError } = useResourcesQuery();
+    const { workshops, workshopsLoading, workshopsError } = useWorkshopsQuery();
+    const { drafts, draftsLoading, draftsError } = useDraftsQuery();
+
+    useEffect(() => {
+        if (!resourcesLoading && !workshopsLoading && !draftsLoading && resources && workshops && drafts) {
+            setAllContent([...resources, ...workshops, ...drafts]);
+        }
+    }, [resources, workshops, drafts, resourcesLoading, workshopsLoading, draftsLoading]);
+
+    useEffect(() => {
+        console.log("lessons", lessons);
+    }, [lessons]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        if (!session?.user) {
+            showToast('error', 'Error', 'User not authenticated');
+            return;
+        }
+
+        try {
+            const courseDraftPayload = {
+                userId: session?.user.id,
+                title,
+                summary,
+                image: coverImage,
+                price: price || 0,
+                topics,
+                resources: lessons.filter(content => content.kind === 30023 || content.kind === 30402).map(resource => resource.d),
+                drafts: lessons.filter(content => !content.kind).map(draft => draft.id),
+            };
+
+            const response = await axios.post('/api/courses/drafts', courseDraftPayload);
+            const courseDraftId = response.data.id;
+
+            showToast('success', 'Success', 'Course draft saved successfully');
+            router.push(`/course/${courseDraftId}/draft`);
+        } catch (error) {
+            console.error('Error saving course draft:', error);
+            showToast('error', 'Failed to save course draft', error.response?.data?.details || error.message);
+        }
+    };
+
+    const addTopic = () => {
+        setTopics([...topics, '']);
+    };
+
+    const removeTopic = (index) => {
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
+    };
+
+    const handleTopicChange = (index, value) => {
+        const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
+        setTopics(updatedTopics);
+    };
+
+    if (resourcesLoading || workshopsLoading || draftsLoading) {
+        return <ProgressSpinner />;
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="p-inputgroup flex-1">
+                <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-4">
+                <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-4">
+                <InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-8 flex-col">
+                <p className="py-2">Paid Course</p>
+                <InputSwitch checked={isPaidCourse} onChange={(e) => setIsPaidCourse(e.value)} />
+                {isPaidCourse && (
+                    <div className="p-inputgroup flex-1 py-4">
+                        <InputNumber
+                            value={price}
+                            onValueChange={(e) => setPrice(e.value)}
+                            placeholder="Price (sats)"
+                            min={1}
+                        />
+                    </div>
+                )}
+            </div>
+                <LessonSelector
+                    isPaidCourse={isPaidCourse}
+                    lessons={lessons}
+                    setLessons={setLessons}
+                    allContent={allContent}
+                />
+            <div className="mt-4 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div key={index} className="p-inputgroup flex-1 mt-4">
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder={`Topic #${index + 1}`} className="w-full" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={() => removeTopic(index)} />
+                        )}
+                    </div>
+                ))}
+                <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" />
+            </div>
+        </form>
+    );
+};
+
+export default CourseForm;

src/components/forms/course/LessonSelector.js

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import { Dropdown } from 'primereact/dropdown';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import ResourceForm from '../ResourceForm';
+import WorkshopForm from '../WorkshopForm';
+import ContentDropdownItem from '@/components/content/dropdowns/ContentDropdownItem';
+import SelectedContentItem from '@/components/content/SelectedContentItem';
+import { parseEvent } from '@/utils/nostr';
+
+const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent }) => {
+    const [showResourceForm, setShowResourceForm] = useState(false);
+    const [showWorkshopForm, setShowWorkshopForm] = useState(false);
+    const [contentOptions, setContentOptions] = useState([]);
+
+    useEffect(() => {
+        updateContentOptions();
+    }, [allContent, isPaidCourse, lessons]);
+
+    const updateContentOptions = () => {
+        if (!allContent || allContent.length === 0) {
+            setContentOptions([]);
+            return;
+        }
+
+        const filterContent = (content) => {
+            const contentPrice = content.price || 0;
+            return isPaidCourse ? contentPrice > 0 : true;
+        };
+
+        const filteredContent = allContent.filter(filterContent)
+            .filter(content => !lessons.some(lesson => lesson.id === content.id))
+            .map(content => {
+                if (content?.kind) {
+                    return parseEvent(content);
+                } else {
+                    return content;
+                }
+            });
+
+        console.log("filteredContent", filteredContent);
+
+        const draftOptions = filteredContent.filter(content => !content.kind).map(content => ({
+            label: content.title,
+            value: content
+        }));
+
+        const resourceOptions = filteredContent.filter(content => content?.topics.includes('resource')).map(content => ({
+            label: content.title,
+            value: content
+        }));
+
+        const workshopOptions = filteredContent.filter(content => content?.topics.includes('workshop')).map(content => ({
+            label: content.title,
+            value: content
+        }));
+
+        setContentOptions([
+            {
+                label: 'Drafts',
+                items: draftOptions
+            },
+            {
+                label: 'Resources',
+                items: resourceOptions
+            },
+            {
+                label: 'Workshops',
+                items: workshopOptions
+            }
+        ]);
+    };
+
+    useEffect(() => {
+        console.log("contentOptions", contentOptions);
+    }, [contentOptions]);
+
+    const handleContentSelect = (selectedContent) => {
+        if (selectedContent && !lessons.some(lesson => lesson.id === selectedContent.id)) {
+            setLessons([...lessons, selectedContent]);
+        }
+    };
+
+    const removeLesson = (index) => {
+        const updatedLessons = lessons.filter((_, i) => i !== index);
+        setLessons(updatedLessons);
+    };
+
+    const handleNewResourceSave = (newResource) => {
+        setLessons([...lessons, newResource]);
+        setShowResourceForm(false);
+    };
+
+    const handleNewWorkshopSave = (newWorkshop) => {
+        setLessons([...lessons, newWorkshop]);
+        setShowWorkshopForm(false);
+    };
+
+    return (
+        <div className="mt-8">
+            <h3>Lessons</h3>
+            {lessons.map((lesson, index) => (
+                <div key={lesson.id} className="flex mt-4">
+                    <SelectedContentItem content={lesson} />
+                    <Button 
+                        icon="pi pi-times"
+                        className="p-button-danger rounded-tl-none rounded-bl-none" 
+                        onClick={() => removeLesson(index)}
+                    />
+                </div>
+            ))}
+            <div className="p-inputgroup flex-1 mt-4">
+                <Dropdown
+                    options={contentOptions}
+                    onChange={(e) => handleContentSelect(e.value)}
+                    placeholder="Select Existing Lesson"
+                    optionLabel="label"
+                    optionGroupLabel="label"
+                    optionGroupChildren="items"
+                    itemTemplate={(option) => <ContentDropdownItem content={option.value} onSelect={handleContentSelect} />}
+                    value={null}
+                />
+            </div>
+            <div className="flex mt-4">
+                <Button label="New Resource" onClick={() => setShowResourceForm(true)} className="mr-2" />
+                <Button label="New Workshop" onClick={() => setShowWorkshopForm(true)} />
+            </div>
+
+            <Dialog visible={showResourceForm} onHide={() => setShowResourceForm(false)} header="Create New Resource">
+                <ResourceForm onSave={handleNewResourceSave} isPaid={isPaidCourse} />
+            </Dialog>
+
+            <Dialog visible={showWorkshopForm} onHide={() => setShowWorkshopForm(false)} header="Create New Workshop">
+                <WorkshopForm onSave={handleNewWorkshopSave} isPaid={isPaidCourse} />
+            </Dialog>
+        </div>
+    );
+};
+
+export default LessonSelector;

src/hooks/apiQueries/useDraftsQuery.js

@@ -20,35 +20,19 @@ export function useDraftsQuery() {
 
   const fetchDraftsDB = async () => {
     try {
-        let allDrafts = [];
       if (!user.id) {
         return [];
       }
       const response = await axios.get(`/api/drafts/all/${user.id}`);
       if (response.status === 200) {
-        allDrafts = response.data;
-        const courseDrafts = await fetchCourseDrafts();
-        allDrafts = [...allDrafts, ...courseDrafts];
+        return response.data;
       }
-      return allDrafts;
     } catch (error) {
       console.error('Error fetching drafts from DB:', error);
       return [];
     }
   };
 
-  const fetchCourseDrafts = async () => {
-    try {
-      const response = await axios.get(`/api/courses/drafts/${user.id}/all`);
-      const drafts = response.data;
-      console.log('drafts:', drafts);
-      return drafts;
-    } catch (error) {
-      console.error('Error fetching course drafts from DB:', error);
-      return [];
-    }
-  };
-
   const { data: drafts, isLoading: draftsLoading, error: draftsError, refetch: refetchDrafts } = useQuery({
     queryKey: ['drafts', isClient],
     queryFn: fetchDraftsDB,

src/pages/create.js

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import MenuTab from "@/components/menutab/MenuTab";
 import ResourceForm from "@/components/forms/ResourceForm";
 import WorkshopForm from "@/components/forms/WorkshopForm";
-import CourseForm from "@/components/forms/CourseForm";
+// import CourseForm from "@/components/forms/CourseForm";
+import CourseForm from "@/components/forms/course/CourseForm";
 
 const Create = () => {
     const [activeIndex, setActiveIndex] = useState(0); // State to track the active tab index