use query manager

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/utils/api.ts → src/utils/api.tsx

@@ -1,4 +1,11 @@
-import type { FetchBaseQueryError } from "@reduxjs/toolkit/query/react"
+import { CircularProgress } from "@mui/material"
+import type {
+  FetchBaseQueryError,
+  TypedUseQuery,
+} from "@reduxjs/toolkit/query/react"
+import type { ReactNode } from "react"
+
+import { SyncError } from "../components"
 import type { Optional, Required } from "./general"
 
 // -----------------------------------------------------------------------------
@@ -240,3 +247,40 @@ export function tagData<Type extends string, M extends Model<any>>(
     return []
   }
 }
+
+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
+}