Split up document forms, fix editing of published content, also fix reencrypting content when editing published paid content.

src/components/forms/document/DocumentForm.js

@@ -8,10 +8,10 @@ import GenericButton from "@/components/buttons/GenericButton";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useToast } from "@/hooks/useToast";
-import { useNDKContext } from "@/context/NDKContext";
-import { NDKEvent } from "@nostr-dev-kit/ndk";
 import dynamic from 'next/dynamic';
-import { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
+import 'primeicons/primeicons.css';
+import { Tooltip } from 'primereact/tooltip';
+import 'primereact/resources/primereact.min.css';
 
 const MDEditor = dynamic(
     () => import("@uiw/react-md-editor"),
@@ -19,26 +19,21 @@ const MDEditor = dynamic(
         ssr: false,
     }
 );
-import 'primeicons/primeicons.css';
-import { Tooltip } from 'primereact/tooltip';
-import 'primereact/resources/primereact.min.css';
 
-const DocumentForm = ({ draft = null, isPublished = false }) => {
+const DocumentForm = () => {
-    const [title, setTitle] = useState(draft?.title || '');
+    const [title, setTitle] = useState('');
-    const [summary, setSummary] = useState(draft?.summary || '');
+    const [summary, setSummary] = useState('');
-    const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
+    const [isPaidResource, setIsPaidResource] = useState(false);
-    const [price, setPrice] = useState(draft?.price || 0);
+    const [price, setPrice] = useState(0);
-    const [coverImage, setCoverImage] = useState(draft?.image || '');
+    const [coverImage, setCoverImage] = useState('');
-    const [topics, setTopics] = useState(draft?.topics || ['']);
+    const [topics, setTopics] = useState(['']);
-    const [content, setContent] = useState(draft?.content || '');
+    const [content, setContent] = useState('');
     const [user, setUser] = useState(null);
-    const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
+    const [additionalLinks, setAdditionalLinks] = useState(['']);
-    const { encryptContent, isLoading: encryptLoading, error: encryptError } = useEncryptContent();
 
-    const { data: session, status } = useSession();
+    const { data: session } = useSession();
     const { showToast } = useToast();
     const router = useRouter();
-    const { ndk, addSigner } = useNDKContext();
 
     useEffect(() => {
         if (session) {
@@ -50,129 +45,39 @@ const DocumentForm = ({ draft = null, isPublished = false }) => {
         setContent(value || '');
     }, []);
 
-    useEffect(() => {
-        if (draft) {
-            setTitle(draft.title);
-            setSummary(draft.summary);
-            setIsPaidResource(draft.price ? true : false);
-            setPrice(draft.price || 0);
-            setContent(draft.content);
-            setCoverImage(draft.image);
-            setTopics(draft.topics || []);
-            setAdditionalLinks(draft.additionalLinks || []);
-        }
-    }, [draft]);
-
-    const buildEvent = async (draft) => {
-        const dTag = draft.d
-        const event = new NDKEvent(ndk);
-        let encryptedContent;
-
-        if (draft?.price) {
-            encryptedContent = await encryptContent(draft.content);
-        }
-
-        event.kind = draft?.price ? 30402 : 30023; // Determine kind based on if price is present
-        event.content = draft?.price ? encryptedContent : draft.content;
-        event.created_at = Math.floor(Date.now() / 1000);
-        event.pubkey = user.pubkey;
-        event.tags = [
-            ['d', dTag],
-            ['title', draft.title],
-            ['summary', draft.summary],
-            ['image', draft.image],
-            ...draft.topics.map(topic => ['t', topic]),
-            ['published_at', Math.floor(Date.now() / 1000).toString()],
-            ...(draft?.price ? [['price', draft.price.toString()], ['location', `https://plebdevs.com/details/${draft.id}`]] : []),
-        ];
-
-        return event;
-    };
-
-    const handlePublishedResource = async (e) => {
-        e.preventDefault();
-
-        // create new object with state fields
-        const updatedDraft = {
-            title,
-            summary,
-            price,
-            content,
-            d: draft.d,
-            image: coverImage,
-            topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), '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) {
-                // update the resource with new noteId
-                const response = await axios.put(`/api/resources/${draft.d}`, { noteId: event.id });
-                showToast('success', 'Success', 'Document published successfully.');
-                router.push(`/details/${event.id}`);
-            } else {
-                showToast('error', 'Error', 'Failed to publish document. Please try again.');
-            }
-        } catch (error) {
-            console.error(error);
-            showToast('error', 'Error', 'Failed to publish document. Please try again.');
-        }
-    }
-
     const handleSubmit = async (e) => {
         e.preventDefault();
 
-        const userResponse = await axios.get(`/api/users/${user.pubkey}`);
+        try {
+            const userResponse = await axios.get(`/api/users/${user.pubkey}`);
+            if (!userResponse.data) {
+                showToast('error', 'Error', 'User not found', 'Please try again.');
+                return;
+            }
 
-        if (!userResponse.data) {
+            const payload = {
-            showToast('error', 'Error', 'User not found', 'Please try again.');
+                title,
-            return;
+                summary,
-        }
+                type: 'document',
+                price: isPaidResource ? price : null,
+                content,
+                image: coverImage,
+                topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'document'])],
+                additionalLinks: additionalLinks.filter(link => link.trim() !== ''),
+                user: userResponse.data.id
+            };
 
-        const payload = {
+            const response = await axios.post('/api/drafts', payload);
-            title,
-            summary,
-            type: 'document',
-            price: isPaidResource ? price : null,
-            content,
-            image: coverImage,
-            topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'document'])],
-            additionalLinks: additionalLinks.filter(link => link.trim() !== '')
-        };
 
