lindsay - edges - inspiration board

package.json

@@ -27,6 +27,10 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
+  },
+  "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   }
 }

src/components/Board.css

@@ -1,6 +1,7 @@
 .board {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .validation-errors-display {

src/components/Board.js

@@ -12,14 +12,94 @@ class Board extends Component {
     super();
 
     this.state = {
-      cards: [],
+      cards: []
     };
+
+  }
+
+  componentDidMount() {
+    console.log("The component did in fact mount");
+    const GET_ALL_CARDS_URL = "https://inspiration-board.herokuapp.com/boards/lindsay/cards";
+
+    axios.get(GET_ALL_CARDS_URL)
+    .then((response) => {
+      this.setState({
+        cards: response.data,
+      });
+    })
+    // .catch((error) => {
+    //   this.setState({
+    //     error: error.message
+    //   });
+    // });
+  }
+
+  deleteCard = (cardId) => {
+    axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`)
+
+    .then((response) => {
+      const updateList = this.state.cards.filter((card) =>{
+        return card["card"].id !== cardId;
+      })
+      this.setState({cards: updateList});
+    })
+  }
+
+  addCard = (newCard) => {
+    console.log(newCard.text)
+
+    axios.post(`https://inspiration-board.herokuapp.com/boards/lindsay/cards`, newCard)
+    .then((response) => {
+      const updatedCardsList = [...this.state.cards, response.data]
+      this.setState({
+        cards: updatedCardsList
+      });
+    })
   }
 
+
   render() {
+
+    const allCards = this.state.cards.map((item) => {
+
+      const card = item.card
+
+      const formattedCard = {
+        id: card.id,
+        text: card.text,
+        emoji: card.emoji
+      }
+
+      return <Card
+        key={card.id}
+        card={formattedCard}
+        deleteCardCallback={this.deleteCard}
+        />
+    });
+
+
     return (
+
+      // <div>
+      //   {cards.map(function(groupItem, key){ return (
+      //     Object.keys(groupItem).map(function(item){return (
+      //       <Card group={groupItem} item={item} />
+      //     );})
+      //   );})}
+      // </div>
+
       <div>
-        Board
+        <div>
+
+            <NewCardForm addCardCallback={this.addCard} />
+
+
+        </div>
+
+
+        <div className = "board">
+          {allCards}
+        </div>
       </div>
     )
   }

src/components/Card.js

@@ -5,17 +5,44 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
-  render() {
+
+  handleClick = () => {
+    console.log(`button was clicked! ID = ${this.props.card.id}`)
+    this.props.deleteCardCallback(this.props.card.id)
+  }
+
+  render(props) {
+    console.log(this.props.card)
+
+    let icon = this.props.card.emoji;
+    if (icon !== null) {
+      icon = emoji.getUnicode(icon);
+    }
+
+
     return (
+
       <div className="card">
-        Card
+        <div className="card__content">
+          <p className="card__content-text">
+            {this.props.card.text}
+          </p>
+
+          <p className="card__content-emoji">
+            {icon}
+          </p>
+          <button onClick={this.handleClick} type="submit">Delete</button>
+
+
+        </div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  emoji: PropTypes.string,
+  text: PropTypes.string
 };
 
 export default Card;

src/components/NewCardForm.css

@@ -9,6 +9,7 @@
 .new-card-form__header {
   text-align: center;
   text-transform: uppercase;
+  padding-bottom: 2em;
 }
 
 .new-card-form__form {
@@ -24,17 +25,21 @@
   grid-row: auto;
 }
 
+
+
 .new-card-form__form-select,
 .new-card-form__form-textarea,
 .new-card-form__form-button {
   font-family: 'Raleway', sans-serif;
   font-size: 1.25em;
   grid-column: controls;
   grid-row: auto;
+  width: 100%
 }
 
 .new-card-form__form-button {
-  background-color: inherit;
+  background-color: lightblue;
   border: 1px solid black;
   font-size: 1em;
+  margin-top: 1.5em;
 }

src/components/NewCardForm.js

@@ -4,3 +4,101 @@ 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: "",
+    }
+    console.log(this.props)
+  }
+
+  onInputChange = (event) => {
+
+    console.log("I'm on input change");
+
+    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: ''
+    });
+
+    console.log("created a new card", newCard);
+    this.props.addCardCallback(newCard);
+  }
+
+
+  render() {
+    return (
+      <div className="new-card-form">
+        <div className="new-card-form__header">
+          Create a New Card!
+        </div>
+        <form className = "new-card-form__form"
+          onSubmit={this.onFormSubmit}>
+          <br />
+
+        <div>
+          <label className="new-card-form__form-label" htmlFor="text">
+              Text:&nbsp;&nbsp;
+          </label>
+
+          <input className="new-card-form__form-textarea"
+            name="text"
+            value={this.state.text}
+            onChange={this.onInputChange}>
+            </input>
+        </div>
+
+        <br />
+
+        <div>
+          <label className="new-card-form__form-label" htmlFor="emoji">
+            Emoji:&nbsp;&nbsp;
+          </label>
+
+          <select id="selectId" className="new-card-form__form-select" value={this.state.value} onChange={this.onInputChange}>
+            <option value="">no emoji</option>
+            <option value="heart_eyes">{emoji.getUnicode("heart_eyes")}</option>
+            <option value="beer">{emoji.getUnicode("beer")}</option>
+            <option value="clap">{emoji.getUnicode("clap")}</option>
+            <option value="sparkling_heart">{emoji.getUnicode("sparkling_heart")}</option>
+            <option value="heart_eyes_cat">{emoji.getUnicode("heart_eyes_cat")}</option>
+            <option value="dog">{emoji.getUnicode("dog")}</option>
+          </select>
+        </div>
+
+        <input className="new-card-form__form-button"
+          type="submit"
+          value="Add Card"
+        />
+
+        </form>
+      </div>
+    )
+  }
+
+}
+
+
+export default NewCardForm;

src/components/test/Card.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+import emoji from 'emoji-dictionary';
+
+const CARD = [
+  {
+    id: 12,
+    text: "test text",
+    emoji: "heart"
+  }
+]
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+
+    const wrapper = shallow( <Card
+      card={CARD}
+      />);
+
+
+
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,23 @@
+// 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"
+    />
+    <p
+      className="card__content-emoji"
+    />
+    <button
+      type="submit"
+    >
+      Delete
+    </button>
+  </div>
+</div>
+`;

src/data/card-data.json

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