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

20
frontend/package-lock.json generated
View File

@@ -20,6 +20,7 @@
"framer-motion": "10.16.16",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.13",
"react-hook-form": "7.49.3",
"react-icons": "5.0.1"
},
@@ -3409,6 +3410,17 @@
"react": "^18.2.0"
}
},
"node_modules/react-error-boundary": {
"version": "4.0.13",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
"integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
"dependencies": {
"@babel/runtime": "^7.12.5"
},
"peerDependencies": {
"react": ">=16.13.1"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -6108,6 +6120,14 @@
"scheduler": "^0.23.0"
}
},
"react-error-boundary": {
"version": "4.0.13",
"resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
"integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
"requires": {
"@babel/runtime": "^7.12.5"
}
},
"react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",

1
frontend/package.json
View File

@@ -23,6 +23,7 @@
"framer-motion": "10.16.16",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.13",
"react-hook-form": "7.49.3",
"react-icons": "5.0.1"
},

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