🎨 Format with Biome (#1097)

frontend/src/components/UserSettings/UserInformation.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react'
 import {
   Box,
   Button,
@@ -11,17 +10,24 @@ import {
   Input,
   Text,
   useColorModeValue,
-} from '@chakra-ui/react'
-import { SubmitHandler, useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
+} from "@chakra-ui/react"
+import type React from "react"
+import { useState } from "react"
+import { type 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'
+import {
+  type ApiError,
+  type UserOut,
+  type UserUpdateMe,
+  UsersService,
+} from "../../client"
+import useAuth from "../../hooks/useAuth"
+import useCustomToast from "../../hooks/useCustomToast"
 
 const UserInformation: React.FC = () => {
   const queryClient = useQueryClient()
-  const color = useColorModeValue('inherit', 'ui.white')
+  const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
@@ -32,8 +38,8 @@ const UserInformation: React.FC = () => {
     getValues,
     formState: { isSubmitting, errors, isDirty },
   } = useForm<UserOut>({
-    mode: 'onBlur',
-    criteriaMode: 'all',
+    mode: "onBlur",
+    criteriaMode: "all",
     defaultValues: {
       full_name: currentUser?.full_name,
       email: currentUser?.email,
@@ -50,15 +56,15 @@ const UserInformation: React.FC = () => {
 
   const mutation = useMutation(updateInfo, {
     onSuccess: () => {
-      showToast('Success!', 'User updated successfully.', 'success')
+      showToast("Success!", "User updated successfully.", "success")
     },
     onError: (err: ApiError) => {
       const errDetail = err.body?.detail
-      showToast('Something went wrong.', `${errDetail}`, 'error')
+      showToast("Something went wrong.", `${errDetail}`, "error")
     },
     onSettled: () => {
-      queryClient.invalidateQueries('users')
-      queryClient.invalidateQueries('currentUser')
+      queryClient.invalidateQueries("users")
+      queryClient.invalidateQueries("currentUser")
     },
   })
 
@@ -77,7 +83,7 @@ const UserInformation: React.FC = () => {
         <Heading size="sm" py={4}>
           User Information
         </Heading>
-        <Box w={{ sm: 'full', md: '50%' }}>
+        <Box w={{ sm: "full", md: "50%" }}>
           <FormControl>
             <FormLabel color={color} htmlFor="name">
               Full name
@@ -85,7 +91,7 @@ const UserInformation: React.FC = () => {
             {editMode ? (
               <Input
                 id="name"
-                {...register('full_name', { maxLength: 30 })}
+                {...register("full_name", { maxLength: 30 })}
                 type="text"
                 size="md"
               />
@@ -93,9 +99,9 @@ const UserInformation: React.FC = () => {
               <Text
                 size="md"
                 py={2}
-                color={!currentUser?.full_name ? 'gray.400' : 'inherit'}
+                color={!currentUser?.full_name ? "gray.400" : "inherit"}
               >
-                {currentUser?.full_name || 'N/A'}
+                {currentUser?.full_name || "N/A"}
               </Text>
             )}
           </FormControl>
@@ -106,11 +112,11 @@ const UserInformation: React.FC = () => {
             {editMode ? (
               <Input
                 id="email"
-                {...register('email', {
-                  required: 'Email is required',
+                {...register("email", {
+                  required: "Email is required",
                   pattern: {
                     value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
-                    message: 'Invalid email address',
+                    message: "Invalid email address",
                   },
                 })}
                 type="email"
@@ -129,11 +135,11 @@ const UserInformation: React.FC = () => {
             <Button
               variant="primary"
               onClick={toggleEditMode}
-              type={editMode ? 'button' : 'submit'}
+              type={editMode ? "button" : "submit"}
               isLoading={editMode ? isSubmitting : false}
-              isDisabled={editMode ? !isDirty || !getValues('email') : false}
+              isDisabled={editMode ? !isDirty || !getValues("email") : false}
             >
-              {editMode ? 'Save' : 'Edit'}
+              {editMode ? "Save" : "Edit"}
             </Button>
             {editMode && (
               <Button onClick={onCancel} isDisabled={isSubmitting}>