import { useEffect, useMemo, useState } from "react"; import fileSize from "pretty-bytes"; 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 { UsageGraph } from "./UsageGraph"; const useUsageData = () => { const { user } = useUser(); const { activePlan, error } = useActivePlan(user); const [loading, setLoading] = useState(true); const { data: stats, error: statsError } = useSWR("user/stats"); const [usage, setUsage] = useState({}); useEffect(() => { 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 text = fileSize(bytes ?? 0, { maximumFractionDigits: 0 }); const [value, unit] = text.split(" "); return { text, value, unit, }; }; const ErrorMessage = () => (
We were not able to fetch the current usage data.
We'll try again automatically.
{usage.filesUsed} of {usage.filesLimit} files