mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 10:51:20 +00:00
Merge pull request #11 from AustinKelsay/bugfix/fix-combined-forms
Split combined forms in to three speperate form components, test, and plug into parents.
This commit is contained in:
Austin Kelsay
GitHub
commit
3a95aedb30
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;
|
||||
@ -10,8 +10,6 @@ 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';
|
||||
|
||||
@ -22,13 +20,13 @@ const MDEditor = dynamic(
|
||||
|
||||
const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
|
||||
|
||||
const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
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 [videoUrl, setVideoUrl] = useState(draft?.videoUrl || '');
|
||||
const [content, setContent] = useState(draft?.content || '');
|
||||
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 || ['']);
|
||||
@ -37,8 +35,45 @@ const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const { showToast } = useToast();
|
||||
const { ndk, addSigner } = useNDKContext();
|
||||
const { encryptContent } = useEncryptContent();
|
||||
|
||||
// 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) {
|
||||
@ -59,7 +94,7 @@ const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
} 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'))) {
|
||||
} 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";
|
||||
@ -93,20 +128,17 @@ const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
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.');
|
||||
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 save content. Please try again.');
|
||||
showToast('error', 'Error', 'Failed to update content. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
@ -142,73 +174,9 @@ const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
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.');
|
||||
}
|
||||
};
|
||||
if (!draft) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
@ -289,10 +257,10 @@ const CombinedResourceForm = ({ draft = null, isPublished = false }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<GenericButton type="submit" severity="success" outlined label={draft ? "Update" : "Submit"} />
|
||||
<GenericButton type="submit" severity="success" outlined label="Update" />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CombinedResourceForm;
|
||||
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 { InputNumber } from 'primereact/inputnumber';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
|
||||
import MoreInfo from '@/components/MoreInfo';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const MDEditor = dynamic(
|
||||
@ -198,16 +198,15 @@ const EditPublishedVideoForm = ({ event }) => {
|
||||
<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 (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>
|
||||
<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" />
|
||||
@ -219,9 +218,16 @@ const EditPublishedVideoForm = ({ event }) => {
|
||||
<div className="w-full flex flex-row items-end justify-end py-2">
|
||||
<GenericButton icon="pi pi-plus" onClick={addLink} />
|
||||
</div>
|
||||
<Tooltip target=".pi-info-circle" />
|
||||
</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" />
|
||||
|
||||
@ -10,7 +10,7 @@ const appConfig = {
|
||||
"wss://purplerelay.com/",
|
||||
"wss://relay.devs.tools/"
|
||||
],
|
||||
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345", "6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4"],
|
||||
authorPubkeys: ["f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
|
||||
customLightningAddresses: [
|
||||
{
|
||||
// todo remove need for lowercase
|
||||
|
||||
@ -3,7 +3,7 @@ import MenuTab from "@/components/menutab/MenuTab";
|
||||
import DocumentForm from "@/components/forms/document/DocumentForm";
|
||||
import VideoForm from "@/components/forms/video/VideoForm";
|
||||
import CourseForm from "@/components/forms/course/CourseForm";
|
||||
import CombinedResourceForm from "@/components/forms/CombinedResourceForm";
|
||||
import CombinedResourceForm from "@/components/forms/combined/CombinedResourceForm";
|
||||
import { useIsAdmin } from "@/hooks/useIsAdmin";
|
||||
import { useRouter } from "next/router";
|
||||
import { ProgressSpinner } from "primereact/progressspinner";
|
||||
|
||||
@ -4,7 +4,7 @@ import { parseEvent } from "@/utils/nostr";
|
||||
import EditPublishedDocumentForm from "@/components/forms/document/EditPublishedDocumentForm";
|
||||
import EditPublishedVideoForm from "@/components/forms/video/EditPublishedVideoForm";
|
||||
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 { useToast } from "@/hooks/useToast";
|
||||
|
||||
@ -41,7 +41,7 @@ export default function Edit() {
|
||||
{event?.topics.includes('course') && <CourseForm draft={event} isPublished />}
|
||||
{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('video') && event?.topics.includes('document') && <CombinedResourceForm draft={event} isPublished />}
|
||||
{event?.topics.includes('video') && event?.topics.includes('document') && <EditPublishedCombinedResourceForm event={event} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import axios from "axios";
|
||||
import EditDraftDocumentForm from "@/components/forms/document/EditDraftDocumentForm";
|
||||
import EditDraftVideoForm from "@/components/forms/video/EditDraftVideoForm";
|
||||
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";
|
||||
|
||||
const Edit = () => {
|
||||
@ -39,7 +39,7 @@ const Edit = () => {
|
||||
{draft?.type === 'course' && <CourseForm draft={draft} />}
|
||||
{draft?.type === 'video' && <EditDraftVideoForm draft={draft} />}
|
||||
{draft?.type === 'document' && <EditDraftDocumentForm draft={draft} />}
|
||||
{draft?.type === 'combined' && <CombinedResourceForm draft={draft} />}
|
||||
{draft?.type === 'combined' && <EditDraftCombinedResourceForm draft={draft} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user