refactor: remove use of asyncconte and custom hook

ONSdigital · Jul 2, 2024 · 4d342df · 4d342df
1 parent 03e46d8
commit 4d342df
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 80 deletions.
diff --git a/src/Components/AsyncContent.tsx b/src/Components/AsyncContent.tsx
diff --git a/src/hooks/useAsyncRequest.ts b/src/hooks/useAsyncRequest.ts
diff --git a/src/pages/users/UserProfileEdits/UserProfile.tsx b/src/pages/users/UserProfileEdits/UserProfile.tsx
@@ -1,22 +1,42 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import AsyncContent from "../../../Components/AsyncContent";
-import { useAsyncRequest } from "../../../hooks/useAsyncRequest";
 import ProfileTable from "./ProfileTable";
 import { getUser } from "../../../api/http";
-import { ONSPanel } from "blaise-design-system-react-components";
+import { ONSPanel, ONSLoadingPanel, ONSErrorPanel } from "blaise-design-system-react-components";
 import { GetUserResponse } from "../../../Interfaces/usersPage";
 import UserSignInErrorPanel from "../../../Components/UserSignInErrorPanel";
 
 export default function UserProfile() {
-    const { user } = useParams();
+    const { user: viewedUsername } = useParams();
     const { state } = useLocation();
     const { currentUser, updatedPanel } = state || { currentUser: null, updatedPanel: null };
-    const userDetails = useAsyncRequest<GetUserResponse>(() => getUser(user as string));
+    const [viewedUserDetails, setViewedUserDetails] = useState<GetUserResponse | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string>("");
+
+    const fetchUserDetails = async () => {
+        setLoading(true);
+        try {
+            const data = await getUser(viewedUsername as string);
+            setViewedUserDetails(data);
+            setError("");
+        } catch (err) {
+            setError("Unable to load user details, please try again. If this continues, please the contact service desk.");
+            setViewedUserDetails(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (viewedUsername) {
+            fetchUserDetails();
+        }
+    }, [viewedUsername]);
 
     if (!currentUser) {
-        return (<UserSignInErrorPanel/>);
+        return <UserSignInErrorPanel />;
     }
 
     return (
@@ -32,9 +52,14 @@ export default function UserProfile() {
                     <div className="ons-panel__body">{updatedPanel.message}</div>
                 </ONSPanel>)
                 : null }
-            <AsyncContent content={userDetails}>
-                {(userDetails) => <ProfileTable currentUser={currentUser} viewedUserDetails={userDetails} />}
-            </AsyncContent>
+            {error && <ONSPanel status={"error"}>
+                <div className="ons-panel__body">{error}</div>
+            </ONSPanel>}
+            {loading ? (
+                <ONSLoadingPanel />
+            ) : (
+                viewedUserDetails && <ProfileTable currentUser={currentUser} viewedUserDetails={viewedUserDetails} />
+            )}
         </>
     );
 }