feat: display postage batch usage percentage (#149)

* feat: display postage batch usage percentage

* refactor: use string template instead of concat

src/pages/files/SelectStamp.tsx

@@ -1,15 +1,15 @@
-import React, { ReactElement } from 'react'
 import Button from '@material-ui/core/Button'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
+import React, { ReactElement } from 'react'
-import { PostageBatch } from '@ethersphere/bee-js'
 import PeerDetailDrawer from '../../components/PeerDetail'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 interface Props {
-  stamps: PostageBatch[] | null
+  stamps: EnrichedPostageBatch[] | null
-  selectedStamp: PostageBatch | null
+  selectedStamp: EnrichedPostageBatch | null
-  setSelected: (stamp: PostageBatch) => void
+  setSelected: (stamp: EnrichedPostageBatch) => void
 }
 
 export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props): ReactElement | null {
@@ -38,7 +38,7 @@ export default function SimpleMenu({ stamps, selectedStamp, setSelected }: Props
             }}
             selected={stamp.batchID === selectedStamp?.batchID}
           >
-            <ListItemIcon>{stamp.utilization}</ListItemIcon>
+            <ListItemIcon>{stamp.usageText}</ListItemIcon>
             <PeerDetailDrawer peerId={stamp.batchID} />
           </MenuItem>
         ))}

src/pages/files/Upload.tsx

@@ -1,4 +1,3 @@
-import { PostageBatch } from '@ethersphere/bee-js'
 import { Button, CircularProgress, Container } from '@material-ui/core'
 import Avatar from '@material-ui/core/Avatar'
 import Chip from '@material-ui/core/Chip'
@@ -8,7 +7,7 @@ import { ReactElement, useContext, useEffect, useState } from 'react'
 import UploadSizeAlert from '../../components/AlertUploadSize'
 import ClipboardCopy from '../../components/ClipboardCopy'
 import PeerDetailDrawer from '../../components/PeerDetail'
-import { Context } from '../../providers/Stamps'
+import { Context, EnrichedPostageBatch } from '../../providers/Stamps'
 import { beeApi } from '../../services/bee'
 import CreatePostageStamp from '../stamps/CreatePostageStampModal'
 import SelectStamp from './SelectStamp'
@@ -20,16 +19,16 @@ export default function Files(): ReactElement {
   const [uploadReference, setUploadReference] = useState('')
   const [isUploadingFile, setIsUploadingFile] = useState(false)
 
-  const [selectedStamp, setSelectedStamp] = useState<PostageBatch | null>(null)
+  const [selectedStamp, setSelectedStamp] = useState<EnrichedPostageBatch | null>(null)
 
   const { isLoading, error, stamps } = useContext(Context)
   const { enqueueSnackbar } = useSnackbar()
 
-  // Choose a postage stamp that has the lowest utilization
+  // Choose a postage stamp that has the lowest usage
   useEffect(() => {
     if (!selectedStamp && stamps && stamps.length > 0) {
       const stamp = stamps.reduce((prev, curr) => {
-        if (curr.utilization < prev.utilization) return curr
+        if (curr.usage < prev.usage) return curr
 
         return prev
       }, stamps[0])
@@ -70,7 +69,7 @@ export default function Files(): ReactElement {
               <small>
                 with Postage Stamp{' '}
                 <Chip
-                  avatar={<Avatar>{selectedStamp.utilization}</Avatar>}
+                  avatar={<Avatar>{selectedStamp.usageText}</Avatar>}
                   label={<PeerDetailDrawer peerId={selectedStamp.batchID} characterLength={6} />}
                   deleteIcon={<ClipboardCopy value={selectedStamp.batchID} />}
                   onDelete={() => {} /* eslint-disable-line*/}

src/pages/stamps/StampsTable.tsx

@@ -1,10 +1,9 @@
-import type { ReactElement } from 'react'
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Table, TableBody, TableCell, TableContainer, TableRow, TableHead, Paper } from '@material-ui/core'
+import type { ReactElement } from 'react'
-
 import ClipboardCopy from '../../components/ClipboardCopy'
 import PeerDetailDrawer from '../../components/PeerDetail'
-import { PostageBatch } from '@ethersphere/bee-js'
+import { EnrichedPostageBatch } from '../../providers/Stamps'
 
 const useStyles = makeStyles({
   table: {
@@ -16,7 +15,7 @@ const useStyles = makeStyles({
   },
 })
 interface Props {
-  postageStamps: PostageBatch[] | null
+  postageStamps: EnrichedPostageBatch[] | null
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
@@ -29,11 +28,11 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
         <TableHead>
           <TableRow>
             <TableCell>Batch ID</TableCell>
-            <TableCell align="right">Utilization</TableCell>
+            <TableCell align="right">Usage</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {postageStamps.map(({ batchID, utilization }) => (
+          {postageStamps.map(({ batchID, usageText }) => (
             <TableRow key={batchID}>
               <TableCell>
                 <div style={{ display: 'flex' }}>
@@ -43,7 +42,7 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
                   <ClipboardCopy value={batchID} />
                 </div>
               </TableCell>
-              <TableCell className={classes.values}>{utilization}</TableCell>
+              <TableCell className={classes.values}>{usageText}</TableCell>
             </TableRow>
           ))}
         </TableBody>

src/providers/Stamps.tsx

@@ -2,8 +2,13 @@ import { PostageBatch } from '@ethersphere/bee-js'
 import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
 import { beeApi } from '../services/bee'
 
+export interface EnrichedPostageBatch extends PostageBatch {
+  usage: number
+  usageText: string
+}
+
 interface ContextInterface {
-  stamps: PostageBatch[] | null
+  stamps: EnrichedPostageBatch[] | null
   error: Error | null
   isLoading: boolean
   lastUpdate: number | null
@@ -29,8 +34,21 @@ interface Props {
   children: ReactChild
 }
 
+function enrichStamp(postageBatch: PostageBatch): EnrichedPostageBatch {
+  const { depth, bucketDepth, utilization } = postageBatch
+
+  const usage = utilization / Math.pow(2, depth - bucketDepth)
+  const usageText = `${Math.ceil(usage * 100)}%`
+
+  return {
+    ...postageBatch,
+    usage,
+    usageText,
+  }
+}
+
 export function Provider({ children }: Props): ReactElement {
-  const [stamps, setStamps] = useState<PostageBatch[] | null>(initialValues.stamps)
+  const [stamps, setStamps] = useState<EnrichedPostageBatch[] | null>(initialValues.stamps)
   const [error, setError] = useState<Error | null>(initialValues.error)
   const [isLoading, setIsLoading] = useState<boolean>(initialValues.isLoading)
   const [lastUpdate, setLastUpdate] = useState<number | null>(initialValues.lastUpdate)
@@ -44,7 +62,7 @@ export function Provider({ children }: Props): ReactElement {
       setIsLoading(true)
       const stamps = await beeApi.stamps.getPostageStamps()
 
-      setStamps(stamps)
+      setStamps(stamps.map(enrichStamp))
       setLastUpdate(Date.now())
     } catch (e) {
       setError(e)