🚚 Move new-frontend to frontend (#652)

2024-03-08 19:23:54 +01:00
parent 3b44537361
commit 9d703df254
97 changed files with 8 additions and 8 deletions
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from '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 { useMutation, useQueryClient } from 'react-query'
+
+import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client'
+import useAuth from '../../hooks/useAuth'
+import useCustomToast from '../../hooks/useCustomToast'
+
+const UserInformation: React.FC = () => {
+  const queryClient = useQueryClient()
+  const color = useColorModeValue('gray.700', 'white')
+  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 updateInfo = async (data: UserUpdateMe) => {
+    await UsersService.updateUserMe({ requestBody: data })
+  }
+
+  const mutation = useMutation(updateInfo, {
+    onSuccess: () => {
+      showToast('Success!', 'User updated successfully.', 'success')
+    },
+    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 = () => {
+    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}>
+                {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: {
+                    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}>
+                {currentUser!.email}
+              </Text>
+            )}
+            {errors.email && (
+              <FormErrorMessage>{errors.email.message}</FormErrorMessage>
+            )}
+          </FormControl>
+          <Flex mt={4} gap={3}>
+            <Button
+              bg="ui.main"
+              color="white"
+              _hover={{ opacity: 0.8 }}
+              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