Updating course form, added content dropdown in course form

src/components/content/dropdowns/ContentDropdownItem.js

@@ -0,0 +1,54 @@
+import React from "react";
+import Image from "next/image";
+import { useImageProxy } from "@/hooks/useImageProxy";
+import { Button } from "primereact/button";
+import { formatUnixTimestamp } from "@/utils/time";
+
+const ContentDropdownItem = ({ content, onSelect, selected }) => {
+    const { returnImageProxy } = useImageProxy();
+
+    if (selected) {
+        return (
+            <div className="w-full border-y-2 border-l-2 rounded-l-lg border-gray-700">
+                <div className="flex flex-row gap-4 p-2">
+                    <Image
+                        alt="content thumbnail"
+                        src={returnImageProxy(content.image)}
+                        width={50}
+                        height={50}
+                        className="w-[100px] h-[100px] object-cover object-center border-round"
+                    />
+                    <div className="flex-1">
+                        <div className="text-lg text-900 font-bold">{content.title}</div>
+                        <div className="min-h-[40px] text-sm text-600 line-clamp-2 break-words">{content.summary}</div>
+                        <div className="text-sm pt-6 text-gray-500">{content.published_at ? formatUnixTimestamp(content.published_at) : "not yet published"}</div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    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)}
+                    width={50}
+                    height={50}
+                    className="w-[100px] h-[100px] object-cover object-center border-round"
+                />
+                <div className="flex-1 max-w-[80vw]">
+                    <div className="text-lg text-900 font-bold">{content.title}</div>
+                    <div className="w-full text-sm text-600 text-wrap">{content.summary}</div>
+                    <div className="text-sm pt-6 text-gray-500">{content.published_at ? formatUnixTimestamp(content.published_at) : "not yet published"}</div>
+                </div>
+                <div className="flex flex-col justify-end">
+                    <Button label="Select" onClick={() => onSelect(content)} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContentDropdownItem;

src/components/forms/CourseForm.js

@@ -1,10 +1,15 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
 import { InputText } from "primereact/inputtext";
 import { InputNumber } from "primereact/inputnumber";
 import { InputSwitch } from "primereact/inputswitch";
-import { useToast } from "@/hooks/useToast";
 import { Button } from "primereact/button";
+import { Dropdown } from "primereact/dropdown";
 import { v4 as uuidv4 } from 'uuid';
+import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage";
+import { useNostr } from "@/hooks/useNostr";
+import { parseEvent } from "@/utils/nostr";
+import ContentDropdownItem from "@/components/content/dropdowns/ContentDropdownItem";
 import 'primeicons/primeicons.css';
 
 const CourseForm = () => {
@@ -12,40 +17,117 @@ const CourseForm = () => {
     const [summary, setSummary] = useState('');
     const [checked, setChecked] = useState(false);
     const [price, setPrice] = useState(0);
-    const [text, setText] = useState('');
-    const [resources, setResources] = useState(['']);
     const [coverImage, setCoverImage] = useState('');
+    const [lessons, setLessons] = useState([{ id: uuidv4(), title: 'Select a lesson' }]);
+    const [selectedLessons, setSelectedLessons] = useState([]);
     const [topics, setTopics] = useState(['']);
+    const [user, setUser] = useLocalStorageWithEffect('user', {});
+    const [drafts, setDrafts] = useState([]);
+    const [resources, setResources] = useState([]);
+    const [workshops, setWorkshops] = useState([]);
+    const { fetchResources, fetchWorkshops } = useNostr();
+    const [pubkey, setPubkey] = useState('');
 
-    const { showToast } = useToast();
+    const fetchAllContent = async () => {
+        try {
+            // Fetch drafts from the database
+            const draftsResponse = await axios.get(`/api/drafts/all/${user.id}`);
+            const drafts = draftsResponse.data;
 
-    const handleSubmit = (e) => {
+            // Fetch resources and workshops from Nostr
+            const resources = await fetchResources();
+            const workshops = await fetchWorkshops();
+
+            if (drafts.length > 0) {
+                setDrafts(drafts);
+            }
+            if (resources.length > 0) {
+                setResources(resources);
+            }
+            if (workshops.length > 0) {
+                setWorkshops(workshops);
+            }
+        } catch (err) {
+            console.error(err);
+            // Handle error
+        }
+    };
+
+    useEffect(() => {
+        if (user && user.id) {
+            fetchAllContent();
+        }
+    }, [user]);
+
+    const handleSubmit = async (e) => {
         e.preventDefault();
-        const payload = {
+        const createdAt = Math.floor(Date.now() / 1000); // UNIX timestamp
-            title,
+        const eventKind = 30050; // Custom kind for a course list
-            summary,
+
-            isPaidResource: checked,
+        const tags = [
-            price: checked ? price : null,
+            ["title", title],
-            content: text,
+            ["summary", summary],
-            topics: topics.map(topic => topic.trim().toLowerCase()),
+            ["price", checked ? price.toString() : "free"],
-            topics: [...topics.map(topic => topic.trim().toLowerCase()), 'plebdevs', 'course']
+            ["image", coverImage],
+            ...lessons.map(lesson => ["a", lesson.id, lesson.title.toLowerCase()]),
+            ...topics.map(topic => ["topic", topic.trim().toLowerCase()])
+        ];
+
+        const content = JSON.stringify({ description: "Course content details" }); // Placeholder content
+
+        const eventData = JSON.stringify([0, pubkey, createdAt, eventKind, tags, content]);
+
+        const nostrEvent = {
+            id: '', // ID would typically be a hash of eventData, to be filled in after eventData is signed
+            pubkey,
+            created_at: createdAt,
+            kind: eventKind,
+            tags,
+            content,
+            sig: '', // Signature to be generated externally
         };
 
-        console.log(payload);
+        console.log(nostrEvent); // Logging the event
-    }
-
-    const addResource = () => {
-        setResources([...resources, '']); // Add an empty string to the resources array
     };
 
-    const removeResource = (index) => {
+    const handleLessonChange = (e, index) => {
-        const updatedResources = resources.filter((_, i) => i !== index);
+        const selectedLessonId = e.value;
-        setResources(updatedResources);
+        const selectedLesson = getContentOptions(index).flatMap(group => group.items).find(lesson => lesson.value === selectedLessonId);
+    
+        const updatedLessons = lessons.map((lesson, i) =>
+            i === index ? { ...lesson, id: selectedLessonId, title: selectedLesson.label.props.content.title } : lesson
+        );
+        setLessons(updatedLessons);
     };
 
-    const handleResourceChange = (value, index) => {
+    const handleLessonSelect = (content) => {
-        const updatedResources = resources.map((resource, i) => i === index ? value : resource);
+        setSelectedLessons([...selectedLessons, content]);
-        setResources(updatedResources);
+        addLesson();
+    };
+
+    const addLesson = () => {
+        setLessons([...lessons, { id: uuidv4(), title: 'Select a lesson' }]);
+    };
+
+    const removeLesson = (index) => {
+        const updatedLessons = lessons.filter((_, i) => i !== index);
+        const updatedSelectedLessons = selectedLessons.filter((_, i) => i !== index);
+        
+        if (updatedLessons.length === 0) {
+            updatedLessons.push({ id: uuidv4(), title: 'Select a lesson' });
+        }
+        
+        setLessons(updatedLessons);
+        setSelectedLessons(updatedSelectedLessons);
+    };
+
+    const addTopic = () => {
+        setTopics([...topics, '']);
+    };
+
+    const removeTopic = (index) => {
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
     };
 
     const handleTopicChange = (index, value) => {
@@ -53,14 +135,45 @@ const CourseForm = () => {
         setTopics(updatedTopics);
     };
 
-    const addTopic = () => {
+    const getContentOptions = (index) => {
-        setTopics([...topics, '']); // Add an empty string to the topics array
+        const draftOptions = drafts.map(draft => ({
+            label: <ContentDropdownItem content={draft} onSelect={(content) => handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === draft.id} />,
+            value: draft.id
+        }));
+    
+        const resourceOptions = resources.map(resource => {
+            const { id, title, summary, image, published_at } = parseEvent(resource);
+            return {
+                label: <ContentDropdownItem content={{ id, title, summary, image, published_at }} onSelect={(content) => handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === id} />,
+                value: id
+            };
+        });
+    
+        const workshopOptions = workshops.map(workshop => {
+            const { id, title, summary, image, published_at } = parseEvent(workshop);
+            return {
+                label: <ContentDropdownItem content={{ id, title, summary, image, published_at }} onSelect={(content) => handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === id} />,
+                value: id
+            };
+        });
+    
+        return [
+            {
+                label: 'Drafts',
+                items: draftOptions
+            },
+            {
+                label: 'Resources',
+                items: resourceOptions
+            },
+            {
+                label: 'Workshops',
+                items: workshopOptions
+            }
+        ];
     };
 
-    const removeTopic = (index) => {
+    const lessonOptions = getContentOptions();
-        const updatedTopics = topics.filter((_, i) => i !== index);
-        setTopics(updatedTopics);
-    };
 
     return (
         <form onSubmit={handleSubmit}>
@@ -73,48 +186,52 @@ const CourseForm = () => {
             <div className="p-inputgroup flex-1 mt-8">
                 <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={checked} onChange={(e) => setChecked(e.value)} />
-                <div className="p-inputgroup flex-1 py-4">
+                {checked && (
-                    {checked && (
+                    <div className="p-inputgroup flex-1 py-4">
-                        <>
+                        <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
-                            <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                    </div>
-                            <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                )}
-                        </>
-                    )}
-                </div>
             </div>
             <div className="mt-8 flex-col w-full">
-                {resources.map((resource, index) => (
+                <div className="mt-8 flex-col w-full">
-                    <div key={index} className="p-inputgroup flex-1 mt-8">
+                    {selectedLessons.map((lesson, index) => (
-                        <InputText value={resource} onChange={(e) => handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} className="w-full" />
+                        <div key={lesson.id} className="p-inputgroup flex-1 mt-8">
-                        {index > 0 && ( // Only render the minus button if the index is greater than 0
+                            <ContentDropdownItem content={lesson} selected={true} />
-                            <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeResource(index)} />
+                            <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeLesson(index)} />
-                        )}
+                        </div>
-                    </div>
+                    ))}
-                ))}
+                    {lessons.map((lesson, index) => (
-                <div className="w-full flex flex-row items-end justify-end py-2">
+                        <div key={lesson.id} className="p-inputgroup flex-1 mt-8">
-                    <Button type="button" icon="pi pi-plus" onClick={addResource} />
+                            <Dropdown
+                                value={lesson.title}
+                                options={getContentOptions(index)}
+                                onChange={(e) => handleLessonChange(e, index)}
+                                placeholder="Select a Lesson"
+                                itemTemplate={(option) => option.label}
+                                optionLabel="label"
+                                optionGroupLabel="label"
+                                optionGroupChildren="items"
+                            />
+                        </div>
+                    ))}
                 </div>
             </div>
-
             <div className="mt-8 flex-col w-full">
                 {topics.map((topic, index) => (
-                    <div className="p-inputgroup flex-1" key={index}>
+                    <div key={index} className="p-inputgroup flex-1 mt-8">
-                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        <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>
                 ))}
-                <div className="w-full flex flex-row items-end justify-end py-2">
+                <Button type="button" icon="pi pi-plus" onClick={addTopic} className="p-button-outlined mt-2" />
-                    <Button icon="pi pi-plus" onClick={addTopic} />
-                </div>
             </div>
             <div className="flex justify-center mt-8">
-                <Button type="submit" severity="success" outlined label="Submit" />
+                <Button type="submit" label="Submit" className="p-button-raised p-button-success" />
             </div>
         </form>
     );

src/styles/globals.css

@@ -48,6 +48,11 @@ h3 {
   height: 100% !important;
 }
 
+.p-dropdown-items-wrapper {
+  max-width: 80vw !important;
+  max-height: 400px !important;
+}
+
 /* hero banner animation */
 @keyframes flip {
   0%, 100% {