Recipe project by FVenneri · Pull Request #2 · FVenneri/react-bootcamp

FVenneri · 2020-07-06T15:31:11Z

FE for Django API:

CRUD for Recipes/Ingredients/Tags APIs
Handled login
Manual styling with styled-components
Few basic unit tests (very few)

…st correctly for the TOKEN

giuband · 2020-07-08T09:37:09Z

recipe-hooks-project/src/App.css

@@ -0,0 +1,44 @@
+/*.App {*/


In our projects we would block a PR leaving commented code 😄

giuband · 2020-07-08T09:41:24Z

recipe-hooks-project/src/AppPage.test.js

+jest.mock("axios");
+
+afterEach(() => {
+  cleanup()


You don't need to do this anymore, testing-library automatically invokes cleanup after each test now

I didn't know that!

giuband · 2020-07-08T09:41:52Z

recipe-hooks-project/src/AppPage.test.js

@@ -0,0 +1,134 @@
+import React from "react";
+import {cleanup, fireEvent, render} from "@testing-library/react";


You could add waitForElement to the imports from this file (and remove it from @testing-library/dom)

giuband · 2020-07-08T09:42:30Z

recipe-hooks-project/src/AppPage.test.js

+  expect(container.querySelector("input[name=email]")).toBeInTheDocument();
+});
+
+// test("an user can logout", () => {


Don't leave commented code, not even for tests 😉

giuband · 2020-07-08T09:43:33Z

recipe-hooks-project/src/Home.js

