/
uploadStatusCell.js
48 lines (39 loc) · 1.38 KB
/
uploadStatusCell.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { BsFillInfoCircleFill } from 'react-icons/bs';
import Tooltip from 'ZeroComponents/tooltip/tooltip';
export const PinStatus = {
PINNED: 'Pinned',
PINNING: 'Pinning',
PIN_QUEUED: 'PinQueued',
QUEUING: 'Queuing...',
};
/**
* @typedef {import('web3.storage').Pin} Pin
*/
/**
* @type {import('react').FC}
* @param {object} props
* @param {Pin[]} props.pins All pin data for the upload.
* @param {object} props.statusMessages Status message strings for the status tooltip.
* @returns
*/
function UploadStatusTableRenderer({ pins, statusMessages }) {
if (!pins) {
// TODO: Ensure we return something to convey to the user no pins are on this upload.
return <span></span>;
}
const status = Object.values(PinStatus).find(status => pins.some(pin => status === pin.status)) || PinStatus.QUEUING;
const statusTooltips = {
[PinStatus.QUEUING]: statusMessages.queuing,
[PinStatus.PIN_QUEUED]: statusMessages.pin_queued,
[PinStatus.PINNING]: statusMessages.pinning,
[PinStatus.PINNED]: statusMessages.pinned.replace('*numberOfPins*', `${pins.length}`),
};
const statusTooltip = statusTooltips[status];
const tooltip = statusTooltip ? <Tooltip icon={<BsFillInfoCircleFill />} content={statusTooltip} /> : null;
return (
<span>
{status === PinStatus.PINNED ? 'Complete' : status} {tooltip}
</span>
);
}
export default UploadStatusTableRenderer;