🛂 Migrate to Chakra UI v3 (#1496)
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alejandra
@@ -1,51 +1,52 @@
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
} from "@chakra-ui/react"
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { type SubmitHandler, useForm } from "react-hook-form"
|
||||
import { Controller, type SubmitHandler, useForm } from "react-hook-form"
|
||||
|
||||
import {
|
||||
type ApiError,
|
||||
type UserPublic,
|
||||
type UserUpdate,
|
||||
UsersService,
|
||||
} from "../../client"
|
||||
Button,
|
||||
DialogActionTrigger,
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
Flex,
|
||||
Input,
|
||||
Text,
|
||||
VStack,
|
||||
} from "@chakra-ui/react"
|
||||
import { useState } from "react"
|
||||
import { FaExchangeAlt } from "react-icons/fa"
|
||||
import { type UserPublic, type UserUpdate, UsersService } from "../../client"
|
||||
import type { ApiError } from "../../client/core/ApiError"
|
||||
import useCustomToast from "../../hooks/useCustomToast"
|
||||
import { emailPattern, handleError } from "../../utils"
|
||||
import { Checkbox } from "../ui/checkbox"
|
||||
import {
|
||||
DialogBody,
|
||||
DialogCloseTrigger,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../ui/dialog"
|
||||
import { Field } from "../ui/field"
|
||||
|
||||
interface EditUserProps {
|
||||
user: UserPublic
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
interface UserUpdateForm extends UserUpdate {
|
||||
confirm_password: string
|
||||
confirm_password?: string
|
||||
}
|
||||
|
||||
const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
|
||||
const EditUser = ({ user }: EditUserProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const queryClient = useQueryClient()
|
||||
const showToast = useCustomToast()
|
||||
|
||||
const { showSuccessToast } = useCustomToast()
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
getValues,
|
||||
formState: { errors, isSubmitting, isDirty },
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<UserUpdateForm>({
|
||||
mode: "onBlur",
|
||||
criteriaMode: "all",
|
||||
@@ -56,11 +57,12 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
|
||||
mutationFn: (data: UserUpdateForm) =>
|
||||
UsersService.updateUser({ userId: user.id, requestBody: data }),
|
||||
onSuccess: () => {
|
||||
showToast("Success!", "User updated successfully.", "success")
|
||||
onClose()
|
||||
showSuccessToast("User updated successfully.")
|
||||
reset()
|
||||
setIsOpen(false)
|
||||
},
|
||||
onError: (err: ApiError) => {
|
||||
handleError(err, showToast)
|
||||
handleError(err)
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["users"] })
|
||||
@@ -74,106 +76,145 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
reset()
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
size={{ base: "sm", md: "md" }}
|
||||
isCentered
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<ModalHeader>Edit User</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb={6}>
|
||||
<FormControl isInvalid={!!errors.email}>
|
||||
<FormLabel htmlFor="email">Email</FormLabel>
|
||||
<Input
|
||||
id="email"
|
||||
{...register("email", {
|
||||
required: "Email is required",
|
||||
pattern: emailPattern,
|
||||
})}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
{errors.email && (
|
||||
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<FormLabel htmlFor="name">Full name</FormLabel>
|
||||
<Input id="name" {...register("full_name")} type="text" />
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.password}>
|
||||
<FormLabel htmlFor="password">Set Password</FormLabel>
|
||||
<Input
|
||||
id="password"
|
||||
{...register("password", {
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: "Password must be at least 8 characters",
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.password && (
|
||||
<FormErrorMessage>{errors.password.message}</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<FormControl mt={4} isInvalid={!!errors.confirm_password}>
|
||||
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
{...register("confirm_password", {
|
||||
validate: (value) =>
|
||||
value === getValues().password ||
|
||||
"The passwords do not match",
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
{errors.confirm_password && (
|
||||
<FormErrorMessage>
|
||||
{errors.confirm_password.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
<Flex>
|
||||
<FormControl mt={4}>
|
||||
<Checkbox {...register("is_superuser")} colorScheme="teal">
|
||||
Is superuser?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
<FormControl mt={4}>
|
||||
<Checkbox {...register("is_active")} colorScheme="teal">
|
||||
Is active?
|
||||
</Checkbox>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</ModalBody>
|
||||
<DialogRoot
|
||||
size={{ base: "xs", md: "md" }}
|
||||
placement="center"
|
||||
open={isOpen}
|
||||
onOpenChange={({ open }) => setIsOpen(open)}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<FaExchangeAlt fontSize="16px" />
|
||||
Edit User
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit User</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogBody>
|
||||
<Text mb={4}>Update the user details below.</Text>
|
||||
<VStack gap={4}>
|
||||
<Field
|
||||
required
|
||||
invalid={!!errors.email}
|
||||
errorText={errors.email?.message}
|
||||
label="Email"
|
||||
>
|
||||
<Input
|
||||
id="email"
|
||||
{...register("email", {
|
||||
required: "Email is required",
|
||||
pattern: emailPattern,
|
||||
})}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<ModalFooter gap={3}>
|
||||
<Button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
<Field
|
||||
invalid={!!errors.full_name}
|
||||
errorText={errors.full_name?.message}
|
||||
label="Full Name"
|
||||
>
|
||||
<Input
|
||||
id="name"
|
||||
{...register("full_name")}
|
||||
placeholder="Full name"
|
||||
type="text"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
required
|
||||
invalid={!!errors.password}
|
||||
errorText={errors.password?.message}
|
||||
label="Set Password"
|
||||
>
|
||||
<Input
|
||||
id="password"
|
||||
{...register("password", {
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: "Password must be at least 8 characters",
|
||||
},
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
required
|
||||
invalid={!!errors.confirm_password}
|
||||
errorText={errors.confirm_password?.message}
|
||||
label="Confirm Password"
|
||||
>
|
||||
<Input
|
||||
id="confirm_password"
|
||||
{...register("confirm_password", {
|
||||
validate: (value) =>
|
||||
value === getValues().password ||
|
||||
"The passwords do not match",
|
||||
})}
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
/>
|
||||
</Field>
|
||||
</VStack>
|
||||
|
||||
<Flex mt={4} direction="column" gap={4}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="is_superuser"
|
||||
render={({ field }) => (
|
||||
<Field disabled={field.disabled} colorPalette="teal">
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={({ checked }) => field.onChange(checked)}
|
||||
>
|
||||
Is superuser?
|
||||
</Checkbox>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="is_active"
|
||||
render={({ field }) => (
|
||||
<Field disabled={field.disabled} colorPalette="teal">
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={({ checked }) => field.onChange(checked)}
|
||||
>
|
||||
Is active?
|
||||
</Checkbox>
|
||||
</Field>
|
||||
)}
|
||||
/>
|
||||
</Flex>
|
||||
</DialogBody>
|
||||
|
||||
<DialogFooter gap={2}>
|
||||
<DialogActionTrigger asChild>
|
||||
<Button
|
||||
variant="subtle"
|
||||
colorPalette="gray"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogActionTrigger>
|
||||
<Button variant="solid" type="submit" loading={isSubmitting}>
|
||||
Save
|
||||
</Button>
|
||||
<Button onClick={onCancel}>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
</DialogFooter>
|
||||
<DialogCloseTrigger />
|
||||
</form>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user