FT BCN Lu-Jorge

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.0.1",
     "react-scripts": "2.1.5"
   },
   "scripts": {

src/App.js

@@ -1,26 +1,20 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import CountryDetail from'./pages/CountryDetail'
+import CountryList from'./pages/CountryList'
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 class App extends Component {
   render() {
     return (
+      <Router>
       <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>
+        <Switch> 
+          <Route path= '/' exact component = {CountryList} />
+          <Route path= '/country-detail/:id' exact component = {CountryDetail} />
+        </Switch>
       </div>
+      </Router>
     );
   }
 }

src/index.js

@@ -3,8 +3,15 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter } from "react-router-dom";
+import 'bootstrap/dist/css/bootstrap.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+   <BrowserRouter>
+        <App />
+    </BrowserRouter>,
+    document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/pages/CountryDetail.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Redirect, Link} from 'react-router-dom'
+import data from '../data/countries.json'
+
+class CountryDetail extends Component {
+  state = {
+    country : {},
+    countries: data,
+    loading: true,
+  }
+
+  componentDidMount(){
+
+    const country = this.state.countries.find((pais)=>{
+      return pais.cca3 === this.props.match.params.id
+    }) 
+    this.setState({country, loading: false,})
+  }
+
+  render() {
+    console.log(this.state.country)
+    return (
+      <div>
+        <Link to = '/'> <button> Back </button> </Link>
+        <h1>Country Details Page</h1>
+        <h2>{!this.state.loading && this.state.country.name.official}</h2>
+        <p> Capital: {!this.state.loading && this.state.country.capital}</p>
+        <p> Area: {!this.state.loading && this.state.country.area}</p>
+        <ul> Borders:
+        <li>{!this.state.loading && this.state.country.borders}</li>
+        </ul>
+
+      </div>
+    )
+  }
+}
+
+export default CountryDetail;

src/pages/CountryList.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import data from '../data/countries.json'
+import { Redirect, Link} from 'react-router-dom'
+
+
+
+class CountryList extends Component {
+  state = {
+    countries: data,
+  }
+  render() {
+    const {countries} = this.state
+    return (
+      <div>
+      {countries.map((countries, index) => {
+        return (
+       <Link to={`/country-detail/${countries.cca3}`}> 
+       <div key={index}>
+        <li> <h2>{countries.flag}</h2></li>
+        <li> <h2>{countries.name.official}</h2> </li>
+        </div> </Link>
+      )
+      })}
+      </div>
+    )
+  }
+}
+
+export default CountryList;