Ports - Amy W

src/App.js

@@ -7,11 +7,11 @@ class App extends Component {
     return (
       <section>
         <header className="header">
-          <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+          <h1 className="header__h1"><span className="header__text">Amy's Inspirations</span></h1>
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`AmyW`}
           />
       </section>
     );

src/components/Board.js

@@ -5,29 +5,88 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+import { createReadStream } from 'fs';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
+      error: "",
       cards: [],
     };
   }
 
+  renderCards = () => {
+    if (this.state.cards) {
+      const cards = this.state.cards.map(card => 
+        <Card 
+          key={card.card.id}
+          id={card.card.id}
+          text={card.card.text} 
+          emoji={card.card.emoji}
+          deleteCardCallback={this.deleteCard}
+        />);
+      return cards; 
+    }
+  }
+
+  getCards = () => {
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+    .then((response) => {
+      this.setState({ cards: response.data });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  componentDidMount() {
+    this.getCards();
+  }
+
+  deleteCard = (cardId) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`)
+    .then((response) => {
+      this.getCards();
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
+  addCard = (card) => {
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, card)
+    .then((response) => {
+      const cardList = [...this.state.cards];
+      const newCard = response.data.card;
+      const objCard = {card: newCard}
+      cardList.push(objCard);
+      this.setState({ cards: cardList });
+    })
+    .catch((error) => {
+      this.setState({ error: error.message });
+    });
+  }
+
   render() {
     return (
       <div>
-        Board
+        <div className="board">
+          {this.renderCards()}
+        </div>
+        <section>
+          < NewCardForm newCardCallback={this.addCard}/>
+        </section>
       </div>
+
     )
   }
 
 }
 
 Board.propTypes = {
-
+  name: PropTypes.string,
 };
 
 export default Board;

src/components/Card.js

@@ -3,19 +3,30 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
+import { prototype } from 'events';
 
 class Card extends Component {
   render() {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          {this.props.text && <div className="card__content-text">{this.props.text}</div>}
+          {this.props.emoji && <div className="card__content-emoji">{emoji.getUnicode(this.props.emoji)}</div>}
+        </section>
+        <section>
+          <button className="card__delete" onClick={() => this.props.deleteCardCallback(this.props.id)}>Delete</button>
+        </section>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func,
+  key: PropTypes.number,
+  id: PropTypes.number
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,77 @@ 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(props) {
+        super(props);
+
+        this.state = {
+          text: '',
+          emoji: '',
+        };
+    }
+
+    createEmojis = () => {
+        const image = EMOJI_LIST.map(emo => 
+            <option>{emoji.getUnicode(emo)}</option>
+        );
+        return image;
+    }
+
+    onChangeHandler = (event) => {
+        const field = {}
+        field[event.target.name] = event.target.value;
+
+        this.setState(field);
+    }
+
+    handleSubmit = (event) => {
+        event.preventDefault();
+        this.props.newCardCallback({
+            text: this.state.text,
+            emoji: emoji.getName(this.state.emoji),
+        });
+        this.setState({
+            text: '',
+            emoji: '',
+        });
+    }
+
+    render() {
+
+        return (
+            <div className="new-card-form">
+                <h2 className="new-card-form__header">New card form</h2>
+                <form className="new-card-form__form" onSubmit={this.handleSubmit}>
+                    <div>
+                        <label for="text" nameClass="new-card-form__form-label">Card text:</label>
+                        <input
+                            name="text"
+                            onChange={this.onChangeHandler}
+                            value={this.state.text}
+                            className="new-card-form__form-textarea"
+                        />
+                    </div>
+                    <div>
+                    <label for="emoji" nameClass="new-card-form__form-label">
+                        Emoji:
+                        <select name="emoji" value={this.state.emoji} onChange={this.onChangeHandler} className="new-card-form__form-select">
+                            {this.createEmojis()}
+                        </select>
+                    </label>
+                    </div>
+                    <div>
+                        <input type="submit" value="Add Card" className="new-card-form__form-button"/>
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+NewCardForm.propTypes = {
+    newCardCallback: PropTypes.func,
+};
+
+export default NewCardForm;

src/data/card-data.json

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