mini challenge 3: hooks by israelWL · Pull Request #6 · wizeline/react-certification-2020

israelWL · 2021-03-06T05:00:04Z

No description provided.

modified: package.json

dianasaurio

I had problems with your netlify app, ping me if you fix it

dianasaurio · 2021-03-11T05:03:02Z

.env

+REACT_APP_YOUTUBE_PLAYLIST_ITEMS_API = "https://youtube.googleapis.com/youtube/v3/playlistItems"
+REACT_APP_YOUTUBE_CHANNELS_LIST_API = "https://www.googleapis.com/youtube/v3/channels"
+REACT_APP_YOUTUBE_SEARCH = "https://content-youtube.googleapis.com/youtube/v3/search"
+REACT_APP_YOUTUBE_API_KEY="AIzaSyAx6keB9STIcO-bkIKuy-ubU6CZO9pnwXQ"


I suggest you don't commit sensitive data, you can add a .env.example with placeholder values and add the .env extension to the .gitignore

dianasaurio · 2021-03-11T05:03:48Z

public/env.js

@@ -0,0 +1,3 @@
+window.env = {
+  "YOUTUBE_API_KEY": "AIzaSyAx6keB9STIcO-bkIKuy-ubU6CZO9pnwXQ"


Why do you need this file if you have a .env?

dianasaurio · 2021-03-11T05:06:34Z

src/components/Button/Button.component.jsx

+  return (
+    <ButtonContainer>
+        <span>
+            <img className="image" alt="User Avatar" src="https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png" />


It will look cleaner if you use a variable for the image URL and pass it to the src.

dianasaurio · 2021-03-11T05:09:03Z

src/components/Button/Button.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from './Button.component';
+import renderer from 'react-test-renderer';


I would suggest you use react-testing-library since it's the recommended approach

dianasaurio · 2021-03-11T05:23:10Z

src/components/LeftNave.jsx

+
+const LeftNav =  ({ open }) => {
+    return (
+      <Ul open={open}>


Try to give your components descriptive names, using the same names as HTML tags can cause confusion when reading code.

dianasaurio · 2021-03-11T05:29:27Z

src/components/VideoList/VideoMain.js

+
+import { Box, BoxImage, BoxInfo, BoxTitle, BoxText } from './styled';
+
+const NoImage = require('./noimage.jpg');


It's best to use import instead of require for react apps

dianasaurio · 2021-03-11T05:31:02Z

src/components/useAddToFavorites.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { useParams } from 'react-router-dom';


It's best to use react-router to handle URL params:
https://reactrouter.com/web/example/url-params

dianasaurio · 2021-03-11T05:37:59Z

src/components/useAddToFavorites.js

+  const add = "add";
+  const remove = "remove";
+  let { id } = useParams();
+  const getArray = JSON.parse(localStorage.getItem('favorites'));


localStorage is not a recommended state management solution for react. I suggest you use context instead.
https://medium.com/@harshdigwani/redux-vs-context-api-vs-local-storage-bced5118c531

dianasaurio · 2021-03-11T05:39:07Z

src/components/useFetch.js

+import { useEffect, useState } from "react";
+
+export const useFetch = (url) => {
+    const [state, setState] = useState({items:null, isLoaded:true, hasErrors: false});


I suggest you separate each state property into its own state variables because when you are calling setState you are overwriting the whole state and it's more error-prone.

dianasaurio · 2021-03-11T05:43:07Z

src/routine.test.js

@@ -0,0 +1,7 @@
+const sum = require('./routine');
+
+test('adds 1 + 2 to equal 3', () => {


I think this file is not meant to be committed (:

dianasaurio · 2021-03-11T05:48:30Z

Also, I don't see any coverage report, let me know if you have it

israelWL · 2021-04-06T04:59:03Z

hi Diana,
this is my coverage report

wdonet and others added 7 commits February 10, 2021 13:37

GIST

0cabaab

Rename index.jsx to index.js

39ddd88

Update README.md

fd7d557

mini challenge 1

d631d8c

package fixed

6a019d6

modified: package.json

test challenge

777bb4b

mini challenge 3: hooks

89393c0

dianasaurio reviewed Mar 11, 2021

View reviewed changes

israelWL added 13 commits March 11, 2021 09:49

mini challenge 3: hooks - netlify prod build

fe3e63b

mini challenge 3: hooks - prod htaccess

9821be8

mini challenge 3: hooks - prod htaccess

5303b9f

mini challenge 3: hooks - prod htaccess build

403cc42

mini challenge 3: hooks - prod htaccess build

b30b9dd

mini challenge 3: hooks - prod htaccess build/public

00e110a

mini challenge 3: hooks - prod hashRouter

8821c7a

mini challenge 3: hooks - prod hashRouter

168b340

mini challenge 4: state mgmt

8f73068

mini challenge 5

bb48579

mini challenge 5: env

08c94c6

mini challenge 5: env

4a0ea42

mini challenge 5: b

2826515

israelWL and others added 4 commits April 6, 2021 08:51

mini challenge 5: no env

ddcba7d

Delete .env

3052916

mini challenge 5: no warnings

ff8a97c

Merge branch 'master' of github.com:israelWL/react-certification-2021

b510fcf

		@@ -0,0 +1,3 @@
		window.env = {
		"YOUTUBE_API_KEY": "AIzaSyAx6keB9STIcO-bkIKuy-ubU6CZO9pnwXQ"


		import { Box, BoxImage, BoxInfo, BoxTitle, BoxText } from './styled';

		const NoImage = require('./noimage.jpg');

		@@ -0,0 +1,36 @@
		import { useEffect, useState } from "react";
		import { useParams } from 'react-router-dom';

		@@ -0,0 +1,7 @@
		const sum = require('./routine');

		test('adds 1 + 2 to equal 3', () => {

Conversation

israelWL commented Mar 6, 2021

Uh oh!

dianasaurio left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dianasaurio commented Mar 11, 2021

Uh oh!

israelWL commented Apr 6, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants