lab-react-wiki-countries proposed solution

App.jsx

import { useState, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import CountryDetails from './components/CountryDetails';
import CountriesList from './components/CountriesList';
import Navbar from './components/Navbar';

// import countryListData from './countries.json';
import axios from 'axios';

function App() {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    axios
      .get('https://ih-countries-api.herokuapp.com/countries')
      .then((result) => {
        const data = result.data;
        setCountries(data);
      });
  }, []);

  return (
    <div className="App">
      <Navbar />

      <div className="container">
        <div className="row">
          <CountriesList countries={countries} />
          <Routes>
            <Route
              path="/:id"
              element={<CountryDetails countries={countries} />}
            />
          </Routes>
        </div>
      </div>
    </div>
  );
}

export default App;

CountryDetails.jsx

// import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
// import axios from 'axios';

const CountryDetails = (props) => {
  const { id } = useParams();
  const { countries } = props;
  const country = countries.find((item) => {
    return id === item.alpha3Code;
  });

  // const [country, setCountry] = useState(null);
  // useEffect(() => {
  //   axios
  //     .get(`https://ih-countries-api.herokuapp.com/countries/${id}`)
  //     .then((result) => {
  //       const data = result.data;
  //       setCountry(data);
  //     });
  // }, [id]);

  return (
    (country && (
      <div className="col-7">
        <h1>{country.name.common}</h1>
        <table className="table">
          <thead></thead>
          <tbody>
            <tr>
              <td style={{ width: '30%' }}>Capital</td>
              <td>{country.capital.join(', ')}</td>
            </tr>
            <tr>
              <td>Area</td>
              <td>
                {country.area} km
                <sup>2</sup>
              </td>
            </tr>
            {(country.borders.length && (
              <tr>
                <td>Borders</td>
                <td>
                  <ul>
                    {country.borders.map((borderCode) => {
                      const borderCountry = countries.find((item) => {
                        return borderCode === item.alpha3Code;
                      });
                      return (
                        <li key={borderCode}>
                          <Link to={`/${borderCode}`}>
                            {borderCountry.name.common}
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                </td>
              </tr>
            )) ||
              null}
          </tbody>
        </table>
      </div>
    )) || (
      <div>
        <h1>Country not found</h1>
      </div>
    )
  );
};

export default CountryDetails;

CountryList.jsx

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

const CountriesList = (props) => {
  const { countries } = props;
  return (
    <div className="col-5" style={{ maxHeight: '90vh', overflow: 'scroll' }}>
      <div className="list-group">
        {countries.map((country) => {
          return (
            <Link
              key={country.alpha3Code}
              className="list-group-item list-group-item-action"
              to={`/${country.alpha3Code}`}
            >
              {country.name.common}
            </Link>
          );
        })}
      </div>
    </div>
  );
};

export default CountriesList;

Navbar.jsx

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

const Navbar = () => {
  return (
    <nav className="navbar navbar-dark bg-primary mb-3">
      <div className="container">
        {/* TODO: Replace this by react-router-dom Link component */}
        <Link className="navbar-brand" to="/">
          WikiCountries
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;