Responsive rest countries SPA built with viteReact and charka uI

Community feedback

• 

  Franco shum•130

  @Francoshum95Posted about 2 years ago

  You can use .filter() function to implement search & filter region instant of fetching API.

  There are four conditions would happen: 1 ) searchWord === "" and region === "" (no search keyword and region selected) 2) searchWord !== "" and region === "" (have keywords and no region selected) 3) searchWord === "" and region !== "" (no keywords and have region selected) 4) searchWord !== "" and region !== "" (both exist)

  First, put SearchBar.jsx and RegionFilter.jsx business logic to upper level so you can share the state value with other components. For instance, in Home.jsx:

    const [searchTerm, setSearchTerm] = useState("");
  
  ....
  
  return (
   .....
  <SearchBar setSearchTerm={setSearchTerm} searchTerm={searchTerm}/>
  )
  

  Then, you can create a new value and filter function to return the filtered value. To prevent unwanted rerending use useMemo add dependencies searchTerm, listOfCountries, filterRegion

  const getFilterData = ({ listOfCountries,
      searchTerm,
      filterRegion}) => {
  
  return listOfCountries.filter(data => {
  if (searchTerm === data.name.split(" ").join("") ){
  return true
  }
  ......
  })
  }
    const filteredData = useMemo(() => getFilterData({
      listOfCountries,
      searchTerm,
      filterRegion
    }), [listOfCountries, searchTerm, filterRegion]);
  
  
  return (
   ...
  
  )
  
  

  To get the country name you can use an object to map it :

  const hashMap = {
   countryCode: CountryName
  }
  
  ......
  
  
  return (
   ....
  
  {
  borderCountries.map(item => (
  <div>{hashMap[item]}</div>
  ))
  
  }
  )
  
  

  Marked as helpful

  0

  ---

  

  luqman adeiza ibrahim•70

  @fvllyPosted almost 2 years ago

  @Francoshum95 Thanks a lot Franco, I just had a look at your comments, I will implement your suggestions shortly

  0
• 

  Jean Chris•160

  @john-coderproPosted about 2 years ago

  hello ibrahim, congratulations for completing this challenge I don't know much about react but I got a glimpse in your code and this is what I can say about your specific preoccupations:

  you can't really do much to improve the time needed to fetch data from the api unless you reduce the amount of data you request, this is achievable by requesting the data by region starting with the region with the smallest amount of data (oceania in your case) then updating the view with those data before fetching the data for the other regions, that way the user will start interacting with your app very quickly (less than 3 second when you request countries from oceania first)

  to get the whole country's name for borders you'll use the borders array that the api provides, because this are cca3 codes, you can pass it as a parameter to the following function

   const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
      if (arrayOfBordersCca3Codes) 
          return countries
              .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
              .reduce(
                  (arrayOfBordersNames, currentObject) =>
                      arrayOfBordersNames.concat(currentObject.name.common),
                  []
              )
      else return null
  }
  

  hope it helps

  0

  ---

  

  luqman adeiza ibrahim•70

  @fvllyPosted almost 2 years ago

  @john-coderpro John much appreciated, yeah I realized not much could be done about fetching time, albeit I came across react-query which happens to cache so that improves performance, looking to implement it as we speak, while also utilizing your border country function

  0