Fix Local Storage usage and Refactor App/CountryCard

-Improvements -Countries are now added to local storage when fetches to lower amount of fetch calls when searching for same country multiple times -Added new UseEffect in App
jonaskinnvall · Jan 16, 2021 · 4352618 · 4352618
1 parent a35dfe8
commit 4352618
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 62 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,6 +5,7 @@
     "parserOptions": {
         "sourceType": "module",
         "allowImportExportEverywhere": true,
+        "ecmaVersion": 8,
         "ecmaFeatures": {
             "experimentalObjectRestSpread": true,
             "jsx": true

diff --git a/src/App.js b/src/App.js
@@ -1,30 +1,67 @@
 import React, { useState, useEffect } from 'react';
+
 import './styles.css';
 import CountryCard from './CountryCard';
 import InputField from './InputField';
 
 export default function App() {
     const [Countries, setCountries] = useState();
     const [Search, setSearch] = useState();
+    // window.localStorage.clear();
 
-    // UseEFfect to fetch country when user types in search field
+    // UseEffect to fetch country when user types in search field
     useEffect(() => {
-        const fetchCountry = (country) => {
-            fetch(
-                'https://restcountries.eu/rest/v2/name/' +
-                    country +
-                    '?fullText=true'
-            )
-                .then((response) => response.json())
-                .then((data) => setCountries(data))
-                .catch((err) => console.log('Fetching error', err));
+        const fetchCountry = async () => {
+            try {
+                console.log('Fetch');
+                const response = await fetch(
+                    'https://restcountries.eu/rest/v2/name/' +
+                        Search +
+                        '?fullText=true'
+                );
+                const newCountry = await response.json();
+                console.log(Object.prototype.toString.call(newCountry));
+                if (
+                    Object.prototype.toString.call(newCountry) ===
+                    '[object Array]'
+                ) {
+                    setCountries(newCountry);
+                } else {
+                    setCountries();
+                }
+            } catch (err) {
+                console.log('Fetching error', err);
+            }
         };
 
         if (Search) {
-            fetchCountry(Search);
+            if (typeof Storage !== 'undefined') {
+                if (
+                    typeof window.localStorage.getItem(Search) !==
+                        'undefined' &&
+                    window.localStorage.getItem(Search) !== null
+                ) {
+                    setCountries(
+                        JSON.parse(window.localStorage.getItem(Search))
+                    );
+                } else {
+                    fetchCountry();
+                }
+            }
         }
     }, [Search]);
 
+    // UseEffect to add country to local storage on change
+    useEffect(() => {
+        if (
+            (typeof window.localStorage.getItem(Search) === 'undefined' ||
+                window.localStorage.getItem(Search) === null) &&
+            typeof Countries !== 'undefined'
+        ) {
+            window.localStorage.setItem(Search, JSON.stringify(Countries));
+        }
+    }, [Countries]);
+
     return (
         <>
             <div className="App Navbar">
@@ -36,7 +73,14 @@ export default function App() {
                 />
             </div>
 
-            {!Countries ? (
+            {Search && !Countries ? (
+                <div className="App">
+                    <h2>
+                        Fetching error... No country with matching name or
+                        country code. Please try again.
+                    </h2>
+                </div>
+            ) : !Countries ? (
                 <div className="App">
                     <h2>Search for a country to learn more about it!</h2>
                 </div>

diff --git a/src/CountryCard.js b/src/CountryCard.js
@@ -29,60 +29,50 @@ const CountryCard = ({ countryInfo }) => {
 
     return (
         <>
-            {!countryInfo ? (
-                <div>
-                    <h2>
-                        Fetching error... No country with matching name or
-                        country code. Please try again.
-                    </h2>
+            <div className="countryCard">
+                <img className="flag" src={countryInfo.flag} alt="" />
+                <div className="columnWidth">
+                    <h1>{countryInfo.name}</h1>
+                    <h3>({countryInfo.nativeName})</h3>
+                    <h3> Part of {countryInfo.region}</h3>
                 </div>
-            ) : (
-                <div className="countryCard">
-                    <img className="flag" src={countryInfo.flag} alt="" />
-                    <div className="columnWidth">
-                        <h1>{countryInfo.name}</h1>
-                        <h3>({countryInfo.nativeName})</h3>
-                        <h3> Part of {countryInfo.region}</h3>
-                    </div>
-                    <div className="categories columnWidth">
-                        <h3>Capital: {countryInfo.capital}</h3>
-                        <h3>
-                            Population:{' '}
-                            {countryInfo.population.toLocaleString()}
-                        </h3>
-                        <h3>
-                            Currency: {countryInfo.currencies[0].name} (
-                            {countryInfo.currencies[0].code})
-                        </h3>
-                    </div>
-                    <div>
-                        <p>
-                            Input value in SEK to get current exchange rate for{' '}
-                            {countryInfo.currencies[0].code}:
-                        </p>
-                        <div className="currencyInput">
-                            <div className="columnWidth">
-                                <InputField
-                                    inputType={'SEK'}
-                                    inputValue={AmountSEK}
-                                    setInput={setAmountSEK}
-                                />
-                            </div>
-                            <div>
-                                <p>=</p>
-                            </div>
-                            {Currency && AmountSEK !== '' ? (
-                                <p>
-                                    {Currency.result}{' '}
-                                    {countryInfo.currencies[0].code}
-                                </p>
-                            ) : (
-                                <p>{countryInfo.currencies[0].code}</p>
-                            )}
+                <div className="categories columnWidth">
+                    <h3>Capital: {countryInfo.capital}</h3>
+                    <h3>
+                        Population: {countryInfo.population.toLocaleString()}
+                    </h3>
+                    <h3>
+                        Currency: {countryInfo.currencies[0].name} (
+                        {countryInfo.currencies[0].code})
+                    </h3>
+                </div>
+                <div>
+                    <p>
+                        Input value in SEK to get current exchange rate for{' '}
+                        {countryInfo.currencies[0].code}:
+                    </p>
+                    <div className="currencyInput">
+                        <div className="columnWidth">
+                            <InputField
+                                inputType={'SEK'}
+                                inputValue={AmountSEK}
+                                setInput={setAmountSEK}
+                            />
+                        </div>
+                        <div>
+                            <p>=</p>
                         </div>
+                        {Currency && AmountSEK !== '' ? (
+                            <p>
+                                {Currency.result}{' '}
+                                {countryInfo.currencies[0].code}
+                            </p>
+                        ) : (
+                            <p>{countryInfo.currencies[0].code}</p>
+                        )}
                     </div>
                 </div>
-            )}
+            </div>
         </>
     );
 };