fix: Portal frontend 25 (#52)

* use query manager

* refactor

src/components/SyncError.tsx

@@ -0,0 +1,14 @@
+import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+export interface SyncErrorProps {}
+
+const SyncError: FC<SyncErrorProps> = () => (
+  <Stack alignItems="center" alignContent="center">
+    <SyncProblemIcon color="error" />
+    <Typography color="error.main">Failed to sync data</Typography>
+  </Stack>
+)
+
+export default SyncError

src/components/TablePagination.tsx

@@ -1,12 +1,10 @@
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 import {
   CircularProgress,
   TablePagination as MuiTablePagination,
   type TablePaginationProps as MuiTablePaginationProps,
   Stack,
   type StackProps,
   type TablePaginationBaseProps,
-  Typography,
 } from "@mui/material"
 import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
 import {
@@ -18,6 +16,7 @@ import {
 
 import { type Pagination, usePagination } from "../hooks/api"
 import type { ListArg, ListResult } from "../utils/api"
+import SyncError from "./SyncError"
 
 export type TablePaginationProps<
   QueryArg extends ListArg,
@@ -95,10 +94,7 @@ const TablePagination = <
       {isLoading ? (
         <CircularProgress />
       ) : error || !data ? (
-        <>
-          <SyncProblemIcon color="error" />
-          <Typography color="error.main">Failed to load data</Typography>
-        </>
+        <SyncError />
       ) : (
         children(data, { limit, page, offset, count, maxLimit: max_limit })
       )}

src/components/form/ApiAutocompleteField.tsx

@@ -1,11 +1,4 @@
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
-import {
-  Button,
-  CircularProgress,
-  Stack,
-  Typography,
-  type ChipTypeMap,
-} from "@mui/material"
+import { Button, CircularProgress, type ChipTypeMap } from "@mui/material"
 import type { TypedUseLazyQuery } from "@reduxjs/toolkit/query/react"
 import {
   Children,
@@ -21,6 +14,7 @@ import {
 } from "../../components/form"
 import { usePagination } from "../../hooks/api"
 import type { ListArg, ListResult, TagId } from "../../utils/api"
+import SyncError from "../SyncError"
 
 export interface ApiAutocompleteFieldProps<
   SearchKey extends keyof Omit<QueryArg, "limit" | "offset">,
@@ -135,14 +129,7 @@ const ApiAutocompleteField = <
         const listItems = Children.toArray(children)
         if (isLoading) listItems.push(<CircularProgress key="is-loading" />)
         else {
-          if (isError) {
-            listItems.push(
-              <Stack direction="row" key="is-error">
-                <SyncProblemIcon color="error" />
-                <Typography color="error.main">Failed to load data</Typography>
-              </Stack>,
-            )
-          }
+          if (isError) listItems.push(<SyncError key="is-error" />)
           if (hasMore) {
             listItems.push(
               <Button key="load-more" onClick={loadNextPage}>

src/components/index.ts

@@ -9,6 +9,7 @@ import Image, { type ImageProps } from "./Image"
 import ItemizedList, { type ItemizedListProps } from "./ItemizedList"
 import OrderedGrid, { type OrderedGridProps } from "./OrderedGrid"
 import ScrollRoutes, { type ScrollRoutesProps } from "./ScrollRoutes"
+import SyncError, { type SyncErrorProps } from "./SyncError"
 import TablePagination, { type TablePaginationProps } from "./TablePagination"
 import YouTubeVideo, { type YouTubeVideoProps } from "./YouTubeVideo"
 
@@ -22,6 +23,7 @@ export {
   ItemizedList,
   OrderedGrid,
   ScrollRoutes,
+  SyncError,
   TablePagination,
   YouTubeVideo,
   type AppProps,
@@ -33,6 +35,7 @@ export {
   type ItemizedListProps,
   type OrderedGridProps,
   type ScrollRoutesProps,
+  type SyncErrorProps,
   type TablePaginationProps,
   type YouTubeVideoProps,
 }

src/hooks/api.tsx

@@ -0,0 +1,83 @@
+import { CircularProgress } from "@mui/material"
+import type { TypedUseQuery } from "@reduxjs/toolkit/query/react"
+import {
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react"
+
+import SyncError from "../components/SyncError"
+
+export type Pagination = { page: number; limit: number; offset: number }
+export type SetPagination = Dispatch<
+  SetStateAction<{ page: number; limit: number }>
+>
+export type UsePaginationOptions = Partial<{
+  page: number
+  limit: number
+}>
+
+export function usePagination(
+  options?: UsePaginationOptions,
+): [Pagination, SetPagination] {
+  const { page = 0, limit = 150 } = options || {}
+
+  const [pagination, _setPagination] = useState<Pagination>({
+    page,
+    limit,
+    offset: page * limit,
+  })
+
+  const setPagination: SetPagination = value => {
+    _setPagination(({ page: previousPage, limit: previousLimit }) => {
+      let { page, limit } =
+        typeof value === "function"
+          ? value({ page: previousPage, limit: previousLimit })
+          : value
+
+      if (limit !== previousLimit) page = 0
+
+      return { page, limit, offset: page * limit }
+    })
+  }
+
+  return [pagination, setPagination]
+}
+
+export type UseQueryManagerOptions = Partial<{
+  loading: ReactNode
+  error: ReactNode
+}>
+
+export function useQueryManager<QueryArg, ResultType>(
+  useQuery: TypedUseQuery<ResultType, QueryArg, any>,
+  arg: QueryArg,
+  children: (data: ResultType) => ReactNode,
+  options?: UseQueryManagerOptions,
+): ReactNode {
+  const { data, isLoading, isSuccess, error } = useQuery(arg)
+
+  const {
+    loading: loadingNode = <CircularProgress />,
+    error: errorNode = <SyncError />,
+  } = options || {}
+
+  // An error occurred.
+  if (error) {
+    console.error(error)
+    return errorNode
+  }
+
+  // Busy calling the API.
+  if (isLoading) return loadingNode
+
+  // Called the API and got data.
+  if (data) return children(data)
+
+  // Called the API and did not get data.
+  if (isSuccess) throw Error("Expected to get data from API but got nothing.")
+
+  // Have yet to call the API.
+  return loadingNode
+}

src/hooks/index.ts

@@ -1,8 +1,10 @@
 import {
   usePagination,
+  useQueryManager,
   type Pagination,
   type SetPagination,
   type UsePaginationOptions,
+  type UseQueryManagerOptions,
 } from "./api"
 import {
   useSession,
@@ -23,13 +25,15 @@ export {
   useNavigate,
   usePagination,
   useParams,
+  useQueryManager,
   useSearchParams,
   useSession,
   useSessionMetadata,
   type Pagination,
   type SessionMetadata,
   type SetPagination,
   type UsePaginationOptions,
+  type UseQueryManagerOptions,
   type UseSessionChildren,
   type UseSessionChildrenFunction,
   type UseSessionOptions,

src/utils/api.ts

@@ -1,4 +1,5 @@
 import type { FetchBaseQueryError } from "@reduxjs/toolkit/query/react"
+
 import type { Optional, Required } from "./general"
 
 // -----------------------------------------------------------------------------