Layla - Edges - Inspiration Board

package.json

@@ -18,9 +18,14 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^1.2.0"
   },
   "homepage": "http://adagold.github.io/inspiration-board"
 }
+
+"jest": {
+  "snapshotSerializers": ["enzyme-to-json/serializer"]
+}

src/App.js

@@ -1,8 +1,19 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+import CARD_DATA from './data/card-data.json';
+
 
 class App extends Component {
+
+  constructor() {
+     super();
+      this.state = {
+       value: 'LAYLA',
+       boards: []
+     };
+   }
+
   render() {
     return (
       <section>
@@ -11,7 +22,8 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={this.state.value}
+          cardData={CARD_DATA.cards}
           />
       </section>
     );

src/components/Board.js

@@ -5,7 +5,9 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+
+
+const URL = 'https://inspiration-board.herokuapp.com';
 
 class Board extends Component {
   constructor() {
@@ -16,18 +18,79 @@ class Board extends Component {
     };
   }
 
+// This loads all cards from the API
+  componentDidMount() {
+    const cardsURL = `${URL}/boards/LAYLA/cards`
+    axios.get(cardsURL)
+    .then((response) => {
+      this.setState({cards: response.data});
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
+  deleteCard = (cardID) => {
+    const cardURL = `${URL}/cards/${cardID}`;
+    axios.delete(cardURL)
+    .then(() => {
+      let cardsCopy = [...this.state.cards];
+      let index = cardsCopy.findIndex(cardData => cardData.card.id === cardID);
+      cardsCopy.splice(index, 1);
+
+      this.setState({cards: cardsCopy});
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
+
+  }
+
+  addCard = (newCard) => {
+    //   const cards = this.state.cards;
+    //   cards.push(newCard);
+    //   this.setState({cards: card});
+    //   console.log(newCard, this.state.cards)
+    //   console.log("im here bitches")
+    const newURL = `${URL}/boards/LAYLA/cards`
+
+    axios.post(newURL, newCard)
+      .then((response) => {
+        const cards = this.state.cards;
+        cards.push(response.data);
+        this.setState({cards: cards});
+      })
+      .catch((error) => {
+        console.log(error.response);
+      });
+    }
+
+
   render() {
+    const cardCollection = this.state.cards.map((card_obj, i) => {
+      return <Card
+                key={i}
+                id={card_obj.card.id}
+                text={card_obj.card.text}
+                emoji={card_obj.card.emoji}
+                deleteCardCallback={this.deleteCard}
+              />
+    });
+
     return (
-      <div>
-        Board
+      <div className="board">
+        {cardCollection}
+        <NewCardForm addCardCallback={this.addCard}/>
+
       </div>
+
     )
   }
 
 }
 
 Board.propTypes = {
-
+  cardData: PropTypes.array.isRequired
 };
 
 export default Board;

src/components/Card.js

@@ -5,17 +5,44 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+
+  onDeleteHandler = (event) => {
+    event.preventDefault();
+    this.props.deleteCardCallback(this.props.id);
+  }
+
+
+
   render() {
+    const emojiName = this.props.emoji ? this.props.emoji : '';
+
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <p className="card__content-text">
+            {this.props.text}
+          </p>
+          <p className="card__content-emoji">
+            {emoji.getUnicode(emojiName)}
+          </p>
+            <button
+              type="button"
+              className="card__delete"
+              onClick={this.onDeleteHandler}>
+              Delete Card
+            </button>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func,
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,91 @@ 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: ""
+    }
+  }
+
+  onTextChange = (event) => {
+    console.log('text was changed!', event);
+    this.setState({
+      text: event.target.value, //will be whatever input was changed (even.target), value will be the new piece
+      });
+  }
+
+  onEmojiChange = (event) => {
+    this.setState({
+      emoji: event.target.value,
+    });
+  }
+
+  onInputchange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const newState = {};
+    newState[field] = value;
+    this.setState(newState)
+  }
+
+  onFormSubmit = (event) =>{
+    event.preventDefault();
+
+    const newCard = {
+      text: this.state.text,
+      emoji: this.state.emoji,
+    };
+
+    this.setState({
+      text: "",
+      emoji: "",
+    });
+
+    if (newCard.text !== "" && newCard.emoji !== ""){
+      this.props.addCardCallback(newCard);
+    }
+      else {
+        alert("please enter text and emoji")
+      }
+   }
+
+  render() {
+    return (
+      <div>
+        <form
+          className="new-card-form__form "
+          onSubmit={this.onFormSubmit}>
+          <div>
+            <label htmlFor="text">Text:</label>
+            <input
+            name="text"
+            value={this.state.text}
+            onChange={this.onTextChange}
+             />
+          </div>
+          <div>
+            <label htmlFor="emoji">Emoji:</label>
+            <input
+            name="emoji"
+            value={this.state.emoji}
+            onChange={this.onEmojiChange} />
+          </div>
+          <input
+            className="new-card-form__form-button"
+            type="submit"
+            value="Add Text"
+          />
+        </form>
+      </div>
+    );
+  }
+}
+export default NewCardForm;

src/components/test/Board.test.js

@@ -0,0 +1,2 @@
+import React from 'react';
+import Board from './Board.js';

src/components/test/Card.test.js

@@ -0,0 +1,19 @@
+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
+        text="test text"
+        emoji="test emoji"
+        />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+describe('NewCardForm', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow( <NewCardForm addCardCallback={() => {} } />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/data/card-data.json

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