'Refresh' button functionality (Netgroups)

The 'Refresh' button should refetch the data related to the netgroups of a given user. The solution has been implemented taking the `refetch` functionality. Signed-off-by: Carla Martinez <[email protected]>
carma12 · Apr 3, 2024 · d042c4d · d042c4d
1 parent f9edf8e
commit d042c4d
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/src/components/MemberOf/MemberOfNetgroups.tsx b/src/components/MemberOf/MemberOfNetgroups.tsx
@@ -84,6 +84,10 @@ const memberOfNetgroups = (props: MemberOfNetroupsProps) => {
     }
   }, [netgroupsFullList]);
 
+  React.useEffect(() => {
+    netgroupsQuery.refetch();
+  }, [props.user]);
+
   // Other states
   const [netgroupsSelected, setNetgroupsSelected] = React.useState<string[]>(
     []
@@ -105,6 +109,11 @@ const memberOfNetgroups = (props: MemberOfNetroupsProps) => {
     setShownNetgroups(paginate(netgroupsFromUser, page, perPage));
   }, [netgroupsFromUser]);
 
+  // Buttons functionality
+  // - Refresh
+  const isRefreshButtonEnabled =
+    !netgroupsQuery.isFetching && !props.isUserDataLoading;
+
   return (
     <>
       <alerts.ManagedAlerts />
@@ -113,7 +122,7 @@ const memberOfNetgroups = (props: MemberOfNetroupsProps) => {
         onSearchTextChange={setSearchValue}
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onSearch={() => {}}
-        refreshButtonEnabled={true}
+        refreshButtonEnabled={isRefreshButtonEnabled}
         onRefreshButtonClick={props.onRefreshUserData}
         deleteButtonEnabled={someItemSelected}
         // eslint-disable-next-line @typescript-eslint/no-empty-function