Mini challenge 5 routing

[JaviHuizar]

No description provided.

[erickwize]

Comments

You're still combining yarn and npm, try only one of those. I left out some recommendations and suggestions.
The server where the React app is deployed is redirecting all the URLs to the main one. You're not able to copy a URL, paste it on another tab and see the same content.
You didn't add any of the testing parts. We encouraged you to do that if you would like to receive the certificate (you could add snapshots and increase the coverage)

Acceptance Criteria

• All the sections have their own route.
• Navigation across the sections is implemented correctly.
• The Global State is persistent across all the sections.
• The "Mocked Authentication" mechanism works correctly.
• The "session data" is stored in the Global Context correctly.
• Videos can be added to the Favorites list.
• Videos can be removed from the Favorites list.
• Navigation to Favorite Videos View using a private route is implemented correctly (only authenticated users should access this section).
• Navigation to the Favorite Video Details View using a private route is implemented correctly (only authenticated users should access this section).
• Information for the selected favorite video is displayed correctly
• The list of other favorite videos in the Favorite Video Details View is displayed.
• Testing coverage is above 70%. (Please include a screenshot of the code coverage report in your PR description).

Bonus Points

• The Add/remove from favorites button should appear when the user passes the mouse over the video card in the list.
• Integrate with a real authentication provider (such as Auth0, OAuth or Firebase).
• A 404 section is shown when a route is not found.
• The Login View is implemented as a modal using React Portals.

[erickwize]

I suggest removing this file from git, you should never upload secrets to your git repository and, I suggest creating a file called .env.example with all the needed variables

REACT_APP_API_YOUTUBE_KEY=

[erickwize]

With the routes /video and, /favorites you are not going to give the feature of URL sharing one of the main reasons to implement routing. I recommend changing them to /video/:id and, /favorites/:id and extract the id inside the corresponding component using a hook.

import { useParams } from 'react-router-dom';
....
function Component () {
  ...
  const { id } = useParams();
}

[erickwize]

I recommend removing all the console.logs before submitting a PR 😊

[erickwize]

I recommend calling directly onChange={(event) => setUsername(event.target.value)}

[erickwize]

I recommend removing these two functions

[erickwize]

Same comment here: onChange={(event) => setPassword(event.target.value)}