L - Daniela

src/App.js

@@ -10,8 +10,8 @@ class App extends Component {
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          url={'https://inspiration-board.herokuapp.com/boards/'}
+          boardName={'Dani'}
           />
       </section>
     );

src/components/Board.js

@@ -5,29 +5,112 @@ 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';
+import Axios from 'axios';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
+      error: '',
     };
   }
 
+  componentDidMount() {
+    const myCards = `${this.props.url+this.props.boardName}/cards`
+    Axios.get(myCards).then((response) => {
+      this.setState({
+        cards: response.data.map(r => r.card),
+      });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });    
+    });
+  }
+
+  deleteCard = (id) => {
+    const cardURL = `https://inspiration-board.herokuapp.com/cards/${ id }`
+
+    axios.delete(cardURL)
+    .then(res => {
+      const updatedCards = this.state.cards.filter((card) => {
+        return card.id !== id;
+      });
+
+      this.setState({ 
+        cards: updatedCards
+      });
+    })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  };
+
+  addCard = (card) => {
+    const myCards = `${this.props.url+this.props.boardName}/cards`
+
+    axios.post(myCards, card)
+      .then((response) => {
+        const updatedData = this.state.cards;
+        updatedData.push(response.data.card);
+        this.setState({
+          cards: updatedData,
+          error: ''
+        });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  makeCollection() {
+    const emoji = require("emoji-dictionary");
+    const cardsCollection = this.state.cards.map((card, i) => {
+
+      if (card.emoji) {
+        const name = card.emoji
+        return < Card
+          key={i} 
+          text={card.text} 
+          emoji={emoji.getUnicode(name)} 
+          id={card.id}
+          deleteCard={this.deleteCard}
+          />
+      } else if ( card.Emoji ) {
+        const name = card.Emoji
+        return < Card
+          key={i} 
+          text={card.text} 
+          emoji={emoji.getUnicode(name)} 
+          id={card.id}
+          deleteCard={this.deleteCard}/>
+      } else {
+        return < Card
+          key={i} 
+          text={card.text}  
+          id={card.id}
+          deleteCard={this.deleteCard}/>
+      }
+    });
+
+    return cardsCollection
+  } 
+
   render() {
     return (
-      <div>
-        Board
+      <div className="board">
+        {this.makeCollection()}
+        <NewCardForm addCard={this.addCard}/>
       </div>
     )
   }
-
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Card.js

@@ -1,21 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
-
 import './Card.css';
 
 class Card extends Component {
+  // deleteButton = () => {
+  //   return <button onClick={this.props.delTodo.bind(this, id)}>x</button>
+  // }
+
   render() {
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <button 
+          type="button"
+          className="card__delete"
+          aria-label="Delete"
+          onClick={ () => {this.props.deleteCard(this.props.id)}}
+          >
+          Delete
+          </button>
+          <div className="card__content-text">
+            {this.props.text}
+          </div>
+          <div className="card__content-emoji">
+            {this.props.emoji}
+          </div>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  id: PropTypes.number.isRequired,
+  deleteCard: PropTypes.func.isRequired,
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -3,4 +3,92 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
+const emojis = require("emoji-dictionary");
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: "", 
+      emoji: ""
+    };
+  }
+
+  onChange = (event) => {
+    const { name, value } = event.target;
+
+    const updatedState = {};
+    updatedState[name] = value;
+
+    this.setState(updatedState);
+  };
+
+  onSelect = event => {
+    this.setState({
+      emoji: event.target.value
+    });
+  };
+
+  onSubmit = (e) => {
+    e.preventDefault();
+
+    let newSubmission = {}
+    Object.keys(this.state).forEach((key) => {
+      if ( key === 'Emoji' || key === "emoji" ) {
+        const value = this.state[key]    
+        newSubmission[key] = emoji.getName(value)
+      } else {
+        newSubmission[key] = this.state[key]
+      }
+    }); 
+
+    this.props.addCard(newSubmission);
+
+    this.setState({ 
+      text: "", 
+      emoji: "" 
+    });
+  }
+
+  render() {
+    const emojiList = EMOJI_LIST.map((emoji, i) => {
+      return <option key={i}> {emojis.getUnicode(emoji)}</option>
+    });
+
+    return (
+        <form className="new-card-form">
+          <h1 className="new-card-form__header"> Create a new card! </h1>
+          <div className="new-card-form__form">
+            <input 
+              className="new-card-form__form-textarea"
+              type="text" 
+              name="text" 
+              placeholder="Text" 
+              value={this.state.text}
+              onChange={this.onChange}
+            />
+            < select
+              className="new-card-form__form-select"
+              value={this.state.emoji}
+              onChange={this.onSelect}>
+              {emojiList}
+            </select>
+            <input 
+              className="new-card-form__form-button"
+              type="submit" 
+              value="Submit" 
+              onClick={this.onSubmit} 
+            />
+          </div>
+        </form> 
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCard: PropTypes.func.isRequired
+};
+
+export default NewCardForm;