Marina's project 1: My shopping list app by Mannushka · Pull Request #43 · rocketacademy/project1-bootcamp

Mannushka · 2023-11-20T15:35:03Z

No description provided.

Flashrob · 2023-12-10T23:05:15Z

README.md

+
+## Requirements
+
+To install and launch the app, you will need NodeJS v16+


How do I actually install the app?

You could also tell the reader how to install node

Flashrob · 2023-12-10T23:06:26Z

src/App.js

+        <Container className="App mt-5 col-11 col-md-6 col-lg-5  align-items-center">
+          <Stack gap={2}>
+            <div className="header">My shopping list</div>
+            <div>


Since ItemsList also has a <div> as wrapper, do we need this one?

Flashrob · 2023-12-10T23:08:22Z

src/Components/UserInput.js

+      <div>
+        <Container className="col-12 col-lg-11 text-center">
+          <InputGroup id="main-input-field" className="mb-3 mt-4">
+            <Form.Control


Not 100% sure here, but do we need to use a Form element here, when we actually are not using a form? Wouldn't a normal input suffice, to which we can apply bootstrap classes?

Flashrob · 2023-12-10T23:08:59Z

src/Components/ItemsList.js

+  //We need to be able to add items to the list
+  //Items are added in the UserInput component: when user inputs something into the input field and then clicks "add item" , the item should get added into the itemsArray
+  //Each item can be deleted
+  //Each item can be changed
+  //Each item can be edited
+  //Each item has checkbox, once the user got the item, they may tick the checkbox and the item will get crossed out


this is already documented in the README and shouldn't live in our code :)

Flashrob · 2023-12-10T23:09:53Z

src/Components/ItemsList.js

+  //Each item can be edited
+  //Each item has checkbox, once the user got the item, they may tick the checkbox and the item will get crossed out
+
+  //1) adding items logic


Redundant comment, as the function name already suggests what is being done here

Flashrob · 2023-12-10T23:16:01Z

src/Components/ItemsList.js

+
+  //4) crossing items out logic
+  //this function is passed as props to Items
+  checkItem = (key) => {


If comment says crosing out, but function says checking, what is it? crossing or checking? Name accordingly I would advise :)!

Flashrob · 2023-12-10T23:16:14Z

src/Components/ItemsList.js

+      if (item.key === key) {
+        item.isChecked = !item.isChecked;
+      }
+      return { ...item };


Same problem as highlighted above!

Flashrob · 2023-12-10T23:16:22Z

src/Components/ItemsList.js

+    this.setState({ itemsList: itemsList });
+    localStorage.setItem("itemsList", JSON.stringify(itemsList));
+  };
+  //5) logic to clear all items


Flashrob · 2023-12-10T23:17:33Z

src/Components/Items.js

+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Form from "react-bootstrap/Form";
+export default class Items extends React.Component {


This component is describing how a single Item looks like. I would recommend naming it in singular because of that. Item instead of Items

Flashrob · 2023-12-10T23:19:29Z

src/Components/Items.js

+import Form from "react-bootstrap/Form";
+export default class Items extends React.Component {
+  render() {
+    const items = this.props.itemsList.map((item, key) => {


If I compare ItemsList with Items, I don't see how the list is an actual list. You are rendering the list in this component. To correct this, I would run this map in the ItemsList component and pass down the updater etc. functions to the Item component, within the map, which will then determine how the updating/deletion etc. works

in ItemsList it should look like this:

render() { return {this.itemsList.map((item, key) => { return <Item item={item} key={key} /> }} }

Flashrob · 2023-12-13T13:25:34Z

README.md

+
+## Requirements
+
+To install and launch the app, you will need NodeJS v16+


You could also tell the reader how to install node

Flashrob · 2023-12-13T13:26:29Z

src/App.css

+  /*max-width: 400px;
+  min-width: 340px;
+  margin: 40px auto; */


can remove comments

Flashrob · 2023-12-13T13:29:54Z

src/Components/Items.js

+import Form from "react-bootstrap/Form";
+export default class Items extends React.Component {
+  render() {
+    const items = this.props.itemsList.map((item, key) => {


in ItemsList it should look like this:

render() { return {this.itemsList.map((item, key) => { return <Item item={item} key={key} /> }} }

Flashrob · 2023-12-13T13:32:04Z

src/Components/Items.js

+      );
+    });
+
+    return <div>{items}</div>;


Here you are wrapping the items in another div again, not sure if that is desired or not

Flashrob · 2023-12-13T13:36:34Z

src/Components/ItemsList.js

+      if (item.key === key) {
+        item.name = name;
+      }
+      return { ...item };


Suggested change

return { ...item };

return item;

This is the same thing

Mannushka added 30 commits November 4, 2023 21:53

UserInput component created

b365d24

Render ItemsList component

cbdc23a

input form modified, errors fixed

28b11a4

ItemsList component created, addItem function added

c8bfedd

export of UserInput error fixed

d618e81

export of UserInput error fixed

ddf5d60

preventing empty input logic added

7da5399

delete item button + function added, edit button + checkbox created

0c8e5e3

toLowerCase() function added to inputValue

da6b7e1

display itemsList and editItem functions added

362b5c7

delete icon changed

ca55b6e

react icons and popus libraries installed

b4ba51c

basic css done

7e5a40f

minor changes

38c010f

input tags changed

26d008d

input tags changed, console.log deleted

451b681

react icons and popus installed

060ff80

function for crossing out the purchased items added

87cb87c

logic for crossing out the purchased items added

9f0e861

logic for rendering items moved to a new component Items.js

b74852e

logic for rendering items moved to a new component Items.js

7a58f89

changed backgroud, input field, button, items colors, added gradient

5968792

bootstrap installed

03a0b62

bootstrap installed

f5626a9

changed colors, cursor, commented out the input-field

2378b35

added bootstrap container and stacks

56881e7

added bootstrap container, changed regular form to bootstrap form

e0e044b

edited the pseudocode

10893e7

added container and input group

f3eec3b

local storage added, update and check item functions bug fixed

eb2b165

Mannushka added 14 commits November 18, 2023 09:09

editing-item

9d1086a

editing-item-typo-fixed

d340eda

crossing-item-out

750e0e2

deleting-item.png

cd10865

item-deleted

7380a0a

erasing-all-items

1d12dd1

all-items-erased

b688e63

added my project info

42c6393

popups deleted

c531307

popups deleted

61bd13c

line 96: 1 replaced with 0

cd913e5

old input css deleted

025c2ea

initial screen image added

48763d0

dependencies added, description edited, image removed

0eaa0f3

Flashrob reviewed Dec 10, 2023

View reviewed changes

Flashrob reviewed Dec 13, 2023

View reviewed changes

Mannushka added 12 commits November 3, 2024 21:06

remove old code

4d8dc45

remove unnecessary div

3ac7244

remove redundant comments

b52f6b8

fix errors

36ec2f4

add mapping of the items

8b1c400

create one item component

c131dc2

add comment

c5043a4

add space

b4c291c

add homepage

ec31667

add margin for header

e958c0a

add code for deployment

a09227c

add installation and deployment info

f7ed848


		## Requirements

		To install and launch the app, you will need NodeJS v16+

Comments

Conversation

Mannushka commented Nov 20, 2023

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!

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!

Flashrob Dec 13, 2023 • 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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Flashrob Dec 13, 2023 •

edited

Loading