learn-co-curriculum / redux-delete-lab

Set List Lab - Redux Delete

Objectives

1. Remove responsibility for rendering bands from the BandsContainer by creating Bands and Band components.
2. Implement a delete button for each band, such that the store is appropriately updated.

Overview

Well all things change, and sometimes that means that even our favorite bands break up and we must remove all evidence of them. We want an application that allows us to remove specific bands, and have those changes reflected in our store's state and on the page.

We are starting off with our work from the previous lab, a React/Redux app that allows us to create new band elements and displays them on the page. In order to maintain separation of concerns, we have removed the code from BandsContainer that renders the bands to the page.

Instructions

The BandInput component is already set up for you and BandsContainer is partially working, but take a moment to review the flow of information. The BandsContainer is connected to Redux and has passed the addBand action to props. addBand is then passed as props to BandInput so the action can be dispatched when a new band is submitted.

1. Create a new Band component that will be in charge of displaying the information for a single band.

2. Create a new Bands component that will handle the rendering of the Band components from a list of bands provided as props.

3. Use BandsContainer to access the Redux store using the provided mapStateToProps method. Pass the bands obtained from the store into the Bands component.

4. Currently, bands are stored in state as an array of strings representing the name of each band. In the manageBand reducer, change the structure of the state such that each band is an object with id and name properties; be sure to assign each band its own unique ID on creation. The array of objects will be available to BandsContainer through mapStateToProps and will need to be passed as props through Bands to each rendered Band component.

5. In the Band component, you will need to add a button that dispatches an action of type 'DELETE_BAND' and passes through that band's id as the action.id. This dispatched action should be provided as a prop from BandsContainer.

6. Finally, you will need to add code to handle the DELETE_BAND action in the reducer. When a band's delete button is pressed, it will return a new list of bands that does not include the deleted band.

redux-delete-lab's Issues

Wrong Attribute: Line 29 in BandInput.js

It should be ...value = {this.state.bandName} not ...{this.state.text} as there's no such attribute in the state. This then allows automatic clearance of the input box every time a band name is submitted.

Missing a space

Need a space before the opening parenthesis in this sentence:
"You will also need to pass through the band object(this should include the id and name of the band) as the props to each rendered Band component."

Thank you.

lab makes easy concept confusing cant figure out to get the errors solved. even the chat people dont know what todo

Link to Canvas

Issue Subtype

• Master branch code
• Solution branch code
• Code tests
• Layout/rendering issue
• Instructions unclear
• Other (explain below)

Describe the Issue

Source

Concern

(Optional) Proposed Solution

What OS Are You Using?

• OS X
• Windows
• WSL
• Linux
• IllumiDesk

Any Additional Context?

Bad Tests

The last couple tests only work if you are using 'this.props.band.id' in the dispatch function, but in the lesson before this, it has you passing the 'id' individually as a prop, and then passing 'this.props.id' into the dispatch function. Both function in browser the same way, but tests should reflect the way we are taught to do things.

ReadMe no longer instructs students to create a Bands component to render multiple Bands from

ReadMe no longer instructs students to create a Bands component to render multiple Bands from. Said instructions were removed from the readme a while back but the tests are still looking for that component to be created. Either we need to re-add the instructions for the component or we need to remove the tests that look at that component's functionality.

@maxwellbenton @rrcobb

Test are out of sync

@aturkewi @Lukeghenco
Test are out of sync - batch 000 (full stack with react)
https://github.com/learn-co-students/redux-delete-lab-v-000/blob/master/test/index-test.js

learn-co-curriculum
https://github.com/learn-co-curriculum/redux-delete-lab/blob/master/test/index-test.js

On line 94 of the test in the batch 000 it is passing text and id in the component as props, when in the lesson it states to pass in band={band} as props. They can pass it by reading the test. But it puts the lesson out of sync with the test.

Tests using different data types

Hi!

Quick note:

Some of the tests in this lab are using a band array that look like:

[ "Gwar", "Dimmu Borgir", "Ashe", "Clairo" ] (okay I'll stop using this to list good artist names)

But some of them use a bands array that looks like:

[
  { id: 1, name: "Finneas" },
  { id: 2, name: "Caspian" },
]

In the solution, the bands array getting passed to test the component looks completely different; it's passing some kind of Symbol component out of a React library that has a huge number of properties.

Please correct the tests in the master branch!

Wrong Code, Suggestion

BandInput's input element has a value of this.state.text but it should be this.state.bandName.

npm test is working but 'learn' command isn't - I can't submit my lab

When I type learn it just waits. When I run npm test I get:

[email protected] test /Users/leahgarber/Development/code/redux-delete-lab-v-000
mocha -w test/helpers/browser.js test/*.js

Warning: Could not find any test files matching pattern: test/helpers/browser.js