Skip to content

Commit ba849c0

Browse files
lucassabreulucassabreu
committed
github setup full
1 parent 8a5c3cd commit ba849c0

File tree

6 files changed

+107
-41
lines changed

6 files changed

+107
-41
lines changed

‎src/Components/Loading.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { Progress } from 'reactstrap'
33

4-
const Loading = () => (
5-
<Progress animated color="primary" striped value={100} />
4+
const Loading = ({ status }) => (
5+
<Progress animated color="primary" striped value={100} children={status} />
66
);
77

88
export default Loading

‎src/GitHub/GitHub.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@
1414
margin: 1rem 0;
1515
}
1616

17-
.GitHub .labels .label-item [type=checkbox] {
17+
.GitHub .labels .label-item .label-icon {
1818
margin: .5rem;
1919
display: inline-block;
20+
}
21+
22+
.GitHub .labels .label-item .label-name {
23+
vertical-align: super;
2024
}

‎src/GitHub/GitHub.js

Lines changed: 92 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,51 @@
11
import React from 'react'
2+
import { Alert } from 'reactstrap';
23
import Loading from '../Components/Loading';
34
import ProjectListSelector from '../Components/ProjectListSelector';
45
import { withGithubRepositories, fetchGitHub } from './withGitHubRepositories';
56
import LABELS_TO_ADD from '../Labels';
67
import invertColor from '../invertColor';
78
import './GitHub.css';
89

10+
const LABELS_TO_REMOVE = [
11+
{ name: "bug", color: "d73a4a" },
12+
{ name: "duplicate", color: "cfd3d7" },
13+
{ name: "enhancement", color: "a2eeef" },
14+
{ name: "good first issue", color: "7057ff" },
15+
{ name: "help wanted", color: "008672" },
16+
{ name: "invalid", color: "e4e669" },
17+
{ name: "question", color: "d876e3" },
18+
{ name: "wontfix", color: "ffffff" }
19+
];
20+
21+
const LabelList = ({ header, labels, className, applyedLabels }) => (
22+
<div className={`row labels ${className}`}>
23+
<h2 className="col-md-12">{header}</h2>
24+
{labels.map(({ name, color }) => (
25+
<div key={name} className="col-md-4">
26+
<label alt={name} className="label-item"
27+
style={{ backgroundColor: '#' + color, color: invertColor('#' + color) }}
28+
>
29+
<i className="material-icons label-icon">
30+
{applyedLabels.indexOf(name) > -1 ? 'check_box' : 'check_box_outline_blank'}
31+
</i>
32+
<span className="label-name" children={name} />
33+
</label>
34+
</div>
35+
))}
36+
</div>
37+
)
38+
939
class GitHub extends React.Component {
1040

1141
constructor(props) {
1242
super(props)
1343
this.state = {
1444
selectedOption: null,
1545
applying: false,
16-
applyedLabels: []
46+
applyedLabels: [],
47+
applyingStatus: null,
48+
alert: null,
1749
}
1850
}
1951

@@ -23,20 +55,57 @@ class GitHub extends React.Component {
2355
}
2456

2557
async applyChangesToRepository(repoName) {
58+
this.setState({
59+
applyedLabels: [],
60+
alert: null
61+
})
2662

2763
const createLabelsPromices = LABELS_TO_ADD.map(l => this.createLabel(repoName, l))
64+
const removeLabelPromices = LABELS_TO_REMOVE.map(l => this.removeLabel(repoName, l))
65+
try {
2866

67+
await Promise.all([...createLabelsPromices, ...removeLabelPromices])
68+
this.setState({
69+
applying: false,
70+
alert: { type: 'success', message: 'Setup completed !' }
71+
});
72+
} catch (error) {
73+
this.setState({
74+
applying: false,
75+
alert: { type: 'danger', message: error.message }
76+
});
77+
}
78+
}
79+
80+
async removeLabel(repoName, { name }) {
81+
await fetchGitHub(
82+
`https://api.github.com/repos/${repoName}/labels/${name}`,
83+
'DELETE'
84+
);
85+
86+
this.setState(({ applyedLabels }) => ({
87+
applyedLabels: [...applyedLabels, name],
88+
applyingStatus: `${name} removed`,
89+
}))
2990
}
3091

3192
async createLabel(repoName, { name, color }) {
32-
fetchGitHub(
93+
const resp = await fetchGitHub(
3394
`https://api.github.com/repos/${repoName}/labels`,
3495
'POST',
3596
{ name, color }
36-
)
97+
);
98+
99+
if (resp.status === 422) {
100+
const message = await resp.json();
101+
if (!message.errors.find(({ code }) => code === 'already_exists')) {
102+
throw new Error(JSON.stringify(message.errors));
103+
}
104+
}
37105

38106
this.setState(({ applyedLabels }) => ({
39-
applyedLabels: [...applyedLabels, name]
107+
applyedLabels: [...applyedLabels, name],
108+
applyingStatus: `${name} created`,
40109
}))
41110
}
42111

@@ -61,23 +130,29 @@ class GitHub extends React.Component {
61130
}))}
62131
onApply={(selected) => this.handleApply(selected)}
63132
/>
133+
{!this.state.alert ? null :
134+
<Alert
135+
color={this.state.alert.type}
136+
children={this.state.alert.message}
137+
/>
138+
}
64139
{!this.state.applying ? null :
65140
<div className="row applying-status">
66-
<div className="col-md-12"><Loading /></div>
141+
<div className="col-md-12"><Loading status={this.state.applyingStatus} /></div>
67142
</div>
68143
}
69-
<div className="row labels">
70-
{LABELS_TO_ADD.map(({ name, color }) => (
71-
<div key={name} className="col-md-4">
72-
<label alt={name} className="label-item"
73-
style={{ backgroundColor: '#' + color, color: invertColor('#' + color, true) }}
74-
>
75-
<input disabled type="checkbox" checked={this.state.applyedLabels.indexOf(name) > -1} />
76-
{name}
77-
</label>
78-
</div>
79-
))}
80-
</div>
144+
<LabelList
145+
header="Labels to Remove:"
146+
className="labels-to-remove"
147+
labels={LABELS_TO_REMOVE}
148+
applyedLabels={this.state.applyedLabels}
149+
/>
150+
<LabelList
151+
header="Labels to Add:"
152+
className="labels-to-add"
153+
labels={LABELS_TO_ADD}
154+
applyedLabels={this.state.applyedLabels}
155+
/>
81156
</section>
82157
}
83158
</div>

