GinoQuispe21 · TheRoro · Jan 31, 2021 · Feb 4, 2021 · Feb 4, 2021 · Feb 4, 2021
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/si.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <title>WapoHub</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/si.ico b/public/si.ico
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,37 @@
-
-import './App.css';
 import Home from './Components/Home/Home';
+import UserInfo from './Components/UserInfo/UserInfo.jsx';
+import Language from './Components/Languages/Languages';
+import Repos from './Components/Repos/Repos';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+
+} from "react-router-dom";
 
 function App() {
   return (
-    <div>
-      <Home />
-    </div>
+    <>
+      <Router>
+        {/* A <Switch> looks through its children <Route>s and
+            renders the first one that matches the current URL. */}
+        <Switch>
+          <Route exact path="/users/:username/repos">
+            <Repos />
+          </Route>
+          <Route exact path="/users/:username/language">
+            <Language />
+          </Route>
+          <Route path="/users/:username">
+            <UserInfo />
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+
+      </Router>
+    </>
   );
 }
 

diff --git a/src/Assets/ga.png b/src/Assets/ga.png
diff --git a/src/Assets/si.png b/src/Assets/si.png
diff --git a/src/Components/Home/Home.jsx b/src/Components/Home/Home.jsx
@@ -1,31 +1,48 @@
 import React from 'react';
-import axios from 'axios';
-import UserInfo from '../UserInfo/UserInfo.jsx';
-import URL from '../../baseURL';    
+//import axios from 'axios';
+//import URL from '../../baseURL';
+import styles from './home.module.css';
+import si from '../../Assets/si.png';
+import {useHistory} from "react-router-dom";
 
 const Home = () => {
 
-    const [infoH, setInfo] = React.useState();
     const [username, setUsername] = React.useState();
 
+    let history = useHistory();
 
-    const GetUserInfo = () =>{
-        axios.get(`${URL}users/${username}`)
+    const GetUserInfo = () => {
+        history.push(`/users/${username}`)
+
+
+        /*axios.get(`${URL}users/${username}`)
         .then(res => {
             setInfo(res.data);
-        })
+        });*/
     }
 
     const onchange = (event) => {
         setUsername(event.target.value);
     }
 
     return (
-        <div>
-            <input value={username} onChange={onchange}></input>
-            <button onClick={GetUserInfo}>Busca tu pelada</button>
-            <UserInfo info={infoH} />
+        <div className={styles.container}>
+            <div className={styles.mainContent}>
+                <div className={styles.infoContainer}>
+                    <div className={styles.titleContainer}>
+                        <h1 className={styles.title}>Search Username</h1>
+                    </div>
+                    <div className={styles.imageContainer}>
+                        <img src={si} alt="404 gg u suck" />
+                    </div>
+                </div>
+                <div className={styles.inputContainer}>
+                    <input className={styles.userInput} value={username} onChange={onchange}></input>
+                    <button className={styles.button} onClick={GetUserInfo}>Search</button>
+                </div>
+            </div>
         </div>
-    )
+    );
 }
+
 export default Home;
diff --git a/src/Components/Home/home.module.css b/src/Components/Home/home.module.css
@@ -0,0 +1,100 @@
+/* Layout */
+
+.container {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.mainContent {
+    height: 50%;
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    /* border: 1px solid magenta; */
+}
+
+.infoContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 50%;
+    /* border: 1px solid lime; */
+}
+
+.titleContainer {
+    width: 70%;
+}
+
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    margin: 0 3em;
+    width: 20%;
+}
+
+.inputContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 50%;
+    /* border: 1px solid lightblue; */
+}
+
+/* Elements */
+
+.userInput {
+    height: 30%;
+    width: 70%;
+    min-width: 300px;
+    background: #F7F7FF;
+    padding: 0 .3em;
+    margin: 0 1em 0 0;
+    border-radius: 4px;
+    border: none;
+    font-size: 1.5rem;
+    font-weight: 100;
+}
+
+.userInput:hover {
+    background: #f3f3fc;
+}
+
+.userInput:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px #F7F7FF;
+}
+
+.button {
+    height: 30%;
+    width: 23%;
+    min-width: 190px;
+    background: #7971EA;
+    margin: 0 1em;
+    border: none;
+    border-radius: 4px;
+    color: #FFFFFF;
+    font-size: 1.5rem;
+    font-weight: 100;
+}
+
+.button:hover {
+    background: #5d55c5;
+}
+
+.button:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px #302b74;
+}
+
+/* Typography */
+
+.title {
+    font-size: 5.5rem;
+    color: #80E8FF;
+    font-weight: 700;
+}
diff --git a/src/Components/Languages/Languages.jsx b/src/Components/Languages/Languages.jsx
@@ -0,0 +1,52 @@
+import React, {useEffect} from 'react'
+import {useParams} from "react-router-dom";
+import axios from 'axios';
+import URL from '../../baseURL';
+import Ga from '../../Assets/ga.png'
+
+const Languages = () => {
+
+    const [Repos, setInfo] = React.useState();
+    const [langs, setLangs] = React.useState();
+    let { username } = useParams();
+
+    useEffect(() => {
+        axios.get(`${URL}users/${username}/repos`)
+        .then(res => {
+            setInfo(res.data);
+            return res;
+        }).then(res => {
+            let dic = {};
+            res.data.forEach(repo => {
+                axios.get(repo.languages_url).then(res =>{
+                    for(var key in res.data){
+                        if (res.data.hasOwnProperty(key)) {
+                            if(dic[key]){
+                                dic[key] += res.data[key];
+                            }
+                            else {
+                                dic[key] = res.data[key];
+                            }
+                        }
+                    }
+                });
+            });
+            console.log(dic);
+            for (var key in dic){
+                console.log( key, dic[key] );
+              }
+
+            setLangs(dic);
+        });
+    },[username]);
+
+    return (
+        <div>
+            <div>
+            </div>
+            <img src={Ga}></img>
+        </div>
+    )
+}
+
+export default Languages;
diff --git a/src/Components/Repos/Repos.jsx b/src/Components/Repos/Repos.jsx
@@ -0,0 +1,39 @@
+import React, {useEffect} from 'react'
+import {useParams} from "react-router-dom";
+import axios from 'axios';
+import URL from '../../baseURL';
+import styles from './Repos.module.css';
+
+const Repos = () => {
+    const [reposInfo, setReposInfo] = React.useState();
+    let { username } = useParams();
+    const [repoUrl, setRepoUrl] = React.useState(`https://github.com/${username}`)
+
+    const repos = reposInfo?.map((repo, index) =>
+        <a className={styles.listItem} key={index} href={`${repoUrl}/${repo.name}`}  target="_blank" rel="noopener noreferrer">
+            <p className={styles.repoTitle}>{repo.name}</p>
+            <p className={styles.repoDesc}>{repo.description}</p>
+            <p className={styles.repoLang}>{repo?.language}</p>
+        </a>
+        );
+
+    useEffect(() => {
+        axios.get(`${URL}users/${username}/repos`)
+        .then(res => {
+            setReposInfo(res.data);
+        });
+    },[username]);
+
+    return (
+        <div className={styles.reposContainer}>
+            <div className={styles.titleRow}>
+                <h1 className={styles.title}>Repos</h1>
+            </div>
+            <div className={styles.reposRow}>
+                {repos}
+            </div>
+        </div>
+    )
+}
+
+export default Repos;