Challenge3 - Hooks

[AureAle]

Mini-Challenge 3: Hooks

The Challenge

Note: Apply TDD as much as you can.

1. Fetch videos using the YouTube API and display them in the Home View

Note: now you can remove the logic that you implemented in the first mini-challenge to display videos from the mock file.

2. Implement the logic to search videos using the YouTube API (it's time to enable the search field functionality).
3. Create the Video Details View (this section will be displayed when the user clicks on a specific video in the list).
   • 3.1 Display the video player.
   • 3.2 Display the information for the selected video.
   • 3.3 Display a list of related videos.

Hint: You can use conditional rendering to display or hide the Video Details View according to user interactions.

4. Apply styles to the new components you create.
5. Create test cases for your API calls.
6. Create new test cases or modify existing ones for your components if necessary.
7. If you're duplicating code for your API calls inside your components, try creating a custom hook to reuse this logic more easily.

Acceptance Criteria

• Videos in the Home View are fetched from the YouTube API and displayed correctly.
• Users can search for YouTube videos using the search field on the header.
• A video can be played from the Video Details View after clicking on it.
• The video information and related videos list are displayed correctly on the Video Details View.
• When a user clicks on a related video the video player, information and related videos list are updated.

Bonus Points

• Custom Hooks for API calls are implemented and tested correctly.
• Testing coverage is above 60%. (Please include a screenshot of the code coverage report in your PR description).

[erickwize]

Comments

Good Job Aure! I really like the code styling and how you structure it, it has the expected React styling.
I can see that you extracted the style of the components, nice!
I saw the .env ignore rule, nice!
Please help us with the creation of PR into your own repo, currently, you're doing the PR into my repo, so I won't able to approve it when done.
Don't worry I didn't mark any of the checkboxes (it was difficult to determine which feature was done), we have time!
I encourage you to start doing the test, because, without them, we are not able to deliver the certificate.
I encourage you to ask for help if you're stuck, bored or have some questions.

Acceptance Criteria

• Videos in the Home View are fetched from the YouTube API and displayed correctly.
• Users can search for YouTube videos using the search field on the header.
• A video can be played from the Video Details View after clicking on it.
• The video information and related videos list are displayed correctly on the Video Details View.
• When a user clicks on a related video the video player, information, and related videos list are updated.

Bonus Points

• Custom Hooks for API calls are implemented and tested correctly.
• Testing coverage is above 60%. (Please include a screenshot of the code coverage report in your PR description).

[erickwize]

If you're importing the components, there's no need to import the file Menu.styles.js.
So it would be only

import { MenuButton, MenuContainer } from './Menu.styles';

const Menu = () => (
.....

[erickwize]

I recommend removing all the console.log function calls before the PR creation

[erickwize]

I suggest never uploading secrets to the Github repo, so I suggest adding the API_KEY into the .env file. Also, I recommend creating a .env.example, track the file, and put there the necessary variables
.env

REACT_APP_API_KEY=<value_of_the_key>

src/utils/constants.js

...
export default {
  ...,
  API_KEY: process.env.REACT_APP_API_KEY,
}

.env.sample

REACT_APP_API_KEY=

Official create react documentation