wip

Author: lucassabreu

src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { Switch, Route } from 'react-router-dom'
+
 import './App.css';
 import CoderockrLogo from './assets/images/hand-yellow.svg'
 import Home from './Home'
 import Footer from './Footer';
-import { Switch, Route } from 'react-router-dom'
+import GitHub from './GitHub/GitHub';
 
 const App = () => (
   <div className="CWSPApp">
@@ -16,6 +18,7 @@ const App = () => (
     <div className=" container">
       <Switch>
         <Route exact path="/" component={Home} />
+        <Route path="/github/" component={GitHub} />
       </Switch>
     </div>
     <Footer />

src/Components/Loading.js

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

src/GitHub/GitHub.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import Loading from '../Components/Loading';
+import { githubAccessTokenUrl } from './constants'
+
+class GitHub extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const params = new URLSearchParams(props.location.search);
+
+    this.state = {
+      loading: true,
+      code: params.get('code')
+    };
+  }
+
+  async componentDidMount() {
+    fetch(new Request(
+      'https://api.github.com/users/lucassabreu',
+      {
+        method: "GET",
+        headers: new Headers({ accept: 'application/json' })
+      })
+    )
+      .then(r => r.json())
+      .then(console.log)
+
+    fetch(new Request(
+      githubAccessTokenUrl(this.state.code),
+      {
+        method: 'POST',
+        headers: new Headers({ Accept: 'application/json' })
+      }
+    ))
+      .then(r => {
+        if (r.ok === false) {
+          throw new Error(`${r.status} - ${r.statusText}`)
+        }
+        return r.json()
+      })
+      .then(console.log())
+  }
+
+  render() {
+    const { loading } = this.state;
+    return (
+      <div className="GitHub">
+        {loading ?
+          <section>
+            <h2>Loading...</h2>
+            <Loading />
+          </section>
+          :
+          <section>
+          </section>
+        }
+      </div>
+    )
+  }
+}
+
+export default GitHub

src/GitHub/constants.js

@@ -0,0 +1,20 @@
+const GITHUB_CLIENT_ID = '0e8a63320fba47de145c';
+const GITHUB_CLIENT_SECRET = '<it will not work anyway>';
+
+const githubAccessTokenUrl = (code) => (
+  `https://github.com/login/oauth/access_token?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_CLIENT_SECRET}&code=${code}`
+);
+
+const githubAuthorizeUrl = (callback) => (
+  `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&scope=repos&redirect_uri=${callback}`
+)
+
+export {
+  GITHUB_CLIENT_ID,
+  GITHUB_CLIENT_SECRET,
+  githubAccessTokenUrl,
+  githubAuthorizeUrl,
+}
+
+
+

src/Home.js

@@ -5,14 +5,15 @@ import githubLogo from './assets/images/github.svg'
 import gitlabLogo from './assets/images/gitlab.svg'
 import trelloLogo from './assets/images/trello.svg'
 import './Home.css'
+import { githubAuthorizeUrl } from './GitHub/constants';
 
 const callbackUrl = (setupable) => `${window.location.href}${setupable}/callback`
 const SETUPABLE = [
   {
     name: "GitHub",
     logo: githubLogo,
     enabled: true,
-    url: 'https://github.com/login/oauth/authorize?client_id=0e8a63320fba47de145c&scope=repos&redirect_uri=' + callbackUrl('github'),
+    url: githubAuthorizeUrl(callbackUrl('github')),
   },
   {
     name: "GitLab",