From 15acd1c64e917910e68b32c800f23ff516655d43 Mon Sep 17 00:00:00 2001
From: notmd <tinhmeo10@gmail.com>
Date: Sat, 21 Jan 2023 23:56:21 +0700
Subject: [PATCH] handle error

---
 website/src/components/DataTable.tsx | 94 +++++++++++++++-------------
 website/src/components/UserTable.tsx | 34 +++++-----
 2 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/website/src/components/DataTable.tsx b/website/src/components/DataTable.tsx
index 1784650a..f9ef4e49 100644
--- a/website/src/components/DataTable.tsx
+++ b/website/src/components/DataTable.tsx
@@ -1,6 +1,8 @@
 import {
   Box,
   Button,
+  Card,
+  CardBody,
   Flex,
   FormControl,
   FormLabel,
@@ -77,51 +79,53 @@ export const DataTable = <T,>({
     onFilterChange(newValues);
   };
   return (
-    <>
-      <Flex mb="2">
-        <Button onClick={onPreviousClick} disabled={disablePrevious}>
-          Previous
-        </Button>
-        <Spacer />
-        <Button onClick={onNextClick} disabled={disableNext}>
-          Next
-        </Button>
-      </Flex>
-      <TableContainer>
-        <Table variant="simple">
-          <TableCaption>{caption}</TableCaption>
-          <Thead>
-            {getHeaderGroups().map((headerGroup) => (
-              <Tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <Th key={header.id}>
-                    <Box display="flex" alignItems="center">
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                      {(header.column.columnDef as DataTableColumnDef<T>).filterable && (
-                        <FilterModal
-                          value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
-                          onChange={(value) => handleFilterChange({ id: header.id, value })}
-                          label={flexRender(header.column.columnDef.header, header.getContext())}
-                        ></FilterModal>
-                      )}
-                    </Box>
-                  </Th>
-                ))}
-              </Tr>
-            ))}
-          </Thead>
-          <Tbody>
-            {getRowModel().rows.map((row) => (
-              <Tr key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
-                ))}
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      </TableContainer>
-    </>
+    <Card>
+      <CardBody>
+        <Flex mb="2">
+          <Button onClick={onPreviousClick} disabled={disablePrevious}>
+            Previous
+          </Button>
+          <Spacer />
+          <Button onClick={onNextClick} disabled={disableNext}>
+            Next
+          </Button>
+        </Flex>
+        <TableContainer>
+          <Table variant="simple">
+            <TableCaption>{caption}</TableCaption>
+            <Thead>
+              {getHeaderGroups().map((headerGroup) => (
+                <Tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <Th key={header.id}>
+                      <Box display="flex" alignItems="center">
+                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        {(header.column.columnDef as DataTableColumnDef<T>).filterable && (
+                          <FilterModal
+                            value={filterValues.find((value) => value.id === header.id)?.value ?? ""}
+                            onChange={(value) => handleFilterChange({ id: header.id, value })}
+                            label={flexRender(header.column.columnDef.header, header.getContext())}
+                          ></FilterModal>
+                        )}
+                      </Box>
+                    </Th>
+                  ))}
+                </Tr>
+              ))}
+            </Thead>
+            <Tbody>
+              {getRowModel().rows.map((row) => (
+                <Tr key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
+                  ))}
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </CardBody>
+    </Card>
   );
 };
 
diff --git a/website/src/components/UserTable.tsx b/website/src/components/UserTable.tsx
index 1f4ccfca..df412bbc 100644
--- a/website/src/components/UserTable.tsx
+++ b/website/src/components/UserTable.tsx
@@ -1,4 +1,4 @@
-import { Card, CardBody, IconButton } from "@chakra-ui/react";
+import { IconButton } from "@chakra-ui/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import Link from "next/link";
 import { memo, useState } from "react";
@@ -90,23 +90,19 @@ export const UserTable = memo(function UserTable() {
   };
 
   return (
-    <Card>
-      <CardBody>
-        {data && (
-          <DataTable
-            data={data.items}
-            columns={columns}
-            caption="Users"
-            onNextClick={toNextPage}
-            onPreviousClick={toPreviousPage}
-            disableNext={!data.next}
-            disablePrevious={!data.prev}
-            filterValues={filterValues}
-            onFilterChange={handleFilterValuesChange}
-          ></DataTable>
-        )}
-        {error && "Unable to load users."}
-      </CardBody>
-    </Card>
+    <>
+      <DataTable
+        data={data?.items || []}
+        columns={columns}
+        caption="Users"
+        onNextClick={toNextPage}
+        onPreviousClick={toPreviousPage}
+        disableNext={!data?.next}
+        disablePrevious={!data?.prev}
+        filterValues={filterValues}
+        onFilterChange={handleFilterValuesChange}
+      ></DataTable>
+      {error && "Unable to load users."}
+    </>
   );
 });