REST Countries API - React, styled-components, grid, flexbox, and CSS3

Community feedback

• 

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  Hello 👋

  Can I make this with just vanilla javascript?

  I am just facing problem with url handling...

  1. I will make ajax call right when a user visits and display all the countries
  2. When user clicks on any card, then I can change the url and make another ajax call and display the details of that country by changing the content of the homepage
  3. User can also come back to home page by clicking on either back button of app or browser
  4. But If user shares a modified url to someone else and that person paste it in his browser then he will get error, right?

  My question is how you managed it? Since it is an SPA, you can't have multiple page and thus user can't make a request on any page other than the homepage

  Please help....🙏

  0

  ---

  

  David Rhyne•270

  @davidrhynePosted over 3 years ago

  @RocTanweer

  Hello!

  I am thinking this project is possible with vanilla JS. I am thinking you will need a container that will hold either the main page or the feature country page and you would swap them out depending on the URL.

  For this project, I just make one call to the API ('https://restcountries.eu/rest/v2/all') when the program is loaded and then use that data where it is needed. This data is an array of objects. I was thinking it was better to get the data once, and keep it local, to prevent multiple API calls that can slow the application down.

  On the main page, I use a filter on the main countries array to return a filteredCountryData array and it is used to make the individual country cards. This may be a little trickier with vanilla JS, but I imagine it would be watching the event listeners for changes and then refreshing the country cards as necessary. React makes this very easy by managing the state of the filteredCountryData array.

  And on the "featured" country page, I use the main countries array and filter it on the alpha3Code field so that in only returns the single country as the featuredCountry array.

  I hope this helps. And let me know if you have any questions.

  Happy Coding! David

  0

  

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  @davidrhyne that swapping idea is awesome..

  But you didn't answer my question 😅

  0

  

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  @davidrhyne I was asking how you are rendering content when user request a country-details page...?

  Like this...

  https://reactApp.com/feature/#/AFG

  shouldn't it throw an error since there is no page for this url?

  0

  

  David Rhyne•270

  @davidrhynePosted over 3 years ago

  @RocTanweer Sorry, I misinterpreted the original question. I used "client side routing" by using HashRouter from the react-router-dom package.

  As you indicated, 'https://reactApp.com/#/featured/AFG' is not an actual site that the server can route to, so the server will return a 404 error. With HashRouter, the part of the URL beyond the # is routed on the client side.

  From the host point of view, the application loads to https://reactApp.com/ and remains there. The navigation of the links beyond the # are not given to the server to route. Instead, they are used by the JS to load pages.

  Therefore, with my application, I have 2 routes to act on.... 1) is the home route (#/) and 2) is the featured route (#/featured/AFG). And for the featured, I capture the AFG as a variable to use with the filter to determine which country to display.

  I thought I some resources on doing this with vanilla JS, but I not finding them at the moment.

  But the key is "client side routing".

  I hope this help.

  David

  1

  

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  @davidrhyne and it helped... thank you very much sir 🙏

  By the way, I just noticed that even if you normally put /#/ in any url that you said would throw 404 won't throw, it just gets ignored

  try it

  For example...

  https://roctanweer.github.io/roomhomepage/#/countries/APG

  And it will open Google page normally and won't throw any error 404

  Again thank you

  0

  

  David Rhyne•270

  @davidrhynePosted over 3 years ago

  @RocTanweer

  That is awesome news and happy to help!! The roomhomepage is looking great!

  And thank you for the tip on the #. In retrospect, it makes a lot of sense because anchor tag with href with # will navigate on the page, but I done 2 React apps in a row and have React on the brain. 😅

  Happy Coding!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks like you did a good job. The only thing I saw and I do not know if it was outlined in the project or not ....when a region is chosen there is no way for the user to see feedback that it has been or that it is still set

  0

  ---

  

  David Rhyne•270

  @davidrhynePosted over 3 years ago

  @palgramming That is a good idea. I will add the selected region to the region dropdown selector. Thank you for the feedback!

  0