CoastalCommitsPastes/client/components/settings/sections/profile.tsx

124 lines
2.7 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(() => {
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