126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import { Note, Profile } from "~/lib/types"
|
|
import { useGetCurrentUserSites, useAccountAddress } from "~/queries/site"
|
|
import { Avatar } from "~/components/ui/Avatar"
|
|
import { Input } from "~/components/ui/Input"
|
|
import { Button } from "~/components/ui/Button"
|
|
import { useForm } from "react-hook-form"
|
|
import { useConnectModal } from "@crossbell/connect-kit"
|
|
import { useState, useEffect } from "react"
|
|
import { useCommentPage } from "~/queries/page"
|
|
import { useRouter } from "next/router"
|
|
import { EmojiPicker } from "./EmojiPicker"
|
|
import { Popover } from "@headlessui/react"
|
|
import { FaceSmileIcon } from "@heroicons/react/24/outline"
|
|
|
|
export const CommentInput: React.FC<{
|
|
pageId?: string
|
|
originalId?: string
|
|
}> = ({ pageId, originalId }) => {
|
|
const address = useAccountAddress()
|
|
const userSites = useGetCurrentUserSites()
|
|
const { show: openConnectModal } = useConnectModal()
|
|
const commentPage = useCommentPage()
|
|
const router = useRouter()
|
|
const [viewer, setViewer] = useState<Profile | null>(null)
|
|
const [addressIn, setAddressIn] = useState("")
|
|
|
|
useEffect(() => {
|
|
setAddressIn(address || "")
|
|
}, [address])
|
|
|
|
useEffect(() => {
|
|
if (userSites.isSuccess && userSites.data?.length) {
|
|
setViewer(userSites.data[0])
|
|
}
|
|
}, [userSites, router])
|
|
|
|
const form = useForm({
|
|
defaultValues: {
|
|
content: "",
|
|
},
|
|
})
|
|
|
|
const handleSubmit = form.handleSubmit(async (values) => {
|
|
if (!address) {
|
|
openConnectModal?.()
|
|
} else if (userSites.isSuccess && !userSites.data?.length) {
|
|
router.push(`/dashboard/new-site`)
|
|
} else if (pageId) {
|
|
commentPage.mutate({
|
|
address,
|
|
pageId: pageId,
|
|
content: values.content,
|
|
externalUrl: window.location.href,
|
|
originalId: originalId,
|
|
})
|
|
}
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (commentPage.isSuccess) {
|
|
form.reset()
|
|
}
|
|
}, [commentPage.isSuccess, form])
|
|
|
|
return (
|
|
<div className="xlog-comment-input flex">
|
|
<Avatar
|
|
className="align-middle mr-3"
|
|
images={viewer?.avatars || []}
|
|
name={viewer?.name}
|
|
size={45}
|
|
/>
|
|
<form className="w-full" onSubmit={handleSubmit}>
|
|
<div>
|
|
<Input
|
|
id="content"
|
|
isBlock
|
|
required={
|
|
!!addressIn && userSites.isSuccess && !!userSites.data?.length
|
|
}
|
|
disabled={
|
|
!addressIn || !userSites.isSuccess || !userSites.data?.length
|
|
}
|
|
multiline
|
|
maxLength={300}
|
|
className="mb-2"
|
|
placeholder="Write a comment on the blockchain"
|
|
{...form.register("content", {})}
|
|
/>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<Popover className="relative flex justify-center">
|
|
{({ open }: { open: boolean }) => (
|
|
<>
|
|
<Popover.Button className="group inline-flex items-center rounded-md px-2 text-xl">
|
|
<FaceSmileIcon className="w-6 h-6 text-zinc-400 hover:text-zinc-500" />
|
|
</Popover.Button>
|
|
<Popover.Panel className="absolute left-0 top-full z-10">
|
|
<EmojiPicker
|
|
onEmojiSelect={(e: any) =>
|
|
form.setValue(
|
|
"content",
|
|
form.getValues("content") + e.native,
|
|
)
|
|
}
|
|
/>
|
|
</Popover.Panel>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
<Button
|
|
type="submit"
|
|
isLoading={userSites.isLoading || commentPage.isLoading}
|
|
>
|
|
{addressIn
|
|
? userSites.isSuccess && !userSites.data?.length
|
|
? "Create Character"
|
|
: "Submit"
|
|
: "Connect"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|