refactor(support): clean up support component and fetch actual json from opencollective

Fetching the actual JSON containing our supporters gives us more flexibility
to tackle issues like #411. It also give a model to follow for our, now extracted,
additional sponsors list (those not from open collective).

Author: skipjack

components/support/support-additional.json

@@ -0,0 +1,18 @@
+[
+  {
+    "id": 20000,
+    "name": "MoonMail",
+    "username": "moonmail",
+    "tier": "sponsor",
+    "avatar": "https://static.moonmail.io/moonmail-logo.svg",
+    "website": "https://moonmail.io/?utm_source=webpack.js.org"
+  },
+  {
+    "index": 20001,
+    "name": "MONEI",
+    "username": "monei",
+    "tier": "sponsor",
+    "avatar": "https://static.monei.net/monei-logo.svg",
+    "website": "https://monei.net/?utm_source=webpack.js.org"
+  }
+]

components/support/support-style.scss

@@ -4,32 +4,52 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding:10px 5px;
+  padding: 1em 0.5em;
 
   &__item {
-    margin:0 5px;
+    position: relative;
+    margin: 0 5px 5px 5px;
+  }
+
+  &__sponsors-avatar {
+    height: 64px;
+  }
+
+  &__backers-avatar {
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    border: 2px solid white;
+    overflow: hidden;
+  }
+
+  &__outline {
+    position: absolute;
+    top: 0;
+    margin: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% - 2px);
+    border-radius: 50%;
+    border: 2px solid rgb(112, 202, 10);
   }
 
   &__bottom {
-    flex:0 0 100%;
-    margin-top:10px;
+    flex: 0 0 100%;
+    margin-top: 1em;
   }
 
   &__button {
-    display:inline-block;
-    padding:0.4em 1em;
-    border:2px solid getColor(denim);
-    color:getColor(denim);
-    border-radius:1.25em;
-    transition:all 250ms;
+    display: inline-block;
+    padding: 0.4em 1em;
+    text-transform: uppercase;
+    color: getColor(denim);
+    border: 1px solid getColor(denim);
+    border-radius: 1.25em;
+    transition: all 250ms;
 
     &:hover {
-      background:getColor(denim);
-      color:getColor(white);
+      background: getColor(denim);
+      color: getColor(white);
     }
   }
-  &__missing {
-    display: flex;
-    align-items: center;
-  }
-}
+}

components/support/support.jsx

@@ -1,56 +1,59 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import Additional from './support-additional.json';
+import 'whatwg-fetch';
 import './support-style';
 
-const MISSING_SPONSORS = [
-  {
-    index: 33,
-    name: 'MoonMail',
-    title: 'Email Marketing Software',
-    logo: 'https://static.moonmail.io/moonmail-logo.svg',
-    url: 'https://moonmail.io/?utm_source=webpack.js.org'
-  },
-  {
-    index: 34,
-    name: 'MONEI',
-    title: 'Best payment gateway rates',
-    logo: 'https://static.monei.net/monei-logo.svg',
-    url: 'https://monei.net/?utm_source=webpack.js.org'
+export default class Support extends React.Component {
+  static propTypes = {
+    number: PropTypes.number.isRequired,
+    type: PropTypes.oneOf([
+      'sponsors',
+      'backers'
+    ]).isRequired
+  };
+
+  state = {
+    supporters: [],
+    error: false
   }
-];
 
-export default ({number, type}) => {
-  const supportItems = [...Array(number)].map((x, i) =>
-    <a key={ i }
-       className="support__item"
-       href={ `https://opencollective.com/webpack/${type}/${i}/website?requireActive=false` }
-       target="_blank">
-      <img
-        src={ `//opencollective.com/webpack/${type}/${i}/avatar?requireActive=false` }
-        alt={ `${type} avatar` } />
-    </a>
-  );
+  render() {
+    let { number, type } = this.props;
+    let { supporters } = this.state;
+
+    return (
+      <div className="support">
+        {
+          supporters.slice(0, number).map((supporter, i) => (
+            <a key={ supporter.id }
+               className="support__item"
+               target="_blank"
+               href={ supporter.website }>
+              <img
+                className={ `support__${type}-avatar` }
+                src={ supporter.avatar }
+                alt={ `${supporter.username}'s avatar` } />
+              { type === 'backers' ? <figure className="support__outline" /> : null }
+            </a>
+          ))
+        }
 
-  // add missing sponsors
-  if (type === 'sponsor') {
-    MISSING_SPONSORS.forEach(sponsor => {
-      supportItems.splice(sponsor.index, 0, (
-        <a key={ sponsor.name }
-           className="support__item support__missing"
-           href={ sponsor.url }
-           target="_blank"
-           title={ sponsor.title }>
-          <img
-            src={ sponsor.logo }
-            height={ 45 }
-            alt={ sponsor.name } />
-        </a>
-      ));
-    });
+        <div className="support__bottom">
+          <a className="support__button" href="https://opencollective.com/webpack#support">
+            Become a { type.replace(/s$/, '') }
+          </a>
+        </div>
+      </div>
+    );
   }
 
-  return (
-    <div className="support">
-      {supportItems}
-    </div>
-  );
-};
+  componentDidMount() {
+    let { type } = this.props;
+
+    fetch(`https://opencollective.com/webpack/${type}.json`)
+      .then(response => response.json())
+      .then(json => this.setState({ supporters: json.concat(Additional) }))
+      .catch(error => this.setState({ error: true }));
+  }
+}