Feature/fetch api #2

ClaudiaRojasSoto · 2023-08-01T00:49:26Z

Description:

This pull request implements the functionality to connect with the Rest Countries API and display country data on the Details page.

The following changes have been made:

The Axios package has been added to handle HTTP requests to the API.
A new React component called "Countries" has been created to manage the retrieval and display of country data.
State management using React Hooks (useState and useEffect) has been implemented in the "Countries" component to handle country data and make the API call when the component mounts.
The data is displayed on the Details page when a user selects a country from the list.
The Gitflow best practice was followed, with a dedicated branch for this new functionality.
No linter errors were detected, and JavaScript best practices were adhered to.
The code documentation has been done professionally, and a detailed description of the changes in this pull request has been added.
The design, unit, and integration testing, implementation of filtering functionality, and other project requirements will be addressed in future pull requests.

Please review the changes and let me know your comments.

…for america and europe

…age to the source folder with the images of the continents and the flags of america and europe

…er inside images folder

…file

… the continents

…oy and to show the continents

…t image in the countries component

…ow the continents on the flags page and to show the name with the first letter on capital in the same page

… file on it

…er and deleted from redux

…raslate the folder inside the reducer folder

…ick function to handle the clic event on the countries

…ts/Navbar.js file

…first play obtaining the lat and lon from the country select by the flag on the first api

…file

…we can destructuring the properties on a safe way

…ountryCode instead country.name.common

ClaudiaRojasSoto added 30 commits July 30, 2023 18:25

Creates the src/components/Countries.js empty file

af9beea

Creates the file src/flagData.js with the routes of the flags images …

19140c1

…for america and europe

Delete the images folder from the public folder and add the folder im…

13a40c0

…age to the source folder with the images of the continents and the flags of america and europe

Add the images of the countries flag to images on public folder

af3583b

Create the src/imagesContinents/ folder to add the continents images

aad4f97

Statrt with the object flagsData on src/flagData.js file

d0550f7

Upload the routes on src/App.js file

e4f326c

upload the json packages

c2443f9

Delete from the src the folder image to add the images on public fold…

bfc34a5

…er inside images folder

Add all the routes to the flags by continent on src/flagData.js file

3a6a56c

Add the flags to folder public and inside ir images folder

97f65ad

Add the image world.png on src/imagesContinents/continents/world.png …

d90dc54

…file

Modify the stules on src/styles/HomePage.css to show the world upside…

c0bcfe4

… the continents

Add a div tag and the img tag to use the world.png file

b6d4fb8

Add the src/styles/Countries.css file to add styles to the flags depl…

1d26243

…oy and to show the continents

Upload the src/components/Countries.js file to use the right continen…

33a9e88

…t image in the countries component

Add the getContinentImage funtion and the capitalizeFirstLetter to sh…

153b8fe

…ow the continents on the flags page and to show the name with the first letter on capital in the same page

Create the folder reducer and wrap the countriesreducer.js file on it

ea671c9

Creates the folder actions on redux and wrap the countries actions.js…

478631b

… file on it

Add the logic of the reducer for countries on store.js file

57b3f53

Traslate the src/redux/airQualityReducer.js file to the reducers fold…

50ff33a

…er and deleted from redux

Delete from redux folder the src/redux/airQualityActions.js file to t…

3e5b985

…raslate the folder inside the reducer folder

Change the route to sudafrica flag on the src/flagData.js file

1230a1e

Upload the src/components/HomePage.js file with the route to the images

2f12f27

Add UseEffect and dispatch to use reducer and add the handleCountruCl…

816fef3

…ick function to handle the clic event on the countries

Add the provider store wraping the router on app.js file

2d044b5

Upload the json packages adding redux-toolkit

e8050f6

Delete a duplicated element china on src/flagData.js file

39b874e

Fix the name activeclassname instead acctiveClassname on src/componen…

a5cea1b

…ts/Navbar.js file

Start the implementation of the necesary logic to handle the api. On …

1b27273

…first play obtaining the lat and lon from the country select by the flag on the first api

ClaudiaRojasSoto added 15 commits July 31, 2023 12:59

Upload the json packages adding axios

e7a3657

Change the api call to another api

bf8d0b2

Add the countries code

dc7853b

Add some logic to deploy the Details page

9f79b85

Add styles for Details component

9d1c314

Delete actions and reducers to the pollution api

e9a3855

Add the route to details page

5eca2fd

Change the path name and the name key on src/components/Countries.js …

56b062d

…file

Add a verification to be sure about the data it is not null and then …

1a5871f

…we can destructuring the properties on a safe way

Upload actions file to fix errors

7ee4cd7

Upload actions file to fix errors

0e8a93f

Change the key value on src/components/Countries.js file to country.c…

fc204b9

…ountryCode instead country.name.common

Add more details to show on details page

054cbba

Upload the properties to show on details

a9d8bd1

Fix linter errors

5325502

ClaudiaRojasSoto merged commit 3c5fbfa into develop Aug 1, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/fetch api #2

Feature/fetch api #2

ClaudiaRojasSoto commented Aug 1, 2023

Feature/fetch api #2

Feature/fetch api #2

Conversation

ClaudiaRojasSoto commented Aug 1, 2023

Description:

The following changes have been made: