From 0a25cec984eac111746676b79c7d27bafbcd9ea2 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Mon, 22 Jan 2018 13:35:16 -0600 Subject: [PATCH 01/15] DELETE_CARD is a constant --- src/constants/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/constants/constants.js b/src/constants/constants.js index 5db389a..0f6c80b 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -4,5 +4,6 @@ export const ADD_LIST = "ADD_LIST"; export const GET_CARDS = "GET_CARDS"; export const GET_BOARD = "GET_BOARD"; export const ADD_CARD = "ADD_CARD"; +export const DELETE_CARD = "DELETE_CARD"; export const DUMMY_DATA = "DUMMY_DATA"; From acd3554e1368ee07abc7bf01bd84937ad4f7ac75 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Mon, 22 Jan 2018 13:41:47 -0600 Subject: [PATCH 02/15] Add deleteCard action creator --- src/actions/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/actions/index.js b/src/actions/index.js index 27a262d..ea0bfe8 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,4 +1,4 @@ -import { ADD_LIST, ADD_CARD } from "../constants/constants"; +import { ADD_LIST, ADD_CARD, DELETE_CARD } from "../constants/constants"; export function getMembers() { return { @@ -26,6 +26,13 @@ export function addCard(card) { }; } +export function deleteCard(card) { + return { + type: DELETE_CARD, + payload: card + }; +} + export function getBoard() { return { type: DUMMY_DATA From d45b754247065252795fdf82ac317b2864907d62 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Mon, 22 Jan 2018 19:34:35 -0600 Subject: [PATCH 03/15] Add delete function to cards reducer --- src/reducers/reducer_cards.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/reducers/reducer_cards.js b/src/reducers/reducer_cards.js index 5ff7ca0..cc2dcc4 100644 --- a/src/reducers/reducer_cards.js +++ b/src/reducers/reducer_cards.js @@ -1,4 +1,4 @@ -import { ADD_CARD } from "../constants/constants"; +import { ADD_CARD, DELETE_CARD } from "../constants/constants"; import merge from "lodash/merge"; const byListId = (state, action) => { @@ -37,6 +37,11 @@ const allId = (state, action) => { return [...state.allId, id]; }; +const deleteCard = (state, action) => { + // payload == id of post to be deleted + return _.omit(state, action.payload); +}; + export default function(state = null, action) { switch (action.type) { case ADD_CARD: @@ -44,6 +49,10 @@ export default function(state = null, action) { byListId: byListId(state, action), allId: allId(state, action) }; + case DELETE_CARD: + return { + deleteCard: deleteCard(state, action) + }; } return state; } From 93e4b83c6170fc5f14a36bd7f5e4fce78dd32913 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Mon, 22 Jan 2018 19:37:35 -0600 Subject: [PATCH 04/15] Add edit and delete button to card component --- src/components/card.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/card.js b/src/components/card.js index 0b30db6..1c384bb 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -7,8 +7,8 @@ export default function TaskCard(props) { {props.text} - - + + ); From d4bd7932b13f81b33153daa9822c14f363186b9f Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Tue, 23 Jan 2018 12:48:27 -0600 Subject: [PATCH 05/15] Bind deleteCard to List constructor --- src/components/list.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/list.js b/src/components/list.js index 0c3909a..9964c89 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { connect } from "react-redux"; -import { addCard, addList } from "../actions/index"; +import { addCard, addList, deleteCard } from "../actions/index"; import { bindActionCreators } from "redux"; import { Card, CardActions, CardHeader, CardText } from "material-ui/Card"; import FlatButton from "material-ui/FlatButton"; @@ -11,6 +11,8 @@ import css from "../style/component.css"; class List extends Component { constructor(props) { super(props); + + this.props.deleteCard = this.props.deleteCard.bind(this); } // Use arrow functions to bind the argument and maintain the context of this @@ -21,11 +23,19 @@ class List extends Component { const { id } = list; return _.map(cards.byListId[id], function(card) { - return ; + return ( + + ); }); }; render() { + console.log(this.props); return (
Date: Fri, 26 Jan 2018 03:23:52 -0600 Subject: [PATCH 06/15] Extract various constants from props. Debugging delete function --- src/components/card.js | 46 ++++++++++++++++++++++++++--------- src/components/list.js | 34 ++++++++++++++------------ src/reducers/reducer_cards.js | 12 +++++---- 3 files changed, 60 insertions(+), 32 deletions(-) diff --git a/src/components/card.js b/src/components/card.js index 1c384bb..7ac6b95 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -1,15 +1,39 @@ -import React from "react"; +import React, { Component } from "react"; import { Card, CardActions, CardHeader, CardText } from "material-ui/Card"; import FlatButton from "material-ui/FlatButton"; -export default function TaskCard(props) { - return ( - - {props.text} - - - - - - ); +class TaskCard extends Component { + constructor(props) { + super(props); + } + + handleDelete = () => { + const {cardId, listId, deleteCard} = this.props; + // refactor obj + const idToDelete = deleteCard({ + cardId: cardId, + listId: listId + }) + + return idToDelete; + + } + + render() { + console.log(this.props); + return ( + + {this.props.text} + + + + + + ); + } } + +export default TaskCard; diff --git a/src/components/list.js b/src/components/list.js index 9964c89..972eb4e 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -11,30 +11,34 @@ import css from "../style/component.css"; class List extends Component { constructor(props) { super(props); - - this.props.deleteCard = this.props.deleteCard.bind(this); } // Use arrow functions to bind the argument and maintain the context of this // It's the same as this.addCardById.bind(this, cardId) // If you bind the function inside JSX it will create new instances // upon rerendering + renderCardsToList = (cards, list) => { const { id } = list; - - return _.map(cards.byListId[id], function(card) { - return ( - - ); - }); + if (_.size(cards) !== 0) { + return _.map(cards.byListId[id], card => { + return ( + + ); + }); + } else { + return

No cards

; + } }; render() { + const { deleteCard, addCard, cards, list } = this.props; console.log(this.props); return (
@@ -46,9 +50,7 @@ class List extends Component { > - {this.props.cards !== null - ? this.renderCardsToList(this.props.cards, this.props.list) - : null} + {cards !== null ? this.renderCardsToList(cards, list) : null} { }; const deleteCard = (state, action) => { - // payload == id of post to be deleted - return _.omit(state, action.payload); + // payload == id of post to be deleted and list id + const { payload } = action; + const { cardId, listId } = payload; + console.log("deleteCard", payload); + console.log(_.omit(state, state.byListId[listId][cardId])); + return _.omit({}, state, state.byListId[listId][cardId]); }; export default function(state = null, action) { @@ -50,9 +54,7 @@ export default function(state = null, action) { allId: allId(state, action) }; case DELETE_CARD: - return { - deleteCard: deleteCard(state, action) - }; + return deleteCard(state, action); } return state; } From c64e08eae5434f1684ebd5ce46684c81d42f5678 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 04:22:05 -0600 Subject: [PATCH 07/15] Card id is set with random id generator --- package-lock.json | 13 +++++++++++++ package.json | 2 ++ src/components/card-constructor.js | 15 +++++---------- src/reducers/reducer_cards.js | 2 ++ 4 files changed, 22 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 078a22a..55fd1b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5888,6 +5888,14 @@ "integrity": "sha1-EEEktsYCxnlogaBCVB0220OlJk4=", "dev": true }, + "omit-deep-lodash": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/omit-deep-lodash/-/omit-deep-lodash-1.0.0.tgz", + "integrity": "sha1-FEBoJeOhrJ0jLuP3b+QktkCXKIQ=", + "requires": { + "lodash": "4.17.4" + } + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -6975,6 +6983,11 @@ "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=", "dev": true }, + "random-id-generator": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/random-id-generator/-/random-id-generator-0.0.2.tgz", + "integrity": "sha1-24l678cMcqeNrJ7BDNOhdr7Xu6s=" + }, "randomatic": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", diff --git a/package.json b/package.json index 071e28e..087eed4 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,9 @@ "loader-utils": "^1.1.0", "lodash": "^4.17.4", "material-ui": "^0.20.0", + "omit-deep-lodash": "^1.0.0", "prop-types": "^15.0.0", + "random-id-generator": "0.0.2", "react": "^16.2.0", "react-dom": "^16.2.0", "react-form-validator-core": "^0.3.0", diff --git a/src/components/card-constructor.js b/src/components/card-constructor.js index 9c5640c..ae90c7b 100644 --- a/src/components/card-constructor.js +++ b/src/components/card-constructor.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import _ from "lodash"; +import idGen from "random-id-generator"; import Dialog from "material-ui/Dialog"; import TextField from "material-ui/TextField"; import FlatButton from "material-ui/FlatButton"; @@ -10,8 +11,6 @@ class CardConstructor extends Component { super(props); this.state = { open: false, - // initId for reset - initId: 0, id: 0, text: "" }; @@ -27,13 +26,13 @@ class CardConstructor extends Component { getTask = event => { this.setState({ - id: ++this.state.initId, + id: idGen(), text: event.target.value }); }; handleSubmit = () => { - const { id, initId, text } = this.state; + const { id, text } = this.state; const { listId } = this.props; this.props.store({ @@ -42,20 +41,16 @@ class CardConstructor extends Component { text }); - this.setState({ - initId: id - }); - this.handleClose(); }; revertChanges = () => { this.setState({ // reset id to previous value - id: this.state.initId, + id: 0, text: "" }); - } + }; handleCancel = () => { this.revertChanges(); diff --git a/src/reducers/reducer_cards.js b/src/reducers/reducer_cards.js index 5de8304..34df536 100644 --- a/src/reducers/reducer_cards.js +++ b/src/reducers/reducer_cards.js @@ -1,5 +1,7 @@ import { ADD_CARD, DELETE_CARD } from "../constants/constants"; import merge from "lodash/merge"; +import omitDeep from "omit-deep-lodash"; + const byListId = (state, action) => { // some ES6 magic for popping off an object's properties and From d88a232f6eddaa03017e0a37f9b234476ad342f7 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 05:39:36 -0600 Subject: [PATCH 08/15] Card object is deleted from byListId and allId keys --- src/components/card.js | 1 - src/components/list.js | 1 - src/reducers/reducer_cards.js | 22 ++++++++++++++++------ 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/card.js b/src/components/card.js index 7ac6b95..2b6902b 100644 --- a/src/components/card.js +++ b/src/components/card.js @@ -20,7 +20,6 @@ class TaskCard extends Component { } render() { - console.log(this.props); return ( {this.props.text} diff --git a/src/components/list.js b/src/components/list.js index 972eb4e..33b90d9 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -39,7 +39,6 @@ class List extends Component { render() { const { deleteCard, addCard, cards, list } = this.props; - console.log(this.props); return (
{ // some ES6 magic for popping off an object's properties and // creating variables of the same name (Ex. const payload = action.payload) @@ -13,17 +12,21 @@ const byListId = (state, action) => { [id]: payload } }; - if (state == null) { return { [listId]: { [id]: payload } }; + } else if (state.byListId[listId] == {}) { + // even if list is empty of cards, byListId must return null + // if not null JSX will throw an error upon rerendering the empty card list + return null; + } else { + return _.merge({}, state.byListId, newState); } // _.merge is used here because it allows 2 objects to be merged // and returns a new copy of state - state cannot be directly mutated - return _.merge({}, state.byListId, newState); }; const allId = (state, action) => { @@ -43,9 +46,16 @@ const deleteCard = (state, action) => { // payload == id of post to be deleted and list id const { payload } = action; const { cardId, listId } = payload; - console.log("deleteCard", payload); - console.log(_.omit(state, state.byListId[listId][cardId])); - return _.omit({}, state, state.byListId[listId][cardId]); + + const omitter = { + // omitDeep uses recursion to removes 'all' matching keys in an object + // needed this because the state is nested + // unique keys are made with generator + byListId: omitDeep(state.byListId, [cardId]), + allId: _.without(state.allId, cardId) + }; + + return omitter; }; export default function(state = null, action) { From 48f223105769730989637421648d3acb8d17b403 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 06:59:12 -0600 Subject: [PATCH 09/15] Add delete_list constant, update action/index.js, delete_list action creator --- src/actions/index.js | 14 +++++++++++++- src/components/list.js | 2 ++ src/constants/constants.js | 1 + src/reducers/reducer_lists.js | 12 +++++++++++- 4 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index ea0bfe8..b4c358f 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,4 +1,9 @@ -import { ADD_LIST, ADD_CARD, DELETE_CARD } from "../constants/constants"; +import { + ADD_LIST, + ADD_CARD, + DELETE_CARD, + DELETE_LIST +} from "../constants/constants"; export function getMembers() { return { @@ -19,6 +24,13 @@ export function addList(list) { }; } +export function deleteList(list) { + return { + type: DELETE_LIST, + payload: list + }; +} + export function addCard(card) { return { type: ADD_CARD, diff --git a/src/components/list.js b/src/components/list.js index 33b90d9..54008c9 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -20,6 +20,8 @@ class List extends Component { renderCardsToList = (cards, list) => { const { id } = list; + // REFACTOR: not sure if i need to use .size + // REFACTOR: pass key and one all encompassing (ie. card or cardProps) prop to TaskCard if (_.size(cards) !== 0) { return _.map(cards.byListId[id], card => { return ( diff --git a/src/constants/constants.js b/src/constants/constants.js index 0f6c80b..f70a487 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -5,5 +5,6 @@ export const GET_CARDS = "GET_CARDS"; export const GET_BOARD = "GET_BOARD"; export const ADD_CARD = "ADD_CARD"; export const DELETE_CARD = "DELETE_CARD"; +export const DELETE_LIST = "DELETE_LIST"; export const DUMMY_DATA = "DUMMY_DATA"; diff --git a/src/reducers/reducer_lists.js b/src/reducers/reducer_lists.js index 56eb574..2e6a941 100644 --- a/src/reducers/reducer_lists.js +++ b/src/reducers/reducer_lists.js @@ -1,13 +1,23 @@ import _ from "lodash"; +import omitDeep from "omit-deep-lodash"; + import { lists } from "../settings/dummy-data"; -import { ADD_LIST, ADD_CARD } from "../constants/constants"; +import { ADD_LIST, DELETE_LIST } from "../constants/constants"; + +const deleteList = (state, action) => { + const { payload } = action; + // id of list to delete + const { id } = payload; + return; +}; export default function(state = null, action) { switch (action.type) { case ADD_LIST: // Using the es6 spread operator to concat // the latest list on to the end of the lists object in redux store return { ...state, [action.payload.id]: action.payload }; + case DELETE_LIST: } return state; } From a320f9ee59bb6565bf5b6221b726c37ca523b711 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 07:12:22 -0600 Subject: [PATCH 10/15] Add method handleDelete which dispatches list id to list reducer --- src/components/list.js | 18 ++++++++++++++---- src/reducers/reducer_lists.js | 4 +++- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/list.js b/src/components/list.js index 54008c9..a13a387 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { connect } from "react-redux"; -import { addCard, addList, deleteCard } from "../actions/index"; +import { addCard, addList, deleteCard, deleteList } from "../actions/index"; import { bindActionCreators } from "redux"; import { Card, CardActions, CardHeader, CardText } from "material-ui/Card"; import FlatButton from "material-ui/FlatButton"; @@ -38,9 +38,15 @@ class List extends Component { return

No cards

; } }; - + handleDelete = () => { + const { list, deleteList } = this.props; + console.log("handleDelete", list); + deleteList({ + id: list.id + }); + }; render() { - const { deleteCard, addCard, cards, list } = this.props; + const { deleteList, deleteCard, addCard, cards, list } = this.props; return (
+
@@ -72,7 +79,10 @@ function mapStateToProps({ cards }) { } // These dispatch methods are what you'll need to send data to the redux store function mapDispatchToProps(dispatch) { - return bindActionCreators({ addCard, deleteCard, addList }, dispatch); + return bindActionCreators( + { addCard, deleteCard, addList, deleteList }, + dispatch + ); } export default connect(mapStateToProps, mapDispatchToProps)(List); diff --git a/src/reducers/reducer_lists.js b/src/reducers/reducer_lists.js index 2e6a941..4c73eb6 100644 --- a/src/reducers/reducer_lists.js +++ b/src/reducers/reducer_lists.js @@ -9,7 +9,8 @@ const deleteList = (state, action) => { // id of list to delete const { id } = payload; - return; + console.log("deleteList", id); + return omitDeep(state, id); }; export default function(state = null, action) { switch (action.type) { @@ -18,6 +19,7 @@ export default function(state = null, action) { // the latest list on to the end of the lists object in redux store return { ...state, [action.payload.id]: action.payload }; case DELETE_LIST: + return deleteList(state, action); } return state; } From 98f90eb5a59106da5f8ac94e50009f860ff857cb Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 07:34:32 -0600 Subject: [PATCH 11/15] Implement a cascading delete action that deletes all cards belonging to a deleted list from byListId in redux --- src/actions/index.js | 10 +++++++++- src/components/list.js | 22 ++++++++++++++++++---- src/constants/constants.js | 1 + src/reducers/reducer_cards.js | 17 ++++++++++++++++- 4 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index b4c358f..eb6d3ef 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -2,7 +2,8 @@ import { ADD_LIST, ADD_CARD, DELETE_CARD, - DELETE_LIST + DELETE_LIST, + CASCADE_DELETE } from "../constants/constants"; export function getMembers() { @@ -31,6 +32,13 @@ export function deleteList(list) { }; } +export function cascadeDelete(list) { + return { + type: CASCADE_DELETE, + payload: list + }; +} + export function addCard(card) { return { type: ADD_CARD, diff --git a/src/components/list.js b/src/components/list.js index a13a387..0d5c623 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -1,6 +1,12 @@ import React, { Component } from "react"; import { connect } from "react-redux"; -import { addCard, addList, deleteCard, deleteList } from "../actions/index"; +import { + addCard, + addList, + deleteCard, + deleteList, + cascadeDelete +} from "../actions/index"; import { bindActionCreators } from "redux"; import { Card, CardActions, CardHeader, CardText } from "material-ui/Card"; import FlatButton from "material-ui/FlatButton"; @@ -22,6 +28,7 @@ class List extends Component { const { id } = list; // REFACTOR: not sure if i need to use .size // REFACTOR: pass key and one all encompassing (ie. card or cardProps) prop to TaskCard + // REFACTOR: shorted variable references where possible if (_.size(cards) !== 0) { return _.map(cards.byListId[id], card => { return ( @@ -39,11 +46,18 @@ class List extends Component { } }; handleDelete = () => { - const { list, deleteList } = this.props; - console.log("handleDelete", list); + const { list, deleteList, cascadeDelete } = this.props; + deleteList({ id: list.id }); + + console.log("handleDelete", list); + // get array of card id's belonging to list + // delete all cards from list from redux state + cascadeDelete({ + listId: list.id + }); }; render() { const { deleteList, deleteCard, addCard, cards, list } = this.props; @@ -80,7 +94,7 @@ function mapStateToProps({ cards }) { // These dispatch methods are what you'll need to send data to the redux store function mapDispatchToProps(dispatch) { return bindActionCreators( - { addCard, deleteCard, addList, deleteList }, + { addCard, deleteCard, addList, deleteList, cascadeDelete }, dispatch ); } diff --git a/src/constants/constants.js b/src/constants/constants.js index f70a487..4914f5e 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -6,5 +6,6 @@ export const GET_BOARD = "GET_BOARD"; export const ADD_CARD = "ADD_CARD"; export const DELETE_CARD = "DELETE_CARD"; export const DELETE_LIST = "DELETE_LIST"; +export const CASCADE_DELETE = "CASCADE_DELETE"; export const DUMMY_DATA = "DUMMY_DATA"; diff --git a/src/reducers/reducer_cards.js b/src/reducers/reducer_cards.js index 790637c..be63ef8 100644 --- a/src/reducers/reducer_cards.js +++ b/src/reducers/reducer_cards.js @@ -1,4 +1,4 @@ -import { ADD_CARD, DELETE_CARD } from "../constants/constants"; +import { ADD_CARD, DELETE_CARD, CASCADE_DELETE } from "../constants/constants"; import merge from "lodash/merge"; import omitDeep from "omit-deep-lodash"; @@ -58,6 +58,19 @@ const deleteCard = (state, action) => { return omitter; }; +const cascadeDelete = (state, action) => { + // deletes all cards in a list + const { payload } = action; + const { listId } = payload; + + const omitter = { + byListId: _.omit(state.byListId, [listId]), + allId: allId(state, action) + }; + + return omitter; +}; + export default function(state = null, action) { switch (action.type) { case ADD_CARD: @@ -67,6 +80,8 @@ export default function(state = null, action) { }; case DELETE_CARD: return deleteCard(state, action); + case CASCADE_DELETE: + return cascadeDelete(state, action); } return state; } From 4f76956da743bcb80b237d2f9645d4b66f46f07c Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 07:52:07 -0600 Subject: [PATCH 12/15] Ids deleted via list cascade are now removed from the allId array --- src/reducers/reducer_cards.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/reducers/reducer_cards.js b/src/reducers/reducer_cards.js index be63ef8..2fb51f4 100644 --- a/src/reducers/reducer_cards.js +++ b/src/reducers/reducer_cards.js @@ -63,9 +63,13 @@ const cascadeDelete = (state, action) => { const { payload } = action; const { listId } = payload; + // collects the ids from byListId[listId] into an array + const idsFromList = _.keys(state.byListId[listId]); + console.log("idsFromList", _.difference(state.allId, idsFromList)); + const omitter = { byListId: _.omit(state.byListId, [listId]), - allId: allId(state, action) + allId: _.difference(state.allId, idsFromList) }; return omitter; From 851c702aa87ff6101d9692422d40bc471a762242 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 08:09:45 -0600 Subject: [PATCH 13/15] Remove extra console logs --- src/components/list.js | 2 -- src/reducers/reducer_cards.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/list.js b/src/components/list.js index 0d5c623..434a31b 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -51,8 +51,6 @@ class List extends Component { deleteList({ id: list.id }); - - console.log("handleDelete", list); // get array of card id's belonging to list // delete all cards from list from redux state cascadeDelete({ diff --git a/src/reducers/reducer_cards.js b/src/reducers/reducer_cards.js index 2fb51f4..0ff12fc 100644 --- a/src/reducers/reducer_cards.js +++ b/src/reducers/reducer_cards.js @@ -65,7 +65,7 @@ const cascadeDelete = (state, action) => { // collects the ids from byListId[listId] into an array const idsFromList = _.keys(state.byListId[listId]); - console.log("idsFromList", _.difference(state.allId, idsFromList)); + const omitter = { byListId: _.omit(state.byListId, [listId]), From 3bf5f444b6ae16a12cf4fa211a0d282ea4430afd Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 09:31:23 -0600 Subject: [PATCH 14/15] User can change board and team name from the menu --- src/actions/index.js | 9 ++++++- src/components/board-menu.js | 4 ++-- src/components/slide-menu-right.js | 38 ++++++++++++++++++++++++++++-- src/constants/constants.js | 1 + src/containers/board.js | 11 ++++++--- src/reducers/reducer_board.js | 9 ++++--- 6 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index eb6d3ef..58ded30 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -3,9 +3,16 @@ import { ADD_CARD, DELETE_CARD, DELETE_LIST, - CASCADE_DELETE + CASCADE_DELETE, + CHANGE_BOARD_INFO } from "../constants/constants"; +export function changeBoardInfo(board) { + return { + type: CHANGE_BOARD_INFO, + payload: board + } +} export function getMembers() { return { type: DUMMY_DATA diff --git a/src/components/board-menu.js b/src/components/board-menu.js index 8fbdce6..61edfaa 100644 --- a/src/components/board-menu.js +++ b/src/components/board-menu.js @@ -6,9 +6,9 @@ import css from "../style/board-menu.css"; export default function BoardMenu(props) { return (
-

{props.board.name}

+

{props.board.boardName}

{props.board.teamName}
- +
); } diff --git a/src/components/slide-menu-right.js b/src/components/slide-menu-right.js index 4f5bb59..a259b0c 100644 --- a/src/components/slide-menu-right.js +++ b/src/components/slide-menu-right.js @@ -1,5 +1,6 @@ import React, { Component } from "react"; import Dialog from "material-ui/Dialog"; +import TextField from "material-ui/TextField"; import FlatButton from "material-ui/FlatButton"; import RaisedButton from "material-ui/RaisedButton"; @@ -7,7 +8,9 @@ class SlideMenuRight extends Component { constructor(props) { super(props); this.state = { - open: false + open: false, + boardName: this.props.board.boardName, + teamName: this.props.board.teamName }; } @@ -19,6 +22,23 @@ class SlideMenuRight extends Component { this.setState({ open: false }); }; + getName = (event, name) => { + console.log(event.target.value); + this.setState({ + [name]: event.target.value + }); + }; + + handleSubmit = () => { + this.props.update({ + boardName: this.state.boardName, + teamName: this.state.teamName + }); + this.handleClose(); + }; + + handleCancel = () => {}; + render() { return (
@@ -28,7 +48,21 @@ class SlideMenuRight extends Component { open={this.state.open} onRequestClose={this.handleClose} > -

Slide Menu

+

Change board name

+ + this.getName(event, "boardName")} + /> + this.getName(event, "teamName")} + /> +
+ +
); diff --git a/src/constants/constants.js b/src/constants/constants.js index 4914f5e..e7e4c1c 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -3,6 +3,7 @@ export const GET_USER = "GET_USER"; export const ADD_LIST = "ADD_LIST"; export const GET_CARDS = "GET_CARDS"; export const GET_BOARD = "GET_BOARD"; +export const CHANGE_BOARD_INFO = "CHANGE_BOARD_INFO"; export const ADD_CARD = "ADD_CARD"; export const DELETE_CARD = "DELETE_CARD"; export const DELETE_LIST = "DELETE_LIST"; diff --git a/src/containers/board.js b/src/containers/board.js index 9c45b52..fbc6f1b 100644 --- a/src/containers/board.js +++ b/src/containers/board.js @@ -8,7 +8,8 @@ import { getUser, addList, addCard, - getBoard + getBoard, + changeBoardInfo } from "../actions/index"; import { bindActionCreators } from "redux"; import _ from "lodash"; @@ -31,7 +32,10 @@ class Board extends Component { render() { return (
- + {_.map(this.props.lists, list => )} this.setHeaderToStore(header)} lists={this.props.lists} /> + {this.props.board.boardName}
); } @@ -52,7 +57,7 @@ function mapStateToProps({ members, user, lists, cards, board }) { // These dispatch methods are what you'll need to send data to the redux store function mapDispatchToProps(dispatch) { return bindActionCreators( - { getMembers, getUser, addList, getBoard }, + { getMembers, getUser, addList, getBoard, changeBoardInfo }, dispatch ); } diff --git a/src/reducers/reducer_board.js b/src/reducers/reducer_board.js index 821255e..3aefd54 100644 --- a/src/reducers/reducer_board.js +++ b/src/reducers/reducer_board.js @@ -1,10 +1,13 @@ -import { GET_BOARD } from '../constants/constants'; -import { board } from '../settings/dummy-data'; +import { GET_BOARD, CHANGE_BOARD_INFO } from "../constants/constants"; +import { board } from "../settings/dummy-data"; -export default function (state = board, action) { +export default function(state = board, action) { switch (action.type) { case GET_BOARD: return action.payload; + + case CHANGE_BOARD_INFO: + return action.payload; } return state; } From cb6abfa233dd6730bb55dd5c35c20b95033e6fb1 Mon Sep 17 00:00:00 2001 From: Jordan Leslie Date: Fri, 26 Jan 2018 09:36:43 -0600 Subject: [PATCH 15/15] Remove console log. Cancel button now closes menu modal --- src/components/slide-menu-right.js | 5 +++-- src/containers/board.js | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/slide-menu-right.js b/src/components/slide-menu-right.js index a259b0c..f9aa181 100644 --- a/src/components/slide-menu-right.js +++ b/src/components/slide-menu-right.js @@ -23,7 +23,6 @@ class SlideMenuRight extends Component { }; getName = (event, name) => { - console.log(event.target.value); this.setState({ [name]: event.target.value }); @@ -37,7 +36,9 @@ class SlideMenuRight extends Component { this.handleClose(); }; - handleCancel = () => {}; + handleCancel = () => { + this.handleClose(); + }; render() { return ( diff --git a/src/containers/board.js b/src/containers/board.js index fbc6f1b..2c4c9e6 100644 --- a/src/containers/board.js +++ b/src/containers/board.js @@ -44,7 +44,6 @@ class Board extends Component { store={header => this.setHeaderToStore(header)} lists={this.props.lists} /> - {this.props.board.boardName}
); }