130 lines
3.7 KiB
TypeScript
130 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import { HiX, HiOutlinePaperClip } from "react-icons/hi";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
import useAutosizeTextArea from "@/lib/hooks/useAutoSizeTextArea";
|
|
import { useModal } from "@/app/_providers/modal/provider";
|
|
import { useRouter } from "next/navigation";
|
|
import { createEvent } from "@/lib/actions/create";
|
|
import { useNDK } from "@/app/_providers/ndk";
|
|
import useCurrentUser from "@/lib/hooks/useCurrentUser";
|
|
import useImageUpload from "@/lib/hooks/useImageUpload";
|
|
|
|
type CreateKind1ModalProps = {
|
|
tags?: string[][];
|
|
};
|
|
|
|
export default function CreateKind1Modal({
|
|
tags: initialTags = [],
|
|
}: CreateKind1ModalProps) {
|
|
const modal = useModal();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [content, setContent] = useState("");
|
|
const {
|
|
ImageUploadButton,
|
|
ImagePreview,
|
|
clear,
|
|
imagePreview,
|
|
imageUrl,
|
|
status: imageStatus,
|
|
} = useImageUpload("event");
|
|
const { ndk } = useNDK();
|
|
const { currentUser } = useCurrentUser();
|
|
const contentRef = useRef<HTMLTextAreaElement>(null);
|
|
useAutosizeTextArea(contentRef.current, content);
|
|
|
|
async function handleSubmit() {
|
|
if (!ndk || !currentUser) return;
|
|
setIsLoading(true);
|
|
try {
|
|
const tags: string[][] = initialTags;
|
|
let noteContent = content;
|
|
|
|
if (imageUrl) {
|
|
tags.push(["r", imageUrl]);
|
|
noteContent += `\n${imageUrl}`;
|
|
}
|
|
const preEvent = {
|
|
content: noteContent,
|
|
pubkey: currentUser.pubkey,
|
|
tags: tags,
|
|
kind: 1,
|
|
};
|
|
const event = await createEvent(ndk, preEvent);
|
|
if (event) {
|
|
toast.success("Event Created!");
|
|
modal?.hide();
|
|
} else {
|
|
toast.error("An error occured");
|
|
}
|
|
} catch (err) {
|
|
console.log("err", err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative w-full grow bg-background p-4 shadow md:rounded-lg md:border md:p-6",
|
|
"md:max-w-[450px]",
|
|
)}
|
|
>
|
|
<button
|
|
onClick={() => modal?.hide()}
|
|
className="absolute right-4 top-4 hidden text-muted-foreground transition-all hover:text-primary md:flex"
|
|
>
|
|
<HiX className="h-4 w-4" />
|
|
</button>
|
|
<div className="space-y-4">
|
|
<div className="">
|
|
<Textarea
|
|
ref={contentRef}
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
placeholder="What's on your mind?"
|
|
autoFocus
|
|
className={cn(
|
|
"invisible-input min-h-[60px] text-[1.5rem] font-medium text-foreground placeholder:text-muted-foreground/70",
|
|
content.length > 50 && "text-[1.25rem]",
|
|
content.length > 120 && "text-[1rem]",
|
|
)}
|
|
/>
|
|
<div className="mt-1 flex items-center text-muted-foreground">
|
|
{imagePreview ? (
|
|
<ImagePreview className="" />
|
|
) : (
|
|
<ImageUploadButton>
|
|
<Button
|
|
size={"icon"}
|
|
variant={"outline"}
|
|
className="rounded-full"
|
|
>
|
|
<HiOutlinePaperClip className="h-4 w-4" />
|
|
</Button>
|
|
</ImageUploadButton>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
loading={isLoading}
|
|
disabled={imageStatus === "uploading"}
|
|
className="w-full"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|