feat: reviewed and simplified the node status check (#63)

* refactor: status page nested ternary logic

* refactor: move the fetch latest bee release to a hook

* refactor: solved node status rerendering, improved performance and clarity

* refactor: step components now use unified hooks interface

* style: removed component margins, layout should be handled by pages

src/hooks/apiHooks.tsx

@@ -15,6 +15,7 @@ import {
 } from '@ethersphere/bee-js'
 
 import { beeDebugApi, beeApi } from '../services/bee'
+import axios from 'axios'
 
 export interface HealthHook {
   health: boolean
@@ -361,3 +362,31 @@ export const useApiPeerLastCashout = (peerId: string): PeerLastCashoutHook => {
 
   return { peerCashout, isLoadingPeerCashout, error }
 }
+
+export interface LatestBeeReleaseHook {
+  latestBeeRelease: LatestBeeRelease | null
+  isLoadingLatestBeeRelease: boolean
+  error: Error | null
+}
+
+export const useLatestBeeRelease = (): LatestBeeReleaseHook => {
+  const [latestBeeRelease, setLatestBeeRelease] = useState<LatestBeeRelease | null>(null)
+  const [isLoadingLatestBeeRelease, setLoading] = useState<boolean>(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_BEE_GITHUB_REPO_URL}/releases/latest`)
+      .then(res => {
+        setLatestBeeRelease(res.data)
+      })
+      .catch((error: Error) => {
+        setError(error)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [])
+
+  return { latestBeeRelease, isLoadingLatestBeeRelease, error }
+}