got embedded workshop and resouce forms to work in course form

src/components/content/carousels/templates/CourseTemplate.js

@@ -5,6 +5,7 @@ import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { getTotalFromZaps } from "@/utils/lightning";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
+import { Tag } from "primereact/tag";
 import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 
 const CourseTemplate = ({ course }) => {
@@ -47,6 +48,11 @@ const CourseTemplate = ({ course }) => {
           {course.name || course.title}
         </h4>
         <p className="text-sm text-gray-500 line-clamp-2">{course.description || course.summary}</p>
+        {course.price && course.price > 0 ? (
+          <p className="text-sm text-gray-500 line-clamp-2">Price: {course.price} sats</p>
+        ) : (
+          <p className="text-sm text-gray-500 line-clamp-2">Free</p>
+        )}
         <div className="flex flex-row justify-between items-center mt-2">
           <p className="text-xs text-gray-400">
             {course?.published_at && course.published_at !== "" ? (
@@ -57,6 +63,13 @@ const CourseTemplate = ({ course }) => {
           </p>
           <ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading} />
         </div>
+        {course?.topics && course?.topics.length > 0 && (
+          <div className="flex flex-row justify-start items-center mt-2">
+            {course.topics.map((topic, index) => (
+              <Tag key={index} value={topic} className="mr-2 text-white" />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/components/content/carousels/templates/ResourceTemplate.js

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { getTotalFromZaps } from "@/utils/lightning";
+import { Tag } from "primereact/tag";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
 import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 
@@ -47,13 +48,25 @@ const ResourceTemplate = ({ resource }) => {
         <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
           {resource.title}
         </h4>
-        <p className="text-sm text-gray-500 min-h-[40px] line-clamp-2">{resource.summary}</p>
+        <p className="text-sm text-gray-500 line-clamp-2">{resource.summary}</p>
+        {resource.price && resource.price > 0 ? (
+          <p className="text-sm text-gray-500 line-clamp-2">Price: {resource.price} sats</p>
+        ) : (
+          <p className="text-sm text-gray-500 line-clamp-2">Free</p>
+        )}
         <div className="flex flex-row justify-between items-center mt-2">
           <p className="text-xs text-gray-400">
             {formatTimestampToHowLongAgo(resource.published_at)}
           </p>
           <ZapDisplay zapAmount={zapAmount} event={resource} zapsLoading={zapsLoading} />
         </div>
+        {resource?.topics && resource?.topics.length > 0 && (
+          <div className="flex flex-row justify-start items-center mt-2">
+            {resource.topics.map((topic, index) => (
+              <Tag key={index} value={topic} className="mr-2 text-white" />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/components/content/carousels/templates/WorkshopTemplate.js

@@ -6,6 +6,7 @@ import { useImageProxy } from "@/hooks/useImageProxy";
 import { getTotalFromZaps } from "@/utils/lightning";
 import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscription";
 import ZapDisplay from "@/components/zaps/ZapDisplay";
+import { Tag } from "primereact/tag";
 
 const WorkshopTemplate = ({ workshop }) => {
     const [zapAmount, setZapAmount] = useState(null);
@@ -45,12 +46,24 @@ const WorkshopTemplate = ({ workshop }) => {
                     {workshop.title}
                 </h4>
                 <p className="text-sm text-gray-500 line-clamp-2">{workshop.summary}</p>
+                {workshop.price && workshop.price > 0 ? (
+                    <p className="text-sm text-gray-500 line-clamp-2">Price: {workshop.price} sats</p>
+                ) : (                    
+                    <p className="text-sm text-gray-500 line-clamp-2">Free</p>
+                )}
                 <div className="flex flex-row justify-between items-center mt-2">
                     <p className="text-xs text-gray-400">
                         {formatTimestampToHowLongAgo(workshop.published_at)}
                     </p>
                     <ZapDisplay zapAmount={zapAmount} event={workshop} zapsLoading={zapsLoading} />
                 </div>
+                {workshop?.topics && workshop?.topics.length > 0 && (
+                    <div className="flex flex-row justify-start items-center mt-2">
+                        {workshop.topics.map((topic, index) => (
+                            <Tag key={index} value={topic} className="mr-2 text-white" />
+                        ))}
+                    </div>
+                )}
             </div>
         </div>
     );

src/components/content/lists/ContentListItem.js

@@ -3,6 +3,8 @@ import Image from "next/image";
 import { Button } from "primereact/button";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { useRouter } from "next/router";
+import { Divider } from 'primereact/divider';
+        
 
 const ContentListItem = (content) => {
     const { returnImageProxy } = useImageProxy();
@@ -50,6 +52,7 @@ const ContentListItem = (content) => {
                     </div>
                 </div>
             </div>
+            <Divider />
         </div>
     );
 };

src/components/forms/course/CourseForm.js

@@ -60,7 +60,7 @@ const CourseForm = ({ draft = null }) => {
         try {
             // First, create the courseDraft
             const courseDraftData = {
-                userId: session.user.id,
+                user: session.user.id,
                 title,
                 summary,
                 image: coverImage,
@@ -124,6 +124,34 @@ const CourseForm = ({ draft = null }) => {
         setTopics(updatedTopics);
     };
 
+    const handleNewResourceCreate = async (newResource) => {
+        try {
+            const response = await axios.post('/api/drafts', newResource);
+            const createdResource = response.data;
+            setAllContent(prevContent => [...prevContent, createdResource]);
+            return createdResource;
+        } catch (error) {
+            console.error('Error creating resource draft:', error);
+            showToast('error', 'Error', 'Failed to create resource draft');
+            return null;
+        }
+    };
+
+    const handleNewWorkshopCreate = async (newWorkshop) => {
+        try {
+            console.log('newWorkshop', newWorkshop);
+            const response = await axios.post('/api/drafts', newWorkshop);
+            console.log('response', response);
+            const createdWorkshop = response.data;
+            setAllContent(prevContent => [...prevContent, createdWorkshop]);
+            return createdWorkshop;
+        } catch (error) {
+            console.error('Error creating workshop draft:', error);
+            showToast('error', 'Error', 'Failed to create workshop draft');
+            return null;
+        }
+    };
+
     if (resourcesLoading || workshopsLoading || draftsLoading) {
         return <ProgressSpinner />;
     }
@@ -158,6 +186,8 @@ const CourseForm = ({ draft = null }) => {
                     lessons={lessons}
                     setLessons={setLessons}
                     allContent={allContent}
+                    onNewResourceCreate={handleNewResourceCreate}
+                    onNewWorkshopCreate={handleNewWorkshopCreate}
                 />
             <div className="mt-4 flex-col w-full">
                 {topics.map((topic, index) => (

src/components/forms/course/LessonSelector.js

@@ -3,13 +3,13 @@ import { Dropdown } from 'primereact/dropdown';
 import { Button } from 'primereact/button';
 import { Dialog } from 'primereact/dialog';
 import { Accordion, AccordionTab } from 'primereact/accordion';
-import ResourceForm from '../ResourceForm';
-import WorkshopForm from '../WorkshopForm';
+import EmbeddedResourceForm from '@/components/forms/course/embedded/EmbeddedResourceForm';
+import EmbeddedWorkshopForm from '@/components/forms/course/embedded/EmbeddedWorkshopform';
 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 LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent, onNewResourceCreate, onNewWorkshopCreate }) => {
     const [showResourceForm, setShowResourceForm] = useState(false);
     const [showWorkshopForm, setShowWorkshopForm] = useState(false);
     const [contentOptions, setContentOptions] = useState([]);
@@ -114,14 +114,21 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent }) => {
         setLessons([...lessons, { index: lessons.length }]);
     };
 
-    const handleNewResourceSave = (newResource) => {
-        setLessons([...lessons, { ...newResource, index: lessons.length }]);
-        setShowResourceForm(false);
+    const handleNewResourceSave = async (newResource) => {
+        const createdResource = await onNewResourceCreate(newResource);
+        if (createdResource) {
+            handleContentSelect(createdResource, lessons.length);
+            setShowResourceForm(false);
+        }
     };
 
-    const handleNewWorkshopSave = (newWorkshop) => {
-        setLessons([...lessons, { ...newWorkshop, index: lessons.length }]);
-        setShowWorkshopForm(false);
+    const handleNewWorkshopSave = async (newWorkshop) => {
+        console.log('newWorkshop', newWorkshop);
+        const createdWorkshop = await onNewWorkshopCreate(newWorkshop);
+        if (createdWorkshop) {
+            handleContentSelect(createdWorkshop, lessons.length);
+            setShowWorkshopForm(false);
+        }
     };
 
     const handleTabChange = (e) => {
@@ -158,8 +165,8 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent }) => {
                         <div className="flex mt-4">
                             {lesson.id ? null : (
                                 <>
-                                    <Button label="New Resource" onClick={() => setShowResourceForm(true)} className="mr-2" />
-                                    <Button label="New Workshop" onClick={() => setShowWorkshopForm(true)} className="mr-2" />
+                                    <Button label="New Resource" onClick={(e) => {e.preventDefault(); setShowResourceForm(true)}} className="mr-2" />
+                                    <Button label="New Workshop" onClick={(e) => {e.preventDefault(); setShowWorkshopForm(true)}} className="mr-2" />
                                 </>
                             )}
                         </div>
@@ -181,12 +188,12 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent }) => {
                 type="button" // Explicitly set type to "button"
             />
 
-            <Dialog visible={showResourceForm} onHide={() => setShowResourceForm(false)} header="Create New Resource">
-                <ResourceForm onSave={handleNewResourceSave} isPaid={isPaidCourse} />
+            <Dialog className='w-full max-w-screen-md' visible={showResourceForm} onHide={() => setShowResourceForm(false)} header="Create New Resource">
+                <EmbeddedResourceForm onSave={handleNewResourceSave} isPaid={isPaidCourse} />
             </Dialog>
 
-            <Dialog visible={showWorkshopForm} onHide={() => setShowWorkshopForm(false)} header="Create New Workshop">
-                <WorkshopForm onSave={handleNewWorkshopSave} isPaid={isPaidCourse} />
+            <Dialog className='w-full max-w-screen-md' visible={showWorkshopForm} onHide={() => setShowWorkshopForm(false)} header="Create New Workshop">
+                <EmbeddedWorkshopForm onSave={handleNewWorkshopSave} isPaid={isPaidCourse} />
             </Dialog>
         </div>
     );

src/components/forms/course/embedded/EmbeddedResourceForm.js

@@ -0,0 +1,226 @@
+import React, { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+import { InputText } from "primereact/inputtext";
+import { InputNumber } from "primereact/inputnumber";
+import { InputSwitch } from "primereact/inputswitch";
+import { Button } from "primereact/button";
+import { useSession } from "next-auth/react";
+import { useToast } from "@/hooks/useToast";
+import { useNDKContext } from "@/context/NDKContext";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import dynamic from 'next/dynamic';
+const MDEditor = dynamic(
+    () => import("@uiw/react-md-editor"),
+    {
+        ssr: false,
+    }
+);
+import 'primeicons/primeicons.css';
+import { Tooltip } from 'primereact/tooltip';
+import 'primereact/resources/primereact.min.css';
+
+const EmbeddedResourceForm = ({ draft = null, isPublished = false, onSave, isPaid }) => {
+    const [title, setTitle] = useState(draft?.title || '');
+    const [summary, setSummary] = useState(draft?.summary || '');
+    const [isPaidResource, setIsPaidResource] = useState(isPaid);
+    const [price, setPrice] = useState(draft?.price || 0);
+    const [coverImage, setCoverImage] = useState(draft?.image || '');
+    const [topics, setTopics] = useState(draft?.topics || ['']);
+    const [content, setContent] = useState(draft?.content || '');
+    const [user, setUser] = useState(null);
+    const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
+
+    const { data: session, status } = useSession();
+    const { showToast } = useToast();
+    const { ndk, addSigner } = useNDKContext();
+
+    useEffect(() => {
+        console.log('isPublished', isPublished);
+        console.log('draft', draft);
+    }, [isPublished, draft]);
+
+    useEffect(() => {
+        if (session) {
+            console.log('session', session.user);
+            setUser(session.user);
+        }
+    }, [session]);
+
+    const handleContentChange = useCallback((value) => {
+        setContent(value || '');
+    }, []);
+
+    useEffect(() => {
+        if (draft) {
+            setTitle(draft.title);
+            setSummary(draft.summary);
+            setIsPaidResource(draft.price ? true : false);
+            setPrice(draft.price || 0);
+            setContent(draft.content);
+            setCoverImage(draft.image);
+            setTopics(draft.topics || []);
+            setAdditionalLinks(draft.additionalLinks || []);
+        }
+    }, [draft]);
+
+    const buildEvent = async (draft) => {
+        const dTag = draft.d
+        const event = new NDKEvent(ndk);
+        let encryptedContent;
+
+        if (draft?.price) {
+            // encrypt the content with NEXT_PUBLIC_APP_PRIV_KEY to NEXT_PUBLIC_APP_PUBLIC_KEY
+            encryptedContent = await nip04.encrypt(process.env.NEXT_PUBLIC_APP_PRIV_KEY, process.env.NEXT_PUBLIC_APP_PUBLIC_KEY, draft.content);
+        }
+
+        event.kind = draft?.price ? 30402 : 30023; // Determine kind based on if price is present
+        event.content = draft?.price ? encryptedContent : draft.content;
+        event.created_at = Math.floor(Date.now() / 1000);
+        event.pubkey = user.pubkey;
+        event.tags = [
+            ['d', dTag],
+            ['title', draft.title],
+            ['summary', draft.summary],
+            ['image', draft.image],
+            ...draft.topics.map(topic => ['t', topic]),
+            ['published_at', Math.floor(Date.now() / 1000).toString()],
+            ...(draft?.price ? [['price', draft.price.toString()], ['location', `https://plebdevs.com/details/${draft.id}`]] : []),
+        ];
+
+        return event;
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        const payload = {
+            title,
+            summary,
+            type: 'resource',
+            price: isPaidResource ? price : null,
+            content,
+            image: coverImage,
+            topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'resource'])],
+            additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
+            user: user?.id || user?.pubkey
+        };
+
+        if (onSave) {
+            try {
+                await onSave(payload);
+                showToast('success', 'Success', draft ? 'Resource updated successfully.' : 'Resource created successfully.');
+            } catch (error) {
+                console.error(error);
+                showToast('error', 'Error', 'Failed to save resource. Please try again.');
+            }
+        }
+    };
+
+    const handleTopicChange = (index, value) => {
+        const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
+        setTopics(updatedTopics);
+    };
+
+    const addTopic = (e) => {
+        e.preventDefault();
+        setTopics([...topics, '']); // Add an empty string to the topics array
+    };
+
+    const removeTopic = (e, index) => {
+        e.preventDefault();
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
+    };
+
+    const handleAdditionalLinkChange = (index, value) => {
+        const updatedAdditionalLinks = additionalLinks.map((link, i) => i === index ? value : link);
+        setAdditionalLinks(updatedAdditionalLinks);
+    };
+
+    const addAdditionalLink = (e) => {
+        e.preventDefault();
+        setAdditionalLinks([...additionalLinks, '']); // Add an empty string to the additionalLinks array
+    };
+
+    const removeAdditionalLink = (e, index) => {
+        e.preventDefault();
+        const updatedAdditionalLinks = additionalLinks.filter((_, i) => i !== index);
+        setAdditionalLinks(updatedAdditionalLinks);
+    };
+
+    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 Resource</p>
+                <InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} />
+                {isPaidResource && (
+                    <div className="p-inputgroup flex-1 py-4">
+                        <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                    </div>
+                )}
+            </div>
+            <div className="p-inputgroup flex-1 flex-col mt-4">
+                <span>Content</span>
+                <div data-color-mode="dark">
+                    <MDEditor
+                        value={content}
+                        onChange={handleContentChange}
+                        height={350}
+                    />
+                </div>
+            </div>
+            <div className="mt-8 flex-col w-full">
+                <span className="pl-1 flex items-center">
+                    External Links
+                    <i className="pi pi-info-circle ml-2 cursor-pointer" 
+                       data-pr-tooltip="Add any relevant external links that pair with this content"
+                       data-pr-position="right"
+                       data-pr-at="right+5 top"
+                       data-pr-my="left center-2"
+                       style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
+                    />
+                </span>
+                {additionalLinks.map((link, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={link} onChange={(e) => handleAdditionalLinkChange(index, e.target.value)} placeholder="https://plebdevs.com" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeAdditionalLink(e, index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addAdditionalLink} />
+                </div>
+                <Tooltip target=".pi-info-circle" />
+            </div>
+            <div className="mt-8 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeTopic(e, index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addTopic} />
+                </div>
+            </div>
+            <div className="flex justify-center mt-8">
+                <Button type="submit" severity="success" outlined label={draft ? "Update" : "Submit"} />
+            </div>
+        </form>
+    );
+}
+
+export default EmbeddedResourceForm;

src/components/forms/course/embedded/EmbeddedWorkshopForm.js

@@ -0,0 +1,188 @@
+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 { Button } from 'primereact/button';
+import { useToast } from '@/hooks/useToast';
+import { useSession } from 'next-auth/react';
+import 'primeicons/primeicons.css';
+import { Tooltip } from 'primereact/tooltip';
+import 'primereact/resources/primereact.min.css';
+
+const EmbeddedWorkshopForm = ({ draft = null, onSave, isPaid }) => {
+    const [title, setTitle] = useState(draft?.title || '');
+    const [summary, setSummary] = useState(draft?.summary || '');
+    const [price, setPrice] = useState(draft?.price || 0);
+    const [isPaidResource, setIsPaidResource] = useState(isPaid);
+    const [videoUrl, setVideoUrl] = useState(draft?.content || '');
+    const [coverImage, setCoverImage] = useState(draft?.image || '');
+    const [topics, setTopics] = useState(draft?.topics || ['']);
+    const [user, setUser] = useState();
+    const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
+
+    const { showToast } = useToast();
+    const { data: session, status } = useSession();
+
+    useEffect(() => {
+        if (session) {
+            console.log('session', session.user);
+            setUser(session.user);
+        }
+    }, [session]);
+
+    useEffect(() => {
+        if (draft) {
+            setTitle(draft.title);
+            setSummary(draft.summary);
+            setPrice(draft.price || 0);
+            setIsPaidResource(draft.price ? true : false);
+            setVideoUrl(draft.content);
+            setCoverImage(draft.image);
+            setTopics(draft.topics || ['']);
+            setAdditionalLinks(draft.additionalLinks || ['']);
+        }
+    }, [draft]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        let embedCode = '';
+    
+        // Check if it's a YouTube video
+        if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
+            const videoId = videoUrl.split('v=')[1] || videoUrl.split('/').pop();
+            embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
+        }
+        // Check if it's a Vimeo video
+        else if (videoUrl.includes('vimeo.com')) {
+            const videoId = videoUrl.split('/').pop();
+            embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
+        }
+        // Add more conditions here for other video services
+
+        const payload = {
+            title,
+            summary,
+            type: 'workshop',
+            price: isPaidResource ? price : null,
+            content: embedCode,
+            image: coverImage,
+            topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'workshop'])],
+            additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
+            user: user?.id || user?.pubkey
+        };
+
+        if (onSave) {
+            try {
+                await onSave(payload);
+                showToast('success', 'Success', draft ? 'Workshop updated successfully.' : 'Workshop created successfully.');
+            } catch (error) {
+                console.error(error);
+                showToast('error', 'Error', 'Failed to save workshop. Please try again.');
+            }
+        }
+    };
+
+    const handleTopicChange = (index, value) => {
+        const updatedTopics = topics.map((topic, i) => i === index ? value : topic);
+        setTopics(updatedTopics);
+    };
+
+    const addTopic = (e) => {
+        e.preventDefault();
+        setTopics([...topics, '']); // Add an empty string to the topics array
+    };
+
+    const removeTopic = (e, index) => {
+        e.preventDefault();
+        const updatedTopics = topics.filter((_, i) => i !== index);
+        setTopics(updatedTopics);
+    };
+
+    const handleLinkChange = (index, value) => {
+        const updatedLinks = additionalLinks.map((link, i) => i === index ? value : link);
+        setAdditionalLinks(updatedLinks);
+    };
+
+    const addLink = (e) => {
+        e.preventDefault();
+        setAdditionalLinks([...additionalLinks, '']);
+    };
+
+    const removeLink = (e, index) => {
+        e.preventDefault();
+        const updatedLinks = additionalLinks.filter((_, i) => i !== index);
+        setAdditionalLinks(updatedLinks);
+    };
+    
+
+    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 flex-col">
+                <p className="py-2">Paid Workshop</p>
+                <InputSwitch checked={isPaidResource} onChange={(e) => setIsPaidResource(e.value)} />
+                {isPaidResource && (
+                    <div className="p-inputgroup flex-1 py-4">
+                        <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                        <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                    </div>
+                )}
+            </div>
+            <div className="p-inputgroup flex-1 mt-4">
+                <InputText value={videoUrl} onChange={(e) => setVideoUrl(e.target.value)} placeholder="Video URL" />
+            </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="mt-8 flex-col w-full">
+                <span className="pl-1 flex items-center">
+                    External Links
+                    <i className="pi pi-info-circle ml-2 cursor-pointer" 
+                       data-pr-tooltip="Add any relevant external links that pair with this content"
+                       data-pr-position="right"
+                       data-pr-at="right+5 top"
+                       data-pr-my="left center-2"
+                       style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
+                    />
+                </span>
+                {additionalLinks.map((link, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={link} onChange={(e) => handleLinkChange(index, e.target.value)} placeholder="https://example.com" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeLink(e, index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addLink} />
+                </div>
+                <Tooltip target=".pi-info-circle" />
+            </div>
+            <div className="mt-4 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <Button icon="pi pi-times" className="p-button-danger mt-2" onClick={(e) => removeTopic(e, index)} />
+                        )}
+                    </div>
+                ))}
+                <div className="w-full flex flex-row items-end justify-end py-2">
+                    <Button icon="pi pi-plus" onClick={addTopic} />
+                </div>
+            </div>
+            <div className="flex justify-center mt-8">
+                <Button type="submit" severity="success" outlined label={draft ? "Update" : "Submit"} />
+            </div>
+        </form>
+    );
+}
+
+export default EmbeddedWorkshopForm;

src/db/models/courseDraftModels.js

@@ -43,7 +43,7 @@ export const createCourseDraft = async (data) => {
     return await prisma.courseDraft.create({
         data: {
             ...data,
-            user: { connect: { id: data.userId } },
+            user: { connect: { id: data.user } },
         },
         include: {
             draftLessons: {

src/pages/api/courses/drafts/index.js

@@ -3,25 +3,7 @@ import { createCourseDraft } from "@/db/models/courseDraftModels";
 export default async function handler(req, res) {
     if (req.method === 'POST') {
         try {
-            const { userId, title, summary, image, price, topics, draftLessons } = req.body;
-
-            if (!userId) {
-                return res.status(400).json({ error: 'userId is required' });
-            }
-
-            const courseDraft = await createCourseDraft({
-                userId,
-                title,
-                summary,
-                image,
-                price,
-                topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase())])],
-                draftLessons: draftLessons?.map((lesson, index) => ({
-                    draftId: lesson.draftId,
-                    resourceId: lesson.resourceId,
-                    index
-                })) || []
-            });
+            const courseDraft = await createCourseDraft(req.body);
 
             res.status(201).json(courseDraft);
         } catch (error) {