feat: bee provider caching the state of the app and refreshing periodically (#172)

* feat: bee provider caching the state of the app and refreshing periodically

* chore: added error handling

src/components/AlertVersion.tsx

@@ -1,10 +1,10 @@
-import { ReactElement, useState } from 'react'
+import { ReactElement, useState, useContext } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import Collapse from '@material-ui/core/Collapse'
 import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from '@material-ui/icons/Close'
-import { useStatusNodeVersion } from '../hooks/status'
+import { Context } from '../providers/Bee'
 import { SUPPORTED_BEE_VERSION_EXACT } from '@ethersphere/bee-js'
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -18,12 +18,12 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function VersionAlert(): ReactElement | null {
   const classes = useStyles()
-  const { isLoading, userVersion } = useStatusNodeVersion()
+  const { isLoading, latestUserVersionExact } = useContext(Context)
   const [open, setOpen] = useState<boolean>(true)
 
-  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === userVersion
+  const isExactlySupportedBeeVersion = SUPPORTED_BEE_VERSION_EXACT === latestUserVersionExact
 
-  if (isLoading || !userVersion) return null
+  if (isLoading || !latestUserVersionExact) return null
 
   return (
     <Collapse in={!isExactlySupportedBeeVersion && open}>
@@ -44,9 +44,9 @@ export default function VersionAlert(): ReactElement | null {
           }
         >
           <AlertTitle>Warning</AlertTitle>
-          Your Bee node version (<code>{userVersion}</code>) does not exactly match the Bee version we tested the Bee
-          Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality may not
-          work properly.
+          Your Bee node version (<code>{latestUserVersionExact}</code>) does not exactly match the Bee version we tested
+          the Bee Dashboard against (<code>{SUPPORTED_BEE_VERSION_EXACT}</code>). Please note that some functionality
+          may not work properly.
         </Alert>
       </div>
     </Collapse>

src/components/EthereumAddressCard.tsx

@@ -4,7 +4,6 @@ import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography } from '@material-ui/core/'
 
 import EthereumAddress from '../components/EthereumAddress'
-import { Skeleton } from '@material-ui/lab'
 
 import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
 
@@ -28,9 +27,7 @@ const useStyles = makeStyles(() =>
 
 interface Props {
   nodeAddresses: NodeAddresses | null
-  isLoadingNodeAddresses: boolean
   chequebookAddress: ChequebookAddressResponse | null
-  isLoadingChequebookAddress: boolean
 }
 
 function EthereumAddressCard(props: Props): ReactElement {
@@ -38,36 +35,23 @@ function EthereumAddressCard(props: Props): ReactElement {
 
   return (
     <Card className={classes.root}>
-      {props.isLoadingNodeAddresses ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Ethereum Address
-            </Typography>
-            <EthereumAddress address={props.nodeAddresses?.ethereum} />
-          </CardContent>
-        </div>
-      )}
-      {props.isLoadingChequebookAddress ? (
-        <div style={{ padding: '16px' }}>
-          <Skeleton width={300} height={30} animation="wave" />
-          <Skeleton width={300} height={50} animation="wave" />
-        </div>
-      ) : (
-        <div className={classes.details}>
-          <CardContent className={classes.content}>
-            <Typography variant="subtitle1" gutterBottom>
-              Chequebook Contract Address
-            </Typography>
-            <EthereumAddress address={props.chequebookAddress?.chequebookAddress} />
-          </CardContent>
-        </div>
-      )}
+      <div className={classes.details}>
+        <CardContent className={classes.content}>
+          <Typography variant="subtitle1" gutterBottom>
+            Ethereum Address
+          </Typography>
+          <EthereumAddress address={props.nodeAddresses?.ethereum} />
+        </CardContent>
+      </div>
+
+      <div className={classes.details}>
+        <CardContent className={classes.content}>
+          <Typography variant="subtitle1" gutterBottom>
+            Chequebook Contract Address
+          </Typography>
+          <EthereumAddress address={props.chequebookAddress?.chequebookAddress} />
+        </CardContent>
+      </div>
     </Card>
   )
 }

src/components/SideBar.tsx

@@ -9,6 +9,8 @@ import { Activity, FileText, DollarSign, Share2, Settings, Layers } from 'react-
 import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
 import { Health } from '@ethersphere/bee-js'
 
+import LastUpdate from './LastUpdate'
+
 const drawerWidth = 240
 
 const navBarItems = [
@@ -85,6 +87,7 @@ interface Props extends RouteComponentProps {
   themeMode: string
   health: boolean
   nodeHealth: Health | null
+  lastUpdate: number | null
 }
 
 export default function SideBar(props: Props): ReactElement {
@@ -167,6 +170,9 @@ export default function SideBar(props: Props): ReactElement {
               <span>Debug API</span>
             </div>
           </ListItem>
+          <div style={{ width: '100%', textAlign: 'center' }}>
+            <LastUpdate date={props.lastUpdate} />
+          </div>
         </div>
       </Drawer>
     </div>

src/components/TopologyStats.tsx

@@ -5,9 +5,7 @@ import { pickThreshold, ThresholdValues } from '../utils/threshold'
 import StatCard from './StatCard'
 
 interface RootProps {
-  isLoading: boolean
   topology: Topology | null
-  error: Error | null // FIXME: should display error
 }
 
 interface Props extends RootProps {
@@ -29,26 +27,25 @@ const TopologyStats = (props: RootProps): ReactElement => {
   )
 }
 
-const Indicator = ({ isLoading, thresholds }: Props): ReactElement => {
+const Indicator = ({ thresholds }: Props): ReactElement => {
   const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
   const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
   const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
 
   return (
     <div style={{ marginBottom: '20px' }}>
-      <StatCard label="Overall Health Indicator" statistic={percentageText} loading={isLoading} />
+      <StatCard label="Overall Health Indicator" statistic={percentageText} />
     </div>
   )
 }
 
-const Metrics = ({ isLoading, topology, thresholds }: Props): ReactElement => (
+const Metrics = ({ topology, thresholds }: Props): ReactElement => (
   <Grid style={{ marginBottom: '20px', flexGrow: 1 }}>
     <Grid container spacing={3}>
       <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
         <StatCard
           label="Connected Peers"
           statistic={topology?.connected.toString()}
-          loading={isLoading}
           tooltip={thresholds.connectedPeers.explanation}
         />
       </Grid>
@@ -56,17 +53,11 @@ const Metrics = ({ isLoading, topology, thresholds }: Props): ReactElement => (
         <StatCard
           label="Population"
           statistic={topology?.population.toString()}
-          loading={isLoading}
           tooltip={thresholds.population.explanation}
         />
       </Grid>
       <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-        <StatCard
-          label="Depth"
-          statistic={topology?.depth.toString()}
-          loading={isLoading}
-          tooltip={thresholds.depth.explanation}
-        />
+        <StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
       </Grid>
     </Grid>
   </Grid>