add and delete cards

src/App.js

@@ -37,7 +37,7 @@ class App extends Component {
         />
         <Board
         url="https://inspiration-board.herokuapp.com/boards/"
-        boardName={`Ada-Lovelace`}
+        boardName={`sam`}
         updateStatusCallback={this.updateStatus}
         />
       </section>

src/components/Board.js

@@ -17,18 +17,53 @@ class Board extends Component {
   }
 
   componentDidMount() {
-    this.props.updateStatusCallback('Loading the board...', 'success');
+    this.props.updateStatusCallback(`Loading board: ${this.props.boardName}`, 'success');
     axios.get(`${this.props.url}${this.props.boardName}/cards`)
       .then((response) => {
         this.props.updateStatusCallback('Board successfully loaded', 'success');
-        this.setState({ cards: response.data });
+        this.setState({
+          cards: response.data
+        });
       })
 
       .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
+        });
+      })
+      .catch((error) => {
+        this.props.updateStatusCallback(`Card could not be deleted: ${error.message}`, 'error');
+      });
+  }
+
   render() {
     const cards = this.state.cards.map((card, index) => {
       return (
@@ -37,12 +72,14 @@ class Board extends Component {
         id={card.card.id}
         text={card.card.text}
         emoji={card.card.emoji}
+        deleteCardCallback={this.deleteCard}
         />
       );
     });
 
     return (
-      <div>
+      <div className='board'>
+        <NewCardForm addCardCallback={this.addCard}/>
         { cards }
       </div>
     )

src/components/Card.js

@@ -6,12 +6,26 @@ import './Card.css';
 
 class Card extends Component {
 
+  deleteCard = () => {
+    this.props.deleteCardCallback(this.props.id);
+  }
+
   render() {
     return (
       <div className="card">
-        {this.props.text}
-        <br />
-        {emoji.getUnicode(`${this.props.emoji}`)}
+        <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={this.deleteCard}>
+            Delete
+          </button>
+          </div>
+        </div>
       </div>
     )
   }
@@ -20,7 +34,8 @@ class Card extends Component {
 Card.propTypes = {
   id: PropTypes.number.isRequired,
   text: PropTypes.string.isRequired,
-  emoji: PropTypes.string.isRequired
+  emoji: PropTypes.string.isRequired,
+  deleteCardCallback: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -3,4 +3,71 @@ import PropTypes from 'prop-types';
 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 {
+
+  constructor() {
+    super();
+
+    this.state = {
+      text: '',
+      emoji: ''
+    };
+  }
+
+  onInputChange = (event) => {
+    const key = event.target.name;
+    let value = event.target.value;
+
+    let updatedInput = {};
+    updatedInput[key] = value;
+    this.setState(updatedInput);
+  }
+
+  onFormSubmit = (event) => {
+    this.props.addCardCallback(this.state);
+    this.setState({
+      text: '',
+      emoji: ''
+    });
+  }
+
+  getEmojis = () => {
+    const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+    const emojis = EMOJI_LIST.map((emojiText) => {
+      let emojiPicture = emoji.getUnicode(emojiText);
+      return (
+        <option key={emojiText} value={emojiText}>{emojiPicture}</option>
+      );
+    });
+    return emojis
+  }
+
+  render() {
+    return (
+      <section className="new-card-form">
+        <h1 className="new-card-form__header">Compose a message: </h1>
+        <form className="new-card-form__form" onSubmit={this.onFormSubmit}>
+
+          <label htmlFor="text" className="new-card-form__form-label">Message</label>
+          <textarea name="text" className="new-card-form__form-textarea" onChange={this.onInputChange} value={this.state.text}></textarea>
+
+          <label htmlFor="emoji" className="new-card-form__form-label">Emoji</label>
+          <select name="emoji" className="new-card-form__form-select" value={this.state.emoji} onChange={this.onInputChange}>{this.getEmojis()}</select>
+
+          <button type="submit" className="new-card-form__form-button">
+            Submit
+          </button>
+
+        </form>
+      </section>
+    );
+  }
+
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+}
+
+export default NewCardForm;

src/components/Status.js

@@ -5,7 +5,7 @@ class Status extends React.Component {
   static propTypes = {
     message: PropTypes.string,
     type: PropTypes.string
-  }
+  };
 
   render() {
     return(