[#52] Improve layout

package.json

@@ -41,7 +41,7 @@
     "eslint-plugin-react": "^7.10.0",
     "jest": "^23.6.0",
     "jest-dom": "^2.1.1",
-    "parcel-bundler": ">=1.10.0",
+    "parcel-bundler": "1.12.4",
     "prettier": "^1.14.2",
     "react-test-renderer": "^16.7.0",
     "react-testing-library": "^5.3.0"

src/App.css

@@ -81,6 +81,15 @@
   color: #a0a0a0;
 }
 
+.repo-button {
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.repos-list {
+  margin-top: 20px;
+}
+
 footer {
   position: fixed;
   margin-top: 5%;

src/App.js

@@ -7,6 +7,7 @@ import UserDetails from "./UserDetails";
 import About from "./About";
 import Footer from "./Footer";
 import "./App.css";
+import DisplayReposList from "./DisplayReposList";
 
 class App extends React.Component {
   render() {
@@ -17,6 +18,7 @@ class App extends React.Component {
           <Main path="/" />
           <UserDetails path="/details/:userName" />
           <About path="/about" />
+          <DisplayReposList path="/repos" />
         </Router>
         <Footer />
       </div>

src/Main.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "@reach/router";
 import githubUsernameRegex from "github-username-regex";
 import api from "./api";
 import DisplayUsersList from "./DisplayUsersList";
@@ -15,7 +16,7 @@ class Main extends React.Component {
       usersData: [],
       sortBy: "stargazers",
       error: false,
-      invalid: false
+      invalid: false,
     };
     this.inputHandler = this.inputHandler.bind(this);
     this.onSubmitHandler = this.onSubmitHandler.bind(this);
@@ -25,7 +26,7 @@ class Main extends React.Component {
   }
 
   deleteUser(username) {
-    const usersData = this.state.usersData.filter(obj => {
+    const usersData = this.state.usersData.filter((obj) => {
       return obj.username !== username;
     });
     this.setState({ usersData });
@@ -34,7 +35,7 @@ class Main extends React.Component {
   handleOptionChange(event) {
     const newState = event.target.value;
     this.setState({
-      sortBy: newState
+      sortBy: newState,
     });
   }
   inputHandler(event) {
@@ -47,19 +48,20 @@ class Main extends React.Component {
     }
   }
   onSubmitHandler() {
-    const currentUsers = this.state.usersData.map(user => user.username);
+    const currentUsers = this.state.usersData.map((user) => user.username);
     const currentInput = this.state.input.trim();
-    if (!githubUsernameRegex.test(currentInput)) this.setState({ invalid: true });
+    if (!githubUsernameRegex.test(currentInput))
+      this.setState({ invalid: true });
     if (
       githubUsernameRegex.test(currentInput) &&
       currentUsers.indexOf(currentInput) === -1 &&
       !this.state.currentApiCall
     ) {
       this.setState({ invalid: false, currentApiCall: true });
-      api.getData(currentInput).then(userData => {
+      api.getData(currentInput).then((userData) => {
         var newState = {
           input: "",
-          currentApiCall: false
+          currentApiCall: false,
         };
         if (userData !== null) {
           newState.usersData = this.state.usersData.concat(userData);
@@ -122,7 +124,11 @@ class Main extends React.Component {
           users={this.state.usersData}
           handleDelete={this.deleteUser}
         />
-        <DisplayReposList />
+        <div className="repo-button">
+          <Link to={`/repos`}>
+            <button className="ui primary button">Popular Repos</button>
+          </Link>
+        </div>
       </div>
     );
   }

src/RepoCard.js

@@ -3,10 +3,10 @@ import { Link } from "@reach/router";
 
 const cardStyle = {
   boxShadow: "0.2rem 0.2rem 0.2rem rgba(0,0,0,.35)",
-  width: "95%",
+  width: "50%",
   padding: "0.8rem",
-  margin: "1rem",
-  backgroundColor: "#fafafa"
+  margin: "2rem auto",
+  backgroundColor: "#fafafa",
 };
 
 class RepoCard extends React.Component {

src/__tests__/__snapshots__/Main.test.js.snap

@@ -43,91 +43,18 @@ exports[`snapshot 1`] = `
     className="ui items"
   />
   <div
-    className="repos-list"
+    className="repo-button"
   >
-    <div
-      className="ui items"
+    <a
+      href="/repos"
+      onClick={[Function]}
     >
-      <h2
-        style={
-          Object {
-            "textAlign": "center",
-          }
-        }
-      >
-        Popular repos in:
-      </h2>
-      <div
-        className="topics"
-        style={
-          Object {
-            "textAlign": "center",
-          }
-        }
+      <button
+        className="ui primary button"
       >
-        <i
-          className="fab fa-js-square fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-        <i
-          className="fab fa-java fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-        <i
-          className="fab fa-android fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-        <i
-          className="fab fa-php fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-        <i
-          className="fab fa-node fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-        <i
-          className="fab fa-python fa-4x"
-          onClick={[Function]}
-          style={
-            Object {
-              "backgroundColor": false,
-              "color": false,
-            }
-          }
-        />
-      </div>
-
-    </div>
+        Popular Repos
+      </button>
+    </a>
   </div>
 </div>
 `;