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 }
+}

src/hooks/status.ts

@@ -0,0 +1,73 @@
+import {
+  useApiChequebookAddress,
+  useApiChequebookBalance,
+  useApiHealth,
+  useApiNodeAddresses,
+  useApiNodeTopology,
+  useDebugApiHealth,
+  useLatestBeeRelease,
+} from './apiHooks'
+
+export const useStatusNodeVersion = (): StatusNodeVersionHook => {
+  const { latestBeeRelease, isLoadingLatestBeeRelease } = useLatestBeeRelease()
+  const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
+
+  return {
+    isLoading: isLoadingNodeHealth || isLoadingLatestBeeRelease,
+    isOk: Boolean(latestBeeRelease && latestBeeRelease.name === `v${nodeHealth?.version?.split('-')[0]}`),
+    userVersion: nodeHealth?.version?.split('-')[0] || '-',
+    latestVersion: latestBeeRelease?.name.substring(1) || '-',
+    latestUrl: latestBeeRelease?.html_url || 'https://github.com/ethersphere/bee/releases/latest',
+  }
+}
+
+export const useStatusEthereumConnection = (): StatusEthereumConnectionHook => {
+  const { isLoadingNodeAddresses, nodeAddresses } = useApiNodeAddresses()
+
+  return {
+    isLoading: isLoadingNodeAddresses,
+    isOk: Boolean(nodeAddresses?.ethereum),
+    nodeAddresses,
+  }
+}
+
+export const useStatusDebugConnection = (): StatusHookCommon => {
+  const { isLoadingNodeHealth, nodeHealth } = useDebugApiHealth()
+
+  return {
+    isLoading: isLoadingNodeHealth,
+    isOk: Boolean(nodeHealth?.status === 'ok'),
+  }
+}
+
+export const useStatusConnection = (): StatusHookCommon => {
+  const { isLoadingHealth, health } = useApiHealth()
+
+  return {
+    isLoading: isLoadingHealth,
+    isOk: health,
+  }
+}
+
+export const useStatusTopology = (): StatusTopologyHook => {
+  const { topology, isLoading } = useApiNodeTopology()
+
+  return {
+    isLoading,
+    isOk: Boolean(topology?.connected && topology?.connected > 0),
+    topology,
+  }
+}
+
+export const useStatusChequebook = (): StatusChequebookHook => {
+  const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
+  const { chequebookBalance, isLoadingChequebookBalance } = useApiChequebookBalance()
+
+  return {
+    isLoading: isLoadingChequebookAddress || isLoadingChequebookBalance,
+    isOk:
+      Boolean(chequebookAddress?.chequebookaddress) && chequebookBalance !== null && chequebookBalance.totalBalance > 0,
+    chequebookBalance,
+    chequebookAddress,
+  }
+}