Sam Berk -- Octos

package.json

@@ -6,7 +6,9 @@
     "axios": "^0.18.0",
     "emoji-dictionary": "^1.0.9",
     "react": "^16.4.0",
+    "react-confirm-alert": "^2.0.2",
     "react-dom": "^16.4.0",
+    "react-dropdown": "^1.5.0",
     "react-scripts": "1.1.4"
   },
   "scripts": {
@@ -20,7 +22,13 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "gh-pages": "^1.2.0"
   },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  },
   "homepage": "http://adagold.github.io/inspiration-board"
 }

src/App.js

@@ -1,18 +1,54 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+import Status from './components/Status';
+import Dropdown from './components/Dropdown';
 
 class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      status: {
+        message: 'loaded the page',
+        type: 'success'
+      },
+      currentBoard: 'sam'
+    }
+  }
+
+  updateBoard = (name) => {
+    this.setState({
+      currentBoard: name
+    });
+  }
+
+  updateStatus = (message, type) => {
+    this.setState({
+      status: {
+        message: message,
+        type: type
+      },
+    })
+  }
+
   render() {
+
     return (
       <section>
         <header className="header">
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
+        <Dropdown updateBoardCallback={ this.updateBoard } />
+        <Status
+          message={ this.state.status.message }
+          type={ this.state.status.type }
+        />
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
-          />
+        url="https://inspiration-board.herokuapp.com/boards/"
+        boardName={this.state.currentBoard}
+        updateStatusCallback={this.updateStatus}
+        />
       </section>
     );
   }

src/components/Board.js

@@ -10,24 +10,110 @@ import CARD_DATA from '../data/card-data.json';
 class Board extends Component {
   constructor() {
     super();
-
     this.state = {
       cards: [],
+      boardName: null
     };
   }
 
+  componentDidMount() {
+    this.props.updateStatusCallback(`Loading board: ${this.props.boardName}`, 'success');
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+      .then((response) => {
+        this.props.updateStatusCallback(`Board "${this.props.boardName}" successfully loaded` , 'success');
+        this.setState({
+          cards: response.data,
+          boardName: this.props.boardName
+        });
+      })
+
+      .catch((error) => {
+        this.props.updateStatusCallback(error.message, 'error');
+      });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // debugger
+    if(prevProps.boardName !== this.props.boardName) {
+      this.props.updateStatusCallback(`Loading board: ${this.props.boardName}`, 'success');
+      axios.get(`${this.props.url}${this.props.boardName}/cards`)
+        .then((response) => {
+          this.props.updateStatusCallback(`Board "${this.props.boardName}" successfully loaded` , 'success');
+          this.setState({
+            cards: response.data,
+            boardName: this.props.boardName
+          });
+        })
+
+      .catch((error) => {
+        this.props.updateStatusCallback(error.message, 'error');
+      });
+    }
+  }
+
+  addCard = (newCard) => {
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, newCard)
+    .then((response) => {
+      this.props.updateStatusCallback('New card successfully added', 'success');
+
+      let updatedCards = this.state.cards;
+      updatedCards.push({
+        card: response.data.card
+      });
+
+      this.setState({
+        cards: updatedCards
+      });
+    })
+    .catch((error) => {
+      this.props.updateStatusCallback('Card could not be added', 'error');
+    });
+  }
+
+  deleteCard = (id) => {
+    axios.delete(`${this.props.url}${this.props.boardName}/cards/${id}`)
+      .then(() => {
+        let updatedCards = this.state.cards;
+        updatedCards.splice(id, 1);
+        this.setState({
+          cards: updatedCards
+        });
+        window.location.reload();
+      })
+      .catch((error) => {
+        this.props.updateStatusCallback(`Card could not be deleted: ${error.message}`, 'error');
+      });
+  }
+
   render() {
+    const cards = this.state.cards.map((card, index) => {
+      return (
+        <div>
+          <Card
+          key={index}
+          id={card.card.id}
+          text={card.card.text}
+          emoji={card.card.emoji}
+          deleteCardCallback={this.deleteCard}
+          />
+        </div>
+      );
+    });
+
     return (
-      <div>
-        Board
+      <div className='board'>
+        { cards }
+        <NewCardForm addCardCallback={this.addCard}/>
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired,
+  updateStatusCallback: PropTypes.func.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import Board from './Board';
+
+describe('Board', () => {
+  test('it will match the last snapshot', () => {
+    const board = shallow(
+      <Board url="" boardName="" updateStatusCallback={()=>{}}/>
+    );
+
+    expect(board).toMatchSnapshot();
+
+  });
+});

src/components/Card.js

@@ -5,17 +5,37 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  deleteCard = () => {
+    this.props.deleteCardCallback(this.props.id);
+  }
+
   render() {
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <div className="card__content-text">
+          {this.props.text}
+          </div>
+          <div className="card__content-emoji">
+          {emoji.getUnicode(`${this.props.emoji}`)}
+          </div>
+          <div>
+          <button className="card__delete" onClick={() => { if (window.confirm('Are you sure you wish to delete this item?')) this.deleteCard() } } >
+            Delete
+          </button>
+          </div>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+  emoji: PropTypes.string.isRequired,
+  deleteCardCallback: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import Card from './Card';
+
+describe('Card', () => {
+  test('it will match the last snapshot', () => {
+    const card = shallow(
+      <Card id={0} text="" emoji="" deleteCardCallback={()=>{}}/>
+    );
+
+    expect(card).toMatchSnapshot();
+
+  });
+
+  test('it invokes a callback when the card is deleted', () => {
+    const callback = jest.fn();
+    const card = shallow(
+      <Card id={0} text="" emoji="" deleteCardCallback={callback}/>
+    );
+
+    card.find('button').simulate('click');
+    global.confirm = () => true //This stubs the window.confirm function
+
+    expect(callback).toHaveBeenCalled();
+
+  });
+});