-        if (!draft) {
+            if (response.status === 201) {
-            // Only include user when creating a new draft
+                showToast('success', 'Success', 'Document saved as draft.');
-            payload.user = userResponse.data.id;
+                if (response.data?.id) {
-        }
+                    router.push(`/draft/${response.data.id}`);
-
+                }
-        if (payload) {
+            }
-            const url = draft ? `/api/drafts/${draft.id}` : '/api/drafts';
+        } catch (error) {
-            const method = draft ? 'put' : 'post';
+            console.error(error);
-
+            showToast('error', 'Error', 'Failed to save document. Please try again.');
-            axios[method](url, payload)
-                .then(response => {
-                    if (response.status === 200 || response.status === 201) {
-                        showToast('success', 'Success', draft ? 'Document updated successfully.' : 'Document saved as draft.');
-
-                        if (response.data?.id) {
-                            router.push(`/draft/${response.data.id}`);
-                        }
-                    }
-                })
-                .catch(error => {
-                    console.error(error);
-                    showToast('error', 'Error', 'Failed to save document. Please try again.');
-                });
         }
     };
 
@@ -209,7 +114,7 @@ const DocumentForm = ({ draft = null, isPublished = false }) => {
     };
 
     return (
-        <form onSubmit={isPublished && draft ? handlePublishedResource : handleSubmit}>
+        <form onSubmit={handleSubmit}>
             <div className="p-inputgroup flex-1">
                 <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
             </div>
@@ -277,7 +182,7 @@ const DocumentForm = ({ draft = null, isPublished = false }) => {
                 </div>
             </div>
             <div className="flex justify-center mt-8">
-                <GenericButton type="submit" severity="success" outlined label={draft ? "Update Draft" : "Save Draft"} />
+                <GenericButton type="submit" severity="success" outlined label="Save Draft" />
             </div>
         </form>
     );

src/components/forms/document/EditDraftDocumentForm.js

@@ -0,0 +1,184 @@
+import React, { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+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 { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useToast } from "@/hooks/useToast";
+import dynamic from 'next/dynamic';
+import { Tooltip } from 'primereact/tooltip';
+
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+
+const EditDraftDocumentForm = ({ draft }) => {
+    const [title, setTitle] = useState(draft?.title || '');
+    const [summary, setSummary] = useState(draft?.summary || '');
+    const [isPaidResource, setIsPaidResource] = useState(draft?.price ? true : false);
+    const [price, setPrice] = useState(draft?.price || 0);
+    const [coverImage, setCoverImage] = useState(draft?.image || '');
+    const [topics, setTopics] = useState(draft?.topics || ['']);
+    const [content, setContent] = useState(draft?.content || '');
+    const [user, setUser] = useState(null);
+    const [additionalLinks, setAdditionalLinks] = useState(draft?.additionalLinks || ['']);
+
+    const { data: session } = useSession();
+    const { showToast } = useToast();
+    const router = useRouter();
+
+    useEffect(() => {
+        if (session) {
+            setUser(session.user);
+        }
+    }, [session]);
+
+    const handleContentChange = useCallback((value) => {
+        setContent(value || '');
+    }, []);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const userResponse = await axios.get(`/api/users/${user.pubkey}`);
+            if (!userResponse.data) {
+                showToast('error', 'Error', 'User not found', 'Please try again.');
+                return;
+            }
+
+            const payload = {
+                title,
+                summary,
+                type: 'document',
+                price: isPaidResource ? price : null,
+                content,
+                image: coverImage,
+                topics: [...new Set([...topics.map(topic => topic.trim().toLowerCase()), 'document'])],
+                additionalLinks: additionalLinks.filter(link => link.trim() !== '')
+            };
+
+            const response = await axios.put(`/api/drafts/${draft.id}`, payload);
+
+            if (response.status === 200) {
+                showToast('success', 'Success', 'Document updated successfully.');
+                if (response.data?.id) {
+                    router.push(`/draft/${response.data.id}`);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            showToast('error', 'Error', 'Failed to update document. 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 handleLinkChange = (index, value) => {
+        const updatedLinks = additionalLinks.map((link, i) => i === index ? value : link);
+        setAdditionalLinks(updatedLinks);
+    };
+
+    const addLink = (e) => {
+        e.preventDefault();
+        setAdditionalLinks([...additionalLinks, '']);
+    };
+
+    const removeLink = (e, index) => {
+        e.preventDefault();
+        const updatedLinks = additionalLinks.filter((_, i) => i !== index);
+        setAdditionalLinks(updatedLinks);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="p-inputgroup flex-1">
+                <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-4">
+                <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 Document</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={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) => 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>
+                <Tooltip target=".pi-info-circle" />
+            </div>
+            <div className="mt-4 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <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 EditDraftDocumentForm; 

src/components/forms/document/EditPublishedDocumentForm.js

@@ -0,0 +1,229 @@
+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 { useEncryptContent } from '@/hooks/encryption/useEncryptContent';
+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 { Tooltip } from 'primereact/tooltip';
+import dynamic from 'next/dynamic';
+
+const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });
+
+const EditPublishedDocumentForm = ({ event }) => {
+    const router = useRouter();
+    const { data: session } = useSession();
+    const { showToast } = useToast();
+    const { ndk, addSigner } = useNDKContext();
+    const { encryptContent } = useEncryptContent();
+    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 [content, setContent] = useState(event.content);
+    const [coverImage, setCoverImage] = useState(event.image);
+    const [additionalLinks, setAdditionalLinks] = useState(event.additionalLinks);
+    const [topics, setTopics] = useState(event.topics);
+
+    useEffect(() => {
+        if (session) {
+            setUser(session.user);
+        }
+    }, [session]);
+
+    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();
+            }
+
+            // Encrypt content if it's a paid resource
+            let finalContent = content;
+            if (isPaidResource && price > 0) {
+                finalContent = await encryptContent(content);
+                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],
+                ['t', 'document'],
+                ['d', event.d],
+            ];
+
+            // Add topics
+            topics.forEach(topic => {
+                if (topic && topic !== 'document') {
+                    ndkEvent.tags.push(['t', topic]);
+                }
+            });
+
+            // Add additional links
+            additionalLinks.forEach(link => {
+                if (link) {
+                    ndkEvent.tags.push(['r', link]);
+                }
+            });
+
+            // Add price if it exists
+            if (price) {
+                ndkEvent.tags.push(['price', price.toString()]);
+            }
+
+            // Validate the event
+            const validationResult = validateEvent(ndkEvent);
+            if (validationResult !== true) {
+                console.log("validationResult", 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', 'Document updated successfully');
+                    router.push(`/details/${updatedResource.data.noteId}`);
+                } else {
+                    showToast('error', 'Error', 'Failed to update document');
+                }
+            }
+        } catch (error) {
+            console.error('Error updating document:', error);
+            showToast('error', 'Error', 'Failed to update document');
+        }
+    };
+
+    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 Document</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={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) => 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>
+                <Tooltip target=".pi-info-circle" />
+            </div>
+            <div className="mt-4 flex-col w-full">
+                {topics.map((topic, index) => (
+                    <div className="p-inputgroup flex-1" key={index}>
+                        <InputText value={topic} onChange={(e) => handleTopicChange(index, e.target.value)} placeholder="Topic" className="w-full mt-2" />
+                        {index > 0 && (
+                            <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 EditPublishedDocumentForm;

src/components/forms/video/EditPublishedVideoForm.js

@@ -12,6 +12,7 @@ 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';
 
 const EditPublishedVideoForm = ({ event }) => {
     const router = useRouter();
@@ -28,6 +29,8 @@ const EditPublishedVideoForm = ({ event }) => {
     const [additionalLinks, setAdditionalLinks] = useState(event.additionalLinks);
     const [topics, setTopics] = useState(event.topics);
 
+    const { encryptContent } = useEncryptContent();
+
     useEffect(() => {
         if (session) {
             setUser(session.user);
@@ -82,11 +85,21 @@ const EditPublishedVideoForm = ({ event }) => {
             } else if (videoUrl.includes('vimeo.com')) {
                 const videoId = videoUrl.split('/').pop();
                 embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
-            } else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.webm')) {
+            } else if (!price || !price > 0 && (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm'))) {
+                embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${CDN_ENDPOINT}/${videoUrl}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
+            } else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm')) {
                 const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
-                embedCode = price 
+                const videoEmbed = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
-                    ? `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`
+                embedCode = videoEmbed;
-                    : `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${process.env.NEXT_PUBLIC_CDN_ENDPOINT}/${videoUrl}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
+            }
+
+            // Encrypt content if it's a paid resource
+            if (isPaidResource && price > 0) {
+                embedCode = await encryptContent(embedCode);
+                if (!embedCode) {
+                    showToast('error', 'Error', 'Failed to encrypt content');
+                    return;
+                }
             }
 
             const ndkEvent = new NDKEvent(ndk);
@@ -138,9 +151,11 @@ const EditPublishedVideoForm = ({ event }) => {
                     updatedAt: new Date().toISOString(),
                 });
 
-                if (updatedResource) {
+                if (updatedResource && updatedResource.status === 200) {
                     showToast('success', 'Success', 'Video updated successfully');
-                    router.push(`/details/${signedEvent.id}`);
+                    router.push(`/details/${updatedResource.data.noteId}`);
+                } else {
+                    showToast('error', 'Error', 'Failed to update video');
                 }
             }
         } catch (error) {
@@ -178,11 +193,11 @@ const EditPublishedVideoForm = ({ event }) => {
                 <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-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-position="right"
-                       data-pr-at="right+5 top"
+                        data-pr-at="right+5 top"
-                       data-pr-my="left center-2"
+                        data-pr-my="left center-2"
-                       style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
+                        style={{ fontSize: '1rem', color: 'var(--primary-color)' }}
                     />
                 </span>
                 {additionalLinks.map((link, index) => (

src/pages/create.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import MenuTab from "@/components/menutab/MenuTab";
-import DocumentForm from "@/components/forms/DocumentForm";
+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";

src/pages/details/[slug]/edit.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import { parseEvent } from "@/utils/nostr";
-import DocumentForm from "@/components/forms/DocumentForm";
+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";
@@ -40,7 +40,7 @@ export default function Edit() {
             <h2 className="text-center mb-8">Edit Published Event</h2>
             {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') && <DocumentForm draft={event} isPublished />}
+            {event?.topics.includes('document') && !event?.topics.includes('video') && <EditPublishedDocumentForm event={event} />}
             {event?.topics.includes('video') && event?.topics.includes('document') && <CombinedResourceForm draft={event} isPublished />}
         </div>
     );

src/pages/draft/[slug]/edit.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import axios from "axios";
-import DocumentForm from "@/components/forms/DocumentForm";
+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";
@@ -38,7 +38,7 @@ const Edit = () => {
             <h2 className="text-center mb-8">Edit Draft</h2>
             {draft?.type === 'course' && <CourseForm draft={draft} />}
             {draft?.type === 'video' && <EditDraftVideoForm draft={draft} />}
-            {draft?.type === 'document' && <DocumentForm draft={draft} />}
+            {draft?.type === 'document' && <EditDraftDocumentForm draft={draft} />}
             {draft?.type === 'combined' && <CombinedResourceForm draft={draft} />}
         </div>
     );