Sockets - Kelly

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

@@ -10,8 +10,8 @@ class App extends Component {
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          url="https://inspiration-board.herokuapp.com/"
+          boardName={`kelly`}
           />
       </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';
+// import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
-    };
+      error: null,
+    }
+  }
+
+  componentDidMount() {
+    axios.get(this.props.url + 'boards/' + this.props.boardName + '/cards')
+      .then((response) => {
+        console.log(response.data)
+        const cards = response.data.map((card) => {
+          const newCard = {
+            id: card.card.id,
+            text: card.card.text,
+            emoji: card.card.emoji
+          }
+          return newCard;
+        })
+        this.setState({ cards });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      })
+  }
+
+  onDeleteCard = (cardId) => {
+    const newCardList = this.state.cards.filter(card => card.id !== cardId);
+    this.setState({
+      cards: newCardList
+    });
+
+    axios.delete(this.props.url + 'cards/' + cardId)
+      .then((response) => {
+        console.log(`Deleted card ${response.data.card.id}`)
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      })
+  }
+
+  addCardCallback = (card) => {
+    axios.post(this.props.url + 'boards/' + this.props.boardName + '/cards', card)
+      .then((response) => {
+        this.setState({
+          cards: [...this.state.cards, response.data.card]
+        });
+      })
+      .catch((error) => {
+        this.setState({error: error.message});
+      });
   }
 
   render() {
+    const cardComponents = this.state.cards.map((card, index) => {
+
     return (
-      <div>
-        Board
-      </div>
-    )
-  }
+      <Card
+        key={index}
+        id={card.id}
+        text={card.text}
+        emoji={card.emoji}
+        onDeleteCard={this.onDeleteCard}
+      />
+      );
+    });
 
+  return (
+    <div className="board">
+      {cardComponents}
+      <NewCardForm addCardCallback={this.addCardCallback} />
+    </div>)
+  }
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string, 
+  boardName: PropTypes.string
 };
 
 export default Board;

src/components/Card.js

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

src/components/Card.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    const props = {
+      key: 1,
+      id: 1,
+      text: 'You got this!',
+      emoji: '',
+    }
+
+    const wrapper = shallow( <Card {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/NewCardForm.js

@@ -4,3 +4,71 @@ 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 = {};
+        updatedState[event.target.name] = event.target.value;
+        this.setState(updatedState);
+      }
+
+    generateEmoji = (emojis) => {
+        return emojis.map((emojiText, i) => {
+            return <option value={emojiText} key={i}>{emoji.getUnicode(emojiText)}</option>
+        })
+    }
+
+    render() {
+        return (
+            <div className='new-card-form'>
+                <form onSubmit={this.addCard} className='new-card-form__form'>
+                    <h3 className='new-card-form__header'>Add a Card</h3>
+                    <label className='new-card-form__form-label'>Text:</label>
+                    <textarea
+                        name="text"
+                        value={this.state.text}
+                        className='new-card-form__form-textarea'
+                        onChange={this.onInputChange}>  
+                    </textarea>
+                    <label className='new-card-form__form-label'>Emoji:</label>
+                    <select
+                        name="emoji"
+                        value={this.state.emoji}
+                        className='new-card-form__form-select'
+                        onChange={this.onInputChange}>  
+                            {this.generateEmoji(EMOJI_LIST)}
+                    </select>
+                    <input className="new-card-form__form-button" type="submit" name="submit" value="Add a Card" />
+                </form>
+            </div>
+        )
+    }
+
+}
+
+NewCardForm.propTypes = {
+    addCardCallback: PropTypes.func.isRequired,
+};
+
+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();
+  });
+});

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

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

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

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