BCN - PT - Antonio Rivera

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "2.1.5"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,15 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import "./App.css";
+import Nav from "./components/Nav";
+import ListCountries from "./components/ListCountries";
+import { Switch, Route } from "react-router-dom";
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Nav />
+        <Route path="/" component={ListCountries} />
       </div>
     );
   }

src/components/Countrie.js

@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import Data from "../data/countries.json";
+import { Link } from "react-router-dom";
+
+class Countrie extends Component {
+  render() {
+    const {
+      match: { params },
+    } = this.props;
+
+    const country = cca3 => Data.filter(country => country.cca3 === cca3);
+
+    return (
+      <div className="col-7">
+        <h1>{country(params.id)[0].name.common}</h1>
+        <table className="table">
+          <thead></thead>
+          <tbody>
+            <tr>
+              <td>Capital</td>
+              <td>{country(params.id)[0].capital[0]}</td>
+            </tr>
+            <tr>
+              <td>Area</td>
+              <td>
+                {country(params.id)[0].area} km
+                <sup>2</sup>
+              </td>
+            </tr>
+            <tr>
+              <td>Borders</td>
+              <td>
+                <ul>
+                  {country(params.id)[0].borders.map((cca3, index) => {
+                    console.log("TCL: Countrie -> render -> cca3");
+
+                    return (
+                      <li>
+                        <Link to={cca3}> {country(cca3)[0].name.common}</Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default Countrie;

src/components/ListCountries.js

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import Data from "../data/countries.json";
+import { Switch, Route, Link } from "react-router-dom";
+import Countrie from "./Countrie";
+
+class ListCountries extends Component {
+  render() {
+    return (
+      <div className="container">
+        <div className="row">
+          <div className="col-5">
+            <div className="list-group">
+              {Data.map((country, index) => {
+                return (
+                  <Link
+                    className="list-group-item list-group-item-action"
+                    to={country.cca3}
+                  >
+                    <span>{country.name.official}</span>
+                    <span>{country.flag}</span>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+          <Switch>
+            <Route path="/:id" component={Countrie} />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ListCountries;

src/components/Nav.js

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+
+class Nav extends Component {
+  render() {
+    return (
+      <nav className="navbar navbar-dark bg-primary mb-3">
+        <div className="container">
+          <a className="navbar-brand" href="/">
+            WikiCountries
+          </a>
+        </div>
+      </nav>
+    );
+  }
+}
+
+export default Nav;

src/index.js

@@ -1,12 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import "bootstrap/dist/css/bootstrap.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import { BrowserRouter } from "react-router-dom";
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
+);
+
+serviceWorker.register();