refactor: addresses and peers

src/hooks/apiHooks.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 import type { NodeAddresses, ChequebookAddressResponse, ChequebookBalanceResponse, BalanceResponse, 
-    LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health } from '@ethersphere/bee-js'
+    LastChequesResponse, AllSettlements, LastCashoutActionResponse, Health, Peer } from '@ethersphere/bee-js'
 
 import { beeDebugApi, beeApi } from '../services/bee';
 
@@ -58,7 +58,7 @@ export const useApiNodeAddresses = () => {
         setLoading(true)
         beeDebugApi.connectivity.addresses()
         .then(res => {
-            setNodeAddresses(res.data)
+            setNodeAddresses(res)
         })
         .catch(error => {
             setError(error)
@@ -116,15 +116,15 @@ export const useApiChequebookAddress = () => {
 }
 
 export const useApiNodePeers = () => {
-    const [nodePeers, setNodePeers] = useState({ peers: [{ address: '-'}]})
-    const [isLoadingNodePeers, setLoading] = useState<boolean>(false)
+    const [peers, setPeers] = useState<Peer[] | null>(null)
+    const [isLoading, setLoading] = useState<boolean>(false)
     const [error, setError] = useState<Error | null>(null)
 
     useEffect(() => { 
         setLoading(true)
         beeDebugApi.connectivity.listPeers()
         .then(res => {
-            setNodePeers(res.data)
+            setPeers(res)
         })
         .catch(error => {
             setError(error)
@@ -134,7 +134,7 @@ export const useApiNodePeers = () => {
         })
     }, [])
 
-    return { nodePeers, isLoadingNodePeers, error };
+    return { peers, isLoading, error };
 }
 
 export const useApiChequebookBalance = () => {

src/pages/peers/PeerTable.tsx

@@ -4,6 +4,7 @@ import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Butto
 import { Autorenew } from '@material-ui/icons';
 
 import { beeDebugApi } from '../../services/bee';
+import type { Peer } from '@ethersphere/bee-js';
 
 const useStyles = makeStyles({
     table: {
@@ -11,8 +12,14 @@ const useStyles = makeStyles({
     },
   });
 
+interface Props {
+    peers: Peer[] | null
+    isLoading: boolean
+    error: Error | null
+}
+
   
-function PeerTable(props: any) {
+function PeerTable(props: Props) {
     const classes = useStyles();
 
     const [peerLatency, setPeerLatency] = useState([{ peerId: '', rtt: '', loading: false }]);
@@ -29,13 +36,24 @@ function PeerTable(props: any) {
         })
     }
 
-    return (
-        <div>
-            {props.loading ? 
+    if (props.isLoading) {
+        return (
             <Container style={{textAlign:'center', padding:'50px'}}>
                 <CircularProgress />
             </Container>
-            :
+        )
+    }
+
+    if (props.error || props.peers === null) {
+        return (
+            <Container style={{textAlign:'center', padding:'50px'}}>
+                <p>Failed to load peers</p>
+            </Container>
+        )
+    }
+
+    return (
+        <div>
              <TableContainer component={Paper}>
                 <Table className={classes.table} aria-label="simple table">
                     <TableHead>
@@ -46,7 +64,7 @@ function PeerTable(props: any) {
                     </TableRow>
                     </TableHead>
                     <TableBody>
-                    {props.nodePeers.peers.map((peer: any, idx: number) => (
+                    {props.peers.map((peer: any, idx: number) => (
                         <TableRow key={peer.address}>
                         <TableCell component="th" scope="row">
                             {idx + 1}
@@ -67,7 +85,6 @@ function PeerTable(props: any) {
                     </TableBody>
                 </Table>
             </TableContainer>
-            }
         </div>
     )
 }

src/pages/peers/index.tsx

@@ -6,16 +6,27 @@ import StatCard from '../../components/StatCard';
 import PeerTable from './PeerTable';
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard';
 
-import { useApiNodeTopology, useApiNodePeers } from '../../hooks/apiHooks';
+import { useApiNodeTopology, useApiNodePeers, useDebugApiHealth } from '../../hooks/apiHooks';
 
-export default function Peers(props: any) {
+export default function Peers() {
     const { nodeTopology, isLoadingNodeTopology } = useApiNodeTopology()
-    const { nodePeers, isLoadingNodePeers } = useApiNodePeers()
+    const debugHealth = useDebugApiHealth()
+    const peers = useApiNodePeers()
+
+    if (debugHealth.isLoadingNodeHealth) {
+        return (
+            <Container style={{textAlign:'center', padding:'50px'}}>
+                <CircularProgress />
+            </Container>
+        )
+    }
+
+    if (debugHealth.error) {
+        return <TroubleshootConnectionCard />
+    }
 
     return (
-        <div>
-            {props.nodeHealth?.status === 'ok' && props.health ?
-            <div>
+        <>
             <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
                 <Grid container spacing={3}>
                     <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
@@ -41,19 +52,7 @@ export default function Peers(props: any) {
                     </Grid>
                 </Grid> 
             </Grid>
-            <PeerTable
-            nodePeers={nodePeers}
-            loading={isLoadingNodePeers}
-            />
-            </div>
-            :
-            props.isLoadingHealth || props.isLoadingNodeHealth ?
-            <Container style={{textAlign:'center', padding:'50px'}}>
-                <CircularProgress />
-            </Container>
-            :
-            <TroubleshootConnectionCard />
-            }
-        </div>
+            <PeerTable {...peers} />
+        </>
     )
 }

src/services/bee.tsx

@@ -57,10 +57,10 @@ export const beeDebugApi = {
     },
     connectivity: {
         addresses() {
-            return beeDebugApiClient().get(`/addresses`)
+            return beeJSDebugClient().getNodeAddresses()
         },
         listPeers() {
-            return beeDebugApiClient().get(`/peers`)
+            return beeJSDebugClient().getPeers()
         },
         blockListedPeers() {
             return beeDebugApiClient().get(`/blocklist`)