Replaced Context API with Redux + Redux Toolkit

package.json

@@ -3,13 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "node-sass": "^6.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"

src/assets/sass/1-helpers/_variables.scss

@@ -6,6 +6,8 @@ $mainTextColor: #1f1f1f;
 // HEADER
 
 $headerBoxShadow: rgba(0, 0, 0, 0.137);
+$headerBg: white;
+
 // logo
 $logoBorder: rgb(241, 212, 44);
 $logoBg: transparent;

src/assets/sass/2-tools/_buttons.scss

@@ -0,0 +1,16 @@
+// Go Back button
+#go-back__btn {
+    padding         : 10px 20px;
+    background-color: white;
+    border          : none;
+    box-shadow      : 0 0 10px -0px rgba(160, 159, 159, 0.404);
+
+    .arrow-back {
+        margin-right: 7px;
+        color       : rgb(36, 36, 36);
+
+        svg {
+            font-size: 15px;
+        }
+    }
+}

src/assets/sass/5-modules/_borders.scss

@@ -0,0 +1,7 @@
+.border-list {
+    @include flexItem(flex-start, center, row);
+    .border {
+        margin-right: 10px;
+        padding: 10px 15px;
+    }
+}

src/assets/sass/6-pages/_header.scss

@@ -2,6 +2,7 @@ header {
     @include flexItem(space-between, center, row);
     box-sizing: border-box;
     position: fixed;
+    background-color: $headerBg;
     top: 0;
     left: 0;
     width: 100%;

src/assets/sass/6-pages/_singleCountry.scss

@@ -0,0 +1,43 @@
+#country {
+    margin-top: 16vh;
+    margin-bottom: 5vh;
+    padding   : 30px 25px;
+
+    .country-data__container {
+        margin-top: 60px;
+
+        img {
+            width: 100%;
+        }
+
+        .country-data {
+            margin-top: 15px;
+
+            h1 {
+                font-size  : 28px;
+                font-weight: 800;
+                line-height: 2.5;
+            }
+
+            p {
+                margin-bottom: 10px;
+                font-size    : 15px;
+                font-weight  : 600;
+
+                span {
+                    font-weight: normal;
+                }
+            }
+
+            .sub-data {
+                margin: 40px 0 30px;
+            }
+
+            h3 {
+                font-size: 18px;
+                font-weight: 600;
+                line-height: 3;
+            }
+        }
+    }
+}

src/assets/sass/main.scss

@@ -9,6 +9,7 @@
 // 2 - TOOLS
 @import '2-tools/_reset';
 @import '2-tools/_animation';
+@import '2-tools/_buttons';
 
 // 3 - BASICS
 @import '3-basics/_links';
@@ -24,8 +25,10 @@
 @import '5-modules/_filter';
 @import '5-modules/_searchField';
 @import '5-modules/_countryCard';
+@import '5-modules/_borders';
 
 //  6 - PAGES
+@import '6-pages/_singleCountry';
 @import '6-pages/_header';
 @import '6-pages/_hero';
 @import '6-pages/_about';

src/index.js

@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './pages/containers/App';
 import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux';
+import store from './store/store';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );

src/pages/components/CountriesComponents/Countries/CountriesList.js

@@ -1,31 +1,42 @@
-import React, { useEffect, useState } from 'react'
 import axios from 'axios';
-// import { Link } from 'react-router-dom';
 
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux';
+import { countriesActions } from '../../../../recuders/countriesReducer';
+
+import { Link } from 'react-router-dom';
 import CountryCard from '../../../components/CountriesComponents/Countries/CountryCard';
 
 const Countries = () => {
-    const [allCountries, setAllCountries] = useState([]);
+    const dispatch = useDispatch();
 
-    useEffect(() => {
-        const countriesUrl = 'https://restcountries.eu/rest/v2/all';
+    // Get a slice of the store. Retrieve the part of the store that you need
+    // useSelector automatically subscribes the component
+    const countries = useSelector(state => state.countries.countries)
+    const error = useSelector(state => state.countries.error)
+
+    const countriesUrl = 'https://restcountries.eu/rest/v2/all';
 
+    useEffect(() => {
         axios.get(countriesUrl).then((countries) => {
-            setAllCountries(countries.data);
-            console.log(allCountries);
-        })
-    }, [setAllCountries]);
+            console.log(countries.data);
+            dispatch(countriesActions.setCountries(countries.data));
+        });
+    }, []);
+
+    console.log(countries.countries);
+
     return (
         <section id="country-list">
             <div className="country-grid">
-                {allCountries.map((country) => {
+                {countries.map((country) => {
                     return (
-                        <CountryCard name={country.name} population={country.population} region={country.region} capital={country.capital} flag={country.flag} />
+                        <Link to={"/" + country.name} key={country.alpha3Code}><CountryCard name={country.name} population={country.population} region={country.region} capital={country.capital} flag={country.flag} /></Link>
                     )
                 })}
             </div>
         </section>
     )
 }
 
-export default Countries
+export default Countries;

src/pages/components/SingleCountryComponents/BackBtn.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useHistory } from "react-router-dom";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faReply } from '@fortawesome/free-solid-svg-icons';
+
+const BackBtn = () => {
+    let history = useHistory();
+
+    const goBackHandler = () => {
+        history.push('/');
+    }
+    return (
+        <button type="button" onClick={goBackHandler} id="go-back__btn">
+           	<FontAwesomeIcon className="arrow-back" icon={faReply}/> Go Back
+        </button>
+    )
+}
+
+export default BackBtn;

