[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/hashtag",{"_7":8,"_9":10,"_11":12},"articles",[13],"authors",{},"tag","unpub",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27},"content","```js\nimport React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport { InputText } from \"primereact/inputtext\";\nimport { InputNumber } from \"primereact/inputnumber\";\nimport { InputSwitch } from \"primereact/inputswitch\";\nimport { Button } from \"primereact/button\";\nimport { Dropdown } from \"primereact/dropdown\";\nimport { v4 as uuidv4, v4 } from 'uuid';\nimport { useLocalStorageWithEffect } from \"@/hooks/useLocalStorage\";\nimport { useNostr } from \"@/hooks/useNostr\";\nimport { useRouter } from \"next/router\";\nimport { useToast } from \"@/hooks/useToast\";\nimport { nip19 } from \"nostr-tools\"\nimport { parseEvent } from \"@/utils/nostr\";\nimport ContentDropdownItem from \"@/components/content/dropdowns/ContentDropdownItem\";\nimport 'primeicons/primeicons.css';\n\nconst CourseForm = () => {\n const [title, setTitle] = useState('');\n const [summary, setSummary] = useState('');\n const [checked, setChecked] = useState(false);\n const [price, setPrice] = useState(0);\n const [coverImage, setCoverImage] = useState('');\n const [lessons, setLessons] = useState([{ id: uuidv4(), title: 'Select a lesson' }]);\n const [selectedLessons, setSelectedLessons] = useState([]);\n const [topics, setTopics] = useState(['']);\n const [user, setUser] = useLocalStorageWithEffect('user', {});\n const [drafts, setDrafts] = useState([]);\n const [resources, setResources] = useState([]);\n const [workshops, setWorkshops] = useState([]);\n const { fetchResources, fetchWorkshops, publish, fetchSingleEvent } = useNostr();\n const [pubkey, setPubkey] = useState('');\n\n const router = useRouter();\n const { showToast } = useToast();\n\n const fetchAllContent = async () => {\n try {\n // Fetch drafts from the database\n const draftsResponse = await axios.get(`/api/drafts/all/${user.id}`);\n const drafts = draftsResponse.data;\n\n // Fetch resources and workshops from Nostr\n const resources = await fetchResources();\n const workshops = await fetchWorkshops();\n\n if (drafts.length > 0) {\n setDrafts(drafts);\n }\n if (resources.length > 0) {\n console.log('resources:', resources);\n setResources(resources);\n }\n if (workshops.length > 0) {\n setWorkshops(workshops);\n }\n } catch (err) {\n console.error(err);\n // Handle error\n }\n };\n\n useEffect(() => {\n if (user && user.id) {\n fetchAllContent();\n }\n }, [user]);\n\n /**\n * Course Creation Flow:\n * 1. Generate a new course ID\n * 2. Process each lesson:\n * - If unpublished: create event, publish to Nostr, save to DB, delete draft\n * - If published: use existing data\n * 3. Create and publish course event to Nostr\n * 4. Save course to database\n * 5. Show success message and redirect to course page\n */\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n\n const newCourseId = uuidv4();\n const processedLessons = [];\n\n try {\n // Step 1: Process lessons\n console.log('selectedLessons:', selectedLessons);\n for (const lesson of selectedLessons) {\n let noteId = lesson.noteId;\n\n if (!lesson.published_at) {\n // Publish unpublished lesson\n const event = createLessonEvent(lesson);\n const signedEvent = await window.nostr.signEvent(event);\n const published = await publish(signedEvent);\n\n if (!published) {\n throw new Error(`Failed to publish lesson: ${lesson.title}`);\n }\n\n noteId = signedEvent.id;\n\n // Save to db and delete draft\n await Promise.all([\n axios.post('/api/resources', {\n id: lesson.id,\n noteId: noteId,\n userId: user.id,\n price: lesson.price || 0,\n }),\n axios.delete(`/api/drafts/${lesson.id}`)\n ]);\n\n\n }\n\n processedLessons.push({ id: lesson?.d || lesson.id });\n }\n\n // Step 2: Create and publish course\n const courseEvent = createCourseEvent(newCourseId, title, summary, coverImage, selectedLessons);\n const signedCourseEvent = await window.nostr.signEvent(courseEvent);\n const published = await publish(signedCourseEvent);\n\n if (!published) {\n throw new Error('Failed to publish course');\n }\n\n // Step 3: Save course to db\n console.log('processedLessons:', processedLessons);\n await axios.post('/api/courses', {\n id: newCourseId,\n resources: {\n connect: processedLessons.map(lesson => ({ id: lesson?.id }))\n },\n noteId: signedCourseEvent.id,\n user: {\n connect: { id: user.id }\n },\n price: price || 0\n });\n\n // Step 4: Show success message and redirect\n showToast('success', 'Course created successfully');\n router.push(`/course/${signedCourseEvent.id}`);\n\n } catch (error) {\n console.error('Error creating course:', error);\n showToast('error', error.message || 'Failed to create course. Please try again.');\n }\n };\n\n const createLessonEvent = (lesson) => ({\n kind: lesson.price ? 30402 : 30023,\n content: lesson.content,\n created_at: Math.floor(Date.now() / 1000),\n tags: [\n ['d', lesson.id],\n ['title', lesson.title],\n ['summary', lesson.summary],\n ['image', lesson.image],\n ...lesson.topics.map(topic => ['t', topic]),\n ['published_at', Math.floor(Date.now() / 1000).toString()],\n ...(lesson.price ? [\n ['price', lesson.price],\n ['location', `https://plebdevs.com/${lesson.topics[1]}/${lesson.id}`]\n ] : [])\n ]\n });\n\n const createCourseEvent = (courseId, title, summary, coverImage, lessons) => ({\n kind: 30004,\n created_at: Math.floor(Date.now() / 1000),\n content: \"\",\n tags: [\n ['d', courseId],\n ['name', title],\n ['picture', coverImage],\n ['image', coverImage],\n ['description', summary],\n ['l', \"Education\"],\n ...lessons.map((lesson) => ['a', `${lesson.kind}:${lesson.pubkey}:${lesson.d}`]),\n ],\n });\n\n const handleLessonChange = (e, index) => {\n const selectedLessonId = e.value;\n const selectedLesson = getContentOptions(index).flatMap(group => group.items).find(lesson => lesson.value === selectedLessonId);\n\n const updatedLessons = lessons.map((lesson, i) =>\n i === index ? { ...lesson, id: selectedLessonId, title: selectedLesson.label.props.content.title } : lesson\n );\n setLessons(updatedLessons);\n };\n\n const handleLessonSelect = (content) => {\n setSelectedLessons([...selectedLessons, content]);\n addLesson();\n };\n\n const addLesson = () => {\n setLessons([...lessons, { id: uuidv4(), title: 'Select a lesson' }]);\n };\n\n const removeLesson = (index) => {\n const updatedLessons = lessons.filter((_, i) => i !== index);\n const updatedSelectedLessons = selectedLessons.filter((_, i) => i !== index);\n\n if (updatedLessons.length === 0) {\n updatedLessons.push({ id: uuidv4(), title: 'Select a lesson' });\n }\n\n setLessons(updatedLessons);\n setSelectedLessons(updatedSelectedLessons);\n };\n\n const addTopic = () => {\n setTopics([...topics, '']);\n };\n\n const removeTopic = (index) => {\n const updatedTopics = topics.filter((_, i) => i !== index);\n setTopics(updatedTopics);\n };\n\n const handleTopicChange = (index, value) => {\n const updatedTopics = topics.map((topic, i) => i === index ? value : topic);\n setTopics(updatedTopics);\n };\n\n const getContentOptions = (index) => {\n const draftOptions = drafts.map(draft => ({\n label: handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === draft.id} />,\n value: draft.id\n }));\n\n const resourceOptions = resources.map(resource => {\n const { id, kind, pubkey, content, title, summary, image, published_at, d, topics } = parseEvent(resource);\n return {\n label: handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === id} />,\n value: id\n };\n });\n\n const workshopOptions = workshops.map(workshop => {\n const { id, kind, pubkey, content, title, summary, image, published_at, d, topics } = parseEvent(workshop);\n return {\n label: handleLessonSelect(content, index)} selected={lessons[index] && lessons[index].id === id} />,\n value: id\n };\n });\n\n return [\n {\n label: 'Drafts',\n items: draftOptions\n },\n {\n label: 'Resources',\n items: resourceOptions\n },\n {\n label: 'Workshops',\n items: workshopOptions\n }\n ];\n };\n\n const lessonOptions = getContentOptions();\n\n return (\n

\n setTitle(e.target.value)} placeholder=\"Title\" />\n

