LAB Solution | React WikiCountries

App.js

// src/App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';

import countriesFromJSON from './countries.json';

import CountriesList from './components/CountriesList';
import CountryDetail from './components/CountryDetail';

const App = () => {
  return (
    <div className="App">

      <nav className="navbar navbar-dark bg-primary mb-3">
        <div className="container">
          <a className="navbar-brand" href="/">WikiCountries</a>
        </div>
      </nav>

      <div className="container">
        <div className="row">
          <CountriesList countriesList={countriesFromJSON} />
        
          <Switch> 
            <Route 
              exact 
              path='/:countrycode' 
              render={ (routerProps) => /* renderizamos el componente CountryDetail pasandole la lista de países 
              y las props de la ruta (match, location and history) */
                <CountryDetail {...routerProps} countriesList={countriesFromJSON} />
              } 
            />
          </Switch>
        </div>
      </div>
      
    </div>
  );
}

export default App;

CountriesList.js

// src/components/CountriesList.js

import React from 'react';
import { Link } from 'react-router-dom';

const CountriesList = (props) => {
  const { countriesList } = props;

  return ( 
    <div className="col-5" style={{maxHeight: "90vh", overflow: "scroll"}}>
      <div className="list-group">
        {countriesList.map(eachCountry => {
          /* para cada país de la lista, devolvemos un enlace (Link) hacia la ruta que renderiza el componente CountryDetail 
          (según lo que hemos configurado en App.js) */
          return (
            <Link to={`/${eachCountry.cca3}`} key={eachCountry.cca3} className="list-group-item list-group-item-action">        
              <span role='img'>{eachCountry.flag}</span> 
              {eachCountry.name.common}
            </Link>
          )
        })}
      </div>
    </div>
  )
}

export default CountriesList;

CountryDetail.js

// src/components/CountryDetail.js

import React from 'react';
import { Link } from 'react-router-dom';

const CountryDetail = (props) => {
  // Recuperamos el código del país desde los parámetros de la ruta (props.match.params)
  const countryCode = props.match.params.countrycode || 'ABW';
  // y destructuramos countriesList desde las props
  const { countriesList } = props;

  // buscamos el objeto pais y lo guardamos en la variable 'country' (sino se encuentra, dejar un objeto vacío)
  const country = countriesList.find(country => country.cca3 === countryCode) || {};

  return (
    <div className="col-7">
      <h1>{country.name && country.name.common}</h1>
      <table className="table">
        <thead></thead>
        <tbody>
          <tr>
            <td style={{width: "30%"}}>Capital</td>
            <td>{country.capital && country.capital[0]}</td>
          </tr>
          <tr>
            <td>Area</td>
            <td>{country.area} km
              <sup>2</sup>
            </td>
          </tr>
          <tr>
            <td>Borders</td>
            <td>
              <ul>
                {country.borders && 
                country.borders.map(borderCode => {
                  // buscamos el país que corresponde al código país y lo guardamos en una variable
                  const borderCountry = countriesList.find(country => country.cca3 === borderCode)
                  return (
                    <li key={borderCode}>
                      <Link to={`/${borderCode}`}>
                        {borderCountry.name.common}
                      </Link>
                    </li>)
                })}
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

export default CountryDetail;