diff --git a/src/components/forms/CourseForm.js b/src/components/forms/CourseForm.js index 7f632f9..fa8a000 100644 --- a/src/components/forms/CourseForm.js +++ b/src/components/forms/CourseForm.js @@ -12,18 +12,8 @@ const CourseForm = () => { const [checked, setChecked] = useState(false); const [price, setPrice] = useState(0); const [text, setText] = useState(''); - const [resources, setResources] = useState(['']); // Start with one empty resource - - const addResource = () => { - setResources([...resources, '']); // Add another empty resource - }; - - const handleResourceChange = (value, index) => { - const updatedResources = resources.map((resource, i) => - i === index ? value : resource - ); - setResources(updatedResources); - }; + const [resources, setResources] = useState(['']); + const [topics, setTopics] = useState(['']); const handleSubmit = (e) => { e.preventDefault(); @@ -33,11 +23,40 @@ const CourseForm = () => { isPaidResource: checked, price: checked ? price : null, content: text, - resources // Add the resources to the payload + topics: topics.map(topic => topic.trim().toLowerCase()), + resources: resources.map(resource => resource.trim()) }; console.log(payload); } + const addResource = () => { + setResources([...resources, '']); // Add an empty string to the resources array + }; + + const removeResource = (index) => { + const updatedResources = resources.filter((_, i) => i !== index); + setResources(updatedResources); + }; + + const handleResourceChange = (value, index) => { + const updatedResources = resources.map((resource, i) => i === index ? value : resource); + setResources(updatedResources); + }; + + const handleTopicChange = (index, value) => { + const updatedTopics = topics.map((topic, i) => i === index ? value : topic); + setTopics(updatedTopics); + }; + + const addTopic = () => { + setTopics([...topics, '']); // Add an empty string to the topics array + }; + + const removeTopic = (index) => { + const updatedTopics = topics.filter((_, i) => i !== index); + setTopics(updatedTopics); + }; + return (
@@ -59,15 +78,33 @@ const CourseForm = () => { )}
- {resources.map((resource, index) => ( -
- handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} /> +
+ {resources.map((resource, index) => ( +
+ handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} className="w-full" /> + {index > 0 && ( // Only render the minus button if the index is greater than 0 +
+ ))} +
+
- ))} -
-
+
+ {topics.map((topic, index) => ( +
+ handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" /> + {index > 0 && ( +
+ ))} +
+
+
diff --git a/src/components/forms/Editor/EditorHeader.js b/src/components/forms/Editor/EditorHeader.js new file mode 100644 index 0000000..7dfb3fe --- /dev/null +++ b/src/components/forms/Editor/EditorHeader.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { Button } from 'primereact/button'; + +const EditorHeader = ({ quill }) => { + const embedVideo = () => { + const videoUrl = prompt('Enter the video URL:'); + if (videoUrl) { + const videoEmbedCode = ``; + quill.editor.clipboard.dangerouslyPasteHTML(videoEmbedCode); + } + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* This is your custom video button */} + + + + +
+ ); + return (
@@ -128,7 +162,12 @@ const ResourceForm = () => {
Content - setText(e.htmlValue)} style={{ height: '320px' }} /> + setText(e.htmlValue)} + style={{ height: '320px' }} + headerTemplate={} + />
{topics.map((topic, index) => ( diff --git a/src/components/forms/WorkshopForm.js b/src/components/forms/WorkshopForm.js index 7a8d7d0..70d25c6 100644 --- a/src/components/forms/WorkshopForm.js +++ b/src/components/forms/WorkshopForm.js @@ -1,9 +1,8 @@ -import React, { useState } from "react"; -import { InputText } from "primereact/inputtext"; -import { InputNumber } from "primereact/inputnumber"; -import { InputSwitch } from "primereact/inputswitch"; -import { Editor } from "primereact/editor"; -import { Button } from "primereact/button"; +import React, { useState } from 'react'; +import { InputText } from 'primereact/inputtext'; +import { InputNumber } from 'primereact/inputnumber'; +import { InputSwitch } from 'primereact/inputswitch'; +import { Button } from 'primereact/button'; import 'primeicons/primeicons.css'; const WorkshopForm = () => { @@ -11,19 +10,51 @@ const WorkshopForm = () => { const [summary, setSummary] = useState(''); const [checked, setChecked] = useState(false); const [price, setPrice] = useState(0); - const [text, setText] = useState(''); + const [videoUrl, setVideoUrl] = useState(''); + const [topics, setTopics] = useState(['']); const handleSubmit = (e) => { - e.preventDefault(); // Prevents the default form submission mechanism + 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 = ``; + } + // Check if it's a Vimeo video + else if (videoUrl.includes('vimeo.com')) { + const videoId = videoUrl.split('/').pop(); + embedCode = ``; + } + // Add more conditions here for other video services + const payload = { title, summary, isPaidResource: checked, price: checked ? price : null, - content: text + videoUrl, + topics: topics.map(topic => topic.trim().toLowerCase()) // Include topics in the payload }; console.log(payload); - } + }; + + + const handleTopicChange = (index, value) => { + const updatedTopics = topics.map((topic, i) => i === index ? value : topic); + setTopics(updatedTopics); + }; + + const addTopic = () => { + setTopics([...topics, '']); // Add an empty string to the topics array + }; + + const removeTopic = (index) => { + const updatedTopics = topics.filter((_, i) => i !== index); + setTopics(updatedTopics); + }; + return ( @@ -37,18 +68,28 @@ const WorkshopForm = () => {

Paid Workshop

setChecked(e.value)} /> -
- {checked && ( - <> - - setPrice(e.value)} placeholder="Price (sats)" /> - - )} -
+ {checked && ( +
+ + setPrice(e.value)} placeholder="Price (sats)" /> +
+ )}
-
- Content - setText(e.htmlValue)} style={{ height: '320px' }} /> +
+ setVideoUrl(e.target.value)} placeholder="Video URL" /> +
+
+ {topics.map((topic, index) => ( +
+ handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" /> + {index > 0 && ( +
+ ))} +
+