feat: simulate data being retrieved via loader

Signed-off-by: Carla Martinez <carlmart@redhat.com>
freeipa · Jul 19, 2023 · 857d150 · 857d150
1 parent 25516fa
commit 857d150
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 77 deletions.
diff --git a/src/components/UserSettings.tsx b/src/components/UserSettings.tsx
@@ -50,6 +50,9 @@ export interface PropsToUserSettings {
 }
 
 const UserSettings = (props: PropsToUserSettings) => {
+  // TEST: Data loading
+  const [isDataLoading, setIsDataLoading] = useState(false);
+
   // Kebab
   const [isKebabOpen, setIsKebabOpen] = useState(false);
 
@@ -81,12 +84,31 @@ const UserSettings = (props: PropsToUserSettings) => {
     setIsKebabOpen(!isKebabOpen);
   };
 
+  // // TEST: Check loader value
+  React.useEffect(() => {
+    console.log("--> isDataLoading");
+    console.log(props.isDataLoading);
+  }, [props.isDataLoading]);
+
+  const onRefreshHandle = () => {
+    if (props.onRefresh !== undefined) {
+      setIsDataLoading(true);
+      props.onRefresh();
+
+      // As the props.isLoading is only executed the first time,
+      //  we will simulate data being retrieved and loaded.
+      setTimeout(() => {
+        setIsDataLoading(false);
+      }, 500);
+    }
+  };
+
   // Toolbar
   const toolbarFields = [
     {
       key: 0,
       element: (
-        <SecondaryButton onClickHandler={props.onRefresh}>
+        <SecondaryButton onClickHandler={onRefreshHandle}>
           Refresh
         </SecondaryButton>
       ),
@@ -171,7 +193,7 @@ const UserSettings = (props: PropsToUserSettings) => {
           </SidebarPanel>
 
           <SidebarContent className="pf-u-mr-xl">
-            {!props.isDataLoading ? (
+            {!isDataLoading ? (
               <Flex
                 direction={{ default: "column" }}
                 flex={{ default: "flex_1" }}

diff --git a/src/pages/ActiveUsers/ActiveUsersTabs.tsx b/src/pages/ActiveUsers/ActiveUsersTabs.tsx
@@ -22,15 +22,8 @@ import UserSettings from "../../components/UserSettings";
 import UserMemberOf from "./UserMemberOf";
 // Layouts
 import BreadcrumbLayout from "src/components/layouts/BreadcrumbLayout";
-import DataSpinner from "src/components/layouts/DataSpinner";
 // Hooks
 import useUserSettingsData from "src/hooks/useUserSettingsData";
-// RPC
-// import {
-//   BatchResult,
-//   Command,
-//   useRefreshUsersMutation,
-// } from "src/services/rpc";
 
 const ActiveUsersTabs = () => {
   // Get location (React Router DOM) and get state data
@@ -41,70 +34,6 @@ const ActiveUsersTabs = () => {
   // Data loaded from DB
   const userSettingsData = useUserSettingsData(uid);
 
-  // TODO display some spinner while userSettingsData.isFetching
-
-  // Define function to execute 'useRefreshUsersMutation' hook (via Mutation)
-  // const [retrieveUserData] = useRefreshUsersMutation();
-
-  // Update states on receiving 'batchResponse' from 'useUserSettingsData'
-  // useEffect(() => {
-  //   if (Object.keys(batchResponse).length > 0) {
-  //     setUser(batchResponse[0].result);
-  //     setPwPolicyData(batchResponse[1].result);
-  //     setKrbPolicyData(batchResponse[2].result);
-  //     setCertData(batchResponse[3].result);
-  //   }
-  // }, [batchResponse]);
-
-  // Refresh data
-  // const refreshUserData = () => {
-  //   // Payload
-  //   const userShowCommand: Command = {
-  //     method: "user_show",
-  //     params: [userData.uid, { all: true, rights: true }],
-  //   };
-  //   const pwpolicyShowCommand: Command = {
-  //     method: "pwpolicy_show",
-  //     params: [[], { user: userData.uid[0], all: true, rights: true }],
-  //   };
-  //   const krbtpolicyShowCommand: Command = {
-  //     method: "krbtpolicy_show",
-  //     params: [userData.uid, { all: true, rights: true }],
-  //   };
-  //   const certFindCommand: Command = {
-  //     method: "cert_find",
-  //     params: [[], { user: userData.uid[0], sizelimit: 0, all: true }],
-  //   };
-  //   const batchPayload: Command[] = [
-  //     userShowCommand,
-  //     pwpolicyShowCommand,
-  //     krbtpolicyShowCommand,
-  //     certFindCommand,
-  //   ];
-  //   // Set data loading flag
-  //   setIsDataLoading(true);
-
-  //   // Make API call
-  //   retrieveUserData(batchPayload).then((batchResponse) => {
-  //     if ("data" in batchResponse) {
-  //       const responseData = batchResponse.data as BatchResult[];
-  //       if (responseData !== undefined) {
-  //         const newUserData = responseData[0].result;
-  //         const newPwPolicyData = responseData[1].result;
-  //         const newKrbPolicyData = responseData[2].result;
-  //         const newCertData = responseData[3].result;
-  //         setUser(newUserData as unknown as User);
-  //         setPwPolicyData(newPwPolicyData);
-  //         setKrbPolicyData(newKrbPolicyData);
-  //         setCertData(newCertData);
-  //       }
-  //     }
-  //     // This batch will finish later than the other calls.
-  //     //   So remove spinner and show data when finished.
-  //     setIsDataLoading(false);
-  //   });
-  // };
-
   // Tab
   const [activeTabKey, setActiveTabKey] = useState(0);
 
@@ -124,9 +53,10 @@ const ActiveUsersTabs = () => {
     },
   ];
 
-  if (userSettingsData.isLoading) {
-    return <DataSpinner />;
-  }
+  // NOTE: This is done directly in 'UserSettings'
+  // if (userSettingsData.isLoading) {
+  //   return <DataSpinner />;
+  // }
 
   return (
     <Page>
@@ -163,7 +93,7 @@ const ActiveUsersTabs = () => {
               krbPolicyData={userSettingsData.krbtPolicyData}
               certData={userSettingsData.certData}
               onUserChange={userSettingsData.setUser}
-              // isDataLoading={isDataLoading}
+              isDataLoading={userSettingsData.isLoading}
               onRefresh={userSettingsData.refetch}
               from="active-users"
             />