Sigrid Benezra - Edges - Inspiration Board

package.json

@@ -18,8 +18,9 @@
     "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"

src/App.js

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

src/components/Board.js

@@ -5,29 +5,89 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 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: [],
     };
   }
 
+  componentDidMount() {
+    console.log("Component has mounted");
+    const CARDS = this.props.url + this.props.boardName
+
+    axios.get(CARDS)
+    .then((response) => {
+      this.setState({
+        cards: response.data,
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+  }
+
+  addCardCallback = (cardInfo) => {
+    // console.log("Board message - addCardCallback triggered");
+    axios.post('https://inspiration-board.herokuapp.com/boards/sig/cards', cardInfo)
+    .then((response) => {
+      let updatedCards = this.state.cards;
+      updatedCards.push({card: {id:response.data.card.id, text: cardInfo.text, emoji: cardInfo.emoji}});
+      this.setState({cards: updatedCards});
+
+    })
+    .catch((error) => {
+      this.setState({error: error.message });
+    });
+  }
+
+  onDeleteCallback = (index, id) => {
+    // console.log("Board Message - onDeleteCallback");
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`)
+    .then((response) => {
+      console.log(`Card ${id} deleted`);
+      console.log(response);
+      console.log(this.state.cards);
+      const newState = this.state.cards;
+      newState.splice(index, 1);
+      this.setState({cards: newState});
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
   render() {
+    const cards = this.state.cards.map((card, i) => {
+      if (!card.card) {
+        return <Card key={i} text={card.text} emoji={card.emoji} index={i} id={card.id} onDeleteCallback={this.onDeleteCallback} />
+      } else {
+        return <Card key={i} text={card.card.text} emoji={card.card.emoji} index={i} id={card.card.id}
+          onDeleteCallback={this.onDeleteCallback}
+        />
+    }
+  });
+
+
     return (
-      <div>
-        Board
+      <div className="new-card-form">
+        <NewCardForm addCardCallback={this.addCardCallback}/>
+        {cards}
       </div>
     )
-  }
 
+  }
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string,
+  boardName: PropTypes.string,
+  id: PropTypes.string
 };
 
 export default Board;

src/components/Card.js

@@ -4,18 +4,33 @@ import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
+
 class Card extends Component {
+
   render() {
+    const deleteCard = () => {
+        console.log(`This is the index from card props: ${this.props.index}`);
+        console.log(`This is the id from card props: ${this.props.id}`);
+        this.props.onDeleteCallback(this.props.index, this.props.id);
+      }
     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(`${this.props.emoji}`)}</p>
+          <button onClick={deleteCard} className="card__delete">Delete</button>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  onDeleteCallback: PropTypes.func,
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  index: PropTypes.number,
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -1,6 +1,81 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+// 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 {
+  static propTypes = {
+    addCardCallback: PropTypes.func.isRequired
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      cards:[{
+        cardID: {
+          card: {text: '', emoji: '',}
+        }
+      }]
+    }
+  }
+
+  onInputChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const newState = {};
+    newState[field] = value;
+    this.setState(newState)
+  }
+
+  resetState = () => {
+    this.setState({
+      cards:[{cardID: {card: {text: '', emoji: '',}}}]
+    });
+  }
+
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const card = {
+      text: this.state.message,
+      emoji: this.state.emoji,
+    }
+    this.resetState();
+    this.props.addCardCallback(card)
+  }
+
+  render() {
+    const emojiList =  EMOJI_LIST.map((item, i) => {
+        return <option key={i} value={item}>{item}</option>
+      });
+
+    return(
+      <form onSubmit={this.onFormSubmit} className="new-card-form" >
+        <header className="new-card-form__header">
+          Add a New Card!
+        </header>
+        <p></p>
+        <section>
+          <label htmlFor="message" className="new-card-form__form-label">Your Message</label>
+          <input name="message" type="text" value={this.state.message} onChange={this.onInputChange} className="new-card-form__form-textarea"/>
+            <select onChange={this.onInputChange} name="emoji" className="new-card-form__form-select">
+              {emojiList}
+            </select>
+        </section>
+        <p></p>
+        <input type="submit" value="Add message" className="new-card-form__form-button" />
+      </form>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func,
+};
+
+export default NewCardForm;

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', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = shallow(
+       <Card
+          text = 'text'
+          emoji = 'emoji'
+          />
+    );
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

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