Display continent details and list of countries

src/App.js

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 
 import { fetchCountries, fetchTotalData } from './redux/covidSlice';
 
 import Nav from './components/Nav/Nav';
 import Home from './components/Home/Home';
+import ContinentDetails from './components/ContinentDetails/ContinentDetails';
 
 const App = () => {
   const dispatch = useDispatch();
@@ -14,12 +15,25 @@ const App = () => {
     dispatch(fetchTotalData());
   }, [dispatch]);
 
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }, [location]);
+
   return (
     <>
       <Nav />
       <div className="mt-16 px-12 pt-6">
         <Routes>
           <Route path="/" element={<Home />} />
+          <Route
+            path="/continent/:continentName"
+            element={<ContinentDetails />}
+          />
         </Routes>
       </div>
     </>

src/components/Continent/Continent.js

@@ -1,12 +1,14 @@
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { BsFillArrowUpRightCircleFill } from 'react-icons/bs';
 import images from '../../images';
 
 const Continent = ({ continent: { continent, cases } }) => (
   <Link
     to={`/continent/${continent}`}
-    className="md:flex-row flex flex-col px-3 py-10 hover:bg-gray-600 justify-between group h-full"
+    className="md:flex-row flex flex-col px-3 py-10 hover:bg-gray-600 justify-between group h-full relative"
   >
+    <BsFillArrowUpRightCircleFill className="text-blue-800 right-2 top-2 absolute text-lg group-hover:text-white" />
     <img
       src={images[continent]}
       alt="continent map"

src/components/ContinentDetails/ContinentDetails.js

@@ -0,0 +1,59 @@
+/* eslint-disable implicit-arrow-linebreak, function-paren-newline */
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import CountUp from 'react-countup';
+import images from '../../images';
+
+import Spinner from '../Spinner/Spinner';
+import CountryList from '../CountryList/CountryList';
+
+const ContinentDetails = () => {
+  const { continentName } = useParams();
+  const continentDetails = useSelector((state) =>
+    state.covid.continents.find((cont) => cont.continent === continentName),
+  );
+  const countries = useSelector((state) =>
+    state.covid.countries.filter(
+      (country) => country.continent === continentName,
+    ),
+  );
+
+  return (
+    <>
+      {!continentDetails && <Spinner />}
+      {continentDetails && (
+        <>
+          <div className="flex md:flex-row flex-col gap-6 md:gap-3 items-center w-full justify-center pb-16 pt-6 px-3 bg-blue-dark rounded-t-lg">
+            <img
+              src={images[continentName]}
+              alt="continent map"
+              className="w-40 invert"
+            />
+            <div className="flex flex-col font-bold text-2xl text-white">
+              <span className="text-center md:text-left mb-4 text-4xl">
+                {continentDetails.continent}
+              </span>
+              <CountUp
+                delay={1}
+                end={continentDetails.cases}
+                separator=","
+                prefix="Total Cases: "
+                duration={3}
+              />
+              <CountUp
+                delay={1}
+                prefix="Total Deaths: "
+                end={continentDetails.deaths}
+                separator=","
+                duration={3}
+              />
+            </div>
+          </div>
+          <CountryList countries={countries} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default ContinentDetails;

src/components/Country/Country.js

@@ -1,21 +1,21 @@
-/* eslint-disable object-curly-newline */
+/* eslint-disable object-curly-newline, implicit-arrow-linebreak */
 import PropTypes from 'prop-types';
 
 const Country = ({
   country: {
     country,
-    continent,
     cases,
     countryInfo: { flag },
   },
   index,
 }) => {
-  const bgColor = (fade = 'ff') => `#${
-    (index + 1) % 4 === 2 || (index + 1) % 4 === 3 ? '7c9edf' : '708dc2'
-  }${fade}`;
+  const bgColor = (fade = 'ff') =>
+    `#${
+      (index + 1) % 4 === 2 || (index + 1) % 4 === 3 ? '7c9edf' : '708dc2'
+    }${fade}`;
   return (
     <div
-      className="flex flex-col px-3 py-10 bg-no-repeat"
+      className="flex flex-col px-3 py-10 bg-no-repeat relative"
       style={{
         backgroundImage: `linear-gradient(to right, #ffffff00, ${bgColor(
           'aa',
@@ -24,9 +24,8 @@ const Country = ({
       }}
     >
       <div className="flex flex-col gap-2 self-end font-bold text-white items-end">
-        <h4 className="flex flex-col items-end">
-          <span className="text-2xl">{`${country}, \n`}</span>
-          <span className="text-sm">{continent}</span>
+        <h4 className="flex flex-col items-end text-right">
+          <span className="text-2xl">{country}</span>
         </h4>
         <span className="text-xl">{cases.toLocaleString()}</span>
       </div>
@@ -37,7 +36,6 @@ const Country = ({
 Country.propTypes = {
   country: PropTypes.shape({
     country: PropTypes.string.isRequired,
-    continent: PropTypes.string.isRequired,
     cases: PropTypes.number.isRequired,
     countryInfo: PropTypes.shape({
       flag: PropTypes.string.isRequired,

src/components/CountryList/CountryList.js

@@ -4,7 +4,7 @@ import styles from './CountryList.module.css';
 import Country from '../Country/Country';
 
 const CountryList = ({ countries }) => (
-  <ul className="grid grid-cols-2 rounded-lg overflow-hidden gap-0.5">
+  <ul className="grid md:grid-cols-2 rounded-lg overflow-hidden gap-0.5">
     {countries.map((country, index) => (
       <li key={country.country} className={styles['country-card']}>
         <Country country={country} index={index} />

src/components/Home/Home.js

@@ -4,47 +4,14 @@ import { FcGlobe } from 'react-icons/fc';
 
 import Spinner from '../Spinner/Spinner';
 import ContinentList from '../ContinentList/ContinentList';
-// import CountryList from '../CountryList/CountryList';
 
 const Home = () => {
-  // const {
-  //   countries,
-  //   totalData: { totalCases, totalDeaths },
-  // } = useSelector((state) => state.covid);
   const {
     continents,
     totalData: { totalCases, totalDeaths },
   } = useSelector((state) => state.covid);
 
   return (
-    // <>
-    //   {!countries.length && <Spinner />}
-    //   {countries.length > 0 && (
-    //     <>
-    //       <div className="flex gap-3 items-center w-full justify-center
-    //                      pb-16 pt-6 bg-blue-dark rounded-t-lg">
-    //         <FcGlobe className="text-8xl bg-white rounded-full" />
-    //         <div className="flex flex-col font-bold text-2xl text-white">
-    //           <CountUp
-    //             delay={1}
-    //             end={totalCases}
-    //             separator=","
-    //             prefix="Total Cases: "
-    //             duration={3}
-    //           />
-    //           <CountUp
-    //             delay={1}
-    //             prefix="Total Deaths: "
-    //             end={totalDeaths}
-    //             separator=","
-    //             duration={3}
-    //           />
-    //         </div>
-    //       </div>
-    //       <CountryList countries={countries} />
-    //     </>
-    //   )}
-    // </>
     <>
       {!continents.length && <Spinner />}
       {continents.length > 0 && (

src/components/Nav/Nav.js

@@ -1,7 +1,25 @@
-const Nav = () => (
-  <nav className="z-10 fixed top-0 w-screen py-3 px-6 text-center bg-blue-dark text-white tracking-widest shadow-xl">
-    <h1 className="text-2xl font-extrabold">Covid Tracker</h1>
-  </nav>
-);
+import { IoIosArrowBack } from 'react-icons/io';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const Nav = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <nav className="z-10 fixed top-0 w-screen py-3 px-6 text-center bg-blue-dark text-white tracking-widest shadow-xl">
+      {location.pathname !== '/' && (
+        <div className="absolute text-3xl hover:bg-blue-900 cursor-pointer left-0 top-0 h-full flex items-center pl-6 pr-2">
+          <IoIosArrowBack
+            onClick={() => {
+              navigate(-1);
+            }}
+          />
+        </div>
+      )}
+
+      <h1 className="text-2xl font-extrabold">Covid Tracker</h1>
+    </nav>
+  );
+};
 
 export default Nav;

src/index.css

@@ -47,6 +47,8 @@ body {
   line-height: 1.5;
   background-color: #5485e2;
   font-family: GillSans, sans-serif;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 /* A elements that don't have a class get default styles */