diff --git a/src/pages/Leaderboard/Leaderboard.tsx b/src/pages/Leaderboard/Leaderboard.tsx index 7016de1b..74f36bd8 100644 --- a/src/pages/Leaderboard/Leaderboard.tsx +++ b/src/pages/Leaderboard/Leaderboard.tsx @@ -1,7 +1,4 @@ -import { useCache, useMemo, useState } from "alem"; -import DonateSDK from "@app/SDK/donate"; -import PotSDK from "@app/SDK/pot"; -import PotFactorySDK from "@app/SDK/potfactory"; +import { useEffect, useMemo, useState } from "alem"; import Dropdown from "@app/components/Inputs/Dropdown/Dropdown"; import calcNetDonationAmount from "@app/utils/calcNetDonationAmount"; import filterByDate from "@app/utils/filterByDate"; @@ -9,6 +6,7 @@ import DonorsCards from "./components/DonorsCards/DonorsCards"; import DonorsLeaderboard from "./components/DonorsLeaderboard/DonorsLeaderboard"; import DonorsTrx from "./components/DonorsTrx/DonorsTrx"; import { Container, Filter, LoadingWrapper, Tabs } from "./styles"; +import { filterOptions, getDirectDoonations, getSponsors } from "./utils"; const Leaderboard = () => { const Loading = () => Loading...; @@ -17,72 +15,34 @@ const Leaderboard = () => { const [title, setTitle] = useState(""); const [filter, setFilter] = useState(""); const [allDonationsFetched, setAllDonationsFetched] = useState(false); - const [fetchDonationsError, setFetchDonationsError] = useState(""); + const [directDonations, setDirectDonations] = useState(null); + const [allSponsors, setAllSponsors] = useState(null); - const direct_donations_count = useMemo(() => { - const data = DonateSDK.getConfig(); - return data.total_donations_count; + useEffect(() => { + if (!directDonations) getDirectDoonations(setDirectDonations); + if (!allSponsors) getSponsors(setAllSponsors); }, []); - const getSponsorshipDonations = (potId: string) => PotSDK.asyncGetMatchingPoolDonations(potId); - - // Get Sponsorship Donations - const allSponsors = useCache(() => { - return PotFactorySDK.asyncGetPots() - .then((pots: any) => { - if (pots) { - const sponsors = pots.map(({ id }: any) => getSponsorshipDonations(id)); - return Promise.all(sponsors).then((allSponsors) => { - const sumUpSponsors = allSponsors.flat().reduce((accumulator: any, currentDonation: any) => { - accumulator[currentDonation.donor_id] = { - amount: (accumulator[currentDonation.donor_id].amount || 0) + calcNetDonationAmount(currentDonation), - ...currentDonation, - }; - return accumulator; - }, {}); - - return Object.values(sumUpSponsors); - }); - } else return []; - }) - .catch((err: any) => { - console.log("error fetching pots ", err); - - return []; - }); - }, "sponsors-funding"); - - // filter Sponsorship Donations by time const sponsors = useMemo(() => { if (allSponsors) { let sponsors = allSponsors.filter((donation: any) => filterByDate(filter, donation)); - sponsors = allSponsors.sort((a: any, b: any) => b.amount - a.amount); - return sponsors; - } - }, [allSponsors, filter]); - - // Get Direct Donations - const allDonationsPaginated = useCache(() => { - const limit = 900; // number of donations to fetch per req - const paginations = [...Array(Math.ceil(direct_donations_count / limit)).keys()]; - - try { - const allDonations = paginations.map((index) => DonateSDK.asyncGetDonations(limit * index, limit)); + sponsors = sponsors.reduce((accumulator: any, currentDonation: any) => { + accumulator[currentDonation.donor_id] = { + amount: (accumulator[currentDonation.donor_id].amount || 0) + calcNetDonationAmount(currentDonation), + ...currentDonation, + }; + return accumulator; + }, {}); - return Promise.all(allDonations); - } catch (error: any) { - console.error(`error getting direct donations`, error); - setFetchDonationsError(error); - return Promise.all([]); + return Object.values(sponsors).sort((a: any, b: any) => b.amount - a.amount); } - }, "direct-donations"); + }, [allSponsors, filter]); // Filter direct donations by time filter const [allDonations, sortedDonations] = useMemo(() => { - if (allDonationsPaginated) { - let donations = allDonationsPaginated.flat(); - donations = donations.filter((donation: any) => filterByDate(filter, donation)); + if (directDonations) { + const donations = directDonations.filter((donation: any) => filterByDate(filter, donation)); const totalsByDonor: any = donations.reduce((accumulator: any, currentDonation: any) => { accumulator[currentDonation.donor_id] = { amount: @@ -98,15 +58,7 @@ const Leaderboard = () => { } else { return [[], []]; } - }, [allDonationsPaginated, filter]); - - const filterOptions = [ - { text: "All Time", value: "all" }, - { text: "1Y", value: "year" }, - { text: "1M", value: "month" }, - { text: "1W", value: "week" }, - { text: "24H", value: "day" }, - ]; + }, [directDonations, filter]); const MenuItem = ({ count, children, className }: any) => (
@@ -124,7 +76,7 @@ const Leaderboard = () => { { label: "Sponsors Leaderboard", val: "sponsors", - count: sponsors.length, + count: sponsors?.length || 0, }, { label: "Donor Feed", @@ -151,12 +103,7 @@ const Leaderboard = () => { return ( - {fetchDonationsError ? ( -
-

Error fetching donations

-

{fetchDonationsError}

-
- ) : !allDonationsFetched ? ( + {!allDonationsFetched ? ( ) : ( <> diff --git a/src/pages/Leaderboard/components/DonorsCards/DonorsCards.tsx b/src/pages/Leaderboard/components/DonorsCards/DonorsCards.tsx index ffe0cd7b..03134a53 100644 --- a/src/pages/Leaderboard/components/DonorsCards/DonorsCards.tsx +++ b/src/pages/Leaderboard/components/DonorsCards/DonorsCards.tsx @@ -80,7 +80,9 @@ const DonorsCards = (props: { currentTab: string; sortedDonations: any; sponsors }, ]; - return
{leaderboard.map((donor) => (donor.id ? : ""))}
; + return ( +
{leaderboard.map((donor) => (donor.id ? : ""))}
+ ); }; export default DonorsCards; diff --git a/src/pages/Leaderboard/utils.ts b/src/pages/Leaderboard/utils.ts new file mode 100644 index 00000000..e70701ef --- /dev/null +++ b/src/pages/Leaderboard/utils.ts @@ -0,0 +1,77 @@ +import { Storage } from "alem"; +import DonateSDK from "@app/SDK/donate"; +import PotSDK from "@app/SDK/pot"; +import PotFactorySDK from "@app/SDK/potfactory"; + +type UpdateState = (newValues: any) => void; + +const getStorage = (property: string) => Storage.get(`${property}`); + +const setStorage = (property: string, value: any) => Storage.set(`${property}`, value); + +// Get Direct Donations +export const getDirectDoonations = (updateState: UpdateState) => { + const key = "direct-donations"; + const limit = 900; // number of donations to fetch per req + + const savedDonations = getStorage(key); + + if (savedDonations) updateState(savedDonations); + + DonateSDK.asyncGetConfig().then(({ total_donations_count }) => { + const paginations = [...Array(Math.ceil(total_donations_count / limit)).keys()]; + + try { + const allDonations = paginations.map((index) => DonateSDK.asyncGetDonations(limit * index, limit)); + + Promise.all(allDonations).then((allDonationsPaginated) => { + const donations = allDonationsPaginated.flat(); + if (donations.length !== savedDonations.length) { + updateState(donations); + setStorage(key, donations); + } + }); + } catch (error: any) { + updateState([]); + console.error(`error getting direct donations`, error); + } + }); +}; + +// Get Sponsorship Donations +export const getSponsors = (updateState: UpdateState) => { + const key = "sponsors"; + + const savedDonations = getStorage(key); + + if (savedDonations) updateState(savedDonations); + + PotFactorySDK.asyncGetPots() + .then((pots: any) => { + if (pots) { + const sponsors = pots.map(({ id }: any) => PotSDK.asyncGetMatchingPoolDonations(id)); + return Promise.all(sponsors).then((allSponsors) => { + const sponsors = allSponsors.flat(); + + sponsors.sort((a: any, b: any) => b.amount - a.amount); + + if (sponsors.length !== savedDonations.length) { + updateState(sponsors); + setStorage(key, sponsors); + } + }); + } + }) + .catch((err: any) => { + updateState([]); + console.error(`error getting direct donations`, err); + }); +}; + +export const filterOptions = [ + { text: "All Time", value: "all" }, + { text: "1Y", value: "year" }, + { text: "1M", value: "month" }, + { text: "1W", value: "week" }, + { text: "24H", value: "day" }, +];