adding image upload to long form

components/LongForm/ToolBar.tsx

@@ -8,6 +8,7 @@ import { Textarea } from "../ui/textarea";
 import useAutosizeTextArea from "@/lib/hooks/useAutoSizeTextArea";
 import { HiOutlinePhoto } from "react-icons/hi2";
 import { cn } from "@/lib/utils";
+import useImageUpload from "@/lib/hooks/useImageUpload";
 
 interface ToolbarProps {
   initialData?: {
@@ -40,6 +41,8 @@ export const Toolbar = ({ initialData, preview, onSubmit }: ToolbarProps) => {
   const [isEditingSummary, setIsEditingSummary] = useState(false);
   const [value, setValue] = useState(initialData?.title);
 
+  const { ImageUploadButton, imageUrl, ImagePreview, status } =
+    useImageUpload("event");
   const update = () => {
     console.log("Update");
   };
@@ -68,7 +71,7 @@ export const Toolbar = ({ initialData, preview, onSubmit }: ToolbarProps) => {
   const handleSubmit = async () => {
     try {
       setLoading(true);
-      await onSubmit({ title, summary, image });
+      await onSubmit({ title, summary, image: imageUrl ?? "" });
       setLoading(false);
     } catch (err) {
       console.log("Error", err);
@@ -87,17 +90,24 @@ export const Toolbar = ({ initialData, preview, onSubmit }: ToolbarProps) => {
       <div className="flex items-center gap-x-1 py-4">
         <div className="opacity-0 group-hover:opacity-100">
           {!initialData?.image && !preview && (
-            <Button
+            <ImageUploadButton>
-              className="text-xs text-muted-foreground"
+              <Button
-              variant="outline"
+                className="text-xs text-muted-foreground"
-              size="sm"
+                variant="outline"
-            >
+                size="sm"
-              <HiOutlinePhoto className="mr-2 h-4 w-4" />
+              >
-              Add cover
+                <HiOutlinePhoto className="mr-2 h-4 w-4" />
-            </Button>
+                Add cover
+              </Button>
+            </ImageUploadButton>
           )}
         </div>
-        <Button loading={loading} onClick={handleSubmit} className="ml-auto">
+        <Button
+          disabled={status === "uploading"}
+          loading={loading}
+          onClick={handleSubmit}
+          className="ml-auto"
+        >
           Publish
         </Button>
       </div>
@@ -144,6 +154,7 @@ export const Toolbar = ({ initialData, preview, onSubmit }: ToolbarProps) => {
           {summary || "Write a short summary of your content..."}
         </div>
       )}
+      <ImagePreview />
     </div>
   );
 };

components/LongForm/Viewer.tsx

@@ -21,7 +21,6 @@ const Viewer = ({ initialMarkdown }: EditorProps) => {
   });
 
   useEffect(() => {
-    console.log("ERFE", editor);
     if (editor) {
       if (!initialContent && initialMarkdown) {
         console.log("initial md", initialMarkdown);

containers/Article/Editor.tsx

@@ -7,11 +7,14 @@ import { RiCloseFill } from "react-icons/ri";
 import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar";
 import { useRouter } from "next/navigation";
 import { formatDate } from "@/lib/utils/dates";
-import Actions from "./Actions";
+import { toast } from "sonner";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { getTagAllValues, getTagValues } from "@/lib/nostr/utils";
 import Editor from "@/components/LongForm/Editor";
 import { Toolbar } from "@/components/LongForm/ToolBar";
+import { createEvent } from "@/lib/actions/create";
+import { useNDK } from "@/app/_providers/ndk";
+import { unixTimeNowInSeconds } from "@/lib/nostr/dates";
 type ArticleProps = {
   event?: NDKEvent;
 };
@@ -19,6 +22,7 @@ type ArticleProps = {
 export default function EditorPage({ event }: ArticleProps) {
   const router = useRouter();
   const [content, setContent] = useState("");
+  const { ndk } = useNDK();
   async function handleSubmit({
     title,
     summary,
@@ -28,6 +32,24 @@ export default function EditorPage({ event }: ArticleProps) {
     summary: string;
     image?: string;
   }) {
+    if (!ndk) return;
+    const tags = [
+      ["title", title],
+      ["summary", summary],
+      ["published_at", unixTimeNowInSeconds().toString()],
+    ];
+    if (image) {
+      tags.push(["image", image]);
+    }
+    const event = await createEvent(ndk, {
+      content: content,
+      kind: 30023,
+      tags: tags,
+    });
+    if (event) {
+      toast.success("Event Created!");
+      router.push(`/article/${event.encode()}`);
+    }
     console.log("Writing", title, summary, image, content);
   }
 

containers/Article/index.tsx

@@ -69,7 +69,7 @@ export default function ArticlePage({ event }: ArticleProps) {
       <div className="vmax-h-[calc(100vh_-_100px)] overflow-y-auto">
         <article className="prose prose-zinc relative mx-auto max-w-3xl pt-7 dark:prose-invert">
           <div className="">
-            <div className="flex items-center justify-between gap-1 lg:mb-2">
+            <div className="mb-1.5 flex items-center justify-between gap-1 lg:mb-2">
               {tags.map((t) => (
                 <Button variant={"link"} className="px-0">
                   {t}
@@ -85,7 +85,7 @@ export default function ArticlePage({ event }: ArticleProps) {
                 <span className="h-3 w-[1px] rounded-full bg-muted-foreground/50"></span>
               </div>
             </div>
-            <h1 className="">{title}</h1>
+            <h1 className="mb-4 text-5xl font-bold">{title}</h1>
             <div className="mb-5 flex items-center justify-end">
               <Actions />
             </div>