import { Note, Input, Textarea, Button, useToasts } from "@geist-ui/core/dist" import { TOKEN_COOKIE_NAME } from "@lib/constants" import useUserData from "@lib/hooks/use-user-data" import { getCookie } from "cookies-next" import Cookies from "js-cookie" import { useEffect, useState } from "react" const Profile = () => { const user = useUserData() const [name, setName] = useState() const [email, setEmail] = useState() const [bio, setBio] = useState() useEffect(() => { console.log(user) if (user?.displayName) setName(user.displayName) if (user?.email) setEmail(user.email) if (user?.bio) setBio(user.bio) }, [user]) const { setToast } = useToasts() const handleNameChange = (e: React.ChangeEvent) => { setName(e.target.value) } const handleEmailChange = (e: React.ChangeEvent) => { setEmail(e.target.value) } const handleBioChange = (e: React.ChangeEvent) => { setBio(e.target.value) } const onSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!name && !email && !bio) { setToast({ text: "Please fill out at least one field", type: "error" }) return } const data = { displayName: name, email, bio } const res = await fetch("/server-api/user/profile", { method: "PUT", headers: { "Content-Type": "application/json", Authorization: `Bearer ${getCookie(TOKEN_COOKIE_NAME)}` }, body: JSON.stringify(data) }) if (res.status === 200) { setToast({ text: "Profile updated", type: "success" }) } else { setToast({ text: "Something went wrong updating your profile", type: "error" }) } } return ( <> This information will be publicly available on your profile