Sockets - Riyo

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

@@ -11,7 +11,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`riyo`}
           />
       </section>
     );

src/components/Board.js

@@ -6,28 +6,104 @@ import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
+import { pseudoRandomBytes } from 'crypto';
 
 class Board extends Component {
   constructor() {
     super();
 
     this.state = {
       cards: [],
+      errorMessages: ""
     };
   }
 
+  componentDidMount() {
+    const fullUrl = this.props.url + this.props.boardName + "/cards"
+    axios.get(fullUrl)
+      .then((response) => {
+        const cards = response.data.map((card) => {
+          const newCard = {
+            text: card.card.text,
+            emoji: card.card.emoji,
+            id: card.card.id
+          }
+          return newCard;
+        })
+
+        this.setState({ cards });
+
+      })
+      .catch((error) => {
+        this.setState({ errorMessages: error.message });
+      });
+  }
+
+
+  addCardCallback = (cardInfo) => {
+    const fullUrl = this.props.url + this.props.boardName + "/cards"
+    axios.post(fullUrl, cardInfo)
+      .then((response) => {
+        const card = response.data["card"]
+        let updatedData = this.state.cards;
+        updatedData.push({
+          id: card.id,
+          text: cardInfo.text,
+          emoji: cardInfo.emoji
+        });
+        this.setState({ cards: updatedData })
+      })
+      .catch((error) => {
+        this.setState({ errorMessages: error.message });
+      });
+  }
+
+  deleteCardCallback = (id) => {
+    const updatedCards = this.state.cards.filter((card) => card.id !== id)
+
+    this.setState({
+      cards: updatedCards
+    });
+
+    const fullUrl = `https://inspiration-board.herokuapp.com/cards/${id}`
+    axios.delete(fullUrl)
+      .then((response) => {
+
+      })
+      .catch((error) => {
+        this.setState({ errorMessages: error.message });
+      });
+  }
+
+
+
+
   render() {
+    const showCards = this.state.cards.map((card, index) => {
+      return (<Card
+        key={index}
+        text={card.text}
+        emoji={card.emoji}
+        id={card.id}
+        deleteCardCallback={this.deleteCardCallback}
+      />)
+    })
+
+    const errors = <div className="validation-errors-display">Error: {this.state.errorMessages}</div>
     return (
-      <div>
-        Board
+      <div className="board">
+        {this.state.errorMessages ? errors : ""}
+        <NewCardForm addCardCallback={this.addCardCallback} />
+        {showCards}
       </div>
     )
-  }
-
+  };
 }
 
-Board.propTypes = {
 
+Board.propTypes = {
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired,
 };
 
 export default Board;

src/components/Card.js

@@ -2,20 +2,38 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
+
 import './Card.css';
 
 class Card extends Component {
+
+
   render() {
+    const isEmoji = (this.props.emoji) ? this.props.emoji : ""
+    const id = this.props.id
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <div className="card__content-text">
+            {this.props.text}
+          </div>
+          <div className="card__content-emoji">
+            {emoji.getUnicode(isEmoji)}
+          </div>
+          <div>
+            <button onClick={() => this.props.deleteCardCallback(id)} className="card__delete"> Delete </button>
+          </div>
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  id: PropTypes.number,
+  deleteCardCallback: PropTypes.func
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -3,4 +3,79 @@ 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.state = {
+            text: "",
+            emoji: "",
+        }
+    }
+
+    onInputChange = (event) => {
+        const updatedState = {};
+
+        const field = event.target.name;
+        const value = event.target.value;
+
+        updatedState[field] = value;
+        this.setState(updatedState);
+    }
+
+
+    clearForm = () => {
+        this.setState({
+            text: "",
+            emoji: "",
+        });
+    }
+
+    onFormSubmit = (event) => {
+        event.preventDefault();
+
+        const newCard = {
+            text: this.state.text,
+            emoji: this.state.emoji,
+        }
+
+        this.props.addCardCallback(newCard)
+        this.clearForm()
+    }
+
+
+    emojiOptions = (emojis) => {
+        const select = emojis.map((emojiString) => {
+            return (
+                <option value={emojiString}>{emoji.getUnicode(emojiString)}</option>
+            )
+        })
+        return select
+    }
+
+    render() {
+        return (
+            <div className="new-card-form">
+                <div className="new-card-form__header">
+                    Write a Inspirational Card!
+                </div>
+                <form className="new-card-form__form" onSubmit={this.onFormSubmit}>
+                    <div>
+                        <textarea name="text" value={this.state.text} type="text" onChange={this.onInputChange} className="new-card-form__form-textarea" />
+                    </div>
+                    <div>
+                        <select className="new-card-form__form-select" onChange={this.onInputChange} name="emoji" value={this.state.emoji}  >
+                            {this.emojiOptions(EMOJI_LIST)}
+                        </select>
+                    </div>
+                    <div>
+                        <input type="submit" value="Submit Card" className="new-card-form__form-button" />
+                    </div>
+                </form>
+            </div>
+        )
+    }
+}
+export default NewCardForm;

src/components/test/Board.test.js

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

src/components/test/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();
+  });
+});

src/components/test/__snapshots__/Board.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board that it matches an existing snapshot 1`] = `
+<div
+  className="board"
+>
+  <NewCardForm
+    addCardCallback={[Function]}
+  />
+</div>
+`;

src/components/test/__snapshots__/NewCardForm.test.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm that it matches an existing snapshot 1`] = `
+<div
+  className="new-card-form"
+>
+  <div
+    className="new-card-form__header"
+  >
+    Write a Inspirational Card!
+  </div>
+  <form
+    className="new-card-form__form"
+    onSubmit={[Function]}
+  >
+    <div>
+      <textarea
+        className="new-card-form__form-textarea"
+        name="text"
+        onChange={[Function]}
+        type="text"
+        value=""
+      />
+    </div>
+    <div>
+      <select
+        className="new-card-form__form-select"
+        name="emoji"
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          value=""
+        />
+        <option
+          value="heart_eyes"
+        >
+          😍
+        </option>
+        <option
+          value="beer"
+        >
+          🍺
+        </option>
+        <option
+          value="clap"
+        >
+          👏
+        </option>
+        <option
+          value="sparkling_heart"
+        >
+          💖
+        </option>
+        <option
+          value="heart_eyes_cat"
+        >
+          😻
+        </option>
+        <option
+          value="dog"
+        >
+          🐶
+        </option>
+      </select>
+    </div>
+    <div>
+      <input
+        className="new-card-form__form-button"
+        type="submit"
+        value="Submit Card"
+      />
+    </div>
+  </form>
+</div>
+`;

src/data/card-data.json

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