github setup full

Author: lucassabreu

src/Components/Loading.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Progress } from 'reactstrap'
 
-const Loading = () => (
-  <Progress animated color="primary" striped value={100} />
+const Loading = ({ status }) => (
+  <Progress animated color="primary" striped value={100} children={status} />
 );
 
 export default Loading

src/GitHub/GitHub.css

@@ -14,7 +14,11 @@
     margin: 1rem 0;
 }
 
-.GitHub .labels .label-item [type=checkbox] {
+.GitHub .labels .label-item .label-icon {
     margin: .5rem;
     display: inline-block;
+}
+
+.GitHub .labels .label-item .label-name {
+    vertical-align: super;
 }

src/GitHub/GitHub.js

@@ -1,19 +1,51 @@
 import React from 'react'
+import { Alert } from 'reactstrap';
 import Loading from '../Components/Loading';
 import ProjectListSelector from '../Components/ProjectListSelector';
 import { withGithubRepositories, fetchGitHub } from './withGitHubRepositories';
 import LABELS_TO_ADD from '../Labels';
 import invertColor from '../invertColor';
 import './GitHub.css';
 
+const LABELS_TO_REMOVE = [
+  { name: "bug", color: "d73a4a" },
+  { name: "duplicate", color: "cfd3d7" },
+  { name: "enhancement", color: "a2eeef" },
+  { name: "good first issue", color: "7057ff" },
+  { name: "help wanted", color: "008672" },
+  { name: "invalid", color: "e4e669" },
+  { name: "question", color: "d876e3" },
+  { name: "wontfix", color: "ffffff" }
+];
+
+const LabelList = ({ header, labels, className, applyedLabels }) => (
+  <div className={`row labels ${className}`}>
+    <h2 className="col-md-12">{header}</h2>
+    {labels.map(({ name, color }) => (
+      <div key={name} className="col-md-4">
+        <label alt={name} className="label-item"
+          style={{ backgroundColor: '#' + color, color: invertColor('#' + color) }}
+        >
+          <i className="material-icons label-icon">
+            {applyedLabels.indexOf(name) > -1 ? 'check_box' : 'check_box_outline_blank'}
+          </i>
+          <span className="label-name" children={name} />
+        </label>
+      </div>
+    ))}
+  </div>
+)
+
 class GitHub extends React.Component {
 
   constructor(props) {
     super(props)
     this.state = {
       selectedOption: null,
       applying: false,
-      applyedLabels: []
+      applyedLabels: [],
+      applyingStatus: null,
+      alert: null,
     }
   }
 
@@ -23,20 +55,57 @@ class GitHub extends React.Component {
   }
 
   async applyChangesToRepository(repoName) {
+    this.setState({
+      applyedLabels: [],
+      alert: null
+    })
 
     const createLabelsPromices = LABELS_TO_ADD.map(l => this.createLabel(repoName, l))
+    const removeLabelPromices = LABELS_TO_REMOVE.map(l => this.removeLabel(repoName, l))
+    try {
 
+      await Promise.all([...createLabelsPromices, ...removeLabelPromices])
+      this.setState({
+        applying: false,
+        alert: { type: 'success', message: 'Setup completed !' }
+      });
+    } catch (error) {
+      this.setState({
+        applying: false,
+        alert: { type: 'danger', message: error.message }
+      });
+    }
+  }
+
+  async removeLabel(repoName, { name }) {
+    await fetchGitHub(
+      `https://api.github.com/repos/${repoName}/labels/${name}`,
+      'DELETE'
+    );
+
+    this.setState(({ applyedLabels }) => ({
+      applyedLabels: [...applyedLabels, name],
+      applyingStatus: `${name} removed`,
+    }))
   }
 
   async createLabel(repoName, { name, color }) {
-    fetchGitHub(
+    const resp = await fetchGitHub(
       `https://api.github.com/repos/${repoName}/labels`,
       'POST',
       { name, color }
-    )
+    );
+
+    if (resp.status === 422) {
+      const message = await resp.json();
+      if (!message.errors.find(({ code }) => code === 'already_exists')) {
+        throw new Error(JSON.stringify(message.errors));
+      }
+    }
 
     this.setState(({ applyedLabels }) => ({
-      applyedLabels: [...applyedLabels, name]
+      applyedLabels: [...applyedLabels, name],
+      applyingStatus: `${name} created`,
     }))
   }
 
@@ -61,23 +130,29 @@ class GitHub extends React.Component {
               }))}
               onApply={(selected) => this.handleApply(selected)}
             />
