mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-06 18:31:00 +00:00
Split combined forms in to three speperate form components, test, and plug into parents
This commit is contained in:
austinkelsay
parent
13db66d3ab
commit
c0cd83d757
@ -44,6 +44,7 @@ const CombinedDetails = ({ processedEvent, topics, title, summary, image, price,
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (zaps.length > 0) {
|
if (zaps.length > 0) {
|
||||||
|
console.log('zaps', zaps);
|
||||||
const total = getTotalFromZaps(zaps, processedEvent);
|
const total = getTotalFromZaps(zaps, processedEvent);
|
||||||
setZapAmount(total);
|
setZapAmount(total);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,298 +1,2 @@
|
|||||||
import React, { useState, useEffect, useCallback } from 'react';
|
import CombinedResourceForm from "./combined/CombinedResourceForm";
|
||||||
import axios from 'axios';
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import { InputText } from 'primereact/inputtext';
|
|
||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
|
||||||
import { InputSwitch } from 'primereact/inputswitch';
|
|
||||||
import GenericButton from '@/components/buttons/GenericButton';
|
|
||||||
import { useToast } from '@/hooks/useToast';
|
|
||||||
import { useSession } from 'next-auth/react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { Tooltip } from 'primereact/tooltip';
|
|
||||||
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
|
||||||
import { useNDKContext } from "@/context/NDKContext";
|
|
||||||
import 'primeicons/primeicons.css';
|
|
||||||
import 'primereact/resources/primereact.min.css';
|
|
||||||
|
|
||||||
const MDEditor = dynamic(
|
|
||||||
() => import("@uiw/react-md-editor"),
|
|
||||||
{ ssr: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
|
|
||||||
|
|
||||||
const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
|
||||||
const [title, setTitle] = useState(draft?.title || '');
|
|
||||||
const [summary, setSummary] = useState(draft?.summary || '');
|
|
||||||
const [price, setPrice] = useState(draft?.price || 0);
|
|
||||||
const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
|
|
||||||
const [videoUrl, setVideoUrl] = useState(draft?.videoUrl || '');
|
|
||||||
const [content, setContent] = useState(draft?.content || '');
|
|
||||||
const [coverImage, setCoverImage] = useState(draft?.image || '');
|
|
||||||
const [topics, setTopics] = useState(draft?.topics || ['']);
|
|
||||||
const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
|
|
||||||
const [user, setUser] = useState(null);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { data: session } = useSession();
|
|
||||||
const { showToast } = useToast();
|
|
||||||
const { ndk, addSigner } = useNDKContext();
|
|
||||||
const { encryptContent } = useEncryptContent();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (session) {
|
|
||||||
setUser(session.user);
|
|
||||||
}
|
|
||||||
}, [session]);
|
|
||||||
|
|
||||||
const handleContentChange = useCallback((value) => {
|
|
||||||
setContent(value || '');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getVideoEmbed = (url) => {
|
|
||||||
let embedCode = '';
|
|
||||||
|
|
||||||
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
|
||||||
const videoId = url.split('v=')[1] || url.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}?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
|
||||||
} else if (url.includes('vimeo.com')) {
|
|
||||||
const videoId = url.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>`;
|
|
||||||
} else if (!price || !price > 0 && (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm'))) {
|
|
||||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${CDN_ENDPOINT}/${url}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
|
||||||
} else if (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm')) {
|
|
||||||
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
|
||||||
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(url)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return embedCode;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
|
||||||
if (!userResponse.data) {
|
|
||||||
showToast('error', 'Error', 'User not found', 'Please try again.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const videoEmbed = videoUrl ? getVideoEmbed(videoUrl) : '';
|
|
||||||
const combinedContent = `${videoEmbed}\n\n${content}`;
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
title,
|
|
||||||
summary,
|
|
||||||
type: 'combined',
|
|
||||||
price: isPaidResource ? price : null,
|
|
||||||
content: combinedContent,
|
|
||||||
image: coverImage,
|
|
||||||
user: userResponse.data.id,
|
|
||||||
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video', 'document'])],
|
|
||||||
additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
|
|
||||||
};
|
|
||||||
|
|
||||||
const url = draft ? `/api/drafts/${draft.id}` : '/api/drafts';
|
|
||||||
const method = draft ? 'put' : 'post';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await axios[method](url, payload);
|
|
||||||
if (response.status === 200 || response.status === 201) {
|
|
||||||
showToast('success', 'Success', draft ? 'Content updated successfully.' : 'Content saved as draft.');
|
|
||||||
if (response.data?.id) {
|
|
||||||
router.push(`/draft/${response.data.id}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
showToast('error', 'Error', 'Failed to save content. 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, '']);
|
|
||||||
};
|
|
||||||
|
|
||||||
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, '']);
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeAdditionalLink = (e, index) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const updatedAdditionalLinks = additionalLinks.filter((_, i) => i !== index);
|
|
||||||
setAdditionalLinks(updatedAdditionalLinks);
|
|
||||||
};
|
|
||||||
|
|
||||||
const buildEvent = async (draft) => {
|
|
||||||
const dTag = draft.d;
|
|
||||||
const event = new NDKEvent(ndk);
|
|
||||||
let encryptedContent;
|
|
||||||
|
|
||||||
const videoEmbed = videoUrl ? getVideoEmbed(videoUrl) : '';
|
|
||||||
const combinedContent = `${videoEmbed}\n\n${content}`;
|
|
||||||
|
|
||||||
if (draft?.price) {
|
|
||||||
encryptedContent = await encryptContent(combinedContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
event.kind = draft?.price ? 30402 : 30023;
|
|
||||||
event.content = draft?.price ? encryptedContent : combinedContent;
|
|
||||||
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 handlePublishedResource = async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const updatedDraft = {
|
|
||||||
title,
|
|
||||||
summary,
|
|
||||||
price,
|
|
||||||
content,
|
|
||||||
videoUrl,
|
|
||||||
d: draft.d,
|
|
||||||
image: coverImage,
|
|
||||||
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video', 'document'])],
|
|
||||||
additionalLinks: additionalLinks.filter(link => link.trim() !== '')
|
|
||||||
};
|
|
||||||
|
|
||||||
const event = await buildEvent(updatedDraft);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (!ndk.signer) {
|
|
||||||
await addSigner();
|
|
||||||
}
|
|
||||||
|
|
||||||
await ndk.connect();
|
|
||||||
|
|
||||||
const published = await ndk.publish(event);
|
|
||||||
|
|
||||||
if (published) {
|
|
||||||
const response = await axios.put(`/api/resources/${draft.d}`, { noteId: event.id });
|
|
||||||
showToast('success', 'Success', 'Content published successfully.');
|
|
||||||
router.push(`/details/${event.id}`);
|
|
||||||
} else {
|
|
||||||
showToast('error', 'Error', 'Failed to publish content. Please try again.');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
showToast('error', 'Error', 'Failed to publish content. Please try again.');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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">
|
|
||||||
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-inputgroup flex-1 mt-4 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">
|
|
||||||
<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 (YouTube, Vimeo, or direct video link)" />
|
|
||||||
</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 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 (these links are currently not encrypted for 'paid' 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 && (
|
|
||||||
<GenericButton 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">
|
|
||||||
<GenericButton 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 && (
|
|
||||||
<GenericButton 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">
|
|
||||||
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-center mt-8">
|
|
||||||
<GenericButton type="submit" severity="success" outlined label={draft ? "Update" : "Submit"} />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CombinedResourceForm;
|
export default CombinedResourceForm;
|
||||||
|
|||||||
223
src/components/forms/combined/CombinedResourceForm.js
Normal file
223
src/components/forms/combined/CombinedResourceForm.js
Normal file
@ -0,0 +1,223 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { InputText } from 'primereact/inputtext';
|
||||||
|
import { InputTextarea } from 'primereact/inputtextarea';
|
||||||
|
import { InputNumber } from 'primereact/inputnumber';
|
||||||
|
import { InputSwitch } from 'primereact/inputswitch';
|
||||||
|
import GenericButton from '@/components/buttons/GenericButton';
|
||||||
|
import { useToast } from '@/hooks/useToast';
|
||||||
|
import { useSession } from 'next-auth/react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import { Tooltip } from 'primereact/tooltip';
|
||||||
|
import 'primeicons/primeicons.css';
|
||||||
|
import 'primereact/resources/primereact.min.css';
|
||||||
|
|
||||||
|
const MDEditor = dynamic(
|
||||||
|
() => import("@uiw/react-md-editor"),
|
||||||
|
{ ssr: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
|
||||||
|
|
||||||
|
const CombinedResourceForm = () => {
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const [summary, setSummary] = useState('');
|
||||||
|
const [price, setPrice] = useState(0);
|
||||||
|
const [isPaidResource, setIsPaidResource] = useState(false);
|
||||||
|
const [videoUrl, setVideoUrl] = useState('');
|
||||||
|
const [content, setContent] = useState('');
|
||||||
|
const [coverImage, setCoverImage] = useState('');
|
||||||
|
const [topics, setTopics] = useState(['']);
|
||||||
|
const [additionalLinks, setAdditionalLinks] = useState(['']);
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const { showToast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (session) {
|
||||||
|
setUser(session.user);
|
||||||
|
}
|
||||||
|
}, [session]);
|
||||||
|
|
||||||
|
const handleContentChange = useCallback((value) => {
|
||||||
|
setContent(value || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getVideoEmbed = (url) => {
|
||||||
|
let embedCode = '';
|
||||||
|
|
||||||
|
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
||||||
|
const videoId = url.split('v=')[1] || url.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}?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||||
|
} else if (url.includes('vimeo.com')) {
|
||||||
|
const videoId = url.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>`;
|
||||||
|
} else if (!price || !price > 0 && (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm'))) {
|
||||||
|
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${CDN_ENDPOINT}/${url}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||||
|
} else if (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm')) {
|
||||||
|
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
||||||
|
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(url)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return embedCode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
||||||
|
if (!userResponse.data) {
|
||||||
|
showToast('error', 'Error', 'User not found', 'Please try again.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoEmbed = videoUrl ? getVideoEmbed(videoUrl) : '';
|
||||||
|
const combinedContent = `${videoEmbed}\n\n${content}`;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
title,
|
||||||
|
summary,
|
||||||
|
type: 'combined',
|
||||||
|
price: isPaidResource ? price : null,
|
||||||
|
content: combinedContent,
|
||||||
|
image: coverImage,
|
||||||
|
user: userResponse.data.id,
|
||||||
|
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video', 'document'])],
|
||||||
|
additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.post('/api/drafts', payload);
|
||||||
|
if (response.status === 201) {
|
||||||
|
showToast('success', 'Success', 'Content saved as draft.');
|
||||||
|
if (response.data?.id) {
|
||||||
|
router.push(`/draft/${response.data.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
showToast('error', 'Error', 'Failed to save content. 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, '']);
|
||||||
|
};
|
||||||
|
|
||||||
|
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, '']);
|
||||||
|
};
|
||||||
|
|
||||||
|
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">
|
||||||
|
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-inputgroup flex-1 mt-4 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">
|
||||||
|
<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 (YouTube, Vimeo, or direct video link)" />
|
||||||
|
</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 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 (these links are currently not encrypted for 'paid' 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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton 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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-8">
|
||||||
|
<GenericButton type="submit" severity="success" outlined label="Submit" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CombinedResourceForm;
|
||||||
266
src/components/forms/combined/EditDraftCombinedResourceForm.js
Normal file
266
src/components/forms/combined/EditDraftCombinedResourceForm.js
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { InputText } from 'primereact/inputtext';
|
||||||
|
import { InputTextarea } from 'primereact/inputtextarea';
|
||||||
|
import { InputNumber } from 'primereact/inputnumber';
|
||||||
|
import { InputSwitch } from 'primereact/inputswitch';
|
||||||
|
import GenericButton from '@/components/buttons/GenericButton';
|
||||||
|
import { useToast } from '@/hooks/useToast';
|
||||||
|
import { useSession } from 'next-auth/react';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
import { Tooltip } from 'primereact/tooltip';
|
||||||
|
import 'primeicons/primeicons.css';
|
||||||
|
import 'primereact/resources/primereact.min.css';
|
||||||
|
|
||||||
|
const MDEditor = dynamic(
|
||||||
|
() => import("@uiw/react-md-editor"),
|
||||||
|
{ ssr: false }
|
||||||
|
);
|
||||||
|
|
||||||
|
const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
|
||||||
|
|
||||||
|
const EditDraftCombinedResourceForm = ({ draft }) => {
|
||||||
|
const [title, setTitle] = useState(draft?.title || '');
|
||||||
|
const [summary, setSummary] = useState(draft?.summary || '');
|
||||||
|
const [price, setPrice] = useState(draft?.price || 0);
|
||||||
|
const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
|
||||||
|
const [content, setContent] = useState('');
|
||||||
|
const [videoUrl, setVideoUrl] = useState('');
|
||||||
|
const [coverImage, setCoverImage] = useState(draft?.image || '');
|
||||||
|
const [topics, setTopics] = useState(draft?.topics || ['']);
|
||||||
|
const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const { showToast } = useToast();
|
||||||
|
|
||||||
|
// Extract video URL and content from the combined draft content
|
||||||
|
useEffect(() => {
|
||||||
|
if (draft?.content) {
|
||||||
|
const parts = draft.content.split('\n\n');
|
||||||
|
if (parts.length > 1) {
|
||||||
|
// First part is video embed, extract URL from it
|
||||||
|
const videoEmbed = parts[0];
|
||||||
|
|
||||||
|
// Try to extract URL from video embed code
|
||||||
|
let extractedUrl = '';
|
||||||
|
if (videoEmbed.includes('youtube.com')) {
|
||||||
|
const match = videoEmbed.match(/src="https:\/\/www\.youtube\.com\/embed\/([^?&"]+)/);
|
||||||
|
if (match && match[1]) {
|
||||||
|
extractedUrl = `https://www.youtube.com/watch?v=${match[1]}`;
|
||||||
|
}
|
||||||
|
} else if (videoEmbed.includes('vimeo.com')) {
|
||||||
|
const match = videoEmbed.match(/src="https:\/\/player\.vimeo\.com\/video\/([^?"]+)/);
|
||||||
|
if (match && match[1]) {
|
||||||
|
extractedUrl = `https://vimeo.com/${match[1]}`;
|
||||||
|
}
|
||||||
|
} else if (videoEmbed.includes('/api/get-video-url?videoKey=')) {
|
||||||
|
const match = videoEmbed.match(/videoKey=([^&"]+)/);
|
||||||
|
if (match && match[1]) {
|
||||||
|
extractedUrl = decodeURIComponent(match[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setVideoUrl(extractedUrl);
|
||||||
|
|
||||||
|
// Join the rest of the content
|
||||||
|
const remainingContent = parts.slice(1).join('\n\n');
|
||||||
|
setContent(remainingContent);
|
||||||
|
} else {
|
||||||
|
// If there's no clear separation, just set everything as content
|
||||||
|
setContent(draft.content);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [draft]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (session) {
|
||||||
|
setUser(session.user);
|
||||||
|
}
|
||||||
|
}, [session]);
|
||||||
|
|
||||||
|
const handleContentChange = useCallback((value) => {
|
||||||
|
setContent(value || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getVideoEmbed = (url) => {
|
||||||
|
let embedCode = '';
|
||||||
|
|
||||||
|
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
||||||
|
const videoId = url.split('v=')[1] || url.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}?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
|
||||||
|
} else if (url.includes('vimeo.com')) {
|
||||||
|
const videoId = url.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>`;
|
||||||
|
} else if (!price || !price > 0 && (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm'))) {
|
||||||
|
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${CDN_ENDPOINT}/${url}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||||
|
} else if (url.includes('.mp4') || url.includes('.mov') || url.includes('.avi') || url.includes('.wmv') || url.includes('.flv') || url.includes('.webm')) {
|
||||||
|
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
|
||||||
|
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(url)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return embedCode;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const userResponse = await axios.get(`/api/users/${user.pubkey}`);
|
||||||
|
if (!userResponse.data) {
|
||||||
|
showToast('error', 'Error', 'User not found', 'Please try again.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoEmbed = videoUrl ? getVideoEmbed(videoUrl) : '';
|
||||||
|
const combinedContent = `${videoEmbed}\n\n${content}`;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
title,
|
||||||
|
summary,
|
||||||
|
type: 'combined',
|
||||||
|
price: isPaidResource ? price : null,
|
||||||
|
content: combinedContent,
|
||||||
|
image: coverImage,
|
||||||
|
user: userResponse.data.id,
|
||||||
|
topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'video', 'document'])],
|
||||||
|
additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await axios.put(`/api/drafts/${draft.id}`, payload);
|
||||||
|
if (response.status === 200) {
|
||||||
|
showToast('success', 'Success', 'Content updated successfully.');
|
||||||
|
if (response.data?.id) {
|
||||||
|
router.push(`/draft/${response.data.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
showToast('error', 'Error', 'Failed to update content. 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, '']);
|
||||||
|
};
|
||||||
|
|
||||||
|
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, '']);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeAdditionalLink = (e, index) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const updatedAdditionalLinks = additionalLinks.filter((_, i) => i !== index);
|
||||||
|
setAdditionalLinks(updatedAdditionalLinks);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!draft) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-inputgroup flex-1 mt-4 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">
|
||||||
|
<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 (YouTube, Vimeo, or direct video link)" />
|
||||||
|
</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 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 (these links are currently not encrypted for 'paid' 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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton 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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-8">
|
||||||
|
<GenericButton type="submit" severity="success" outlined label="Update" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditDraftCombinedResourceForm;
|
||||||
@ -0,0 +1,292 @@
|
|||||||
|
import React, { useState, useEffect, useCallback } from 'react';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useToast } from '@/hooks/useToast';
|
||||||
|
import { useSession } from 'next-auth/react';
|
||||||
|
import { useNDKContext } from '@/context/NDKContext';
|
||||||
|
import GenericButton from '@/components/buttons/GenericButton';
|
||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
import { validateEvent } from '@/utils/nostr';
|
||||||
|
import { InputText } from 'primereact/inputtext';
|
||||||
|
import { InputTextarea } from 'primereact/inputtextarea';
|
||||||
|
import { InputNumber } from 'primereact/inputnumber';
|
||||||
|
import { InputSwitch } from 'primereact/inputswitch';
|
||||||
|
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
||||||
|
import MoreInfo from '@/components/MoreInfo';
|
||||||
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
|
const MDEditor = dynamic(
|
||||||
|
() => import("@uiw/react-md-editor"),
|
||||||
|
{
|
||||||
|
ssr: false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const EditPublishedCombinedResourceForm = ({ event }) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const { showToast } = useToast();
|
||||||
|
const { ndk, addSigner } = useNDKContext();
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
const [title, setTitle] = useState(event.title);
|
||||||
|
const [summary, setSummary] = useState(event.summary);
|
||||||
|
const [price, setPrice] = useState(event.price);
|
||||||
|
const [isPaidResource, setIsPaidResource] = useState(event.price ? true : false);
|
||||||
|
const [videoEmbed, setVideoEmbed] = useState('');
|
||||||
|
const [content, setContent] = useState('');
|
||||||
|
const [coverImage, setCoverImage] = useState(event.image);
|
||||||
|
const [additionalLinks, setAdditionalLinks] = useState(event.additionalLinks || []);
|
||||||
|
const [topics, setTopics] = useState(event.topics || []);
|
||||||
|
|
||||||
|
const { encryptContent } = useEncryptContent();
|
||||||
|
|
||||||
|
// Extract video embed and content from the combined content
|
||||||
|
useEffect(() => {
|
||||||
|
if (event?.content) {
|
||||||
|
const parts = event.content.split('\n\n');
|
||||||
|
if (parts.length > 1) {
|
||||||
|
// First part is video embed
|
||||||
|
const videoEmbedPart = parts[0];
|
||||||
|
setVideoEmbed(videoEmbedPart);
|
||||||
|
|
||||||
|
// Join the rest of the content
|
||||||
|
const remainingContent = parts.slice(1).join('\n\n');
|
||||||
|
setContent(remainingContent);
|
||||||
|
} else {
|
||||||
|
// If there's no clear separation, just set everything as content
|
||||||
|
setContent(event.content);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [event]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (session) {
|
||||||
|
setUser(session.user);
|
||||||
|
}
|
||||||
|
}, [session]);
|
||||||
|
|
||||||
|
const handleVideoEmbedChange = useCallback((value) => {
|
||||||
|
setVideoEmbed(value || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleContentChange = useCallback((value) => {
|
||||||
|
setContent(value || '');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addLink = () => {
|
||||||
|
setAdditionalLinks([...additionalLinks, '']);
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeLink = (e, index) => {
|
||||||
|
setAdditionalLinks(additionalLinks.filter((_, i) => i !== index));
|
||||||
|
}
|
||||||
|
|
||||||
|
const addTopic = () => {
|
||||||
|
setTopics([...topics, '']);
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeTopic = (e, index) => {
|
||||||
|
setTopics(topics.filter((_, i) => i !== index));
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLinkChange = (index, value) => {
|
||||||
|
const newLinks = [...additionalLinks];
|
||||||
|
newLinks[index] = value;
|
||||||
|
setAdditionalLinks(newLinks);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTopicChange = (index, value) => {
|
||||||
|
const newTopics = [...topics];
|
||||||
|
newTopics[index] = value;
|
||||||
|
setTopics(newTopics);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
if (!ndk.signer) {
|
||||||
|
await addSigner();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Combine video embed and content
|
||||||
|
const updatedCombinedContent = `${videoEmbed}\n\n${content}`;
|
||||||
|
|
||||||
|
// Encrypt content if it's a paid resource
|
||||||
|
let finalContent = updatedCombinedContent;
|
||||||
|
if (isPaidResource && price > 0) {
|
||||||
|
finalContent = await encryptContent(updatedCombinedContent);
|
||||||
|
if (!finalContent) {
|
||||||
|
showToast('error', 'Error', 'Failed to encrypt content');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ndkEvent = new NDKEvent(ndk);
|
||||||
|
ndkEvent.kind = event.kind;
|
||||||
|
ndkEvent.content = finalContent;
|
||||||
|
ndkEvent.created_at = Math.floor(Date.now() / 1000);
|
||||||
|
ndkEvent.pubkey = event.pubkey;
|
||||||
|
ndkEvent.tags = [
|
||||||
|
['title', title],
|
||||||
|
['summary', summary],
|
||||||
|
['image', coverImage],
|
||||||
|
['d', event.d],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add the required topic tags
|
||||||
|
const requiredTopics = ['video', 'document'];
|
||||||
|
const customTopics = topics.filter(topic => !requiredTopics.includes(topic.toLowerCase()));
|
||||||
|
|
||||||
|
// Add required topics
|
||||||
|
requiredTopics.forEach(topic => {
|
||||||
|
ndkEvent.tags.push(['t', topic]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add custom topics
|
||||||
|
customTopics.forEach(topic => {
|
||||||
|
if (topic && topic.trim()) {
|
||||||
|
ndkEvent.tags.push(['t', topic.trim().toLowerCase()]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add additional links
|
||||||
|
additionalLinks.forEach(link => {
|
||||||
|
if (link && link.trim()) {
|
||||||
|
ndkEvent.tags.push(['r', link.trim()]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add price if it exists
|
||||||
|
if (price && isPaidResource) {
|
||||||
|
ndkEvent.tags.push(['price', price.toString()]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate the event
|
||||||
|
const validationResult = validateEvent(ndkEvent);
|
||||||
|
if (validationResult !== true) {
|
||||||
|
console.error("validation error:", validationResult);
|
||||||
|
showToast('error', 'Error', validationResult);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Publish the event
|
||||||
|
const signedEvent = await ndk.publish(ndkEvent);
|
||||||
|
|
||||||
|
if (signedEvent) {
|
||||||
|
// update updated_at for resource in db
|
||||||
|
const updatedResource = await axios.put(`/api/resources/${event.d}`, {
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (updatedResource && updatedResource.status === 200) {
|
||||||
|
showToast('success', 'Success', 'Content updated successfully');
|
||||||
|
router.push(`/details/${updatedResource.data.noteId}`);
|
||||||
|
} else {
|
||||||
|
showToast('error', 'Error', 'Failed to update content');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating content:', error);
|
||||||
|
showToast('error', 'Error', 'Failed to update content');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={(e) => handleSubmit(e)}>
|
||||||
|
<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">
|
||||||
|
<InputTextarea value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" rows={5} cols={30} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-inputgroup flex-1 mt-4 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">
|
||||||
|
<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 flex-col mt-4">
|
||||||
|
<span>Video Embed</span>
|
||||||
|
<div data-color-mode="dark">
|
||||||
|
<MDEditor
|
||||||
|
value={videoEmbed}
|
||||||
|
onChange={handleVideoEmbedChange}
|
||||||
|
height={250}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<small className="text-gray-400 mt-2">
|
||||||
|
You can customize your video embed using markdown or HTML. For example, paste iframe embeds from YouTube or Vimeo, or use video tags for direct video files.
|
||||||
|
</small>
|
||||||
|
</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 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">
|
||||||
|
<div className="flex flex-row items-center pl-1">
|
||||||
|
<span className="pl-1 flex items-center">
|
||||||
|
External Links
|
||||||
|
</span>
|
||||||
|
<MoreInfo className='text-blue-400' tooltip="Add any relevant external links that pair with this content (these links are currently not encrypted for 'paid' content)" modalTitle="External Links" modalBody={<div>
|
||||||
|
<p>Add any relevant external links that pair with this content (these links are currently not encrypted for 'paid' content)</p>
|
||||||
|
</div>} />
|
||||||
|
</div>
|
||||||
|
{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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 flex-col w-full">
|
||||||
|
<div className="flex flex-row items-center pl-1">
|
||||||
|
<span className="pl-1 flex items-center">
|
||||||
|
Topics
|
||||||
|
</span>
|
||||||
|
<MoreInfo className='text-blue-400' tooltip="Add any relevant topics that pair with this content" modalTitle="Topics" modalBody={<div>
|
||||||
|
<p>Add any relevant topics that pair with this content</p>
|
||||||
|
</div>} />
|
||||||
|
</div>
|
||||||
|
{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 && (
|
||||||
|
<GenericButton 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">
|
||||||
|
<GenericButton icon="pi pi-plus" onClick={addTopic} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center mt-8">
|
||||||
|
<GenericButton type="submit" severity="success" outlined label="Update" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditPublishedCombinedResourceForm;
|
||||||
@ -11,8 +11,8 @@ import { InputText } from 'primereact/inputtext';
|
|||||||
import { InputTextarea } from 'primereact/inputtextarea';
|
import { InputTextarea } from 'primereact/inputtextarea';
|
||||||
import { InputNumber } from 'primereact/inputnumber';
|
import { InputNumber } from 'primereact/inputnumber';
|
||||||
import { InputSwitch } from 'primereact/inputswitch';
|
import { InputSwitch } from 'primereact/inputswitch';
|
||||||
import { Tooltip } from 'primereact/tooltip';
|
|
||||||
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
||||||
|
import MoreInfo from '@/components/MoreInfo';
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
|
|
||||||
const MDEditor = dynamic(
|
const MDEditor = dynamic(
|
||||||
@ -198,16 +198,15 @@ const EditPublishedVideoForm = ({ event }) => {
|
|||||||
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
|
<InputText value={coverImage} onChange={(e) => setCoverImage(e.target.value)} placeholder="Cover Image URL" />
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 flex-col w-full">
|
<div className="mt-8 flex-col w-full">
|
||||||
|
<div className="flex flex-row items-center pl-1">
|
||||||
|
|
||||||
<span className="pl-1 flex items-center">
|
<span className="pl-1 flex items-center">
|
||||||
External Links
|
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 (these links are currently not encrypted for 'paid' 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>
|
</span>
|
||||||
|
<MoreInfo className='text-blue-400' tooltip="Add any relevant external links that pair with this content (these links are currently not encrypted for 'paid' content)" modalTitle="External Links" modalBody={<div>
|
||||||
|
<p>Add any relevant external links that pair with this content (these links are currently not encrypted for 'paid' content)</p>
|
||||||
|
</div>} />
|
||||||
|
</div>
|
||||||
{additionalLinks.map((link, index) => (
|
{additionalLinks.map((link, index) => (
|
||||||
<div className="p-inputgroup flex-1" key={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" />
|
<InputText value={link} onChange={(e) => handleLinkChange(index, e.target.value)} placeholder="https://example.com" className="w-full mt-2" />
|
||||||
@ -219,9 +218,16 @@ const EditPublishedVideoForm = ({ event }) => {
|
|||||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||||
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
||||||
</div>
|
</div>
|
||||||
<Tooltip target=".pi-info-circle" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 flex-col w-full">
|
<div className="mt-4 flex-col w-full">
|
||||||
|
<div className="flex flex-row items-center pl-1">
|
||||||
|
<span className="pl-1 flex items-center">
|
||||||
|
Topics
|
||||||
|
</span>
|
||||||
|
<MoreInfo className='text-blue-400' tooltip="Add any relevant topics that pair with this content" modalTitle="Topics" modalBody={<div>
|
||||||
|
<p>Add any relevant topics that pair with this content</p>
|
||||||
|
</div>} />
|
||||||
|
</div>
|
||||||
{topics.map((topic, index) => (
|
{topics.map((topic, index) => (
|
||||||
<div className="p-inputgroup flex-1" key={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" />
|
<InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import { parseEvent } from "@/utils/nostr";
|
|||||||
import EditPublishedDocumentForm from "@/components/forms/document/EditPublishedDocumentForm";
|
import EditPublishedDocumentForm from "@/components/forms/document/EditPublishedDocumentForm";
|
||||||
import EditPublishedVideoForm from "@/components/forms/video/EditPublishedVideoForm";
|
import EditPublishedVideoForm from "@/components/forms/video/EditPublishedVideoForm";
|
||||||
import CourseForm from "@/components/forms/course/CourseForm";
|
import CourseForm from "@/components/forms/course/CourseForm";
|
||||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
import EditPublishedCombinedResourceForm from "@/components/forms/combined/EditPublishedCombinedResourceForm";
|
||||||
import { useNDKContext } from "@/context/NDKContext";
|
import { useNDKContext } from "@/context/NDKContext";
|
||||||
import { useToast } from "@/hooks/useToast";
|
import { useToast } from "@/hooks/useToast";
|
||||||
|
|
||||||
@ -41,7 +41,7 @@ export default function Edit() {
|
|||||||
{event?.topics.includes('course') && <CourseForm draft={event} isPublished />}
|
{event?.topics.includes('course') && <CourseForm draft={event} isPublished />}
|
||||||
{event?.topics.includes('video') && !event?.topics.includes('document') && <EditPublishedVideoForm event={event} />}
|
{event?.topics.includes('video') && !event?.topics.includes('document') && <EditPublishedVideoForm event={event} />}
|
||||||
{event?.topics.includes('document') && !event?.topics.includes('video') && <EditPublishedDocumentForm event={event} />}
|
{event?.topics.includes('document') && !event?.topics.includes('video') && <EditPublishedDocumentForm event={event} />}
|
||||||
{event?.topics.includes('video') && event?.topics.includes('document') && <CombinedResourceForm draft={event} isPublished />}
|
{event?.topics.includes('video') && event?.topics.includes('document') && <EditPublishedCombinedResourceForm event={event} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import axios from "axios";
|
|||||||
import EditDraftDocumentForm from "@/components/forms/document/EditDraftDocumentForm";
|
import EditDraftDocumentForm from "@/components/forms/document/EditDraftDocumentForm";
|
||||||
import EditDraftVideoForm from "@/components/forms/video/EditDraftVideoForm";
|
import EditDraftVideoForm from "@/components/forms/video/EditDraftVideoForm";
|
||||||
import CourseForm from "@/components/forms/course/CourseForm";
|
import CourseForm from "@/components/forms/course/CourseForm";
|
||||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
import EditDraftCombinedResourceForm from "@/components/forms/combined/EditDraftCombinedResourceForm";
|
||||||
import { useIsAdmin } from "@/hooks/useIsAdmin";
|
import { useIsAdmin } from "@/hooks/useIsAdmin";
|
||||||
|
|
||||||
const Edit = () => {
|
const Edit = () => {
|
||||||
@ -39,7 +39,7 @@ const Edit = () => {
|
|||||||
{draft?.type === 'course' && <CourseForm draft={draft} />}
|
{draft?.type === 'course' && <CourseForm draft={draft} />}
|
||||||
{draft?.type === 'video' && <EditDraftVideoForm draft={draft} />}
|
{draft?.type === 'video' && <EditDraftVideoForm draft={draft} />}
|
||||||
{draft?.type === 'document' && <EditDraftDocumentForm draft={draft} />}
|
{draft?.type === 'document' && <EditDraftDocumentForm draft={draft} />}
|
||||||
{draft?.type === 'combined' && <CombinedResourceForm draft={draft} />}
|
{draft?.type === 'combined' && <EditDraftCombinedResourceForm draft={draft} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user