‎src/GitHub/withGitHubRepositories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
const fetchGitHub = (url, method, body) => fetch(url, {
44
method: method || 'GET',
5-
body,
5+
body : JSON.stringify(body),
66
headers: new Headers({
77
Authorization: `token ${sessionStorage.getItem('github-token')}`,
88
Accept: 'application/json',

‎src/Home.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Home = ({ history }) => {
1818
logo: githubLogo,
1919
enabled: true,
2020
callback: (event) => {
21-
auth.authenticate({ provider: "github", scope: "user" }, (err, data) => {
21+
auth.authenticate({ provider: "github", scope: ["user", 'repo'] }, (err, data) => {
2222
if (err) {
2323
console.error(err);
2424
return

‎src/invertColor.js

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
const padZero = (str, len) => {
2-
len = len || 2;
3-
var zeros = new Array(len).join('0');
4-
return (zeros + str).slice(-len);
5-
}
6-
7-
const invertColor = (hex, bw) => {
1+
const invertColor = (hex) => {
82
if (hex.indexOf('#') === 0) {
93
hex = hex.slice(1);
104
}
@@ -18,18 +12,11 @@ const invertColor = (hex, bw) => {
1812
var r = parseInt(hex.slice(0, 2), 16),
1913
g = parseInt(hex.slice(2, 4), 16),
2014
b = parseInt(hex.slice(4, 6), 16);
21-
if (bw) {
22-
// http://stackoverflow.com/a/3943023/112731
23-
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
24-
? '#000000'
25-
: '#FFFFFF';
26-
}
27-
// invert color components
28-
r = (255 - r).toString(16);
29-
g = (255 - g).toString(16);
30-
b = (255 - b).toString(16);
31-
// pad each with zeros and return
32-
return "#" + padZero(r) + padZero(g) + padZero(b);
15+
16+
// http://stackoverflow.com/a/3943023/112731
17+
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
18+
? '#000000'
19+
: '#FFFFFF';
3320
}
3421

3522
export default invertColor

0 commit comments

Comments
 (0)