\n setSummary(e.target.value)} placeholder=\"Summary\" />\n

\n setCoverImage(e.target.value)} placeholder=\"Cover Image URL\" />\n

Paid Course

\n setChecked(e.value)} />\n {checked && (\n

\n setPrice(e.value)} placeholder=\"Price (sats)\" />\n

\n )}\n

\n {selectedLessons.map((lesson, index) => (\n

\n \n

\n ))}\n {lessons.map((lesson, index) => (\n

\n handleLessonChange(e, index)}\n placeholder=\"Select a Lesson\"\n itemTemplate={(option) => option.label}\n optionLabel=\"label\"\n optionGroupLabel=\"label\"\n optionGroupChildren=\"items\"\n />\n

\n ))}\n

\n {topics.map((topic, index) => (\n

\n handleTopicChange(index, e.target.value)} placeholder={`Topic #${index + 1}`} className=\"w-full\" />\n {index > 0 && (\n

\n ))}\n

\n );\n}\n\nexport default CourseForm;\n```","created_at",1721686399,"id","09426ce78427f0a79821b2ee0f3a0bbf2a9136d09e066d590e5bd0424748cd59","kind",30023,"pubkey","8e7462a8ab2504649a0d25116236eac04a682469c1d13d3beae4e9a4c723a97b","sig","ba3ce929c685f9f1c51b9d15f2d9e2d412b29330ec89640472f2b1b8842189ae29c46a0dccd4d12b404dfe8adeae07c3a99a995269382cd0f19d5a77ecdffd9e","tags",[28,29,30,31,32,33,34,35],[47,48],[45,46],[43,44],[41,42],[38,12],[38,40],[38,39],[36,37],"published_at","1721686399","t","resource","plebdevs","image","https://images.ansys.com/is/image/ansys/2021-02-silicon-to-the-city?wid=824&fmt=webp&op_usm=0.9,1.0,20,0&fit=constrain,0","summary","another draft unpublished","title","Another draft","d","187fe175-9271-4f8a-922e-8d9c359ae303"]