Merge pull request #4 from facn5/getData

Get data
facn5 · Apr 24, 2019 · 597cb38 · 597cb38
2 parents bd8ca26 + 1389d07
commit 597cb38
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 17 deletions.
diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -1,3 +1,4 @@
 button {
-  color: red;
+  height: 30px;
+  width:80px;
 }
diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -4,7 +4,7 @@ import './button.css';
 class Button extends React.Component {
   render() {
     return (
-      <button></button>
+      <button>Compare</button>
     );
   }
 }

diff --git a/src/components/card/index.js b/src/components/card/index.js
@@ -2,8 +2,21 @@ import React from 'react';
 import './style.css';
 import GInfo from "./userinfo";
 import Statistics from "./userstatistics";
+import { getData, API_BASE } from "../../tools/getData";
 
 class PortfolioCard extends React.Component {
+  state = {
+    data: {}
+  };
+
+
+  componentDidMount() {
+    const username = "";
+    const url = `${API_BASE}/users/${username}`;
+
+    getData(url).then(data => this.setState({ data }));
+  }
+
   render() {
     return (
       <div>

diff --git a/src/components/card/userinfo/index.js b/src/components/card/userinfo/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import './style.css';
-
+import Image from "../../image"
 class GInfo extends React.Component {
   render() {
     return (
-      <div>
-        <img></img>
-        <h1></h1>
+      <div className="gInfo">
+      <Image source="https://avatars0.githubusercontent.com/u/21008707?v=4"/>
+        <h1>Shadi</h1>
       </div>
     );
   }

diff --git a/src/components/card/userinfo/style.css b/src/components/card/userinfo/style.css
@@ -0,0 +1,4 @@
+.gInfo{
+  border-radius: 10px;
+
+}
diff --git a/src/components/card/userstatistics/index.js b/src/components/card/userstatistics/index.js
@@ -4,7 +4,7 @@ import './style.css';
 class Statistics extends React.Component {
   render() {
     return (
-      <div>
+      <div id="table">
         <table>
           <tr>
             <td>Projects count</td>

diff --git a/src/components/image/index.js b/src/components/image/index.js
@@ -4,7 +4,7 @@ import './style.css';
 class Image extends React.Component {
   render() {
     return (
-      <img />
+      <img src={this.props.source}/>
     );
   }
 }

diff --git a/src/components/input/index.js b/src/components/input/index.js
@@ -4,7 +4,7 @@ import './style.css';
 class Input extends React.Component {
   render() {
     return (
-      <input />
+   <p/>,<input onChange={(e) => this.props.updateUserOne(e.target.value)} />
     );
   }
 }

diff --git a/src/index.html b/src/index.html
@@ -5,12 +5,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>React stuff</title>
+  <title>GitBattleHUB</title>
 </head>
 
 <body>
   <div id="🤡"></div>
   <script src="index.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -4,12 +4,22 @@ import Input from './components/input';
 import Button from './components/button/button.js'
 import PortfolioCard from './components/card';
 import Image from './components/image'
-
-ReactDOM.render(
-  <div>
-    <div class="inputs-container">
-      <Input /> <Button /> <Input />
+import "./style.css";
+class App extends React.Component {
+state = {
+  userOne:"",
+  userTwo:"",
+}
+render(){
+  return(<div>
+    <div className="inputs-container">
+      <Input updateUser={(value) => this.setState({ userOne: value})}/> <Button /> <Input updateUser={(value) => this.setState({ userOne: value})} />
     </div>
+<div className="cards-container">
     <PortfolioCard /> <Image /> <PortfolioCard />
   </div>
-  , document.getElementById('🤡'));
+  </div>
+)}}
+
+
+ReactDOM.render(<App/>, document.getElementById('🤡'));
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,36 @@
+body{
+  background-color:cyan;
+}
+input{
+
+}
+.cards-container{
+  display:flex;
+  flex-direction: row;
+  justify-content:space-evenly;
+}
+.inputs-container{
+  display:flex;
+  flex-direction: row;
+  justify-content:space-evenly;
+}
+#table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+#table td, #table th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+
+#table tr:hover {background-color: #ddd;}
+
+#table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #4CAF50;
+  color: white;
+}
diff --git a/src/tools/getData.js b/src/tools/getData.js
@@ -0,0 +1,19 @@
+// import { accessToken } from "../../token";
+export const accessToken = "6953b440ab762a5d9de0112d3be3f6a179533e0e";
+export const API_BASE = "https://api.github.com";
+
+const checkResponse = response => {
+  if (response.status !== 200) {
+    return(`Error with the request! ${response.status}`);
+
+  }
+  return response.json();
+};
+
+export const getData = url => {
+  return fetch(`${url}?access_token=${accessToken}`)
+    .then(checkResponse)
+    .catch(err => {
+      throw new Error(`fetch getUserData failed ${err}`);
+    });
+};