sometimes show sponsors by monthly amount (#4058)

* sometimes show sponsors by monthly amount

grab monthly sponsoring from transactions
allow to choose between monthly and total display

* Update src/components/Splash/Splash.jsx

Co-authored-by: Sam Chen <chenxsan@gmail.com>

Co-authored-by: Fernando Montoya <montogeek@gmail.com>
Co-authored-by: Sam Chen <chenxsan@gmail.com>

Author: 3 people

src/components/Splash/Splash.jsx

@@ -23,7 +23,7 @@ const SponsorsPlaceholder = () => (
     <h2>Latest Sponsors</h2>
     <PlaceholderComponent />
 
-    <h2 id="sponsors">Platinum Sponsors</h2>
+    <h2>Platinum Sponsors</h2>
     <PlaceholderComponent />
 
     <h2>Gold Sponsors</h2>
@@ -42,6 +42,7 @@ const SponsorsPlaceholder = () => (
 
 const Splash = () => {
   const [showSponsors, setShowSponsors] = useState(false);
+  const [supportType, setSupportType] = useState(() => Math.random() < 0.33 ? 'monthly' : 'total');
   useEffect(() => {
     if(isClient) setShowSponsors(true);
   }, []);
@@ -62,7 +63,7 @@ const Splash = () => {
       <div className="splash__section page__content">
         <Container>
           <Markdown>
-            <h1>Support the Team</h1>
+            <h1 id="sponsors">Support the Team</h1>
 
             <p>
               Through contributions, donations, and sponsorship, you allow webpack to thrive. Your
@@ -72,23 +73,19 @@ const Splash = () => {
 
             { showSponsors ? (
               <React.Suspense fallback={<SponsorsPlaceholder />}>
-                <h2>Latest Sponsors</h2>
-                <Support rank="latest" />
+                <p><label><input type="checkbox" checked={supportType === 'monthly'} onChange={e => setSupportType(e.target.checked ? 'monthly' : 'total')} /> Show sponsors by their average monthly amount of sponsoring in the last year.</label></p>
 
-                <h2 id="sponsors">Platinum Sponsors</h2>
-                <Support rank="platinum" />
+                <Support type={supportType} rank="latest" />
 
-                <h2>Gold Sponsors</h2>
-                <Support rank="gold" />
+                <Support type={supportType} rank="platinum" />
 
-                <h2>Silver Sponsors</h2>
-                <Support rank="silver" />
+                <Support type={supportType} rank="gold" />
 
-                <h2>Bronze Sponsors</h2>
-                <Support rank="bronze" />
+                <Support type={supportType} rank="silver" />
 
-                <h2>Backers</h2>
-                <Support rank="backer" />
+                <Support type={supportType} rank="bronze" />
+
+                <Support type={supportType} rank="backer" />
               </React.Suspense>
             ) : (
               <SponsorsPlaceholder />

src/components/Support/AdditionalSupporters.js

@@ -7,20 +7,23 @@ export default [
     avatar: 'https://static.moonmail.io/moonmail-logo.svg',
     website: 'https://moonmail.io/?utm_source=webpack.js.org',
     totalDonations: 11000,
+    monthlyDonations: 0,
     reason: 'Paypal'
   },
   {
     name: 'Google Angular',
     avatar: 'https://res.cloudinary.com/opencollective/image/upload/v1485288529/angular_uxllte.png',
     website: 'https://angular.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship',
     totalDonations: 250000,
+    monthlyDonations: 0,
     reason: 'Paypal'
   },
   {
     name: 'Architects.io',
     avatar: null,
     website: 'http://architects.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship',
     totalDonations: 30000,
+    monthlyDonations: 0,
     reason: 'Paypal'
   },
   {
@@ -29,13 +32,15 @@ export default [
     avatar: 'https://opencollective-production.s3-us-west-1.amazonaws.com/e8a1de10-99c8-11e6-8650-f92e594d5de8.png',
     website: 'https://peerigon.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship',
     totalDonations: 144139,
+    monthlyDonations: 0,
     reason: 'webpack meetup 2017-07'
   },
   {
     name: 'Segment',
     avatar: SegmentLogo,
     website: 'https://segment.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship',
     totalDonations: 2400000,
+    monthlyDonations: 0,
     reason: 'Sponsorship 2017-07 - 2017-09'
   }
 ];

src/components/Support/Support.jsx

@@ -27,7 +27,7 @@ for(const additional of Additional) {
 SUPPORTERS.sort((a, b) => b.totalDonations - a.totalDonations);
 
 // Define ranks
-const ranks = {
+const totalRanks = {
   backer: {
     maximum: 200,
     random: 100
@@ -52,6 +52,31 @@ const ranks = {
     minimum: 50000
   }
 };
+const monthlyRanks = {
+  backer: {
+    maximum: 10,
+    random: 100
+  },
+  latest: {
+    maxAge: 14 * 24 * 60 * 60 * 1000,
+    limit: 10
+  },
+  bronze: {
+    minimum: 10,
+    maximum: 100
+  },
+  silver: {
+    minimum: 100,
+    maximum: 500
+  },
+  gold: {
+    minimum: 500,
+    maximum: 2500
+  },
+  platinum: {
+    minimum: 2500
+  }
+};
 
 function formatMoney(number) {
   let str = Math.round(number) + '';
@@ -68,20 +93,23 @@ export default class Support extends React.Component {
   }
 
   handleInView = (inView) => {
-    if (!inView) {
+    if (!inView || this.state.inView) {
       return;
     }
     this.setState({ inView });
   };
 
   render() {
-    let { rank } = this.props;
+    let { rank, type } = this.props;
 
     const { inView } = this.state;
 
     let supporters = SUPPORTERS;
     let minimum, maximum, maxAge, limit, random;
 
+    const ranks = type === 'monthly' ? monthlyRanks : totalRanks;
+    const getAmount = type === 'monthly' ? item => item.monthlyDonations : item => item.totalDonations;
+
     if (rank && ranks[rank]) {
       minimum = ranks[rank].minimum;
       maximum = ranks[rank].maximum;
@@ -91,11 +119,11 @@ export default class Support extends React.Component {
     }
 
     if (typeof minimum === 'number') {
-      supporters = supporters.filter(item => item.totalDonations >= minimum * 100);
+      supporters = supporters.filter(item => getAmount(item) >= minimum * 100);
     }
 
     if (typeof maximum === 'number') {
-      supporters = supporters.filter(item => item.totalDonations < maximum * 100);
+      supporters = supporters.filter(item => getAmount(item) < maximum * 100);
     }
 
     if (typeof maxAge === 'number') {
@@ -116,12 +144,13 @@ export default class Support extends React.Component {
         supporters[i] = temp;
       }
       supporters = supporters.slice(0, random);
-
-      // resort to keep order
-      supporters.sort((a, b) => b.totalDonations - a.totalDonations);
     }
 
-    return (
+    // resort to keep order
+    supporters.sort((a, b) => getAmount(b) - getAmount(a));
+
+    return <>
+      <h2>{ rank === 'backer' ? 'Backers' : rank === 'latest' ? 'Latest Sponsors' : `${rank[0].toUpperCase()}${rank.slice(1)} ${type === 'monthly' ? 'Monthly ' : ''}Sponsors`}</h2>
       <VisibilitySensor delayedCall
         partialVisibility
         intervalDelay={ 300 }
@@ -136,8 +165,12 @@ export default class Support extends React.Component {
               <p>The following persons/organizations made their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days (limited to the top {limit}).</p>
             ) : (
               <p>
-                <b className="support__rank">{ rank } sponsors</b>
-                <span>are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.</span>
+                <b className="support__rank">{ type === 'monthly' ? rank + ' monthly': rank } sponsors</b>
+                { type === 'monthly' ? (
+                  <span>are those who are currently pledging { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } monthly to webpack.</span>
+                ) : (
+                  <span>are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.</span>
+                ) }
               </p>
             )}
           </div>
@@ -146,7 +179,7 @@ export default class Support extends React.Component {
             supporters.map((supporter, index) => (
               <a key={ supporter.slug || index }
                 className="support__item"
-                title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
+                title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug} ($${formatMoney(supporter.monthlyDonations / 100)} monthly)` }
                 target="_blank"
                 rel="noopener nofollow"
                 href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
@@ -166,7 +199,7 @@ export default class Support extends React.Component {
           </div>
         </div>
       </VisibilitySensor>
-    );
+    </>;
   }
 
   /**
@@ -176,6 +209,7 @@ export default class Support extends React.Component {
    */
   _handleImgError(e) {
     const imgNode = e.target;
-    imgNode.src = SmallIcon;
+    if (imgNode.getAttribute('src') === SmallIcon) return;
+    imgNode.setAttribute('src', SmallIcon);
   }
 }

src/utilities/fetch-supporters.js

@@ -13,14 +13,11 @@ const absoluteFilename = path.resolve(__dirname, '..', 'components', 'Support',
 
 const graphqlEndpoint = 'https://api.opencollective.com/graphql/v2';
 
-const graphqlQuery = `query account($limit: Int, $offset: Int) {
+const membersGraphqlQuery = `query account($limit: Int, $offset: Int) {
   account(slug: "webpack") {
-    orders(limit: $limit, offset: $offset) {
-      limit
-      offset
-      totalCount
+    members(limit: $limit, offset: $offset) {
       nodes {
-        fromAccount {
+        account {
           name
           slug
           website
@@ -35,67 +32,104 @@ const graphqlQuery = `query account($limit: Int, $offset: Int) {
   }
 }`;
 
-const graphqlPageSize = 1000;
+const transactionsGraphqlQuery = `query account($limit: Int, $offset: Int) {
+  account(slug: "webpack") {
+    transactions(limit: $limit, offset: $offset, includeIncognitoTransactions: false) {
+      nodes {
+        amountInHostCurrency {
+          value
+        }
+        fromAccount {
+          name
+          slug
+          website
+          imageUrl
+        }
+        createdAt
+      }
+    }
+  }
+}`;
+
+const graphqlPageSize = 5000;
 
 const nodeToSupporter = node => ({
-  name: node.fromAccount.name,
-  slug: node.fromAccount.slug,
-  website: node.fromAccount.website,
-  avatar: node.fromAccount.imageUrl,
+  name: node.account.name,
+  slug: node.account.slug,
+  website: node.account.website,
+  avatar: node.account.imageUrl,
   firstDonation: node.createdAt,
-  totalDonations: node.totalDonations.value * 100
+  totalDonations: node.totalDonations.value * 100,
+  monthlyDonations: 0
 });
 
-const getAllOrders = async () => {
+const getAllNodes = async (graphqlQuery, getNodes) => {
   const requestOptions = {
     method: 'POST',
     uri: graphqlEndpoint,
     body: { query: graphqlQuery, variables: { limit: graphqlPageSize, offset: 0 } },
     json: true
   };
 
-  let allOrders = [];
+  let allNodes = [];
 
-  // Handling pagination if necessary (2 pages for ~1400 results in May 2019)
+  // Handling pagination if necessary
   // eslint-disable-next-line
   while (true) {
     const result = await request(requestOptions);
-    const orders = result.data.account.orders.nodes;
-    allOrders = [...allOrders, ...orders];
+    const nodes = getNodes(result.data);
+    allNodes = [...allNodes, ...nodes];
     requestOptions.body.variables.offset += graphqlPageSize;
-    if (orders.length < graphqlPageSize) {
-      return allOrders;
+    if (nodes.length < graphqlPageSize) {
+      return allNodes;
     }
   }
 };
 
-getAllOrders()
-  .then(orders => {
-    let supporters = orders.map(nodeToSupporter).sort((a, b) => b.totalDonations - a.totalDonations);
+const oneYearAgo = Date.now() - 365 * 24 * 60 * 60 * 1000;
 
-    // Deduplicating supporters with multiple orders
-    supporters = uniqBy(supporters, 'slug');
+(async () => {
+  const members = await getAllNodes(membersGraphqlQuery, data => data.account.members.nodes);
+  let supporters = members.map(nodeToSupporter).sort((a, b) => b.totalDonations - a.totalDonations);
 
-    if (!Array.isArray(supporters)) {
-      throw new Error('Supporters data is not an array.');
-    }
+  // Deduplicating supporters with multiple orders
+  supporters = uniqBy(supporters, 'slug');
 
-    for (const item of supporters) {
-      for (const key of REQUIRED_KEYS) {
-        if (!item || typeof item !== 'object') {
-          throw new Error(`Supporters: ${JSON.stringify(item)} is not an object.`);
-        }
-        if (!(key in item)) {
-          throw new Error(`Supporters: ${JSON.stringify(item)} doesn't include ${key}.`);
-        }
+  const supportersBySlug = new Map();
+  for (const supporter of supporters) {
+    for (const key of REQUIRED_KEYS) {
+      if (!supporter || typeof supporter !== 'object') {
+        throw new Error(`Supporters: ${JSON.stringify(supporter)} is not an object.`);
+      }
+      if (!(key in supporter)) {
+        throw new Error(`Supporters: ${JSON.stringify(supporter)} doesn't include ${key}.`);
       }
     }
+    supportersBySlug.set(supporter.slug, supporter);
+  }
+
+  // Calculate monthly amount from transactions
+  const transactions = await getAllNodes(transactionsGraphqlQuery, data => data.account.transactions.nodes);
+  for (const transaction of transactions) {
+    if (!transaction.amountInHostCurrency) continue;
+    const amount = transaction.amountInHostCurrency.value;
+    if (!amount || amount <= 0) continue;
+    const date = +new Date(transaction.createdAt);
+    if (date < oneYearAgo) continue;
+    const supporter = supportersBySlug.get(transaction.fromAccount.slug);
+    if (!supporter) continue;
+    supporter.monthlyDonations += amount * 100 / 12;
+  }
 
-    // Write the file
-    return asyncWriteFile(absoluteFilename, JSON.stringify(supporters, null, 2)).then(() =>
-      console.log(`Fetched 1 file: ${filename}`)
-    );
-  })
-  .catch(error => {
-    console.error('utilities/fetch-supporters:', error);
-  });
+  for (const supporter of supporters) {
+    supporter.monthlyDonations = Math.round(supporter.monthlyDonations);
+  }
+
+  // Write the file
+  return asyncWriteFile(absoluteFilename, JSON.stringify(supporters, null, 2)).then(() =>
+    console.log(`Fetched 1 file: ${filename}`)
+  );
+})().catch(error => {
+  console.error('utilities/fetch-supporters:', error);
+  process.exitCode = 1;
+});