From 776e3571df15f8251eb7bbf41f7a6cdb9b19efe1 Mon Sep 17 00:00:00 2001
From: Tom Tobar <tomas.tobar@flatironschool.com>
Date: Fri, 25 Jun 2021 19:20:41 +0000
Subject: [PATCH] Done.

---
 src/components/Band.js           |  6 +-----
 src/components/BandsContainer.js | 23 ++++++++++++++++++++---
 src/reducers/manageBand.js       | 13 ++++++++++++-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/components/Band.js b/src/components/Band.js
index 82db217ba..b2618129d 100644
--- a/src/components/Band.js
+++ b/src/components/Band.js
@@ -3,11 +3,7 @@ import React, { Component } from 'react';
 class Band extends Component {
 
   render() {
-    return(
-      <div>
-        Band Component
-      </div>
-    );
+    return <li>{this.props.band.name}<button onClick={() => this.props.deleteBand(this.props.band.id)}>DELETE</button></li>
   }
 };
 
diff --git a/src/components/BandsContainer.js b/src/components/BandsContainer.js
index 424dfedd7..1f9938db2 100644
--- a/src/components/BandsContainer.js
+++ b/src/components/BandsContainer.js
@@ -1,14 +1,30 @@
 import React, { Component } from 'react'
 import BandInput from './BandInput';
+import Band from './Band'
 
 import { connect } from 'react-redux'
 
 class BandsContainer extends Component {
+
+  componentDidMount() {
+    console.log(this.props.bands)
+  }
+
+  renderBands() {
+    return this.props.bands.map(band => {
+      return (
+        <Band key={band.id} band={band} deleteBand={this.props.deleteBand}/>
+      )
+    })
+  }
+
   render() {
     return (
       <div>
-        <BandInput addBand={this.props.addBand}/>
-
+        <BandInput addBand={this.props.addBand} />
+        <ul>
+          {this.renderBands()}
+        </ul>
       </div>
     )
   }
@@ -17,7 +33,8 @@ class BandsContainer extends Component {
 const mapStateToProps = ({ bands }) => ({ bands })
 
 const mapDispatchToProps = dispatch => ({
-  addBand: name => dispatch({ type: "ADD_BAND", name })
+  addBand: name => dispatch({ type: "ADD_BAND", name }),
+  deleteBand: id => dispatch({ type: "DELETE_BAND", id})
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(BandsContainer)
diff --git a/src/reducers/manageBand.js b/src/reducers/manageBand.js
index cb695fca1..4f7ec8666 100644
--- a/src/reducers/manageBand.js
+++ b/src/reducers/manageBand.js
@@ -1,10 +1,21 @@
+import uuid from 'uuid';
+
 export default function manageBand(state = {
   bands: []
 }, action) {
   switch (action.type) {
     case 'ADD_BAND':
+      console.action
+      const band = {
+        id: uuid(),
+        name: action.name
+      }
+      return {
+        bands: state.bands.concat(band)
+      }
 
-      return { ...state, bands: [...state.bands, action.name] }
+    case 'DELETE_BAND':
+      return { bands: state.bands.filter(band => band.id !== action.id) }
 
     default:
       return state;