+  margin-top: 50px;
+`;
+
+const Image = styled.img.attrs(props => ({


You don't need the .attrs(props => ({ ...props }) part, it can just be

styled.img`max-width: 70;`

giuband · 2020-07-08T09:45:01Z

recipe-hooks-project/src/Ingredients.js

+        addingIngredient
+          ? <form onSubmit={handleNewIngredientCreation}>
+            <Input type="text" id="ingredientInput" value={newIngredient} onChange={handleNewIngredientChange}/>
+            <Button primary onClick={handleNewIngredientCreation}><span>Create</span></Button>


You probably wouldn't need that inner span node

giuband · 2020-07-08T09:47:11Z

recipe-hooks-project/src/PrivateRoutes.js

+  return (
+    <Route
+      render={() =>
+        token !== null


Probably token !== null is a bit too strict, could just be token ? <>{/* private */}</> : <>{/* public */}</>

giuband · 2020-07-08T09:47:37Z

recipe-hooks-project/src/PrivateRoutes.js

+import RecipeDetails from "./RecipeDetails";
+import {AuthContext} from "./contexts/AuthenticationProvider";
+
+export function PrivateRoutes() {


The file is called PrivateRoutes but it actually contains the public too, why not calling it just Routes?

giuband · 2020-07-08T09:49:11Z

recipe-hooks-project/src/Profile.js

+  }
+
+  async function modifyUser(password, name) {
+    if ((name === "" || name === undefined) && (password === "" || password === undefined))


(name === "" || name === undefined) => (!name) (same for password)

giuband · 2020-07-08T09:52:01Z

recipe-hooks-project/src/Recipes.js

+  }
+
+  async function fetchTags() {
+    console.log("Fetching tags for: [" + token + "]");


FYI in our web apps it won't be possible to ship code calling console.log (I've seen it being used quite a lot in this project)

giuband · 2020-07-08T09:57:31Z

recipe-hooks-project/src/Recipes.js

+                      return (
+                        <option key={i} value={item.id}>{item.name}</option>
+                      )
+                    }, this)}


You don't need the this argument here, because:

you're in a functional component and not a class, so its value would be pretty useless

you're using an arrow function which wouldn't rebind this https://www.freecodecamp.org/news/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26/#main-benefit-no-binding-of-this-

giuband · 2020-07-08T09:59:28Z

recipe-hooks-project/src/Register.js

+    }
+  }
+
+  const renderRedirect = () => {


I wouldn't put this as a function, I'd just add the if inside the body of the functional component:

if (redirect) return <Redirect /> return ( <> <Container /> </> )

giuband · 2020-07-08T10:02:33Z

recipe-hooks-project/src/components/General.js

+  background: white;
+  font-weight: 400;
+  border: 2px solid red;
+  -webkit-box-sizing: border-box;


styled-components will automatically apply autoprefixer to your styles, no need to prefix them on your own

giuband

Left a bunch of comments on what wouldn't have been approved on web or any other FE project of ours, if you have any doubts or questions feel free to reach me out on slack

giuband · 2020-07-13T08:25:52Z

recipe-hooks-project/src/Register.js

  return (
    <>
-      {renderRedirect()}
+      {


It's a bit uncommon to leave a redirect inside the body, I would just put a separate if before this return.

if (redirect) return <Redirect to="/app" /> return ( <> <Container /> </>

Francesco Venneri added 30 commits June 26, 2020 11:40

[RECIPE-PROJECT] Initial commit

6d3fa94

[RECIPE-PROJECT] Added some of the needed packages

c9a9a91

[RECIPE-PROJECT] Fixed the App.test.js

6153696

[RECIPE-PROJECT] Added exercise description to README

9c9323d

[RECIPE-PROJECT] Installed some dependencies and make the login reque…

9dd6f4f

…st correctly for the TOKEN

[RECIPE-PROJECT] Done login form and added Auth context

502a5fb

[RECIPE-PROJECT] Login implemented and tested

3e803d0

[RECIPE-PROJECT] Temporary commit

64b5a37

[RECIPE-PROJECT] Added and tested registration feature

8537b4d

[RECIPE-PROJECT] Little refactoring

f827c34

[RECIPE-PROJECT] Some more tasks

71a2583

[RECIPE-PROJECT] Added Edit profile feature

54ff002

[RECIPE-PROJECT] Added timed error message when profile is not saved

215f1f1

[RECIPE-PROJECT] Added ingredients page

8abe331

[RECIPE-PROJECT] Added new ingredient feature

1cc6d2c

[RECIPE-PROJECT] Added tags page

dac9fa5

[RECIPE-PROJECT] Fixed a typo

a03db87

[RECIPE-PROJECT] Added visualization for recipe

ffa725e

[RECIPE-PROJECT] Added creating recipe feature

af0c9e2

[RECIPE-PROJECT] Added filtering based on ingredients and tags

ab4c243

[RECIPE-PROJECT] Some changes

ce9f348

[RECIPE-PROJECT] Removed hardcoded token from code

0f5dca1

[RECIPE-PROJECT] Test

a99a2b1

[RECIPE-PROJECT] Fixed semicolon

f029f97

[RECIPE-PROJECT] Fixed login issue

0489cd5

[RECIPE-PROJECT] Added some logged in checks

eb9d8e3

[RECIPE-PROJECT] Some cleaning

1b4f8cd

[RECIPE-PROJECT] Added react-scripts, useful for testing purposes

0909e95

[RECIPE-PROJECT] Added jest-dom

837e5d5

[RECIPE-PROJECT] Fixed afterEach thing

a5e4e90

giuband reviewed Jul 8, 2020

View reviewed changes

recipe-hooks-project/src/App.css Outdated

@@ -0,0 +1,44 @@

/*.App {*/

Copy link

giuband Jul 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In our projects we would block a PR leaving commented code 😄

giuband reviewed Jul 8, 2020

View reviewed changes

Changes after PR review

701113f

giuband reviewed Jul 13, 2020

View reviewed changes

giuband approved these changes Jul 13, 2020

View reviewed changes

		@@ -0,0 +1,134 @@
		import React from "react";
		import {cleanup, fireEvent, render} from "@testing-library/react";

Conversation

FVenneri commented Jul 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

giuband Jul 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

giuband left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

FVenneri commented Jul 6, 2020 •

edited

Loading

giuband Jul 8, 2020 •

edited

Loading