fix(sponsors): opencollective api changed, add validation (#1622)

Author: sokra

src/components/Support/Support.jsx

@@ -1,11 +1,23 @@
 import React from 'react';
-import GoldSponsors from './support-goldsponsors.json';
-import SilverSponsors from './support-silversponsors.json';
-import Sponsors from './support-sponsors.json';
 import Backers from './support-backers.json';
 import Additional from './support-additional.js';
 import './Support.scss';
 
+const SUPPORTERS = [ ...Backers ];
+
+// merge or add additional backers/sponsors
+for(const additional of Additional) {
+  const existing = SUPPORTERS.find(supporter => supporter.slug && supporter.slug === additional.slug);
+  if (existing) {
+    existing.totalDonations += additional.totalDonations;
+  } else {
+    SUPPORTERS.push(additional);
+  }
+}
+
+// resort list
+SUPPORTERS.sort((a, b) => b.totalDonations - a.totalDonations);
+
 const ranks = {
   backer: {
     maximum: 200
@@ -38,26 +50,8 @@ function formatMoney(number) {
 export default class Support extends React.Component {
   render() {
     let { rank } = this.props;
-    let supporters = [
-      ...GoldSponsors,
-      ...SilverSponsors,
-      ...Sponsors,
-      ...Backers,
-    ];
-
-    // merge or add additional backers/sponsors
-    for(const additional of Additional) {
-      const existing = supporters.find(supporter => supporter.username && supporter.username === additional.username);
-      if (existing) {
-        existing.totalDonations += additional.totalDonations;
-      } else {
-        supporters.push(additional);
-      }
-    }
-
-    // resort list
-    supporters.sort((a, b) => b.totalDonations - a.totalDonations);
 
+    let supporters = SUPPORTERS;
     let minimum, maximum;
 
     if (rank && ranks[rank]) {
@@ -90,16 +84,16 @@ export default class Support extends React.Component {
 
         {
           supporters.map((supporter, index) => (
-            <a key={ supporter.id || supporter.username || index }
+            <a key={ supporter.id || supporter.slug || index }
                className="support__item"
-               title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.username}` }
+               title={ `$${formatMoney(supporter.totalDonations / 100)} by ${supporter.name || supporter.slug}` }
                target="_blank"
-               href={ supporter.website || `https://opencollective.com/${supporter.username}` }>
+               href={ supporter.website || `https://opencollective.com/${supporter.slug}` }>
               { supporter.avatar ? <img
                 className={ `support__${rank}-avatar` }
                 src={ supporter.avatar }
-                alt={ supporter.username ? `${supporter.username}'s avatar` : 'avatar' } /> :
-                supporter.name }
+                alt={ supporter.name || supporter.slug ? `${supporter.name || supporter.slug}'s avatar` : 'avatar' } /> :
+                <span className={ `support__${rank}-avatar` }>{supporter.name || supporter.slug}</span> }
               { rank === 'backer' ? <figure className="support__outline" /> : null }
             </a>
           ))

src/components/Support/Support.scss

@@ -41,6 +41,7 @@
   }
 
   &__backer-avatar {
+    display: inline-block;
     width: 31px;
     height: 31px;
     border-radius: 50%;

src/components/Support/support-additional.js

@@ -21,7 +21,7 @@ export default [
     reason: "Paypal"
   },
   {
-    username: "peerigon",
+    slug: "peerigon",
     name: "Peerigon",
     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",

src/scripts/fetch_supporters.js

@@ -2,47 +2,26 @@
 const fs = require('fs');
 const request = require('request');
 
-request('https://opencollective.com/webpack/goldsponsors.json?requireActive=false', (err, response, body) => {
-  if (err) {
-    console.error('Failed to fetch goldsponsors: ', err);
-
-  } fs.writeFile('./src/components/Support/support-goldsponsors.json', body, err => {
-    if (err) {
-      console.error('Failed to write goldsponsors file: ', err);
-
-    } else console.log('Fetched 1 file: support-goldsponsors.json');
-  });
-});
-
-request('https://opencollective.com/webpack/silversponsors.json?requireActive=false', (err, response, body) => {
-  if (err) {
-    console.error('Failed to fetch silversponsors: ', err);
-
-  } fs.writeFile('./src/components/Support/support-silversponsors.json', body, err => {
-    if (err) {
-      console.error('Failed to write silversponsors file: ', err);
+const REQUIRED_KEYS = ["totalDonations", "id"];
 
-    } else console.log('Fetched 1 file: support-silversponsors.json');
-  });
-});
-
-request('https://opencollective.com/webpack/sponsors.json?requireActive=false', (err, response, body) => {
+request('https://opencollective.com/api/groups/webpack/backers', (err, response, body) => {
   if (err) {
-    console.error('Failed to fetch sponsors: ', err);
-
-  } fs.writeFile('./src/components/Support/support-sponsors.json', body, err => {
-    if (err) {
-      console.error('Failed to write sponsors file: ', err);
+    console.error('Failed to fetch backers: ', err);
 
-    } else console.log('Fetched 1 file: support-sponsors.json');
-  });
-});
+  }
 
-request('https://opencollective.com/webpack/backers.json?requireActive=false', (err, response, body) => {
-  if (err) {
-    console.error('Failed to fetch backers: ', err);
+  // Basic validation
+  const content = JSON.parse(body);
+  if(!Array.isArray(content)) throw new Error("backer info is not an array");
+  if(content.length < 400) throw new Error("backer info is incomplete");
+  for(const item of content) {
+    for(const key of REQUIRED_KEYS) {
+      if(!item || typeof item !== "object") throw new Error(`backer info item (${JSON.stringify(item)} is not an object`);
+      if(!(key in item)) throw new Error(`backer info item (${JSON.stringify(item)} doesn't include ${key}`);
+    }
+  }
 
-  } fs.writeFile('./src/components/Support/support-backers.json', body, err => {
+  fs.writeFile('./src/components/Support/support-backers.json', body, err => {
     if (err) {
       console.error('Failed to write backers file: ', err);