feat: add refresh button on SubmissionTable

src/components/SubmissionTable.tsx

@@ -93,7 +93,11 @@ export default function SubmissionTable(props: SubmissionTableProps) {
         pageIndex: 0,
         pageSize: 10,
     });
-    const { data: info, isFetching } = useListQuery({
+    const {
+        data: info,
+        isFetching,
+        refetch,
+    } = useListQuery({
         pid: props.pid || 0,
         uid: props.uid || 0,
         offset: paging.pageIndex * paging.pageSize,
@@ -110,6 +114,7 @@ export default function SubmissionTable(props: SubmissionTableProps) {
                 paging={paging}
                 setPaging={setPaging}
                 isLoading={isFetching}
+                refetch={refetch}
             />
         </>
     );

src/components/Table.tsx

@@ -18,7 +18,13 @@ import {
 } from "@chakra-ui/react";
 import type { ColumnDef, PaginationState } from "@tanstack/react-table";
 import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable } from "@tanstack/react-table";
-import { HiChevronDoubleLeft, HiChevronDoubleRight, HiChevronLeft, HiChevronRight } from "react-icons/hi";
+import {
+    HiChevronDoubleLeft,
+    HiChevronDoubleRight,
+    HiChevronLeft,
+    HiChevronRight,
+    HiOutlineRefresh,
+} from "react-icons/hi";
 
 interface TableProps<T> {
     header?: React.ReactNode;
@@ -28,6 +34,7 @@ interface TableProps<T> {
     paging: PaginationState;
     setPaging: (state: PaginationState | ((old: PaginationState) => PaginationState)) => void;
     isLoading: boolean;
+    refetch?: () => unknown;
 }
 
 export default function Table<T>(props: TableProps<T>) {
@@ -117,13 +124,28 @@ export default function Table<T>(props: TableProps<T>) {
                             <Text mr={4}>
                                 Page {pageIndex + 1} of {pageCount}
                             </Text>
-                            <Select w={28} value={pageSize} onChange={(e) => table.setPageSize(Number(e.target.value))}>
+                            <Select
+                                w={28}
+                                mr={4}
+                                value={pageSize}
+                                onChange={(e) => table.setPageSize(Number(e.target.value))}
+                            >
                                 {[5, 10, 15, 20].map((pageSize) => (
                                     <option key={pageSize} value={pageSize}>
                                         Show {pageSize}
                                     </option>
                                 ))}
                             </Select>
+                            {props.refetch && (
+                                <IconButton
+                                    aria-label="Refresh"
+                                    size="sm"
+                                    isRound={true}
+                                    variant="outline"
+                                    icon={<HiOutlineRefresh size={18} />}
+                                    onClick={props.refetch}
+                                />
+                            )}
                         </Flex>
                         <Flex flexDirection="row">
                             <IconButton