Sockets - Jansen

package.json

@@ -26,6 +26,10 @@
   "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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+// import NewCardForm from './components/NewCardForm';
 
 class App extends Component {
   render() {
@@ -11,7 +12,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`jansen-martin`}
           />
       </section>
     );

src/App.test.js

@@ -8,6 +8,9 @@ describe('App', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<App />, div);
+
+    console.log(div.innerHTML);
+
     ReactDOM.unmountComponentAtNode(div);
   });
 

src/components/Board.js

@@ -5,29 +5,128 @@ 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() {
     super();
 
     this.state = {
       cards: [],
+      error: "",
     };
+
+  }
+
+  componentDidMount() {
+    const { url, boardName } = this.props;
+
+    const getURL = url + boardName + "/cards";
+
+    axios.get(getURL)
+      .then((response) => {
+
+        const cardList = response.data.map((card) => {
+
+
+          const newCard = {
+            id: card.card.id,
+            text: card.card.text,
+            emoji: card.card.emoji,
+          }
+
+          return newCard;
+        })
+
+        this.setState({ cards: cardList });
+
+      })
+      .catch((error) => {
+        this.setState({ error: `${error.message} while loading your cards!` });
+      });
   }
 
+  addCard = (cardInfo) => {
+
+    const { url, boardName } = this.props;
+    const postURL = url + boardName + "/cards";
+
+    axios.post(postURL, cardInfo)
+      .then((response) => {
+        cardInfo.id = response.data.card.id;
+        let updatedCards = [...this.state.cards];
+        updatedCards.push(cardInfo);
+        this.setState({cards: updatedCards});
+
+      })
+      .catch((error) => {
+        this.setState({ error: `${error.message} while adding your card!` })
+      })
+  }
+
+
+  deleteCard = (index) => {
+
+    let updatedCards = this.state.cards;
+    let id = updatedCards[index].id;
+
+    const deleteUrl = "https://inspiration-board.herokuapp.com/cards/" + id;
+
+    axios.delete(deleteUrl)
+      .then((response) => {
+
+      updatedCards.splice(index, 1);
+
+      this.setState({
+        cards: updatedCards,
+      });
+
+      })
+      .catch((error) => {
+        this.setState({ error: `${error.message} while deleting your card!`})
+      })
+  };
+
+
   render() {
+    const cards = this.state.cards.map((card, i) => {
+
+      return (
+        <li key={i}>
+          <Card 
+            id={card.id}
+            index={i}
+            quote={card.text} 
+            emoji={card.emoji} 
+            deleteCardCallback={this.deleteCard} />
+        </li>
+      );
+    });
+
+
     return (
+      <section>
+
+      <div className="validation-errors-display validation-errors-display__list">
+        {this.state.errors}
+      </div>
+
+      <div className="board">
+        {cards}
+      </div>
+
       <div>
-        Board
+        <NewCardForm addCardCallback={this.addCard}/>
       </div>
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string,
+  boardName: PropTypes.string,
 };
 
 export default Board;

src/components/Card.js

@@ -5,17 +5,28 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+
+  onDeleteButtonClick = (event) => {
+    this.props.deleteCardCallback(this.props.index);
+  }
   render() {
+
     return (
-      <div className="card">
-        Card
-      </div>
+      <section className="card">
+        <div className="card__content-text card__content">{this.props.quote}</div>
+        <div className="card__content-emoji card__content">{this.props.emoji && emoji.getUnicode(this.props.emoji)}</div>
+        {<button id={this.props.id} className="card__delete" onClick={this.onDeleteButtonClick}>Delete</button>}
+      </section>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number,
+  index: PropTypes.number,
+  quote: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func,
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,100 @@ 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: "",
+        }
+    }
+
+
+    onSubmitCardButtonClick = (event) => {
+        event.preventDefault();
+
+        const newCard = {
+            text: this.state.text,
+            emoji: this.state.emoji
+        };
+
+        this.setState({
+            text: "",
+            emoji: ""
+        })
+
+        this.props.addCardCallback(newCard);
+    }
+
+    onInputChange = (event) => {
+        const updatedCard = {};
+
+        const field = event.target.name;
+        const value = event.target.value;
+
+        console.log(event.target.name);
+        console.log(event.target.value);
+
+        updatedCard[field] = value;
+        this.setState(updatedCard);
+    }
+
+    emojiList = () => {
+        return EMOJI_LIST.map((emojiChoice, i) => {
+            return <option key={ i } value={ emojiChoice }>{ emoji.getUnicode(emojiChoice) }</option>
+        });
+      }
+
+    render() {
+
+        const { text, emoji } = this.state;
+
+        return (
+            <div className="new-card-form">
+                <h3 className="new-card-form__header">Submit a New Card</h3>
+                <form className="new-card-form__form">
+
+                    <div>
+                        <textarea
+                            name="text"
+                            value={text}
+                            onChange={this.onInputChange}
+                            className="new-card-form__form-textarea"
+                            placeholder="Enter Stuff Here">
+                        </textarea>
+                    </div>
+
+                    <div>
+                        <label
+                          className="new-card-form__form-label"
+                          htmlFor="emoji">
+                            Emoji
+                        </label>
+                        <select
+                        className="new-card-form_form-select"
+                        onChange={this.onInputChange}
+                        name="emoji"
+                        value={emoji}>
+                            {this.emojiList()}
+                        </select>
+                    </div>
+
+                    <div>
+                        <input onClick={this.onSubmitCardButtonClick} className="new-card-form__form-button" type="submit" value="Submit Card" />
+                    </div>
+
+                </form>
+            </div>
+        )
+    }
+}
+
+export default NewCardForm;
+
+NewCardForm.propTypes = {
+    addCardCallback: PropTypes.func.isRequired,
+};

src/components/test/Card.test.js

@@ -0,0 +1,14 @@
+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 deleteCardCallback={() => {} } />);
+
+      // Assert that it looks like the last snapshot
+      expect(wrapper).toMatchSnapshot();
+    });
+  });

src/components/test/NewCardForm.test.js

@@ -0,0 +1,16 @@
+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/components/test/__snapshots__/Card.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches an existing snapshot 1`] = `
+<section
+  className="card"
+>
+  <div
+    className="card__content-text card__content"
+  />
+  <div
+    className="card__content-emoji card__content"
+  />
+  <button
+    className="card__delete"
+    onClick={[Function]}
+  >
+    Delete
+  </button>
+</section>
+`;