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

new-frontend/src/components/UserSettings/ChangePassword.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Container, FormControl, FormErrorMessage, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { ApiError, UpdatePassword } from '../../client';
+import { useMutation } from 'react-query';
+
+import { ApiError, UpdatePassword, UsersService } from '../../client';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../../store/user-store';
 
 interface UpdatePasswordForm extends UpdatePassword {
     confirm_password: string;
@@ -13,19 +14,28 @@ interface UpdatePasswordForm extends UpdatePassword {
 const ChangePassword: React.FC = () => {
     const color = useColorModeValue('gray.700', 'white');
     const showToast = useCustomToast();
-    const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<UpdatePasswordForm>();
-    const { editPassword } = useUserStore();
+    const { register, handleSubmit, reset, getValues, formState: { errors, isSubmitting } } = useForm<UpdatePasswordForm>({
+        mode: 'onBlur',
+        criteriaMode: 'all'
+    });
 
-    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
-        try {
-            await editPassword(data);
+    const UpdatePassword = async (data: UpdatePassword) => {
+        await UsersService.updatePasswordMe({ requestBody: data })
+    }
+
+    const mutation = useMutation(UpdatePassword, {
+        onSuccess: () => {
             showToast('Success!', 'Password updated.', 'success');
             reset();
-        } catch (err) {
-            const errDetail = (err as ApiError).body.detail;
+        },
+        onError: (err: ApiError) => {
+            const errDetail = err.body.detail;
             showToast('Something went wrong.', `${errDetail}`, 'error');
         }
+    })
 
+    const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
+        mutation.mutate(data);
     }
 
     return (
@@ -35,17 +45,23 @@ const ChangePassword: React.FC = () => {
                     Change Password
                 </Heading>
                 <Box w={{ 'sm': 'full', 'md': '50%' }}>
-                    <FormControl>
-                        <FormLabel color={color} htmlFor='currentPassword'>Current password</FormLabel>
-                        <Input id='currentPassword' {...register('current_password')} placeholder='••••••••' type='password' />
+                    <FormControl isRequired isInvalid={!!errors.current_password}>
+                        <FormLabel color={color} htmlFor='current_password'>Current password</FormLabel>
+                        <Input id='current_password' {...register('current_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                        {errors.current_password && <FormErrorMessage>{errors.current_password.message}</FormErrorMessage>}
                     </FormControl>
-                    <FormControl mt={4}>
-                        <FormLabel color={color} htmlFor='newPassword'>New password</FormLabel>
-                        <Input id='newPassword' {...register('new_password')} placeholder='••••••••' type='password' />
+                    <FormControl mt={4} isRequired isInvalid={!!errors.new_password}>
+                        <FormLabel htmlFor='password'>Set Password</FormLabel>
+                        <Input id='password' {...register('new_password', { required: 'Password is required', minLength: { value: 8, message: 'Password must be at least 8 characters' } })} placeholder='Password' type='password' />
+                        {errors.new_password && <FormErrorMessage>{errors.new_password.message}</FormErrorMessage>}
                     </FormControl>
-                    <FormControl mt={4}>
-                        <FormLabel color={color} htmlFor='confirmPassword'>Confirm new password</FormLabel>
-                        <Input id='confirmPassword' {...register('confirm_password')} placeholder='••••••••' type='password' />
+                    <FormControl mt={4} isRequired isInvalid={!!errors.confirm_password}>
+                        <FormLabel htmlFor='confirm_password'>Confirm Password</FormLabel>
+                        <Input id='confirm_password' {...register('confirm_password', {
+                            required: 'Please confirm your password',
+                            validate: value => value === getValues().new_password || 'The passwords do not match'
+                        })} placeholder='Password' type='password' />
+                        {errors.confirm_password && <FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>}
                     </FormControl>
                     <Button bg='ui.main' color='white' _hover={{ opacity: 0.8 }} mt={4} type='submit' isLoading={isSubmitting}>
                         Save

new-frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
-import { ApiError } from '../../client';
+import { useMutation, useQueryClient } from 'react-query';
+
+import { ApiError, UserOut, UsersService } from '../../client';
 import useAuth from '../../hooks/useAuth';
 import useCustomToast from '../../hooks/useCustomToast';
-import { useUserStore } from '../../store/user-store';
 
 interface DeleteProps {
     isOpen: boolean;
@@ -13,22 +14,35 @@ interface DeleteProps {
 }
 
 const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
+    const queryClient = useQueryClient();
     const showToast = useCustomToast();
     const cancelRef = React.useRef<HTMLButtonElement | null>(null);
     const { handleSubmit, formState: { isSubmitting } } = useForm();
-    const { user, deleteUser } = useUserStore();
+    const currentUser = queryClient.getQueryData<UserOut>('currentUser');
     const { logout } = useAuth();
 
-    const onSubmit = async () => {
-        try {
-            await deleteUser(user!.id);
+    const deleteCurrentUser = async (id: number) => {
+        await UsersService.deleteUser({ userId: id });
+    }
+
+    const mutation = useMutation(deleteCurrentUser, {
+        onSuccess: () => {
+            showToast('Success', 'Your account has been successfully deleted.', 'success');
             logout();
             onClose();
-            showToast('Success', 'Your account has been successfully deleted.', '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('currentUser');
         }
+    })
+
+
+    const onSubmit = async () => {
+        mutation.mutate(currentUser!.id);
     }
 
     return (

new-frontend/src/components/UserSettings/UserInformation.tsx

@@ -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>