@devdgehog
Posted
Hello, I haven't tried this challenge yet but I checked the API. Indeed, it's imposible to fetch countries by pages.
I recommend you to store your countries fetched by the all query in an array. By doing that you will be able to use that array instead of making queries for regions and search, using filter for example. The only queries left will be all and the detail ones.
You can still benefit using Intersection Observer to load images only when the country is visible instead of loading all of them.
I feel like you should at least bind your search function to the enter key on your search input (or onsubmit if you wrap it into a form). You can even bind the search function to onchange for a highly reactive search (if you do this you definitively need the stored array)
You can format numbers using toLocaleString() or toLocaleString("en-US") if you want to force commas.
Your listener to change z-indexes is useless you can directly set the z-index to 2 as you correctly handle the transition with opacity.
Have a nice day. 🦔
@lukassiarny
Posted
Thank you for your time and comments!
I actually started with workflow you suggest at first - I stored all countries in array and then worked with that data. But since I wanted to practice fetch calls and work with asynchronous JS a bit I decided to change that.
So is it better to make just one call and then work with stored data? It would definitely help with search and filtering as you said. Because the way how it works now is that when you search something and there is more than one result and you want to filter it by region, it actually shows all countries in that region instead of filtering the result.. so I'll try to look at this.
Enter key is a great idea, I completely forgot about that!
I didn't know how to handle z-index problem just with CSS, because my transition lasts 250ms.. and when I set z-index in CSS to non-checked state, it sets it immediately, so you can see how menu is closing, but behind the country cards, not in front of them. That's why I used JS and setTimeout function, to set z-index after the transition ends. But if you can suggest me a way how to do it just with css, I'll be glad.
@devdgehog
Posted
@lukassiarny Yes, in this use case, it will be better. You can set your array in the resolution of your query for all countries.
For your dropdown, I have the same results using .countries { /*...*/ z-index: 2 } and removing JS code that modifies zIndexes (in the selectByRegion function and the whole selectByRegionZindex function).
I also noticed your "All regions" dropdown option is broken, you call it with an undefined object, it shows an error and your result is empty.
