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

🎨 Format with Biome (#1097)

Browse Source
This commit is contained in:
Alejandra
2024-03-17 17:28:45 +01:00
committed by GitHub
parent d4ee4db2f0
commit 94a2037f8a
31 changed files with 407 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/UserSettings/Appearance.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Badge,
Container,
@@ -7,7 +6,8 @@ import {
RadioGroup,
Stack,
useColorMode,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import type React from "react"
const Appearance: React.FC = () => {
const { colorMode, toggleColorMode } = useColorMode()

38
frontend/src/components/UserSettings/ChangePassword.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Box,
Button,
@@ -9,19 +8,20 @@ import {
Heading,
Input,
useColorModeValue,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation } from "react-query"
import { ApiError, UpdatePassword, UsersService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UpdatePassword, UsersService } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface UpdatePasswordForm extends UpdatePassword {
confirm_password: string
}
const ChangePassword: React.FC = () => {
const color = useColorModeValue('inherit', 'ui.white')
const color = useColorModeValue("inherit", "ui.white")
const showToast = useCustomToast()
const {
register,
@@ -30,8 +30,8 @@ const ChangePassword: React.FC = () => {
getValues,
formState: { errors, isSubmitting },
} = useForm<UpdatePasswordForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
})
const UpdatePassword = async (data: UpdatePassword) => {
@@ -40,12 +40,12 @@ const ChangePassword: React.FC = () => {
const mutation = useMutation(UpdatePassword, {
onSuccess: () => {
showToast('Success!', 'Password updated.', 'success')
showToast("Success!", "Password updated.", "success")
reset()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
})
@@ -59,14 +59,14 @@ const ChangePassword: React.FC = () => {
<Heading size="sm" py={4}>
Change Password
</Heading>
<Box w={{ sm: 'full', md: '50%' }}>
<Box w={{ sm: "full", md: "50%" }}>
<FormControl isRequired isInvalid={!!errors.current_password}>
<FormLabel color={color} htmlFor="current_password">
Current password
</FormLabel>
<Input
id="current_password"
{...register('current_password')}
{...register("current_password")}
placeholder="Password"
type="password"
/>
@@ -80,11 +80,11 @@ const ChangePassword: React.FC = () => {
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register('new_password', {
required: 'Password is required',
{...register("new_password", {
required: "Password is required",
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
message: "Password must be at least 8 characters",
},
})}
placeholder="Password"
@@ -98,11 +98,11 @@ const ChangePassword: React.FC = () => {
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register('confirm_password', {
required: 'Please confirm your password',
{...register("confirm_password", {
required: "Please confirm your password",
validate: (value) =>
value === getValues().new_password ||
'The passwords do not match',
"The passwords do not match",
})}
placeholder="Password"
type="password"

6
frontend/src/components/UserSettings/DeleteAccount.tsx
View File

@@ -1,13 +1,13 @@
import React from 'react'
import {
Button,
Container,
Heading,
Text,
useDisclosure,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import type React from "react"
import DeleteConfirmation from './DeleteConfirmation'
import DeleteConfirmation from "./DeleteConfirmation"
const DeleteAccount: React.FC = () => {
const confirmationModal = useDisclosure()

30
frontend/src/components/UserSettings/DeleteConfirmation.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
AlertDialog,
AlertDialogBody,
@@ -7,13 +6,14 @@ import {
AlertDialogHeader,
AlertDialogOverlay,
Button,
} from '@chakra-ui/react'
import { useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import React from "react"
import { useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ApiError, UserOut, UsersService } from '../../client'
import useAuth from '../../hooks/useAuth'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UserOut, UsersService } from "../../client"
import useAuth from "../../hooks/useAuth"
import useCustomToast from "../../hooks/useCustomToast"
interface DeleteProps {
isOpen: boolean
@@ -28,7 +28,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
handleSubmit,
formState: { isSubmitting },
} = useForm()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const { logout } = useAuth()
const deleteCurrentUser = async (id: number) => {
@@ -38,19 +38,19 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
const mutation = useMutation(deleteCurrentUser, {
onSuccess: () => {
showToast(
'Success',
'Your account has been successfully deleted.',
'success',
"Success",
"Your account has been successfully deleted.",
"success",
)
logout()
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('currentUser')
queryClient.invalidateQueries("currentUser")
},
})
@@ -64,7 +64,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
isOpen={isOpen}
onClose={onClose}
leastDestructiveRef={cancelRef}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<AlertDialogOverlay>
@@ -72,7 +72,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
<AlertDialogHeader>Confirmation Required</AlertDialogHeader>
<AlertDialogBody>
All your account data will be{' '}
All your account data will be{" "}
<strong>permanently deleted.</strong> If you are sure, please
click <strong>"Confirm"</strong> to proceed. This action cannot be
undone.

54
frontend/src/components/UserSettings/UserInformation.tsx
View File

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