Ports - Ngoc

package.json

@@ -26,6 +26,12 @@
   "devDependencies": {
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+
+  "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   }
+
 }

src/App.js

@@ -3,15 +3,16 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
   render() {
     return (
       <section>
         <header className="header">
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
-        <Board
+        <Board 
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`ngoc-fabulous`}
           />
       </section>
     );

src/components/Board.js

@@ -8,18 +8,97 @@ import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
+      boardUrl: this.props.url,
+      cardUrl: this.props.url + this.props.boardName
     };
   }
+
 
+  componentDidMount() {
+    axios.get(this.state.cardUrl + '/' + 'cards')
+    .then((response) => {
+
+      this.setState({
+        cards: response.data});
+    })
+    .catch((error) => {
+      this.setState({error:error.message});
+    })
+  }
+
+  onDeleteCard = (cardId) => {
+
+    const newCardList = this.state.cards.filter(cardObject => cardObject.card.id !== cardId)
+
+    this.setState({
+      cards: newCardList
+    })
+
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/:${cardId}`)
+    .then((response) => {
+      console.log(response.data);
+    })
+    .catch((error) => {
+      this.setState({error:error.message});
+    })
+
+  }
+
+  addCard = (card) => {
+
+    const cardDataToSendToApi = {
+      text: card.text,
+      emoji: card.emoji,
+    };
+
+    axios.post('https://inspiration-board.herokuapp.com/boards/ngoc-fabulous/cards',cardDataToSendToApi)
+    .then((response) => {
+      console.log(response.data)
+      let updatedCardlist = this.state.cards;
+      updatedCardlist.push({ card: {
+        text: card.text,
+        emoji: card.emoji,
+        id: response.data.id,
+      }
+      });
+      this.setState({
+        cards: updatedCardlist
+      });
+    })
+    .catch((error) => {
+      this.setState({error:error.message});
+    })
+
+  }
   render() {
+
+    const cards = this.state.cards.map((cardObject,i) => { 
+      return [<Card
+          id = {cardObject.card.id}
+          text = {cardObject.card.text}
+          symbol = {cardObject.card.emoji}
+          onDeleteCard={this.onDeleteCard}
+          />];
+    });
+
+    const errorSection = (this.state.error) ?
+    (<section className="validation-errors-display">
+      Error: {this.state.error}
+    </section>) : null;
+
+
     return (
-      <div>
-        Board
+      <div className="board">
+        {errorSection}
+
+        <NewCardForm addCardCallback={this.addCard}/>
+        {cards}
+
       </div>
     )
   }

src/components/Card.js

@@ -5,12 +5,54 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  constructor(props) {
+    super(props);
+    //Change this state latter dont need to do this card
+    this.state = {
+      cards: props.cards
+    };
+  }
+
   render() {
+    const emoji = require("emoji-dictionary");
+    const { id, text, symbol } = this.props
+    if (symbol !== null) {
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <button 
+            type="button"
+            className="card__delete"
+            onClick ={() => this.props.onDeleteCard(id)}
+          >
+            x
+          </button>
+          <p className="card__content-text">{text}</p>
+          <p className="card__content-emoji">{emoji.getUnicode(symbol)}</p>
+        </section>
       </div>
     )
+  } else  {
+    return (
+      <div className="card">
+         <section className="card__content">
+
+            <button 
+            type="button"
+            className="card__delete"
+            onClick ={() => this.props.onDeleteCard(id)}
+            >
+            x
+            </button> 
+
+            <p className="card__content-text">
+            {text}
+            </p>
+
+        </section>
+      </div>
+    )
+  }
   }
 }
 

src/components/Card.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+
+    const wrapper = shallow( <Card />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/NewCardForm.js

@@ -3,4 +3,86 @@ 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(props) {
+        super(props);
+
+        this.cleared = {
+            text: "",
+            emoji: ""
+        };
+
+        this.state = {...this.cleared}
+
+        }
+
+    addCard = (event) => {
+        event.preventDefault();
+
+        const card = this.state;
+
+        this.props.addCardCallback(card)
+
+        this.setState({...this.cleared});
+    }
+
+    onInputChange =(event) => {
+        const updatedState = {};
+        const field = event.target.name;
+        const value = event.target.value;
+
+        updatedState[field] = value;
+        this.setState(updatedState);
+    }    
+    render() {
+        const emoji = require("emoji-dictionary");
+
+        const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+        const emojiOption = EMOJI_LIST.map((symbol) => {
+            return (
+                <option value = {symbol}> 
+                {emoji.getUnicode(symbol)}
+                </option>
+            )
+        })
+        return (
+            <div className="new-card-form">
+                <form className="new-card-form__form" onSubmit={this.addCard}>
+                    <header className="new-card-form__header">
+                        <h3>Add a Card</h3>
+                    </header>
+                    <label className="new-card-form__form-label">
+                        Text:
+                        <input
+                        className="new-card-form__form-textarea"
+                        name="text"
+                        type="text"
+                        value={this.state.name}
+                        onChange={this.onInputChange}
+                        >
+                        </input>
+                    </label>
+                    <label className="new-card-form__form-label">
+                        Emoji:
+                        <select
+                        className="new-card-form__form-select"
+                        name="emoji"
+                        value={this.state.emoji}
+                        onChange={this.onInputChange}
+                        >
+                        {emojiOption}
+                        </select>
+                    </label>
+                    <input className="new-card-form__form-button" 
+                    type="submit"
+                    value="Add a Card"
+                    />
+                </form>
+            </div>
+        )
+    }
+}
+
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { shallow } from 'enzyme';
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+
+    const wrapper = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});