Scribd
Upload
6 views

Week 9 Activity

Advanced web developement activity

Uploaded by

salmaazouzi220
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Week 9 Activity

Advanced web developement activity

Uploaded by

salmaazouzi220
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Activity Week 9

1. Define the API endpoint as a global variable:

const API_ENDPOINT = "https://hn.algolia.com/api/v1/search?query=";

2. In the App component, create a new side-effect to fetch external data using the useEffect hook:

React.useEffect(() => {
fetch(/*Define URL resource*/)
.then((response) => {
//Handle response
})
.catch(() => {
//Handle Error
});
}, [searchTerm]);

3. Add the fetch resource:

React.useEffect(() => {
if (!searchTerm) return;

fetch(`${API_ENDPOINT}${searchTerm}`)
.then((response) => {
//Handle response
})
.catch(() => {
//Handle Error
});
}, [searchTerm]);

4. Add the response handling using “.json()” function to parse JSON response

React.useEffect(() => {
if (!searchTerm) return;
fetch(`${API_ENDPOINT}${searchTerm}`)

.then((response) => response.json())

.catch(() => {
//Handle Error
});
}, [searchTerm]);
5. Update the stories state with the data received from the API response:

React.useEffect(() => {
if (!searchTerm) return;
fetch(`${API_ENDPOINT}${searchTerm}`)
.then((response) => response.json())

.then((result) => {
setStories(result.hits);
})

.catch(() => {
//Handle Error
});
}, [searchTerm]);

6. Remove searchedStories because we will receive the stories searched from the API. Pass only
the regular stories to the List component:

<List list={stories} onRemoveItem={handleRemoveStory} />


7. Test the application to check that the List component is using the external data.

8. Commit and push your code with the following message: “W9: React Data fetching”.

9. Loading indicator:

• Define a new state for handling the loading indicator with initial state to “false”.
• Update the “isLoading” state to true before fetching the data.
• Update the “isLoading” state to false when the data is received.

const [isLoading, setIsLoading] = React.useState(false);


……
React.useEffect(() => {
if (!searchTerm) return;

setIsLoading(true);

fetch(`${API_ENDPOINT}${searchTerm}`)
.then((response) => response.json())
.then((result) => {
setIsLoading(false);
setStories(result.hits);
})
.catch(() => {
});
}, [searchTerm]);
10. Inline this conditional state as a conditional rendering in JSX:

return (
<div>
…
<hr />

{isLoading ? (
<p>Loading ...</p>
) : (
<List list={stories} onRemoveItem={handleRemoveStory} />
)}
</div>
);
};

11. Error Handling:

• Define a new state for error handling with initial value to “false”
• Update “isError” state inide the catch block to “true”
• Update “isLoading” state to “false” inside the catch block to hide the loading indicator.

const [isError, setIsError] = React.useState(false);

…
React.useEffect(() => {
if (!searchTerm) return;

setIsLoading(true);

fetch(`${API_ENDPOINT}${searchTerm}`)
.then((response) => response.json())
.then((result) => {
setIsLoading(false);
setStories(result.hits);
})
.catch(() => {
setIsLoading(false);
setIsError(true);
});
}, [searchTerm]);
12. Use the logical AND operator as shorthand to render something or nothing.

return (
<div>
…
<hr />

{isError && <p>Something went wrong ...</p>}

{isLoading ? (
<p>Loading ...</p>
) : (
<List list={stories} onRemoveItem={handleRemoveStory} />
)}
</div>
);
};

13. Test the conditional rendering. To test the error handling, set the API endpoint to an incorrect
URL.

14. Commit and push your code with the following message: “W9: React conditional rendering”.

15. Add a button element for the confirmation to the JSX App component:

<button
type="button"
disabled={!searchTerm}
onClick={handleSearchSubmit}
>
Submit
</button>

16. Add a new state to manage the URL. The button handler sets the url derived from the current
searchTerm and the static API URL as a new state.

const [url, setUrl] = React.useState(`${API_ENDPOINT}${searchTerm}`);

const handleSearchSubmit = () => {


setUrl(`${API_ENDPOINT}${searchTerm}`);
};
17. Change the side-effect dependencies to the url state instead of searchTerm:

React.useEffect(() => {
setIsLoading(true);
fetch(url)
.then((response) => response.json())
.then((result) => {
setStories(result.hits);
setIsLoading(false);
})
.catch(() => {
setIsError(true);
setIsLoading(false);
});
}, [url]);

18. Commit and push your code with the following message: “W9: React Explicit Data Fetching”.

You might also like