Merge branch 'CE-2081-convert-useRecord' into 'develop'

CE-2081: Convert useRecord

See merge request !363

src/api/SwaggerApi.js

@@ -364,13 +364,6 @@ const emptyRecordListResponse = {
   recordList: []
 };
 
-export function useRecord(name, onError) {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(api.apis.Records.getRecord, unpackRecord);
-  const boundMethod = useCallback(method.bind(null, { name: name }), [name]);
-  return useAsync({ fcn: boundMethod, onError: onError });
-}
-
 export function unpackLogin(loginResponse) {
   return { ...loginResponse };
 }

src/views/records/RecordDetailsView.js

-import React, { useEffect, useCallback, useState, useContext } from "react";
-import { useRecord } from "../../api/SwaggerApi";
+import React, {
+  useEffect,
+  useCallback,
+  useState,
+  useContext,
+  useMemo
+} from "react";
 import {
   Paper,
   IconButton,
@@ -22,17 +27,39 @@ import { useNavigate } from "react-router-dom";
 import { onFetchEntityError } from "../../components/common/Helper";
 import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
 
+import { apiContext } from "../../api/DeployApi";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
+
 export function RecordDetailsView() {
   const { name } = useParams();
   const decodedName = decodeURIComponent(name);
-  const [notFoundError, setNotFoundError] = useState();
-  const [record /* getRecord*/ /* reset*/, , , recordLoading] = useRecord(
-    decodedName,
-    (m, s) => {
-      // handle error code 404, and define custom message on the UI because BE sends back generic error message
-      onFetchEntityError(m, s, setNotFoundError);
-    }
+  const [error, setError] = useState(null);
+
+  const client = useContext(apiContext);
+
+  const params = useMemo(
+    () => ({
+      name: decodedName
+    }),
+    [decodedName]
   );
+
+  const {
+    value: record,
+    error: fetchError,
+    loading: recordLoading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Records.getRecord,
+    params
+  });
+
+  useEffect(() => {
+    if (fetchError) {
+      onFetchEntityError(fetchError?.message, fetchError?.status, setError);
+    }
+  }, [fetchError]);
+
   const navigate = useNavigate();
 
   const { setTitle } = useContext(GlobalAppBarContext);
@@ -112,9 +139,9 @@ export function RecordDetailsView() {
 
   return (
     <RootContainer>
-      {notFoundError ? (
+      {error ? (
         <NotFoundView />
-      ) : recordLoading ? (
+      ) : recordLoading || !dataReady ? (
         <LinearProgress color="primary" />
       ) : (
         <Paper>