src/pages/components/SingleCountryComponents/Border.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Border = (props) => {
+    console.log('work');
+    return (
+        <div className="border">
+            {props.country}
+        </div>
+    )
+}
+
+export default Border;

src/pages/components/SingleCountryComponents/SingleCountry.js

@@ -0,0 +1,83 @@
+import axios from 'axios';
+
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import { countryActions } from '../../../recuders/countryReducer';
+
+const SingleCountry = () => {
+    const dispatch = useDispatch();
+
+    const { country: countryID } = useParams();
+
+    const country = useSelector(state => state.country.country);
+
+    const error = useSelector(state => state.country.error);
+
+    const countryUrl = 'https://restcountries.eu/rest/v2/name/' + countryID;
+
+    const fetchCountry = async () => {
+        try {
+            await axios.get(countryUrl).then(ctry => {
+                console.log('Fetching borders');
+                dispatch(countryActions.setCountry(ctry.data[0]));
+            });
+        } catch (err) {
+            console.error(err);
+            dispatch(countryActions.setError(err));
+        }
+    }
+
+    useEffect(() => {
+        fetchCountry();
+    }, []);
+
+    return (
+        <div className="country-data__container">
+            {country ?
+                (
+                    <>
+                        <img src={country.flag} alt="" />
+
+                        <div className="country-data">
+                            <h1>{country.name}</h1>
+
+                            <div className="main-data">
+                                <p>Native name: <span>{country.nativeName}</span></p>
+                                <p>Population: <span>{country.population}</span></p>
+                                <p>Region: <span>{country.region}</span></p>
+                                <p>Sub Region: <span>{country.subRegion}</span></p>
+                                <p>Capital: <span>{country.capital}</span></p>
+                            </div>
+
+                            <div className="sub-data">
+
+                                <p>Top Level Domain: <span>{country.topLevelDomain}</span></p>
+                                <p>Currencies: <span>
+                                    {country.currencies.map(currency => {
+                                        return <span className="currency" key={currency.name}>{currency.name}</span>
+                                    })}
+                                </span></p>
+                                <p>Languages: <span>
+                                    {country.languages.map(language => {
+                                        return <span key={language.name} className="language">{language.name}</span>
+                                    })}
+                                </span></p>
+                            </div>
+
+                            <h3>Border Countries:</h3>
+                            {country ? (
+                                <p>{country.borders}</p>
+                            ) : ''}
+                            <div className="border-list">
+                            </div>
+                        </div>
+                    </>
+                )
+                : ''}
+        </div>
+    )
+}
+
+export default SingleCountry;

src/pages/containers/App.js

@@ -1,16 +1,22 @@
 import React from 'react';
 
 import '../../assets/sass/main.scss';
-
+import { BrowserRouter, Route } from 'react-router-dom';
 import Header from './Header';
 import Countries from './Countries';
+import Country from './Country';
 
 function App() {
   return (
-    <>
-     <Header />
-     <Countries />
-    </>
+    <BrowserRouter>
+      <Header />
+      <Route path="/:country">
+        <Country />
+      </Route>
+      <Route path="/" exact>
+        <Countries />
+      </Route>
+    </BrowserRouter>
   );
 }
 

src/pages/containers/Country.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import BackBtn from '../components/SingleCountryComponents/BackBtn';
+import SingleCountry from '../components/SingleCountryComponents/SingleCountry';
 
 const Country = () => {
+
     return (
-        <div>
-
-        </div>
+        <section id="country">
+            <BackBtn />
+            <SingleCountry />
+        </section>
     )
 }