Giter Club home page Giter Club logo

lift-state-bugfix's Introduction

Lifting state up: Fix the bugs

TEAM MEMBERS

List your team members here

1.
2.
3.
...

GETTING STARTED AND SUBMITTING

  1. Fork and clone this repo
  2. run npm install to install, then npm start to start.
  3. When you have finished all of steps 1-4, submit by making a PR on the original repo.
  4. If you do not finish all the steps before time runs out, submit what you have as a PR.

USER STORIES

You can refer to the deployed and fixed version of this site to see how each of these user stories behaves when they are working correctly.

  1. When I vist the home page, I see a list of menu items and my current order.
  2. There is a loading state while the items are being fetched. (There's no error state -- this is okay for tdoay.)
  3. Each menu item has a name, short description, formatted price, and list of toppings (if the item has toppings)
  4. When I type in the search bar, the list of items is filtered and I only see items whose name contains the text in the search bar.
  5. When I click "Add to Order" the item is added to the order with quantity 1. If it is already in the order, its quantity increments. When I click "Remove", the quantity decreases. When the quantity reaches 0, the item disappears from the order.

STEP 1: FIND THE BUGS

  1. For each of the user stories, check whether it works.
  2. If a user story is broken, document the bug. Write the steps to reproduce it and the actual vs. expected results.
  3. Add your bug descriptions here in the README.md. There may be more than 2 bugs (or fewer!).

BUG 1

// type your answer here
Steps to reproduce:
1.
2.
...
**Expected result**:
**Actual result**:

BUG 2

// type your answer here
Steps to reproduce:
1.
2.
...
**Expected result**:
**Actual result**:

STEP 2: PLAN

How will you fix each bug? In your group, make a plan. Write down the key steps.

Hint 1: You will need to lift state up to fix these bugs! Think about how you will lift state up. What states will you move? What common parents will own them?

Hint 2: Look at the diagrams at the bottom of this file. Which pieces of state are in the wrong place in the component tree?

BUG 1

Key steps to fix the bug
1.
2.
...

BUG 2

Key steps to fix the bug
1.
2.
...

STEP 3: FIX THE BUGS

Fix the bugs! Implement the plans you wrote above. If you realize the plan needs to change, update it. Make a separate commit for each bug fix or group of related fixes.

More information

Here is an image of the UI divided into components. UI divided into components

This diagram shows the component tree and the state held by each component (if any). This shows the design of the code, which you are going to fix. Some of this state is in the wrong place! component tree with state

lift-state-bugfix's People

Contributors

mikeboyle avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.