refactor: debug api health to use bee-js and removed node readiness (#41)

src/hooks/apiHooks.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 import type { NodeAddresses, ChequebookAddressResponse, ChequebookBalanceResponse, BalanceResponse, 
-    LastChequesResponse, AllSettlements, LastCashoutActionResponse } from '@ethersphere/bee-js'
+    LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health } from '@ethersphere/bee-js'
 
 import { beeDebugApi, beeApi } from '../services/bee';
 
@@ -27,13 +27,8 @@ export const useApiHealth = () => {
     return { health, isLoadingHealth, error } ;
 }
 
-interface NodeHealth {
-    status: string,
-    version: string
-}
-
 export const useDebugApiHealth = () => {
-    const [nodeHealth, setNodeHealth] = useState<NodeHealth | null>(null)
+    const [nodeHealth, setNodeHealth] = useState<Health | null>(null)
     const [isLoadingNodeHealth, setLoading] = useState<boolean>(false)
     const [error, setError] = useState<Error | null>(null)
 
@@ -41,7 +36,7 @@ export const useDebugApiHealth = () => {
         setLoading(true)
         beeDebugApi.status.nodeHealth()
         .then(res => {
-            setNodeHealth(res.data)
+            setNodeHealth(res)
         })
         .catch(error => {
             setError(error)
@@ -54,33 +49,6 @@ export const useDebugApiHealth = () => {
     return { nodeHealth, isLoadingNodeHealth, error } ;
 }
 
-interface NodeReadiness {
-    status: string,
-    version: string
-}
-
-export const useApiReadiness = () => {
-    const [nodeReadiness, setNodeReadiness] = useState<NodeReadiness | null>(null)
-    const [isLoadingNodeReadiness, setLoading] = useState<boolean>(false)
-    const [error, setError] = useState<Error | null>(null)
-
-    useEffect(() => { 
-        setLoading(true)
-        beeDebugApi.status.nodeReadiness()
-        .then(res => {
-            setNodeReadiness(res.data)
-        })
-        .catch(error => {
-            setError(error)
-        })
-        .finally(() => {
-            setLoading(false)
-        })
-     }, [])
-
-    return { nodeReadiness, isLoadingNodeReadiness, error } ;
-}
-
 export const useApiNodeAddresses = () => {
     const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
     const [isLoadingNodeAddresses, setLoading] = useState<boolean>(false)

src/pages/status/StatusCard.tsx

@@ -5,6 +5,7 @@ import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/';
 import { CheckCircle, Error, ArrowRight, ArrowDropUp } from '@material-ui/icons/';
 import { Skeleton } from '@material-ui/lab';
+import { Health } from '@ethersphere/bee-js';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -27,17 +28,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-
-interface NodeHealth {
-    status?: string,
-    version?: string
-}
-
-interface NodeReadiness {
-    status?: string,
-    version?: string
-}
-
 interface NodeAddresses {
     overlay: string,
     underlay: string[],
@@ -58,10 +48,8 @@ interface NodeTopology {
 
 
 interface IProps{
-    nodeHealth: NodeHealth,
+    nodeHealth: Health,
     loadingNodeHealth: boolean,
-    nodeReadiness: NodeReadiness | null,
-    loadingNodeReadiness: boolean,
     beeRelease: any,
     loadingBeeRelease: boolean,
     nodeAddresses: NodeAddresses,
@@ -108,8 +96,8 @@ function StatusCard(props: IProps) {
                         <Typography component="div" variant="subtitle2" gutterBottom>
                             <span>AGENT: </span>
                             <a href='https://github.com/ethersphere/bee' rel='noreferrer' target='_blank'>Bee</a>
-                            <span>{props.nodeReadiness?.version ? ` v${props.nodeReadiness.version}` : '-'}</span>
+                            <span>{props.nodeHealth?.version ? ` v${props.nodeHealth.version}` : '-'}</span>
-                            {props.beeRelease && props.beeRelease.name === `v${props.nodeReadiness?.version?.split('-')[0]}` ?
+                            {props.beeRelease && props.beeRelease.name === `v${props.nodeHealth?.version?.split('-')[0]}` ?
                                 <Chip
                                 style={{ marginLeft: '7px', color: '#2145a0' }}
                                 size="small"

src/pages/status/index.tsx

@@ -5,7 +5,7 @@ import { Container, CircularProgress } from '@material-ui/core';
 import NodeSetupWorkflow from './NodeSetupWorkflow';
 import StatusCard from './StatusCard';
 import EthereumAddressCard from '../../components/EthereumAddressCard';
-import { useApiHealth, useDebugApiHealth, useApiReadiness, useApiNodeAddresses, useApiChequebookAddress, useApiNodeTopology, useApiChequebookBalance } from '../../hooks/apiHooks';
+import { useApiHealth, useDebugApiHealth, useApiNodeAddresses, useApiChequebookAddress, useApiNodeTopology, useApiChequebookBalance } from '../../hooks/apiHooks';
 
 export default function Status() {
     const [beeRelease, setBeeRelease] = useState({ name: ''});
@@ -18,7 +18,6 @@ export default function Status() {
 
     const { health, isLoadingHealth } = useApiHealth()
     const { nodeHealth, isLoadingNodeHealth } = useDebugApiHealth()
-    const { nodeReadiness, isLoadingNodeReadiness } = useApiReadiness()
     const { nodeAddresses, isLoadingNodeAddresses } = useApiNodeAddresses()
     const { chequebookAddress, isLoadingChequebookAddress } = useApiChequebookAddress()
     const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
@@ -81,8 +80,6 @@ export default function Status() {
                     <StatusCard 
                     nodeHealth={nodeHealth} 
                     loadingNodeHealth={isLoadingNodeHealth}
-                    nodeReadiness={nodeReadiness} 
-                    loadingNodeReadiness={isLoadingNodeReadiness} 
                     beeRelease={beeRelease}
                     loadingBeeRelease={isLoadingBeeRelease}
                     nodeAddresses={nodeAddresses} 
@@ -98,7 +95,7 @@ export default function Status() {
                     />
                 </div>
                 :
-                ( isLoadingNodeHealth || isLoadingHealth || isLoadingNodeReadiness || isLoadingChequebookAddress ||
+                ( isLoadingNodeHealth || isLoadingHealth || isLoadingChequebookAddress ||
                     isLoadingNodeTopology || isLoadingBeeRelease || isLoadingNodeAddresses || isLoadingBeeRelease || isLoadingChequebookBalance
                 ) 
                 ? 
@@ -113,9 +110,6 @@ export default function Status() {
                 nodeHealth={nodeHealth} 
                 isLoadingNodeHealth={isLoadingNodeHealth}
 
-                nodeReadiness={nodeReadiness} 
-                isLoadingNodeReadiness={isLoadingNodeReadiness} 
-
                 nodeAddresses={nodeAddresses} 
                 isLoadingNodeAddresses={isLoadingNodeAddresses} 
 

src/services/bee.tsx

@@ -1,5 +1,5 @@
 import axios, { AxiosInstance } from 'axios';
-import { Bee, Reference } from "@ethersphere/bee-js";
+import { Bee, BeeDebug, Reference } from "@ethersphere/bee-js";
 
 const beeJSClient = () => {
     let apiHost = process.env.REACT_APP_BEE_HOST || 'http://localhost:1633'
@@ -11,6 +11,16 @@ const beeJSClient = () => {
     return new Bee(apiHost)
 }
 
+const beeJSDebugClient = () => {
+    let debugApiHost = process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635'
+  
+    if (sessionStorage.getItem('debug_api_host')) {
+      debugApiHost = String(sessionStorage.getItem('debug_api_host'))
+    }
+
+    return new BeeDebug(debugApiHost)
+}
+
 const beeDebugApiClient = (): AxiosInstance => {
     let debugApiHost = process.env.REACT_APP_BEE_DEBUG_HOST || 'http://localhost:1635'
   
@@ -42,10 +52,7 @@ export const beeApi = {
 export const beeDebugApi = {
     status: {
         nodeHealth() {
-            return beeDebugApiClient().get(`/health`)
+            return beeJSDebugClient().getHealth()
-        },
-        nodeReadiness() {
-            return beeDebugApiClient().get(`/readiness`)
         },
     },
     connectivity: {