Merge branch 'master' into ivo/nginx_passes_apikey

This commit is contained in:
Karol Wypchło 2022-03-15 21:49:02 +01:00 committed by GitHub
commit 15ac008772
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 178 additions and 63 deletions

View File

@ -2,7 +2,8 @@ import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useUser } from "../../contexts/user";
import useSubscriptionPlans from "../../hooks/useSubscriptionPlans";
import useActivePlan from "../../hooks/useActivePlan";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import LatestPayment from "./LatestPayment";
import SuggestedPlan from "./SuggestedPlan";
@ -11,13 +12,10 @@ dayjs.extend(relativeTime);
const CurrentPlan = () => {
const { user, error: userError } = useUser();
const { activePlan, plans, error: plansError } = useSubscriptionPlans(user);
const { plans, activePlan, error: plansError } = useActivePlan(user);
if (!user || !activePlan) {
return (
// TODO: a nicer loading indicator
<div className="flex flex-col space-y-4 h-full justify-center items-center">Loading...</div>
);
return <ContainerLoadingIndicator />;
}
if (userError || plansError) {

View File

@ -1,24 +1,50 @@
import * as React from "react";
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";
// TODO: get real data
const useUsageData = () => ({
files: {
used: 19_521,
limit: 20_000,
},
storage: {
used: 23_000_000_000,
limit: 1_000_000_000_000,
},
const useUsageData = () => {
const { user } = useUser();
const { activePlan, error } = useActivePlan(user);
const { data: stats, error: statsError } = useSWR("user/stats");
const [loading, setLoading] = useState(true);
const [usage, setUsage] = useState({});
const hasError = error || statsError;
const hasData = activePlan && stats;
useEffect(() => {
if (hasData || hasError) {
setLoading(false);
}
if (hasData && !hasError) {
setUsage({
filesUsed: stats?.numUploads,
filesLimit: activePlan?.limits?.maxNumberUploads,
storageUsed: stats?.totalUploadsSize,
storageLimit: activePlan?.limits?.storageLimit,
});
}
}, [hasData, hasError, stats, activePlan]);
return {
error: error || statsError,
loading,
usage,
};
};
const size = (bytes) => {
const text = fileSize(bytes, { maximumFractionDigits: 1 });
const text = fileSize(bytes ?? 0, { maximumFractionDigits: 0 });
const [value, unit] = text.split(" ");
return {
@ -28,12 +54,26 @@ const size = (bytes) => {
};
};
export default function CurrentUsage() {
const { files, storage } = useUsageData();
const ErrorMessage = () => (
<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);
const storageLimit = size(storage.limit);
const filesUsedLabel = React.useMemo(() => ({ value: files.used, unit: "files" }), [files.used]);
export default function CurrentUsage() {
const { usage, error, loading } = useUsageData();
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 (
<>
@ -41,7 +81,7 @@ export default function CurrentUsage() {
{storageUsage.text} of {storageLimit.text}
</h4>
<p className="text-palette-400">
{files.used} of {files.limit} files
{usage.filesUsed} of {usage.filesLimit} files
</p>
<div className="relative mt-7 font-sans uppercase text-xs">
<div className="flex place-content-between">
@ -49,8 +89,8 @@ export default function CurrentUsage() {
<span>{storageLimit.text}</span>
</div>
<UsageGraph>
<GraphBar value={storage.used} limit={storage.limit} label={storageUsage} />
<GraphBar value={files.used} limit={files.limit} label={filesUsedLabel} />
<GraphBar value={usage.storageUsed} limit={usage.storageLimit} label={storageUsage} />
<GraphBar value={usage.filesUsed} limit={usage.filesLimit} label={filesUsedLabel} />
</UsageGraph>
<div className="flex place-content-between">
<span>Files</span>
@ -62,7 +102,7 @@ export default function CurrentUsage() {
UPGRADE
</Link>{" "}
{/* TODO: proper URL */}
<span>{files.limit}</span>
<span>{usage.filesLimit}</span>
</span>
</div>
</div>

View File

@ -2,6 +2,7 @@ import * as React from "react";
import useSWR from "swr";
import { Table, TableBody, TableCell, TableRow } from "../Table";
import { ContainerLoadingIndicator } from "../LoadingIndicator";
import useFormattedActivityData from "./useFormattedActivityData";
@ -12,10 +13,10 @@ export default function ActivityTable({ type }) {
if (!items.length) {
return (
<div className="flex w-full h-full justify-center items-center text-palette-400">
{/* TODO: proper loading indicator / error message */}
{!data && !error && <p>Loading...</p>}
{/* TODO: proper error message */}
{!data && !error && <ContainerLoadingIndicator />}
{!data && error && <p>An error occurred while loading this data.</p>}
{data && <p>No files found.</p>}
{data && !error && <p>No files found.</p>}
</div>
);
}

View File

@ -23,7 +23,7 @@ export default function LatestActivity() {
<Tab id="uploads" title="Uploads" />
<Tab id="downloads" title="Downloads" />
<TabPanel tabId="uploads" className="pt-4">
<ActivityTable type="uplodads" />
<ActivityTable type="uploads" />
<ViewAllLink to="/files?tab=uploads" />
</TabPanel>
<TabPanel tabId="downloads" className="pt-4">

View File

@ -0,0 +1,18 @@
import styled from "styled-components";
import { CircledProgressIcon } from "../Icons";
/**
* This loading indicator is designed to be replace entire blocks (i.e. components)
* while they are fetching required data.
*
* It will take 50% of the parent's height, but won't get bigger than 150x150 px.
*/
const Wrapper = styled.div.attrs({
className: "flex w-full h-full justify-center items-center p-8 text-palette-100",
})``;
export const ContainerLoadingIndicator = (props) => (
<Wrapper {...props}>
<CircledProgressIcon size="50%" className="max-w-[150px] max-h-[150px] animate-[spin_3s_linear_infinite]" />
</Wrapper>
);

View File

@ -0,0 +1 @@
export * from "./ContainerLoadingIndicator";

View File

@ -0,0 +1,7 @@
import { createContext } from "react";
export const PlansContext = createContext({
plans: [],
limits: [],
error: null,
});

View File

@ -0,0 +1,47 @@
import { useEffect, useState } from "react";
import useSWR from "swr";
import freePlan from "../../lib/tiers";
import { PlansContext } from "./PlansContext";
/**
* NOTE: this function heavily relies on the fact that each Plan's `tier`
* property corresponds to the plan's index in UserLimits array in
* skynet-accounts code.
*
* @see https://github.com/SkynetLabs/skynet-accounts/blob/7337e740b71b77e6d08016db801e293b8ad81abc/database/user.go#L53-L101
*/
const aggregatePlansAndLimits = (plans, limits) => {
const sortedPlans = [freePlan, ...plans].sort((planA, planB) => planA.tier - planB.tier);
// Decorate each plan with its corresponding limits data, if available.
if (limits?.length) {
return sortedPlans.map((plan) => ({ ...plan, limits: limits[plan.tier] || null }));
}
// If we don't have the limits data yet, set just return the plans.
return sortedPlans;
};
export const PlansProvider = ({ children }) => {
const { data: rawPlans, error: plansError } = useSWR("stripe/prices");
const { data: limits, error: limitsError } = useSWR("limits");
const [plans, setPlans] = useState([freePlan]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (plansError || limitsError) {
setLoading(false);
setError(plansError || limitsError);
} else if (rawPlans) {
setLoading(false);
setPlans(aggregatePlansAndLimits(rawPlans, limits?.userLimits));
}
}, [rawPlans, limits, plansError, limitsError]);
return <PlansContext.Provider value={{ plans, error, loading }}>{children}</PlansContext.Provider>;
};

View File

@ -0,0 +1,2 @@
export * from "./PlansProvider";
export * from "./usePlans";

View File

@ -0,0 +1,5 @@
import { useContext } from "react";
import { PlansContext } from "./PlansContext";
export const usePlans = () => useContext(PlansContext);

View File

@ -0,0 +1,22 @@
import { useEffect, useState } from "react";
import freeTier from "../lib/tiers";
import { usePlans } from "../contexts/plans";
export default function useActivePlan(user) {
const { plans, error } = usePlans();
const [activePlan, setActivePlan] = useState(freeTier);
useEffect(() => {
if (user) {
setActivePlan(plans.find((plan) => plan.tier === user.tier));
}
}, [plans, user]);
return {
error,
plans,
activePlan,
};
}

View File

@ -1,28 +0,0 @@
import { useEffect, useState } from "react";
import useSWR from "swr";
import freeTier from "../lib/tiers";
export default function useSubscriptionPlans(user) {
const { data: paidPlans, error, mutate } = useSWR("stripe/prices");
const [plans, setPlans] = useState([freeTier]);
const [activePlan, setActivePlan] = useState(freeTier);
useEffect(() => {
if (paidPlans) {
setPlans((plans) => [...plans, ...paidPlans].sort((planA, planB) => planA.tier - planB.tier));
}
}, [paidPlans]);
useEffect(() => {
if (user) {
setActivePlan(plans.find((plan) => plan.tier === user.tier));
}
}, [plans, user]);
return {
error,
mutate,
plans,
activePlan,
};
}

View File

@ -8,6 +8,7 @@ import { PageContainer } from "../components/PageContainer";
import { NavBar } from "../components/Navbar";
import { Footer } from "../components/Footer";
import { UserProvider, useUser } from "../contexts/user";
import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
const Wrapper = styled.div.attrs({
className: "min-h-screen overflow-hidden",
@ -25,7 +26,7 @@ const Layout = ({ children }) => {
<Wrapper>
{!user && (
<div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
<p>Loading...</p> {/* TODO: Do something nicer here */}
<ContainerLoadingIndicator className="!text-palette-200/50" />
</div>
)}
{user && <>{children}</>}

View File

@ -2,6 +2,7 @@ import * as React from "react";
import { useMedia } from "react-use";
import theme from "../lib/theme";
import { PlansProvider } from "../contexts/plans/PlansProvider";
import { ArrowRightIcon } from "../components/Icons";
import { Panel } from "../components/Panel";
import { Tab, TabPanel, Tabs } from "../components/Tabs";
@ -16,7 +17,7 @@ const IndexPage = () => {
const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
return (
<>
<PlansProvider>
<div className="w-full">
<Slider
slides={[
@ -60,7 +61,7 @@ const IndexPage = () => {
<LatestActivity />
</div>
)}
</>
</PlansProvider>
);
};