From 6f645dc6c357cb9d86cec15e454b361bc871bec6 Mon Sep 17 00:00:00 2001 From: Cafe137 <77121044+Cafe137@users.noreply.github.com> Date: Sat, 19 Jun 2021 19:04:11 +0200 Subject: [PATCH] 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 | 14 +++++++------- src/pages/files/Upload.tsx | 11 +++++------ src/pages/stamps/StampsTable.tsx | 15 +++++++-------- src/providers/Stamps.tsx | 24 +++++++++++++++++++++--- 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/pages/files/SelectStamp.tsx b/src/pages/files/SelectStamp.tsx index 7449343..ee8d954 100644 --- a/src/pages/files/SelectStamp.tsx +++ b/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 { PostageBatch } from '@ethersphere/bee-js' +import React, { ReactElement } from 'react' import PeerDetailDrawer from '../../components/PeerDetail' +import { EnrichedPostageBatch } from '../../providers/Stamps' interface Props { - stamps: PostageBatch[] | null - selectedStamp: PostageBatch | null - setSelected: (stamp: PostageBatch) => void + stamps: EnrichedPostageBatch[] | null + selectedStamp: EnrichedPostageBatch | null + 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} > - {stamp.utilization} + {stamp.usageText} ))} diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx index 9f6a2c3..3c5acb3 100644 --- a/src/pages/files/Upload.tsx +++ b/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(null) + const [selectedStamp, setSelectedStamp] = useState(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 { with Postage Stamp{' '} {selectedStamp.utilization}} + avatar={{selectedStamp.usageText}} label={} deleteIcon={} onDelete={() => {} /* eslint-disable-line*/} diff --git a/src/pages/stamps/StampsTable.tsx b/src/pages/stamps/StampsTable.tsx index 838fa56..9bd2b2d 100644 --- a/src/pages/stamps/StampsTable.tsx +++ b/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 { Batch ID - Utilization + Usage - {postageStamps.map(({ batchID, utilization }) => ( + {postageStamps.map(({ batchID, usageText }) => (
@@ -43,7 +42,7 @@ function StampsTable({ postageStamps }: Props): ReactElement | null {
- {utilization} + {usageText} ))} diff --git a/src/providers/Stamps.tsx b/src/providers/Stamps.tsx index 9c2ad8a..e0b4baf 100644 --- a/src/providers/Stamps.tsx +++ b/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(initialValues.stamps) + const [stamps, setStamps] = useState(initialValues.stamps) const [error, setError] = useState(initialValues.error) const [isLoading, setIsLoading] = useState(initialValues.isLoading) const [lastUpdate, setLastUpdate] = useState(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)