REST countries api redo second time.

Community feedback

• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  I have made two version for this challenge, first with vanilla js and then using Reactjs.(I will add link to both at the bottom). With react it is quite easy to do stuff especially if creating markup dynamically. I dont know if you know react yet.

  When i made it with vanilla js i forgot to implememt both search and filter together which i added in react version. This is how i did in react. Im sure you can the same way in Vanilla JS too.

  I made two variable "countries" & "filteredContries". After initial network request , i put same result to both the variable. "countries" variable act as a backup, to get back initial result even after filtering and search. And then i made a function to update "filteredCountries" variable based on different scenario of filtering and searching together.

  In DOM im looping through filteredCountries and not through "countries" variable.

  There is what i did in that function:

  if (option === "All" && searchInput === "") setFilteredCountries(countries);
      else if (option === "All" && searchInput !== "") {
        setFilteredCountries(
          countries.filter((country) =>
            country.name.toLowerCase().includes(searchInput)
          )
        );
      } else if (option !== "All" && searchInput === "") {
        setFilteredCountries(
          countries.filter((country) => country.region === option)
        );
      } else {
        setFilteredCountries(
          countries.filter((country) => {
            return (
              country.name.toLowerCase().includes(searchInput) &&
              country.region === option
            );
          })
        );
      }
  

  I hope this helped you out. If you do not understand any path feel free to write back. I am happy to help. I am a self-tought dev i know the importance of helpin ppl out. Im no expert.

  Keep solving these problems and you will be pro in no time..

  Repo for Vanilla JS: https://github.com/besttlookk/FEM-REST_countries_with_theme_switch (look into dist folder)

  Repo for React version: https://github.com/besttlookk/FEM-rest-countries-react-version (look into "src/pages/Home"

  Good luck

  Marked as helpful

  0
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  Hi, There are few issues i like to point out.

  1. Filter and search does not work at the same time. What if i first search something and then try to use filter?
  2. I guess you are making network request each times user search or filter. Why bother, when you already have complete data on first re-load. Try to searcha and filter from that.
  3. When search result is few, card becomes huge.
  4. You dark mode toggle is not persistent, it chages to after refresh.

  and finally a suggestion.

  1. Add some hover effect to inhance intractivity.
  2. When there is no result. let user know that. Black screen doen not look good.

  and again here is mine: https://rest-countries-fem-v2.herokuapp.com/

  Good luck

  #happyCoding

  Marked as helpful

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted over 2 years ago

  @besttlookk Hey! Thanks a lot for your time and feedback! In regards to your suggestion:

  1. I did add hover for box shadow but maybe too subtle that it's hard to see. I've just added a new hover effect.
  2. I do have paragraph message when search is no result! In regards to issues:
  3. I wanted to have filter and search to work at the same time but did not know how.
  4. Yes, in my solution, I make network request everytime for search and filter, which I am aware are really bad but I don't know any alternative approach or solution for this myself even after googling.
  5. Card becomes huge and I'm aware of that but no idea how to fix. To be honest, I am aware of those issuess, but my abilities are so limited and I really wish I could do better. I have looked at your solution site and it looks great really! Would you mind sharing your source codes too? I'd like to have a look at your solution! Thanks again.

  0