26 01 2018

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",

src/actions/index.js

@@ -1,5 +1,18 @@
-import { ADD_LIST, ADD_CARD } from "../constants/constants";
+import {
+  ADD_LIST,
+  ADD_CARD,
+  DELETE_CARD,
+  DELETE_LIST,
+  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
@@ -19,13 +32,34 @@ export function addList(list) {
   };
 }
 
+export function deleteList(list) {
+  return {
+    type: DELETE_LIST,
+    payload: list
+  };
+}
+
+export function cascadeDelete(list) {
+  return {
+    type: CASCADE_DELETE,
+    payload: list
+  };
+}
+
 export function addCard(card) {
   return {
     type: ADD_CARD,
     payload: card
   };
 }
 
+export function deleteCard(card) {
+  return {
+    type: DELETE_CARD,
+    payload: card
+  };
+}
+
 export function getBoard() {
   return {
     type: DUMMY_DATA

src/components/board-menu.js

@@ -6,9 +6,9 @@ import css from "../style/board-menu.css";
 export default function BoardMenu(props) {
   return (
     <div className="board-menu-container">
-      <h4>{props.board.name}</h4>
+      <h4>{props.board.boardName}</h4>
       <h5>{props.board.teamName}</h5>
-      <SlideMenuRight />
+      <SlideMenuRight board={props.board} update={props.update} />
     </div>
   );
 }

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();

src/components/card.js

@@ -1,15 +1,38 @@
-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 (
-    <Card>
-      <CardText expandable={false}>{props.text}</CardText>
-      <CardActions>
-        <FlatButton label="Action1" />
-        <FlatButton label="Action2" />
-      </CardActions>
-    </Card>
-  );
+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() {
+    return (
+      <Card>
+        <CardText expandable={false}>{this.props.text}</CardText>
+        <CardActions>
+          <FlatButton label="Edit" />
+          <FlatButton
+            label="Delete"
+            onClick={this.handleDelete}
+          />
+        </CardActions>
+      </Card>
+    );
+  }
 }
+
+export default TaskCard;

src/components/list.js

@@ -1,6 +1,12 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { addCard, addList } 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";
@@ -17,15 +23,42 @@ class List extends Component {
   // 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;
+    // 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 (
+          <TaskCard
+            key={card.id}
+            listId={id}
+            cardId={card.id}
+            text={card.text}
+            deleteCard={this.props.deleteCard}
+          />
+        );
+      });
+    } else {
+      return <p>No cards</p>;
+    }
+  };
+  handleDelete = () => {
+    const { list, deleteList, cascadeDelete } = this.props;
 
-    return _.map(cards.byListId[id], function(card) {
-      return <TaskCard key={card.id} text={card.text} />;
+    deleteList({
+      id: list.id
+    });
+    // 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;
     return (
       <div className="list-wrapper">
         <Card
@@ -36,16 +69,15 @@ class List extends Component {
         >
           <CardHeader title={this.props.list.header} />
           <CardText expandable={false}>
-            {this.props.cards !== null
-              ? this.renderCardsToList(this.props.cards, this.props.list)
-              : null}
+            {cards !== null ? this.renderCardsToList(cards, list) : null}
           </CardText>
           <CardActions>
             <CardConstructor
               listId={this.props.list.id}
               cards={this.props.cards}
               store={this.props.addCard}
             />
+            <FlatButton label="Delete" onClick={this.handleDelete} />
           </CardActions>
         </Card>
       </div>
@@ -59,7 +91,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, addList }, dispatch);
+  return bindActionCreators(
+    { addCard, deleteCard, addList, deleteList, cascadeDelete },
+    dispatch
+  );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(List);

src/components/slide-menu-right.js

@@ -1,13 +1,16 @@
 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";
 
 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,24 @@ class SlideMenuRight extends Component {
     this.setState({ open: false });
   };
 
+  getName = (event, name) => {
+    this.setState({
+      [name]: event.target.value
+    });
+  };
+
+  handleSubmit = () => {
+    this.props.update({
+      boardName: this.state.boardName,
+      teamName: this.state.teamName
+    });
+    this.handleClose();
+  };
+
+  handleCancel = () => {
+    this.handleClose();
+  };
+
   render() {
     return (
       <div className="slide-menu-right">
@@ -28,7 +49,21 @@ class SlideMenuRight extends Component {
           open={this.state.open}
           onRequestClose={this.handleClose}
         >
-          <p>Slide Menu</p>
+          <p>Change board name</p>
+
+          <TextField
+            hintText="Enter"
+            floatingLabelText="Board name.."
+            onBlur={event => this.getName(event, "boardName")}
+          />
+          <TextField
+            hintText="Enter"
+            floatingLabelText="Team name.."
+            onBlur={event => this.getName(event, "teamName")}
+          />
+          <br />
+          <FlatButton label="Submit" onClick={this.handleSubmit} />
+          <FlatButton label="Cancel" onClick={this.handleCancel} />
         </Dialog>
       </div>
     );

src/constants/constants.js

@@ -3,6 +3,10 @@ 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";
+export const CASCADE_DELETE = "CASCADE_DELETE";
 
 export const DUMMY_DATA = "DUMMY_DATA";