153 lines
4.0 KiB
TypeScript
153 lines
4.0 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Container,
|
|
Flex,
|
|
FormControl,
|
|
FormErrorMessage,
|
|
FormLabel,
|
|
Heading,
|
|
Input,
|
|
Text,
|
|
useColorModeValue,
|
|
} from "@chakra-ui/react"
|
|
import { useState } from "react"
|
|
import { type SubmitHandler, useForm } from "react-hook-form"
|
|
import { useMutation, useQueryClient } from "react-query"
|
|
|
|
import {
|
|
type ApiError,
|
|
type UserOut,
|
|
type UserUpdateMe,
|
|
UsersService,
|
|
} from "../../client"
|
|
import useAuth from "../../hooks/useAuth"
|
|
import useCustomToast from "../../hooks/useCustomToast"
|
|
import { emailPattern } from "../../utils"
|
|
|
|
const UserInformation = () => {
|
|
const queryClient = useQueryClient()
|
|
const color = useColorModeValue("inherit", "ui.light")
|
|
const showToast = useCustomToast()
|
|
const [editMode, setEditMode] = useState(false)
|
|
const { user: currentUser } = useAuth()
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
getValues,
|
|
formState: { isSubmitting, errors, isDirty },
|
|
} = useForm<UserOut>({
|
|
mode: "onBlur",
|
|
criteriaMode: "all",
|
|
defaultValues: {
|
|
full_name: currentUser?.full_name,
|
|
email: currentUser?.email,
|
|
},
|
|
})
|
|
|
|
const toggleEditMode = () => {
|
|
setEditMode(!editMode)
|
|
}
|
|
|
|
const mutation = useMutation(
|
|
(data: UserUpdateMe) => UsersService.updateUserMe({ requestBody: data }),
|
|
{
|
|
onSuccess: () => {
|
|
showToast("Success!", "User updated successfully.", "success")
|
|
},
|
|
onError: (err: ApiError) => {
|
|
const errDetail = (err.body as any)?.detail
|
|
showToast("Something went wrong.", `${errDetail}`, "error")
|
|
},
|
|
onSettled: () => {
|
|
queryClient.invalidateQueries("users")
|
|
queryClient.invalidateQueries("currentUser")
|
|
},
|
|
},
|
|
)
|
|
|
|
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
|
|
mutation.mutate(data)
|
|
}
|
|
|
|
const onCancel = () => {
|
|
reset()
|
|
toggleEditMode()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Container maxW="full" as="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<Heading size="sm" py={4}>
|
|
User Information
|
|
</Heading>
|
|
<Box w={{ sm: "full", md: "50%" }}>
|
|
<FormControl>
|
|
<FormLabel color={color} htmlFor="name">
|
|
Full name
|
|
</FormLabel>
|
|
{editMode ? (
|
|
<Input
|
|
id="name"
|
|
{...register("full_name", { maxLength: 30 })}
|
|
type="text"
|
|
size="md"
|
|
/>
|
|
) : (
|
|
<Text
|
|
size="md"
|
|
py={2}
|
|
color={!currentUser?.full_name ? "ui.dim" : "inherit"}
|
|
>
|
|
{currentUser?.full_name || "N/A"}
|
|
</Text>
|
|
)}
|
|
</FormControl>
|
|
<FormControl mt={4} isInvalid={!!errors.email}>
|
|
<FormLabel color={color} htmlFor="email">
|
|
Email
|
|
</FormLabel>
|
|
{editMode ? (
|
|
<Input
|
|
id="email"
|
|
{...register("email", {
|
|
required: "Email is required",
|
|
pattern: emailPattern,
|
|
})}
|
|
type="email"
|
|
size="md"
|
|
/>
|
|
) : (
|
|
<Text size="md" py={2}>
|
|
{currentUser?.email}
|
|
</Text>
|
|
)}
|
|
{errors.email && (
|
|
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
|
|
)}
|
|
</FormControl>
|
|
<Flex mt={4} gap={3}>
|
|
<Button
|
|
variant="primary"
|
|
onClick={toggleEditMode}
|
|
type={editMode ? "button" : "submit"}
|
|
isLoading={editMode ? isSubmitting : false}
|
|
isDisabled={editMode ? !isDirty || !getValues("email") : false}
|
|
>
|
|
{editMode ? "Save" : "Edit"}
|
|
</Button>
|
|
{editMode && (
|
|
<Button onClick={onCancel} isDisabled={isSubmitting}>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
</Box>
|
|
</Container>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default UserInformation
|