rest countries api

Community feedback

• 

  Zaw Zaw Myat Nyein•0

  @zawzawmyatnyeinPosted almost 2 years ago

  • I tried this challenge yesterday with vanilla javascript.
  • I thought initially to use React. I got lazy and didn't use it.
  • Two html page and some javascript.
  • I used tailwind css for styling and theme switching.
  • Tailwind css is very easy to implement light and dark mode.
  • I haven't uploaded the solution here yet.
  • But this is the live demo
  • Here is the repository

  0
• 

  J.D. Browne•870

  @PeshwariNaanPosted almost 2 years ago

  Hello Anurag - good work on completing the challenge.

  Here are a couple of tips that might help.

  • I would suggest starting to use a different library for your css. You are already structuring your files to where a switch to styled components or css modules would not be a big change. I'm using styled components and it makes doing things like switching themes very easy. You can see my solution HERE to see if it would be something you would like to learn.

  • The context is pretty easy to set up for this project. There are many different ways to do it. I just made the initial api call to get all of the countries when the web app loads the first time. I don't do any filtering in the context so the code is really simple. The set up is this:

  import { createContext, useState, useEffect } from 'react';
  import axios from 'axios';
  
  export const CountriesContext = createContext([]);
  
  export const CountriesProvider = ({ children }) => {
    const [countryData, setCountryData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
  
     const getData = async () => {
      setIsLoading(true);
      try {
        const response = await axios.get(
          `https://restcountries.com/v3.1/all?fields=name,altSpellings,capital,population,region,flags,subregion,tld,currencies,languages,borders,cca3`
        );
        console.log("data from context", response.data);
        setCountryData(response.data);
        setIsLoading(false);
      } catch (error) {
        setIsLoading(false);
        throw new Error('There is a problem getting the data');
      }
    };
  
    useEffect(() => {    
      getData();
      
    }, []);
  
    const value = { countryData, isLoading };
  
    return (
      <CountriesContext.Provider value={value}>
        {children}
      </CountriesContext.Provider>
    );
  };
  

  As you can see I only handle getting data and loading states with a simple async function call.

  I hope this helps - Happy coding🍻

  0