REST Countries API with color theme switcher

@fadelun Haven't noticed before, thanks for the feedback!

@denielden Thanks for the feedback

@christopher-adolphe Thanks, I will take a look

Hi @catherineisonline, 👋

I'm happy to help and glad to see that this was helpful to you. 👍

I don't know if you had the chance to give it a try but here's what I had in mind when suggesting this.

• Create a new context directory under your src directory
• Create a CountriesContext.js file inside this new directory with the following content:

import { createContext, useState } from  'react';

// Creating a context which will be accessible to
// the components of the React app. Here the context
// is an object with 2 keys; `onBuildCountryCodes` and
// `onGetCountryNames`, which are functions to build the
// country codes list and to get the country names list
const CountriesContext = createContext({
  onBuildCountryCodes: (countries) => {},
  onGetCountryNames: (borders) => {}
});

// This `CountriesContextProvider` will be use as a
// wrapper component to provide the context to the
// entire React app
export function CountriesContextProvider({ children }) {
  const [ countryCodes, setCountryCodes ] = useState([]);
  
  // The `buildCountryCodesHandler` function contains the logic
  // to build the countryCodes list from a list of countries
  const buildCountryCodesHandler = (countries) => {
    countries.forEach(country => {
      const { name, alpha2Code, alpha3Code } = country;
      
      setCountryCodes(prevState => [
        ...prevState,
        { name, alpha2Code, alpha3Code }
      ]);
    });
  };
  
  // The `getCountryNamesHandler` function contains the logic
  // to return a list of country name from a list of country
  // border codes
  const getCountryNamesHandler = (borders) => {
    return countryCodes.map(country => borders.includes(country.alpha3Code) ? country.name : null);
  };
  
  // Defining a `contextValue` object that matches the structure
  // of the `CountriesContext` context and passing the handler
  // functions as value to it's keys. We will then pass it to the
  // `value` prop of the `<CountriesContext.Provider>` component
  const contextValue = {
    onBuildCountryCodes: buildCountryCodesHandler,
    onGetCountryNames: getCountryNamesHandler
  };

  return (
    <CountriesContext.Provider value={ contextValue }>
      { children }
    </CountriesContext.Provider>
  );
}

export default CountriesContext;

• Wrap your root component inside index.js with the <CountriesContextProvider> component like this:

// all your other imports
import CountriesContextProvider from './context/CountriesContext';

root.render(
  <React.StrictMode>
    <CountriesContextProvider> {/* Wrapping starts here */}
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <div className="mainContainer">
          <Header />
            <Routes>
              <Route exact path="/:name" element={<Country />} />
              <Route path="*" element={<Error />} />
              <Route path="/" exact element={<Countries />} />
            </Routes>
          </div>
      </BrowserRouter>
    </CountriesContextProvider> {/* Wrapping ends here */}
  </React.StrictMode>
);

• You can now access this context in your <Countries /> component using the useContext hook like this:

import { useState, useEffect, useContext } from 'react';
import { CountriesContext } from '../context/CountriesContext';

export default function Countries()  {
  // ...
  // Getting the `onBuildCountryCodes` function from the context
  const { onBuildCountryCodes } = useContext(CountriesContext);

  const fetchCountries = async () => {
    try {
      setIsLoading(true);
      const response = await fetch(url);
      const data = await response.json();
      setCountries(data);
      // Passing the list of countries fetched from the API to
      // the `onBuildCountryCodes` function to build the `countryCodes` list
      onBuildCountryCodes(data);
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  };

  // ...
}

• Then access the context in your <Country /> component to get the names of the border countries like this:

import { useState, useEffect, useContext } from 'react';
import { CountriesContext } from  '../context/CountriesContext';

export default function Country()  {
  // ...
  const [borderGroup, setCountryBorders] = useState([]);

  // Getting the `onGetCountryNames` function from the context
  const { onGetCountryNames } = useContext(CountriesContext);
  
  useEffect(() => {
    const fetchCountryData = async () => {
      try {
        setIsLoading(true);
        const url = `https://restcountries.com/v2/name/${name}`;
        const response = await fetch(url);
        const data = await response.json();
        setCountry(data);
        // Passing the borders list to the `onGetCountryNames` function to
        // get the full name of the border countries and using `setCountryBorders`
        // to set the `borderGroup` state
        setCountryBorders(onGetCountryNames(data[0].borders));
      } catch (error) {
        console.log(error);
      } finally {
        setIsLoading(false);
      }
    };
    
    fetchCountryData();
  }, [name, borderGroup]);
  
  // ...
}

Let me know if that worked for you.

Sorry, 😔 this markdown editor doesn't render comments in code snippets nicely. Maybe you could paste them in your code editor for better readability. 🙂

Best regards.

@adram3l3ch Thank you

@Javieer57 Hi, thanks for the feedback. I have fixed this issue and it should be working properly now. Thank you

@Jukiyoomi Thank you

@qadzek I have fixed this issue with borders and it should be working properly now. Thanks for the feedback I will get back to the other suggestions later on

@Samadeen Hi, thanks! I started learning by practicing and never really read docs, so if you understand JavaScript it makes React much easier. I started reading much later to understand some concepts better but the internet is full of useless information. I recommend starting with official docs: https://reactjs.org/docs/getting-started.html

It's not very hard to understand but if they have some topics not clear enough, you can google and try to find some more info.

@catherineisonline Thank you. I appreciate

@Samadeen No worries, I hope that helps

@D3press3dd Thank you! Wow, this looks awesome!

@benjithorpe I will check it out, still have to finish off the mobile version. Thanks for the feedback!

@Zein-MB Thanks! ;D

@Valeri85 I will check it, thanks

@vickydarlinn Thanks!