Anne Watson - Octos - Inspiration Board

src/App.js

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

src/components/Board.js

@@ -1,33 +1,110 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
-
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
+
+const CARDS_URL = 'https://inspiration-board.herokuapp.com/boards/watson/cards/'
 
 class Board extends Component {
-  constructor() {
+  constructor(props) {
     super();
 
     this.state = {
-      cards: [],
+      cards: []
     };
   }
 
+  componentDidMount() {
+    this.props.updateStatusCallback("loading cards...", "success");
+    axios.get(CARDS_URL)
+    .then((response) => {
+
+      this.setState({ cards: response.data });
+
+      this.props.updateStatusCallback("successfully loaded cards", "success");
+    })
+
+    .catch((error) => {
+      this.setState({ error: error.message });
+
+      this.props.updateStatusCallback(error.message, 'error');
+
+    this.setState({
+      status: {
+        message: `Failed to load cards: ${error.message}`,
+        type: 'error'
+      }
+    })
+
+    });
+  }
+
+
+  addCard = (card) => {
+    axios.post(CARDS_URL, card)
+      .then((response) => {
+        this.props.updateStatusCallback(`successfully added card ${ card.text }`, "success");
+
+        let updatedCards = this.state.cards;
+        updatedCards.push(response.data);
+
+        this.setState({ cards: updatedCards });
+      })
+      .catch((error) => {
+        this.props.updateStatusCallback(`Error adding card ${ card.name }`, 'error');
+      });
+  }
+
+  deleteCard = (cardID) => {
+    axios.delete(CARDS_URL + cardID)
+      .then((response) => {
+        this.props.updateStatusCallback(`successfully deleted card`, "success");
+
+        let updatedCards = this.state.cards
+
+        let targetCard = updatedCards.findIndex((card) => {
+          return card.card.id === cardID;
+        });
+
+        updatedCards.splice(targetCard, 1)
+
+        this.setState({ cards: updatedCards });
+
+      })
+      .catch((error) => {
+        this.props.updateStatusCallback(`Error deleting card`, "error");
+      });
+  }
+
   render() {
+    const cards = this.state.cards.map((cardObj, index) => {
+      return(
+        <Card key={index}
+        text={cardObj.card.text}
+        emoji={cardObj.card.emoji}
+        cardID={cardObj.card.id}
+        deleteCardCallback={this.deleteCard}
+        />
+    )
+    });
+
     return (
-      <div>
-        Board
+      <div className="board">
+        <NewCardForm
+          addCardCallback={this.addCard}
+        />
+        { cards }
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  updateStatusCallback: PropTypes.func.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Board from './Board';
+import { mount, shallow } from 'enzyme';
+
+describe('Board', () => {
+  test('shallow mount', () => {
+    const board = shallow(
+      <Board updateStatusCallback={() => {}} />
+    );
+
+    expect(board).toMatchSnapshot();
+  });
+
+});

src/components/Card.js

@@ -1,21 +1,44 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
+class Card extends React.Component {
+  constructor(props) {
+    super();
+  }
+
+  onDelete = (event) => {
+    event.preventDefault();
+    let cardID = this.cardID;
+    this.props.deleteCardCallback(this.props.cardID);
+  }
+
   render() {
     return (
-      <div className="card">
-        Card
-      </div>
+      <section>
+        <div className="card">
+          <button className="card__delete" onClick={this.onDelete}>Delete Card</button>
+          <div className="card__content">
+            <div className="card__content-text">{this.props.text}</div>
+            <div className="card__content-emoji">{this.getEmoji(this.props.emoji)}</div>
+          </div>
+        </div>
+      </section>
     )
   }
+
+  getEmoji = (emojicon) => {
+    return emoji.getUnicode(emojicon)
+  }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  cardID: PropTypes.number,
+  deleteCard: PropTypes.func
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Card from './Card';
+import { mount, shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('shallow mount', () => {
+    const card = mount(
+      <Card text="test text" emoji="grinning" />
+    );
+
+    expect(card).toMatchSnapshot();
+
+    card.unmount();
+  });
+});

src/components/NewCardForm.js

@@ -4,3 +4,61 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+
+class NewCardForm extends Component {
+  static propTypes = {
+    addCardCallback: PropTypes.func.isRequired
+  }
+
+  constructor() {
+    super();
+
+    this.state = {
+      text: "",
+      emoji: ""
+    };
+  }
+
+  onInputChange = (event) => {
+    let updatedInput = {};
+    updatedInput[event.target.name] = event.target.value;
+    this.setState(updatedInput);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.addCardCallback(this.state);
+
+    this.setState({
+      text: "",
+      emoji: ""
+    });
+  }
+
+  render() {
+    return (
+      <form className="new-card-form" onSubmit={this.onFormSubmit}>
+        <h1 className="new-card-form__header">Post a thing</h1>
+        <div>
+          <label className="new-card-form__form-label"  htmlFor="text">Text</label>
+          <input className="new-card-form__form-textarea" type="text"
+            name="text"
+            value={this.state.text}
+            onChange={this.onInputChange}/>
+        </div>
+        <div>
+          <label className="new-card-form__form-label" htmlFor="emoji">Emoji</label>
+          <input className="new-card-form__form-select" type="text"
+            name="emoji"
+            value={this.state.emoji}
+            onChange={this.onInputChange}/>
+        </div>
+        <div><input className="new-card-form__form-button" type="submit"/></div>
+      </form>
+    );
+  }
+}
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { mount, shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    const cardForm = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+    expect(cardForm).toMatchSnapshot();
+
+    // cardForm.unmount();
+  });
+
+  test('Invokes callback on form submission', () => {
+    const callback = jest.fn();
+    const cardForm = shallow(
+      <NewCardForm addCardCallback={ callback } />
+    );
+
+    cardForm.find('form').simulate('submit', {
+      preventDefault: () => {}
+    });
+
+    expect(callback).toHaveBeenCalled();
+    expect(callback.mock.calls[0][0]).toEqual({
+      text: '',
+      emoji: ''
+    });
+  });
+
+  test('Keeps track of user input', () => {
+    const value = "new text value"
+    const cardForm = shallow(
+      <NewCardForm addCardCallback={() => {} } />
+    );
+
+    let textInput = cardForm.find('input[name="text"]');
+    textInput.simulate('change', {
+      target: {
+        name: "text",
+        value: value
+      }
+    });
+
+    cardForm.update();
+
+    textInput = cardForm.find('input[name="text"]');
+
+    expect(textInput.getElement().props.value).toEqual("new text value");
+  });
+});

src/components/Status.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Status extends React.Component {
+  static propTypes = {
+    message: PropTypes.string,
+    type: PropTypes.string
+  }
+
+  render() {
+
+    return (
+      <section className={`status ${this.props.type}`}>
+        { this.props.message }
+      </section>
+    );
+  }
+}
+
+
+export default Status;