feat(dashboard-v2): fetch live data about current usage

This commit is contained in:
Michał Leszczyk 2022-03-04 13:53:37 +01:00
parent b060556d3c
commit 5fec31a3a5
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 58 additions and 22 deletions

View File

@ -1,24 +1,46 @@
import * as React from "react"; import { useEffect, useMemo, useState } from "react";
import fileSize from "pretty-bytes"; import fileSize from "pretty-bytes";
import { Link } from "gatsby"; import { Link } from "gatsby";
import useSWR from "swr";
import { useUser } from "../../contexts/user";
import useActivePlan from "../../hooks/useActivePlan";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import { GraphBar } from "./GraphBar"; import { GraphBar } from "./GraphBar";
import { UsageGraph } from "./UsageGraph"; import { UsageGraph } from "./UsageGraph";
// TODO: get real data const useUsageData = () => {
const useUsageData = () => ({ const { user } = useUser();
files: { const { activePlan, error } = useActivePlan(user);
used: 19_521, const [loading, setLoading] = useState(true);
limit: 20_000, const { data: stats, error: statsError } = useSWR("user/stats");
}, const [usage, setUsage] = useState({});
storage: {
used: 23_000_000_000, useEffect(() => {
limit: 1_000_000_000_000, if ((activePlan && stats) || error || statsError) {
}, setLoading(false);
}
if (activePlan && stats && !error && !statsError) {
setUsage({
filesUsed: stats?.numUploads,
filesLimit: activePlan?.limits?.maxNumberUploads,
storageUsed: stats?.totalUploadsSize,
storageLimit: activePlan?.limits?.storageLimit,
}); });
}
}, [activePlan, stats, error, statsError]);
return {
error: error || statsError,
loading,
usage,
};
};
const size = (bytes) => { const size = (bytes) => {
const text = fileSize(bytes, { maximumFractionDigits: 1 }); const text = fileSize(bytes ?? 0, { maximumFractionDigits: 0 });
const [value, unit] = text.split(" "); const [value, unit] = text.split(" ");
return { return {
@ -28,12 +50,26 @@ const size = (bytes) => {
}; };
}; };
export default function CurrentUsage() { const ErrorMessage = () => (
const { files, storage } = useUsageData(); <div className="flex text-palette-300 flex-col space-y-4 h-full justify-center items-center">
<p>We were not able to fetch the current usage data.</p>
<p>We'll try again automatically.</p>
</div>
);
const storageUsage = size(storage.used); export default function CurrentUsage() {
const storageLimit = size(storage.limit); const { usage, error, loading } = useUsageData();
const filesUsedLabel = React.useMemo(() => ({ value: files.used, unit: "files" }), [files.used]); const storageUsage = size(usage.storageUsed);
const storageLimit = size(usage.storageLimit);
const filesUsedLabel = useMemo(() => ({ value: usage.filesUsed, unit: "files" }), [usage.filesUsed]);
if (loading) {
return <ContainerLoadingIndicator />;
}
if (error) {
return <ErrorMessage />;
}
return ( return (
<> <>
@ -41,7 +77,7 @@ export default function CurrentUsage() {
{storageUsage.text} of {storageLimit.text} {storageUsage.text} of {storageLimit.text}
</h4> </h4>
<p className="text-palette-400"> <p className="text-palette-400">
{files.used} of {files.limit} files {usage.filesUsed} of {usage.filesLimit} files
</p> </p>
<div className="relative mt-7 font-sans uppercase text-xs"> <div className="relative mt-7 font-sans uppercase text-xs">
<div className="flex place-content-between"> <div className="flex place-content-between">
@ -49,8 +85,8 @@ export default function CurrentUsage() {
<span>{storageLimit.text}</span> <span>{storageLimit.text}</span>
</div> </div>
<UsageGraph> <UsageGraph>
<GraphBar value={storage.used} limit={storage.limit} label={storageUsage} /> <GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} />
<GraphBar value={files.used} limit={files.limit} label={filesUsedLabel} /> <GraphBar value={usage.filesUsed} limit={usage.filesLimit} label={filesUsedLabel} />
</UsageGraph> </UsageGraph>
<div className="flex place-content-between"> <div className="flex place-content-between">
<span>Files</span> <span>Files</span>
@ -62,7 +98,7 @@ export default function CurrentUsage() {
UPGRADE UPGRADE
</Link>{" "} </Link>{" "}
{/* TODO: proper URL */} {/* TODO: proper URL */}
<span>{files.limit}</span> <span>{usage.filesLimit}</span>
</span> </span>
</div> </div>
</div> </div>