nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 14 Packages Projects Releases Wiki Activity

✨ Migrate to TanStack Query (React Query) and TanStack Router (#637)

Browse Source
This commit is contained in:
Alejandra
2024-03-07 19:16:23 +01:00
committed by GitHub
parent 7c2b617c09
commit 11c09b50b2
40 changed files with 4967 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
new-frontend/src/components/UserSettings/UserInformation.tsx
View File

@@ -1,34 +1,50 @@
import React, { useState } from 'react';
import { Box, Button, Container, Flex, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
import { Box, Button, Container, Flex, FormControl, FormErrorMessage, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { ApiError, UserOut, UserUpdateMe } from '../../client';
import { useMutation, useQueryClient } from 'react-query';
import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client';
import useAuth from '../../hooks/useAuth';
import useCustomToast from '../../hooks/useCustomToast';
import { useUserStore } from '../../store/user-store';
import { useUsersStore } from '../../store/users-store';
const UserInformation: React.FC = () => {
const queryClient = useQueryClient();
const color = useColorModeValue('gray.700', 'white');
const showToast = useCustomToast();
const [editMode, setEditMode] = useState(false);
const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UserOut>();
const { user, editUser } = useUserStore();
const { getUsers } = useUsersStore();
const { user: currentUser } = useAuth();
const { register, handleSubmit, reset, formState: { isSubmitting, errors, isDirty } } = useForm<UserOut>({
mode: 'onBlur', criteriaMode: 'all', defaultValues: {
full_name: currentUser?.full_name,
email: currentUser?.email
}
})
const toggleEditMode = () => {
setEditMode(!editMode);
};
const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
try {
await editUser(data);
await getUsers()
const updateInfo = async (data: UserUpdateMe) => {
await UsersService.updateUserMe({ requestBody: data })
}
const mutation = useMutation(updateInfo, {
onSuccess: () => {
showToast('Success!', 'User updated successfully.', 'success');
} catch (err) {
const errDetail = (err as ApiError).body.detail;
},
onError: (err: ApiError) => {
const errDetail = err.body.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 = () => {
@@ -47,21 +63,22 @@ const UserInformation: React.FC = () => {
<FormLabel color={color} htmlFor='name'>Full name</FormLabel>
{
editMode ?
<Input id='name' {...register('full_name')} defaultValue={user?.full_name} type='text' size='md' /> :
<Input id='name' {...register('full_name', { maxLength: 30 })} type='text' size='md' /> :
<Text size='md' py={2}>
{user?.full_name || 'N/A'}
{currentUser?.full_name || 'N/A'}
</Text>
}
</FormControl>
<FormControl mt={4}>
<FormControl mt={4} isInvalid={!!errors.email}>
<FormLabel color={color} htmlFor='email'>Email</FormLabel>
{
editMode ?
<Input id='email' {...register('email')} defaultValue={user?.email} type='text' size='md' /> :
<Input id='email' {...register('email', { required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: 'Invalid email address' } })} type='text' size='md' /> :
<Text size='md' py={2}>
{user?.email || 'N/A'}
{currentUser!.email}
</Text>
}
{errors.email && <FormErrorMessage>{errors.email.message}</FormErrorMessage>}
</FormControl>
<Flex mt={4} gap={3}>
<Button
@@ -71,6 +88,7 @@ const UserInformation: React.FC = () => {
onClick={toggleEditMode}
type={editMode ? 'button' : 'submit'}
isLoading={editMode ? isSubmitting : false}
isDisabled={editMode ? !isDirty : false}
>
{editMode ? 'Save' : 'Edit'}
</Button>