From 225179dd6d910e86f6d12838127ab6817c7f812d Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Thu, 25 May 2023 08:24:24 +0700
Subject: [PATCH] update create block form

---
 src/app/chat/components/item.tsx           |  2 +-
 src/app/chat/components/self.tsx           |  8 +-
 src/app/space/components/create.tsx        | 64 ++++++++++------
 src/app/space/components/imageUploader.tsx | 86 ++++++++++++++++++++++
 4 files changed, 133 insertions(+), 27 deletions(-)
 create mode 100644 src/app/space/components/imageUploader.tsx

diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx
index 370e3682..8809634d 100644
--- a/src/app/chat/components/item.tsx
+++ b/src/app/chat/components/item.tsx
@@ -44,7 +44,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
 						/>
 					</div>
 					<div>
-						<h5 className="truncate font-medium text-zinc-200 group-hover:text-white">
+						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200 group-hover:text-white">
 							{user.nip05 || user.name || shortenKey(pubkey)}
 						</h5>
 					</div>
diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx
index 58148fc5..0a1dbed8 100644
--- a/src/app/chat/components/self.tsx
+++ b/src/app/chat/components/self.tsx
@@ -44,11 +44,11 @@ export default function ChatsListSelfItem() {
 							className="h-5 w-5 rounded bg-white object-cover"
 						/>
 					</div>
-					<div>
-						<h5 className="truncate font-medium text-zinc-200">
-							{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}{" "}
-							<span className="text-zinc-600">(you)</span>
+					<div className="inline-flex items-baseline">
+						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
+							{profile?.nip05 || profile?.name || shortenKey(account.pubkey)}
 						</h5>
+						<span className="text-zinc-600">(you)</span>
 					</div>
 				</a>
 			)}
diff --git a/src/app/space/components/create.tsx b/src/app/space/components/create.tsx
index 3b727e3e..1a1026d5 100644
--- a/src/app/space/components/create.tsx
+++ b/src/app/space/components/create.tsx
@@ -1,24 +1,27 @@
+import { BlockImageUploader } from "./imageUploader";
 import { Dialog, Transition } from "@headlessui/react";
 import CancelIcon from "@icons/cancel";
 import PlusIcon from "@icons/plus";
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
 import { useActiveAccount } from "@utils/hooks/useActiveAccount";
-import { createBlock } from "@utils/storage";
-import { Fragment, useState } from "react";
+import { createBlock, getPlebs } from "@utils/storage";
+import { Fragment, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import useSWR from "swr";
+
+const fetcher = () => getPlebs();
 
 export function CreateBlockModal() {
-	const {
-		register,
-		handleSubmit,
-		reset,
-		setValue,
-		formState: { isDirty, isValid },
-	} = useForm();
+	const { account } = useActiveAccount();
+	const { register, handleSubmit, reset, watch, setValue } = useForm();
+	const { data: plebs } = useSWR("plebs", fetcher);
 
+	const [image, setImage] = useState(DEFAULT_AVATAR);
 	const [isOpen, setIsOpen] = useState(false);
 	const [loading, setLoading] = useState(false);
 
-	const { account } = useActiveAccount();
+	const kind = watch("kind");
 
 	const closeModal = () => {
 		setIsOpen(false);
@@ -41,6 +44,10 @@ export function CreateBlockModal() {
 		});
 	};
 
+	useEffect(() => {
+		setValue("content", image);
+	}, [setValue, image]);
+
 	return (
 		<>
 			<button
@@ -116,7 +123,7 @@ export function CreateBlockModal() {
 											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Type *
 											</label>
-											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[6px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
 												<input
 													type={"text"}
 													{...register("kind", {
@@ -129,9 +136,9 @@ export function CreateBlockModal() {
 										</div>
 										<div className="flex flex-col gap-1">
 											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
-												Block Title *
+												Title *
 											</label>
-											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+											<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[6px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
 												<input
 													type={"text"}
 													{...register("title", {
@@ -147,15 +154,28 @@ export function CreateBlockModal() {
 											<label className="text-base font-semibold uppercase tracking-wider text-zinc-400">
 												Content *
 											</label>
-											<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
-												<textarea
-													{...register("content", {
-														required: true,
-													})}
-													spellCheck={false}
-													className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
-												/>
-											</div>
+											{kind === "1" ? (
+												<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[6px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+													<textarea
+														{...register("content", {
+															required: true,
+														})}
+														spellCheck={false}
+														className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-white dark:shadow-black/10 dark:placeholder:text-zinc-500"
+													/>
+												</div>
+											) : (
+												<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
+													<Image
+														src={image}
+														alt="block featured image"
+														className="relative z-10 h-11 w-11 rounded-md"
+													/>
+													<div className="absolute bottom-3 right-3 z-10">
+														<BlockImageUploader valueState={setImage} />
+													</div>
+												</div>
+											)}
 										</div>
 										<div>
 											<button
diff --git a/src/app/space/components/imageUploader.tsx b/src/app/space/components/imageUploader.tsx
new file mode 100644
index 00000000..28eac283
--- /dev/null
+++ b/src/app/space/components/imageUploader.tsx
@@ -0,0 +1,86 @@
+import { createBlobFromFile } from "@utils/createBlobFromFile";
+
+import { open } from "@tauri-apps/api/dialog";
+import { Body, fetch } from "@tauri-apps/api/http";
+import { useState } from "react";
+
+export function BlockImageUploader({ valueState }: { valueState: any }) {
+	const [loading, setLoading] = useState(false);
+
+	const openFileDialog = async () => {
+		const selected: any = await open({
+			multiple: false,
+			filters: [
+				{
+					name: "Image",
+					extensions: ["png", "jpeg", "jpg"],
+				},
+			],
+		});
+		if (Array.isArray(selected)) {
+			// user selected multiple files
+		} else if (selected === null) {
+			// user cancelled the selection
+		} else {
+			setLoading(true);
+
+			const filename = selected.split("/").pop();
+			const file = await createBlobFromFile(selected);
+			const buf = await file.arrayBuffer();
+
+			const res: { data: { file: { id: string } } } = await fetch(
+				"https://void.cat/upload?cli=false",
+				{
+					method: "POST",
+					timeout: 5,
+					headers: {
+						accept: "*/*",
+						"Content-Type": "application/octet-stream",
+						"V-Filename": filename,
+						"V-Description": "Upload from https://lume.nu",
+						"V-Strip-Metadata": "true",
+					},
+					body: Body.bytes(buf),
+				},
+			);
+			const webpImage = `https://void.cat/d/${res.data.file.id}.webp`;
+
+			valueState(webpImage);
+			setLoading(false);
+		}
+	};
+
+	return (
+		<button
+			onClick={() => openFileDialog()}
+			type="button"
+			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-white ring-1 ring-zinc-800 hover:bg-zinc-700"
+		>
+			{loading ? (
+				<svg
+					className="h-4 w-4 animate-spin text-black dark:text-white"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<title id="loading">Loading</title>
+					<circle
+						className="opacity-25"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						strokeWidth="4"
+					/>
+					<path
+						className="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					/>
+				</svg>
+			) : (
+				<span className="leading-none">Upload</span>
+			)}
+		</button>
+	);
+}