99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import Button from "@components/button"
|
|
import Input from "@components/input"
|
|
import Note from "@components/note"
|
|
import { useToasts } from "@components/toasts"
|
|
import { User } from "next-auth"
|
|
import { useState } from "react"
|
|
import styles from "./profile.module.css"
|
|
|
|
const Profile = ({ user }: { user: User }) => {
|
|
// TODO: make this displayName, requires fetching user from DB as session doesnt have it
|
|
const [name, setName] = useState<string>(user.name || "")
|
|
const [bio, setBio] = useState<string>()
|
|
|
|
const { setToast } = useToasts()
|
|
|
|
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setName(e.target.value)
|
|
}
|
|
|
|
const handleBioChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setBio(e.target.value)
|
|
}
|
|
|
|
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
if (!name && !bio) {
|
|
setToast({
|
|
message: "Please fill out at least one field",
|
|
type: "error"
|
|
})
|
|
return
|
|
}
|
|
|
|
const data = {
|
|
displayName: name,
|
|
bio
|
|
}
|
|
|
|
const res = await fetch(`/api/user/${user.id}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
|
|
if (res.status === 200) {
|
|
setToast({
|
|
message: "Profile updated",
|
|
type: "success"
|
|
})
|
|
} else {
|
|
setToast({
|
|
message: "Something went wrong updating your profile",
|
|
type: "error"
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Note type="warning">
|
|
This information will be publicly available on your profile
|
|
</Note>
|
|
<form onSubmit={onSubmit} className={styles.form}>
|
|
<div>
|
|
<label htmlFor="displayName">Display name</label>
|
|
<Input
|
|
id="displayName"
|
|
width={"100%"}
|
|
placeholder="my name"
|
|
value={name || ""}
|
|
onChange={handleNameChange}
|
|
aria-label="Display name"
|
|
minLength={1}
|
|
maxLength={32}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email">Email</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
width={"100%"}
|
|
placeholder="my@email.io"
|
|
value={user.email || undefined}
|
|
disabled
|
|
aria-label="Email"
|
|
/>
|
|
</div>
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Profile
|