REST Countries API

Community feedback

• 

  Muhammad Gad•260

  @GADMuhammad

  Posted about 2 months ago

  1- When a country is open, make the background blur. to not make the user get confused.

  2- It should close when pressing outside the country modal (pop-up).

  3- On every country page, border countries should be buttons to open this border-country page. Not <li>s inside <ul>

  4- The country page modal should be gone with animation like it appears with animation. Not immediately.

  4- On the list of continents in the light mode, when I hover an option, its background should be more obvious, not that light.

  5- The option of "reset" should be called "All countries".

  6- The placeholder of the input should be lighter.

  7- When I click outside the list of continents, it should close. The same as the modal.

  10

  Marked as helpful
• 

  Sophie•430

  @ippotheboxer

  Posted about 2 months ago

  Hey there, nice solution!

  First of all, you mentioned how using a modal was complicated: a modal is brought up when pressing on a country, but I think it would indeed be less complicated if you used react-router and instead took the user to a new page (e.g. /:countryName) when they press on a country, and then fetch the country name using useParams and then hitting up the API.

  Also, searching for a country doesn't work when a filter is applied. This is because you have done it like this:

  if (filterRegion) {
      FILTERED_COUNTRIES = countries.filter(
        (country) => country.region === filterRegion
      );
    } else if (searchRegion) {
      FILTERED_COUNTRIES = countries.filter((country) =>
        country.name.common
          .toLowerCase()
          .includes(searchRegion.toLowerCase().trim())
      );}
  

  Filtered region takes precedence over the search, so search will only work if there is no filter. Here is how you can do it so that both work:

  let FILTERED_COUNTRIES = countries;
  
  if (filterRegion) {
    FILTERED_COUNTRIES = FILTERED_COUNTRIES.filter(
      (country) => country.region === filterRegion
    );
  }
  
  if (searchRegion) {
    FILTERED_COUNTRIES = FILTERED_COUNTRIES.filter((country) =>
      country.name.common.toLowerCase().includes(searchRegion.toLowerCase().trim())
    );
  }
  
  

  I see that you have your filter and search context separated, but I feel like it's fine to have them both together in context, since they are both directly manipulating the countries that are being shown

  11

  Marked as helpful