fix: Replaces manual fetchUser with useUser hook

* Now that the hook is exported.
hawtio · Nov 20, 2023 · 732e52a · 732e52a
1 parent 42129d8
commit 732e52a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/packages/kubernetes-api-app/src/Kubernetes.tsx b/packages/kubernetes-api-app/src/Kubernetes.tsx
@@ -23,13 +23,13 @@ import {
 } from '@patternfly/react-core'
 import { InfoCircleIcon } from '@patternfly/react-icons'
 import { KubernetesClient } from './KubernetesClient'
-import { userService } from '@hawtio/react'
+import { useUser, userService } from '@hawtio/react'
 
 export const Kubernetes: React.FunctionComponent = () => {
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<Error | null>()
- const [username, setUsername] = useState('')
+ const { username, userLoaded } = useUser()
 
  useEffect(() => {
  setIsLoading(true)
@@ -39,6 +39,8 @@ export const Kubernetes: React.FunctionComponent = () => {
 
  if (!k8Loaded) return
 
+ if (!userLoaded) return
+
  setIsLoading(false)
 
  if (k8Api.hasError()) {
@@ -49,10 +51,6 @@ export const Kubernetes: React.FunctionComponent = () => {
  if (k8Service.hasError()) {
  setError(k8Service.error)
  }
-
- await userService.fetchUser()
- const username = await userService.getUsername()
- setUsername(username)
  }
 
  checkLoading()
@@ -62,7 +60,7 @@ export const Kubernetes: React.FunctionComponent = () => {
  return () => {
  if (timerRef.current) clearTimeout(timerRef.current)
  }
- }, [])
+ }, [userLoaded])
 
  if (isLoading) {
  return (

diff --git a/packages/management-api-app/src/Management.tsx b/packages/management-api-app/src/Management.tsx
@@ -30,7 +30,8 @@ export const Management: React.FunctionComponent = () => {
  const timerRef = useRef<NodeJS.Timeout | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<Error | null>()
- const [username, setUsername] = useState('')
+ const { username, userLoaded } = useUser()
+
  const [pods, setPods] = useState<ManagedPod[]>([])
 
  useEffect(() => {
@@ -41,17 +42,15 @@ export const Management: React.FunctionComponent = () => {
 
  if (!mgmtLoaded) return
 
+ if (!userLoaded) return
+
  setIsLoading(false)
 
  if (mgmtService.hasError()) {
  setError(mgmtService.error)
  return
  }
 
- await userService.fetchUser()
- const username = await userService.getUsername()
- setUsername(username)
-
  mgmtService.on(MgmtActions.UPDATED, () => {
  setPods([...mgmtService.pods]) // Use spread to ensure react updates the state
  })
@@ -64,7 +63,7 @@ export const Management: React.FunctionComponent = () => {
  return () => {
  if (timerRef.current) clearTimeout(timerRef.current)
  }
- }, [])
+ }, [userLoaded])
 
  if (isLoading) {
  return (