Add support for multiple repos of the same owner

Author: Evert Arias

src/index.js

@@ -1,7 +1,14 @@
 import React from "react";
 import { Octokit } from "@octokit/rest";
-// import styles from "./styles.module.css";
-import { Contributors, Profile, Photo, Intro, Name, Subtitle } from "./styles";
+import _ from "lodash";
+import {
+  ContributorsList,
+  Profile,
+  Photo,
+  Intro,
+  Name,
+  Subtitle
+} from "./styles";
 
 const octokit = new Octokit();
 
@@ -21,37 +28,65 @@ class ProfileComponent extends React.Component {
   }
 }
 
-export default class ContributorsComponent extends React.Component {
+export default class Contributors extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       contributors: []
     };
   }
 
+  loadContributors(owner, repo) {
+    return new Promise((resolve, reject) => {
+      octokit.repos
+        .listContributors({
+          owner: owner,
+          repo: repo
+        })
+        .then(
+          result => {
+            this.setState({
+              contributors: [
+                ..._.orderBy(
+                  _.unionBy(this.state.contributors, result.data, "login"),
+                  "contributions",
+                  "desc"
+                )
+              ]
+            });
+            resolve();
+          },
+          reason => {
+            reject(reason);
+          }
+        );
+    });
+  }
+
   componentDidMount() {
-    octokit.repos
-      .listContributors({
-        owner: this.props.owner,
-        repo: this.props.repo
-      })
-      .then(
-        result => {
-          this.setState({
-            contributors: [...result.data]
-          });
-        },
-        () => {
-          this.setState({
-            contributors: []
-          });
-        }
-      );
+    // No repo props provided
+    if (!this.props.repo) {
+      this.setState({
+        contributors: []
+      });
+      return;
+    }
+
+    // If repo props provided but contains a single repo name
+    if (this.props.repo && !Array.isArray(this.props.repo)) {
+      this.loadContributors(this.props.owner, this.props.repo);
+      return;
+    }
+
+    // repo props provided as array
+    this.props.repo.map(repo => {
+      this.loadContributors(this.props.owner, repo);
+    });
   }
 
   render() {
     return (
-      <Contributors>
+      <ContributorsList>
         {this.state.contributors && this.state.contributors.length
           ? this.state.contributors.map((contributor, key) => {
               return (
@@ -64,7 +99,7 @@ export default class ContributorsComponent extends React.Component {
               );
             })
           : undefined}
-      </Contributors>
+      </ContributorsList>
     );
   }
 }