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

10
frontend/src/routes/__root.tsx
View File

@@ -1,13 +1,13 @@
import React, { Suspense } from 'react'
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { Outlet, createRootRoute } from "@tanstack/react-router"
import React, { Suspense } from "react"
import NotFound from '../components/Common/NotFound'
import NotFound from "../components/Common/NotFound"
const TanStackRouterDevtools =
process.env.NODE_ENV === 'production'
process.env.NODE_ENV === "production"
? () => null
: React.lazy(() =>
import('@tanstack/router-devtools').then((res) => ({
import("@tanstack/router-devtools").then((res) => ({
default: res.TanStackRouterDevtools,
})),
)

14
frontend/src/routes/_layout.tsx
View File

@@ -1,16 +1,16 @@
import { Flex, Spinner } from '@chakra-ui/react'
import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
import { Flex, Spinner } from "@chakra-ui/react"
import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
import Sidebar from '../components/Common/Sidebar'
import UserMenu from '../components/Common/UserMenu'
import useAuth, { isLoggedIn } from '../hooks/useAuth'
import Sidebar from "../components/Common/Sidebar"
import UserMenu from "../components/Common/UserMenu"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
export const Route = createFileRoute('/_layout')({
export const Route = createFileRoute("/_layout")({
component: Layout,
beforeLoad: async () => {
if (!isLoggedIn()) {
throw redirect({
to: '/login',
to: "/login",
})
}
},

38
frontend/src/routes/_layout/admin.tsx
View File

@@ -12,33 +12,33 @@ import {
Th,
Thead,
Tr,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQuery, useQueryClient } from "react-query"
import { ApiError, UserOut, UsersService } from '../../client'
import ActionsMenu from '../../components/Common/ActionsMenu'
import Navbar from '../../components/Common/Navbar'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UserOut, UsersService } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import useCustomToast from "../../hooks/useCustomToast"
export const Route = createFileRoute('/_layout/admin')({
export const Route = createFileRoute("/_layout/admin")({
component: Admin,
})
function Admin() {
const queryClient = useQueryClient()
const showToast = useCustomToast()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const {
data: users,
isLoading,
isError,
error,
} = useQuery('users', () => UsersService.readUsers({}))
} = useQuery("users", () => UsersService.readUsers({}))
if (isError) {
const errDetail = (error as ApiError).body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
}
return (
@@ -53,14 +53,14 @@ function Admin() {
<Container maxW="full">
<Heading
size="lg"
textAlign={{ base: 'center', md: 'left' }}
textAlign={{ base: "center", md: "left" }}
pt={12}
>
User Management
</Heading>
<Navbar type={'User'} />
<Navbar type={"User"} />
<TableContainer>
<Table fontSize="md" size={{ base: 'sm', md: 'md' }}>
<Table fontSize="md" size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>Full name</Th>
@@ -73,8 +73,8 @@ function Admin() {
<Tbody>
{users.data.map((user) => (
<Tr key={user.id}>
<Td color={!user.full_name ? 'gray.400' : 'inherit'}>
{user.full_name || 'N/A'}
<Td color={!user.full_name ? "gray.400" : "inherit"}>
{user.full_name || "N/A"}
{currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal">
You
@@ -82,17 +82,17 @@ function Admin() {
)}
</Td>
<Td>{user.email}</Td>
<Td>{user.is_superuser ? 'Superuser' : 'User'}</Td>
<Td>{user.is_superuser ? "Superuser" : "User"}</Td>
<Td>
<Flex gap={2}>
<Box
w="2"
h="2"
borderRadius="50%"
bg={user.is_active ? 'ui.success' : 'ui.danger'}
bg={user.is_active ? "ui.success" : "ui.danger"}
alignSelf="center"
/>
{user.is_active ? 'Active' : 'Inactive'}
{user.is_active ? "Active" : "Inactive"}
</Flex>
</Td>
<Td>

12
frontend/src/routes/_layout/index.tsx
View File

@@ -1,17 +1,17 @@
import { Box, Container, Text } from '@chakra-ui/react'
import { useQueryClient } from 'react-query'
import { createFileRoute } from '@tanstack/react-router'
import { Box, Container, Text } from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQueryClient } from "react-query"
import { UserOut } from '../../client'
import type { UserOut } from "../../client"
export const Route = createFileRoute('/_layout/')({
export const Route = createFileRoute("/_layout/")({
component: Dashboard,
})
function Dashboard() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
return (
<>

32
frontend/src/routes/_layout/items.tsx
View File

@@ -10,16 +10,16 @@ import {
Th,
Thead,
Tr,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQuery } from "react-query"
import { ApiError, ItemsService } from '../../client'
import ActionsMenu from '../../components/Common/ActionsMenu'
import Navbar from '../../components/Common/Navbar'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, ItemsService } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import useCustomToast from "../../hooks/useCustomToast"
export const Route = createFileRoute('/_layout/items')({
export const Route = createFileRoute("/_layout/items")({
component: Items,
})
@@ -30,11 +30,11 @@ function Items() {
isLoading,
isError,
error,
} = useQuery('items', () => ItemsService.readItems({}))
} = useQuery("items", () => ItemsService.readItems({}))
if (isError) {
const errDetail = (error as ApiError).body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
}
return (
@@ -49,14 +49,14 @@ function Items() {
<Container maxW="full">
<Heading
size="lg"
textAlign={{ base: 'center', md: 'left' }}
textAlign={{ base: "center", md: "left" }}
pt={12}
>
Items Management
</Heading>
<Navbar type={'Item'} />
<Navbar type={"Item"} />
<TableContainer>
<Table size={{ base: 'sm', md: 'md' }}>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>ID</Th>
@@ -70,11 +70,11 @@ function Items() {
<Tr key={item.id}>
<Td>{item.id}</Td>
<Td>{item.title}</Td>
<Td color={!item.description ? 'gray.400' : 'inherit'}>
{item.description || 'N/A'}
<Td color={!item.description ? "gray.400" : "inherit"}>
{item.description || "N/A"}
</Td>
<Td>
<ActionsMenu type={'Item'} value={item} />
<ActionsMenu type={"Item"} value={item} />
</Td>
</Tr>
))}

30
frontend/src/routes/_layout/settings.tsx
View File

@@ -6,37 +6,37 @@ import {
TabPanel,
TabPanels,
Tabs,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQueryClient } from "react-query"
import { UserOut } from '../../client'
import Appearance from '../../components/UserSettings/Appearance'
import ChangePassword from '../../components/UserSettings/ChangePassword'
import DeleteAccount from '../../components/UserSettings/DeleteAccount'
import UserInformation from '../../components/UserSettings/UserInformation'
import type { UserOut } from "../../client"
import Appearance from "../../components/UserSettings/Appearance"
import ChangePassword from "../../components/UserSettings/ChangePassword"
import DeleteAccount from "../../components/UserSettings/DeleteAccount"
import UserInformation from "../../components/UserSettings/UserInformation"
const tabsConfig = [
{ title: 'My profile', component: UserInformation },
{ title: 'Password', component: ChangePassword },
{ title: 'Appearance', component: Appearance },
{ title: 'Danger zone', component: DeleteAccount },
{ title: "My profile", component: UserInformation },
{ title: "Password", component: ChangePassword },
{ title: "Appearance", component: Appearance },
{ title: "Danger zone", component: DeleteAccount },
]
export const Route = createFileRoute('/_layout/settings')({
export const Route = createFileRoute("/_layout/settings")({
component: UserSettings,
})
function UserSettings() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const finalTabs = currentUser?.is_superuser
? tabsConfig.slice(0, 3)
: tabsConfig
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: 'center', md: 'left' }} py={12}>
<Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
User Settings
</Heading>
<Tabs variant="enclosed">

42
frontend/src/routes/login.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"
import {
Button,
Center,
@@ -13,25 +12,26 @@ import {
InputRightElement,
Link,
useBoolean,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import {
Link as RouterLink,
createFileRoute,
redirect,
} from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
} from "@tanstack/react-router"
import React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import Logo from '../assets/images/fastapi-logo.svg'
import { ApiError } from '../client'
import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token'
import useAuth, { isLoggedIn } from '../hooks/useAuth'
import Logo from "../assets/images/fastapi-logo.svg"
import type { ApiError } from "../client"
import type { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
export const Route = createFileRoute('/login')({
export const Route = createFileRoute("/login")({
component: Login,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -46,11 +46,11 @@ function Login() {
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<AccessToken>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
username: '',
password: '',
username: "",
password: "",
},
})
@@ -86,10 +86,10 @@ function Login() {
<FormControl id="username" isInvalid={!!errors.username || !!error}>
<Input
id="username"
{...register('username', {
{...register("username", {
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
placeholder="Email"
@@ -102,19 +102,19 @@ function Login() {
<FormControl id="password" isInvalid={!!error}>
<InputGroup>
<Input
{...register('password')}
type={show ? 'text' : 'password'}
{...register("password")}
type={show ? "text" : "password"}
placeholder="Password"
/>
<InputRightElement
color="gray.400"
_hover={{
cursor: 'pointer',
cursor: "pointer",
}}
>
<Icon
onClick={setShow.toggle}
aria-label={show ? 'Hide password' : 'Show password'}
aria-label={show ? "Hide password" : "Show password"}
>
{show ? <ViewOffIcon /> : <ViewIcon />}
</Icon>

28
frontend/src/routes/recover-password.tsx
View File

@@ -6,24 +6,24 @@ import {
Heading,
Input,
Text,
} from '@chakra-ui/react'
import { createFileRoute, redirect } from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
} from "@chakra-ui/react"
import { createFileRoute, redirect } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { LoginService } from '../client'
import useCustomToast from '../hooks/useCustomToast'
import { isLoggedIn } from '../hooks/useAuth'
import { LoginService } from "../client"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
interface FormData {
email: string
}
export const Route = createFileRoute('/recover-password')({
export const Route = createFileRoute("/recover-password")({
component: RecoverPassword,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -42,9 +42,9 @@ function RecoverPassword() {
email: data.email,
})
showToast(
'Email sent.',
'We sent an email with a link to get back into your account.',
'success',
"Email sent.",
"We sent an email with a link to get back into your account.",
"success",
)
}
@@ -68,11 +68,11 @@ function RecoverPassword() {
<FormControl isInvalid={!!errors.email}>
<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",
},
})}
placeholder="Email"

44
frontend/src/routes/reset-password.tsx
View File

@@ -7,25 +7,25 @@ import {
Heading,
Input,
Text,
} from '@chakra-ui/react'
import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation } from "react-query"
import { ApiError, LoginService, NewPassword } from '../client'
import { isLoggedIn } from '../hooks/useAuth'
import useCustomToast from '../hooks/useCustomToast'
import { type ApiError, LoginService, type NewPassword } from "../client"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
interface NewPasswordForm extends NewPassword {
confirm_password: string
}
export const Route = createFileRoute('/reset-password')({
export const Route = createFileRoute("/reset-password")({
component: ResetPassword,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -39,17 +39,17 @@ function ResetPassword() {
reset,
formState: { errors },
} = useForm<NewPasswordForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
new_password: '',
new_password: "",
},
})
const showToast = useCustomToast()
const navigate = useNavigate()
const resetPassword = async (data: NewPassword) => {
const token = new URLSearchParams(window.location.search).get('token')
const token = new URLSearchParams(window.location.search).get("token")
if (!token) return
await LoginService.resetPassword({
requestBody: { new_password: data.new_password, token: token },
@@ -58,13 +58,13 @@ function ResetPassword() {
const mutation = useMutation(resetPassword, {
onSuccess: () => {
showToast('Success!', 'Password updated.', 'success')
showToast("Success!", "Password updated.", "success")
reset()
navigate({ to: '/login' })
navigate({ to: "/login" })
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
})
@@ -93,11 +93,11 @@ function ResetPassword() {
<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"
@@ -111,11 +111,11 @@ function ResetPassword() {
<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"