Merge pull request #5 from facn5/init

Init
facn5 · Apr 25, 2019 · 0b94037 · 0b94037
2 parents 597cb38 + 754fb1f
commit 0b94037
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 76 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -2,5 +2,9 @@
   "extends": [
     "eslint:recommended",
     "react-minimal"
-  ]
-}
+  ],
+
+  "rules": {
+      no-console : 0,
+    }
+}
diff --git a/src/components/button/button.css b/src/components/button/button.css
diff --git a/src/components/button/button.js b/src/components/button/button.js
diff --git a/src/components/button/button.test.js b/src/components/button/button.test.js
diff --git a/src/components/card/index.js b/src/components/card/index.js
@@ -2,26 +2,23 @@ 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 }));
-  }
+class PortfolioCard extends React.Component {
 
   render() {
+  const {
+    avatar_url,
+    followers,
+    name,
+    public_repos,
+    repos_url
+  } = this.props.userdata;
+
     return (
       <div>
-        <GInfo />
-        <Statistics />
+        <GInfo url_pic = {avatar_url} name = {name}/>
+        <Statistics followers={followers}  reposCount={public_repos} reposUrl={repos_url}/>
       </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 className="gInfo">
-      <Image source="https://avatars0.githubusercontent.com/u/21008707?v=4"/>
-        <h1>Shadi</h1>
+      <img src={this.props.url_pic}/>
+        <h1>{this.props.name}</h1>
       </div>
     );
   }

diff --git a/src/components/card/userstatistics/index.js b/src/components/card/userstatistics/index.js
@@ -2,28 +2,29 @@ import React from 'react';
 import './style.css';
 
 class Statistics extends React.Component {
+
   render() {
     return (
-      <div id="table">
+      // <div id="table">
         <table>
           <tr>
             <td>Projects count</td>
-            <td></td>
+            <td>{this.props.reposCount}</td>
           </tr>
           <tr>
             <td>Lines of code</td>
-            <td></td>
+            <td>{this.props.lines}</td>
           </tr>
           <tr>
             <td>Languages</td>
-            <td></td>
+            <td>{this.props.langs}</td>
           </tr>
           <tr>
             <td>Followers</td>
-            <td></td>
+            <td>{this.props.followers}</td>
           </tr>
         </table>
-      </div>
+      // </div>
     );
   }
 }

diff --git a/src/components/image/index.js b/src/components/image/index.js
diff --git a/src/components/image/style.css b/src/components/image/style.css
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 (
-   <p/>,<input onChange={(e) => this.props.updateUserOne(e.target.value)} />
+    <input onChange={(e) => this.props.updateUser(e.target.value)} />
     );
   }
 }

diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-  <div id="🤡"></div>
+  <div id="ter"></div>
   <script src="index.js"></script>
 </body>
 

diff --git a/src/index.js b/src/index.js
@@ -1,25 +1,51 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Input from './components/input';
-import Button from './components/button/button.js'
 import PortfolioCard from './components/card';
-import Image from './components/image'
 import "./style.css";
+import { getData, API_BASE } from "./tools/getData";
 class App extends React.Component {
 state = {
   userOne:"",
   userTwo:"",
+  userOneData:'',
+  userTwoData:'',
+
+}
+// componentDidUpdate(){
+//   alert(this.state.userOne + this.state.userTwo);
+// }
+  onclickHandler = () => {
+  const username1 = this.state.userOne;
+  const username2 = this.state.userTwo;
+  // const url = `${API_BASE}/users/tamernasser`;
+  const url1 = `${API_BASE}/users/${username1}`;
+  const url2 = `${API_BASE}/users/${username2}`;
+
+  getData(url1).then(d =>{
+    console.log(d);
+     this.setState( {userOneData:d} );
+  });
+  getData(url2).then(d =>{
+    console.log(d);
+     this.setState( {userTwoData:d} );
+  });
+
 }
 render(){
   return(<div>
     <div className="inputs-container">
-      <Input updateUser={(value) => this.setState({ userOne: value})}/> <Button /> <Input updateUser={(value) => this.setState({ userOne: value})} />
+      <Input updateUser={(value) => this.setState({ userOne: value})}/>
+      <button onClick={this.onclickHandler} />
+      <Input updateUser={(value) => this.setState({ userTwo: value})} />
+    </div>
+    <div className="cards-container">
+    <PortfolioCard userdata={this.state.userOneData} />
+    <img />
+     <PortfolioCard userdata={this.state.userTwoData}/>
+    </div>
     </div>
-<div className="cards-container">
-    <PortfolioCard /> <Image /> <PortfolioCard />
-  </div>
-  </div>
 )}}
 
 
-ReactDOM.render(<App/>, document.getElementById('🤡'));
+ReactDOM.render(<App/>, document.getElementById('ter'));
diff --git a/src/tools/getData.js b/src/tools/getData.js
@@ -1,5 +1,5 @@
 // import { accessToken } from "../../token";
-export const accessToken = "6953b440ab762a5d9de0112d3be3f6a179533e0e";
+export const accessToken = "2937a959989d4dd5c775da0061d26c980d06a1ad  ";
 export const API_BASE = "https://api.github.com";
 
 const checkResponse = response => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     </head>
     <body>
-      <div id="🤡"></div>
+      <div id="ter"></div>
       <script src="index.js"></script>
     </body>
@@ Expand Down @@