100 lines
No EOL
3.1 KiB
TypeScript
100 lines
No EOL
3.1 KiB
TypeScript
import { Note, Input, Textarea, Button, useToasts } from "@geist-ui/core"
|
|
import useUserData from "@lib/hooks/use-user-data"
|
|
import Cookies from "js-cookie"
|
|
import { useEffect, useState } from "react"
|
|
|
|
const Profile = () => {
|
|
const user = useUserData()
|
|
const [name, setName] = useState<string>()
|
|
const [email, setEmail] = useState<string>()
|
|
const [bio, setBio] = useState<string>()
|
|
|
|
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<HTMLInputElement>) => {
|
|
setName(e.target.value)
|
|
}
|
|
|
|
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setEmail(e.target.value)
|
|
}
|
|
|
|
const handleBioChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setBio(e.target.value)
|
|
}
|
|
|
|
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
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 ${Cookies.get("drift-token")}`,
|
|
},
|
|
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 (<>
|
|
<Note type="warning" marginBottom={"var(--gap)"}>
|
|
This information will be publicly available on your profile
|
|
</Note>
|
|
<form
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "var(--gap)",
|
|
maxWidth: "300px",
|
|
}}
|
|
onSubmit={onSubmit}
|
|
>
|
|
<div>
|
|
<label htmlFor="displayName">Display name</label>
|
|
<Input id="displayName" width={"100%"} placeholder="my name" value={name || ''} onChange={handleNameChange} />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email">Email</label>
|
|
<Input id="email" htmlType="email" width={"100%"} placeholder="my@email.io" value={email || ''} onChange={handleEmailChange} />
|
|
</div>
|
|
<div>
|
|
<label htmlFor="bio">Biography (max 250 characters)</label>
|
|
<Textarea id="bio" width="100%" maxLength={250} placeholder="I enjoy..." value={bio || ''} onChange={handleBioChange} />
|
|
</div>
|
|
<Button htmlType="submit" auto>Submit</Button>
|
|
</form></>)
|
|
}
|
|
|
|
export default Profile |