+            {!this.state.alert ? null :
+              <Alert
+                color={this.state.alert.type}
+                children={this.state.alert.message}
+              />
+            }
             {!this.state.applying ? null :
               <div className="row applying-status">
-                <div className="col-md-12"><Loading /></div>
+                <div className="col-md-12"><Loading status={this.state.applyingStatus} /></div>
               </div>
             }
-            <div className="row labels">
-              {LABELS_TO_ADD.map(({ name, color }) => (
-                <div key={name} className="col-md-4">
-                  <label alt={name} className="label-item"
-                    style={{ backgroundColor: '#' + color, color: invertColor('#' + color, true) }}
-                  >
-                    <input disabled type="checkbox" checked={this.state.applyedLabels.indexOf(name) > -1} />
-                    {name}
-                  </label>
-                </div>
-              ))}
-            </div>
+            <LabelList
+              header="Labels to Remove:"
+              className="labels-to-remove"
+              labels={LABELS_TO_REMOVE}
+              applyedLabels={this.state.applyedLabels}
+            />
+            <LabelList
+              header="Labels to Add:"
+              className="labels-to-add"
+              labels={LABELS_TO_ADD}
+              applyedLabels={this.state.applyedLabels}
+            />
           </section>
         }
       </div>

src/GitHub/withGitHubRepositories.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const fetchGitHub = (url, method, body) => fetch(url, {
   method: method || 'GET',
-  body,
+  body : JSON.stringify(body),
   headers: new Headers({
     Authorization: `token ${sessionStorage.getItem('github-token')}`,
     Accept: 'application/json',

src/Home.js

@@ -18,7 +18,7 @@ const Home = ({ history }) => {
       logo: githubLogo,
       enabled: true,
       callback: (event) => {
-        auth.authenticate({ provider: "github", scope: "user" }, (err, data) => {
+        auth.authenticate({ provider: "github", scope: ["user", 'repo'] }, (err, data) => {
           if (err) {
             console.error(err);
             return

src/invertColor.js

@@ -1,10 +1,4 @@
-const padZero = (str, len) => {
-  len = len || 2;
-  var zeros = new Array(len).join('0');
-  return (zeros + str).slice(-len);
-}
-
-const invertColor = (hex, bw) => {
+const invertColor = (hex) => {
   if (hex.indexOf('#') === 0) {
     hex = hex.slice(1);
   }
@@ -18,18 +12,11 @@ const invertColor = (hex, bw) => {
   var r = parseInt(hex.slice(0, 2), 16),
     g = parseInt(hex.slice(2, 4), 16),
     b = parseInt(hex.slice(4, 6), 16);
-  if (bw) {
-    // http://stackoverflow.com/a/3943023/112731
-    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
-      ? '#000000'
-      : '#FFFFFF';
-  }
-  // invert color components
-  r = (255 - r).toString(16);
-  g = (255 - g).toString(16);
-  b = (255 - b).toString(16);
-  // pad each with zeros and return
-  return "#" + padZero(r) + padZero(g) + padZero(b);
+
+  // http://stackoverflow.com/a/3943023/112731
+  return (r * 0.299 + g * 0.587 + b * 0.114) > 186
+    ? '#000000'
+    : '#FFFFFF';
 }
 
 export default invertColor