From b2b6d53308ec45fbfb5d591f94ce458fab861408 Mon Sep 17 00:00:00 2001
From: Stefan Kairinos <stefan.kairinos@ocado.com>
Date: Fri, 9 Aug 2024 09:55:41 +0300
Subject: [PATCH] fix: Portal frontend 25 (#52)

* use query manager

* refactor
---
 src/components/SyncError.tsx                 | 14 ++++
 src/components/TablePagination.tsx           |  8 +-
 src/components/form/ApiAutocompleteField.tsx | 19 +----
 src/components/index.ts                      |  3 +
 src/hooks/api.ts                             | 37 ---------
 src/hooks/api.tsx                            | 83 ++++++++++++++++++++
 src/hooks/index.ts                           |  4 +
 src/utils/api.ts                             |  1 +
 8 files changed, 110 insertions(+), 59 deletions(-)
 create mode 100644 src/components/SyncError.tsx
 delete mode 100644 src/hooks/api.ts
 create mode 100644 src/hooks/api.tsx

diff --git a/src/components/SyncError.tsx b/src/components/SyncError.tsx
new file mode 100644
index 0000000..1a50941
--- /dev/null
+++ b/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
diff --git a/src/components/TablePagination.tsx b/src/components/TablePagination.tsx
index fd327f2..374217a 100644
--- a/src/components/TablePagination.tsx
+++ b/src/components/TablePagination.tsx
@@ -1,4 +1,3 @@
-import { SyncProblem as SyncProblemIcon } from "@mui/icons-material"
 import {
   CircularProgress,
   TablePagination as MuiTablePagination,
@@ -6,7 +5,6 @@ import {
   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 })
       )}
diff --git a/src/components/form/ApiAutocompleteField.tsx b/src/components/form/ApiAutocompleteField.tsx
index 479fb38..18202e9 100644
--- a/src/components/form/ApiAutocompleteField.tsx
+++ b/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}>
diff --git a/src/components/index.ts b/src/components/index.ts
index 104ba38..504569d 100644
--- a/src/components/index.ts
+++ b/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,
 }
diff --git a/src/hooks/api.ts b/src/hooks/api.ts
deleted file mode 100644
index 3a53daf..0000000
--- a/src/hooks/api.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { type Dispatch, type SetStateAction, useState } from "react"
-
-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]
-}
diff --git a/src/hooks/api.tsx b/src/hooks/api.tsx
new file mode 100644
index 0000000..558ec58
--- /dev/null
+++ b/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
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 7c4d185..1d2fcd4 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,8 +1,10 @@
 import {
   usePagination,
+  useQueryManager,
   type Pagination,
   type SetPagination,
   type UsePaginationOptions,
+  type UseQueryManagerOptions,
 } from "./api"
 import {
   useSession,
@@ -23,6 +25,7 @@ export {
   useNavigate,
   usePagination,
   useParams,
+  useQueryManager,
   useSearchParams,
   useSession,
   useSessionMetadata,
@@ -30,6 +33,7 @@ export {
   type SessionMetadata,
   type SetPagination,
   type UsePaginationOptions,
+  type UseQueryManagerOptions,
   type UseSessionChildren,
   type UseSessionChildrenFunction,
   type UseSessionOptions,
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 38c5804..e1536e6 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,4 +1,5 @@
 import type { FetchBaseQueryError } from "@reduxjs/toolkit/query/react"
+
 import type { Optional, Required } from "./general"
 
 // -----------------------------------------------------------------------------