Ports - Jillianne

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/"
+          boardName={`jr`}
           />
       </section>
     );

src/components/Board.js

@@ -5,7 +5,7 @@ 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';
 
 class Board extends Component {
   constructor() {
@@ -16,10 +16,41 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    axios.get(`${this.props.url}boards/${this.props.boardName}/cards`)
+      .then((response) => {
+        this.setState({ cards: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  deleteCardCallback = (cardID) => {
+    axios.delete(`${this.props.url}cards/${cardID}`)
+    .then((prevState) => {
+      const newBoard = prevState.cards.flatMap(card => {
+        if (card.card.id !== cardID) {
+          return card
+        }
+        return []
+      })
+
+      this.setState({ cards: newBoard });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
   render() {
+    const allCards = this.state.cards.map((card, i) => {
+      return <div key={i}><Card id={card.card.id} text={card.card.text} emoji={card.card.emoji} deleteCardCallback={this.deleteCardCallback}/></div>
+    });
+
     return (
       <div>
-        Board
+        {allCards}
       </div>
     )
   }

src/components/Card.js

@@ -4,18 +4,33 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
-    return (
-      <div className="card">
-        Card
-      </div>
-    )
+const Card = (props) => {
+  const deleteCard = () => {
+    props.deleteCardCallback(props.id)
   }
+
+  console.log(props.text)
+
+  return (
+    <div className="card">
+      <div className="card__content">
+        <div className="card__content-text">
+          {props.text && `Text: ${props.text}`}
+        </div>
+        <div className="card__content-emoji">
+          {props.emoji && `Emoji: ${emoji.getUnicode(props.emoji)}`}            
+        </div>
+        <div className="card__delete">
+          <button onClick={deleteCard}>Delete Card</button>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
 };
 
 export default Card;

src/data/card-data.json

@@ -6,7 +6,7 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"