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

✨ Use suspense for items page (#1167)

Browse Source
This commit is contained in:
Patrick Arminio
2024-04-15 22:03:39 +02:00
committed by GitHub
parent cc10bf6e31
commit c31a12c0fb
3 changed files with 99 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import {
Container,
Flex,
Heading,
Spinner,
Skeleton,
Table,
TableContainer,
Tbody,
@@ -11,82 +11,97 @@ import {
Thead,
Tr,
} from "@chakra-ui/react"
import { useQuery } from "@tanstack/react-query"
import { useSuspenseQuery } from "@tanstack/react-query"
import { createFileRoute } from "@tanstack/react-router"
import { Suspense } from "react"
import { ErrorBoundary } from "react-error-boundary"
import { 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")({
component: Items,
})
function Items() {
const showToast = useCustomToast()
const {
data: items,
isLoading,
isError,
error,
} = useQuery({
function ItemsTableBody() {
const { data: items } = useSuspenseQuery({
queryKey: ["items"],
queryFn: () => ItemsService.readItems({}),
})
if (isError) {
const errDetail = (error as any).body?.detail
showToast("Something went wrong.", `${errDetail}`, "error")
}
return (
<>
{isLoading ? (
// TODO: Add skeleton
<Flex justify="center" align="center" height="100vh" width="full">
<Spinner size="xl" color="ui.main" />
</Flex>
) : (
items && (
<Container maxW="full">
<Heading
size="lg"
textAlign={{ base: "center", md: "left" }}
pt={12}
>
Items Management
</Heading>
<Navbar type={"Item"} />
<TableContainer>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>ID</Th>
<Th>Title</Th>
<Th>Description</Th>
<Th>Actions</Th>
</Tr>
</Thead>
<Tbody>
{items.data.map((item) => (
<Tr key={item.id}>
<Td>{item.id}</Td>
<Td>{item.title}</Td>
<Td color={!item.description ? "ui.dim" : "inherit"}>
{item.description || "N/A"}
</Td>
<Td>
<ActionsMenu type={"Item"} value={item} />
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Container>
)
)}
</>
<Tbody>
{items.data.map((item) => (
<Tr key={item.id}>
<Td>{item.id}</Td>
<Td>{item.title}</Td>
<Td color={!item.description ? "ui.dim" : "inherit"}>
{item.description || "N/A"}
</Td>
<Td>
<ActionsMenu type={"Item"} value={item} />
</Td>
</Tr>
))}
</Tbody>
)
}
function ItemsTable() {
return (
<TableContainer>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>ID</Th>
<Th>Title</Th>
<Th>Description</Th>
<Th>Actions</Th>
</Tr>
</Thead>
<ErrorBoundary
fallbackRender={({ error }) => (
<Tbody>
<Tr>
<Td colSpan={4}>Something went wrong: {error.message}</Td>
</Tr>
</Tbody>
)}
>
<Suspense
fallback={
<Tbody>
{new Array(5).fill(null).map((_, index) => (
<Tr key={index}>
{new Array(4).fill(null).map((_, index) => (
<Td key={index}>
<Flex>
<Skeleton height="20px" width="20px" />
</Flex>
</Td>
))}
</Tr>
))}
</Tbody>
}
>
<ItemsTableBody />
</Suspense>
</ErrorBoundary>
</Table>
</TableContainer>
)
}
function Items() {
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
Items Management
</Heading>
<Navbar type={"Item"} />
<ItemsTable />
</Container>
)
}