Dionisia - Edges - Inspiration-Board

package.json

@@ -18,9 +18,15 @@
     "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"
   },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  },
   "homepage": "http://adagold.github.io/inspiration-board"
 }

src/App.js

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

src/components/Board.js

@@ -5,29 +5,119 @@ 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: [],
+      errorMessages: []
     };
   }
 
+  componentDidMount() {
+    const GET_ALL_CARDS_URL = `https://inspiration-board.herokuapp.com/boards/${this.props.boardName}/cards`;
+
+    axios.get(GET_ALL_CARDS_URL)
+    .then((response) => {
+      this.setState({ cards: response.data });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessages: [...this.state.errorMessages, error.message]
+      });
+    });
+  }
+
+  addCard = (newCard) => {
+    const ADD_CARD = `https://inspiration-board.herokuapp.com/boards/Dionisia/cards?text=${newCard.card.text}&emoji=${newCard.card.emoji}`;
+
+    axios.post(ADD_CARD)
+    .then((response) => {
+      let cardsArray = this.state.cards
+      cardsArray.push(response.data)
+      this.setState({
+        cards: cardsArray
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessages: error.message
+      })
+    })
+  }
+
+  deleteCard = (id) => {
+    console.log("This card is being deleted!");
+    const DELETE_CARD = `https://inspiration-board.herokuapp.com/cards/${id}`;
+
+    console.log(DELETE_CARD);
+
+    axios.delete(DELETE_CARD)
+    .then(() => {
+      const cardsArray = this.state.cards
+      console.log(cardsArray.length);
+
+      const removedCard = cardsArray.findIndex(card => card.id === id)
+      cardsArray.splice(removedCard, 1)
+       this.setState({
+        cards: cardsArray
+      });
+     })
+    .catch((error) => {
+      this.setState({
+        errorMessages: error.message
+      });
+    })
+  }
+
   render() {
+    // const cardArray = this.state.cardData["cards"]
+    // console.log(cardArray);
+
+    // const eachCard = cardArray.map((card, i) => {
+    //   // card = card.card
+    //   // console.log(card)
+    //   return <Card
+    //           key={i}
+    //           text={card.text}
+    //           emoji={card.emoji} />
+    // })
+    const emoji = require("emoji-dictionary");
+
+    const cardData = this.state.cards.map((card, i) => {
+      card = card.card;
+
+      return <Card
+                key={i}
+                id={card.id}
+                text={card.text}
+                emoji={emoji.getUnicode(`${card.emoji}`)}
+                deleteCardCallback={this.deleteCard}
+             />
+    })
+
     return (
+
       <div>
-        Board
+        <section className="form-section">
+          <NewCardForm addCardCallback={this.addCard} />
+        </section>
+
+        <section className="board">
+          {cardData}
+        </section>
       </div>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  // url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Board.test.js

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

src/components/Card.js

@@ -5,17 +5,50 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  deleteCardHandler = () => {
+    console.log("Delete button was clicked on");
+
+    this.props.deleteCardCallback(this.props.id)
+  }
+
   render() {
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+          <p className="card__content-text">
+            {this.props.text}
+          </p>
+          <p className="card__content-emoji">
+            {this.props.emoji}
+          </p>
+          <button onClick={this.deleteCardHandler}
+                  type="button"
+                  className="card__delete"
+                  >
+                  Delete
+          </button>
+        </div>
       </div>
     )
   }
 }
+// const Card = (props) => {
+//   const { text, emoji } = props;
+//
+//   return (
+//         <div className="card">
+//           <div className="card__content">
+//           <p className="card__content-text">{text}</p>
+//           <p className="card__content-emoji">{emoji}</p>
+//           </div>
+//         </div>
+//       )
+// }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing card snapshot', () => {
+    const wrapper = shallow( <Card
+      text="My message!"
+      emoji="black_heart"
+      deleteCardCallback={() => {} } />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });

src/components/NewCardForm.js

@@ -3,4 +3,89 @@ 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"]
+const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog", "relaxed", "balloon", "black_heart"]
+
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: "",
+      emoji: ""
+    };
+  }
+
+  onFormChange = (event) => {
+    console.log("Made a change!")
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState)
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    const newCard = {
+      card: {
+        text: this.state.text,
+        emoji: this.state.emoji
+      }
+    }
+
+    this.setState({
+      text: '',
+      emoji: ''
+    });
+
+    console.log("successfully created a new card whoo!", newCard);
+    this.props.addCardCallback(newCard);
+  }
+
+  emojiSelection = () => {
+   return  EMOJI_LIST.map((item, i) => {
+     return <option
+       key={i}
+       value={item}>{emoji.getUnicode(item)}</option>
+   });
+ }
+
+  render() {
+    return (
+      <div className="new-card-form">
+        <div className="new-card-form__header">
+          <h2>New Card</h2>
+        </div>
+
+        <form className="new-card-form__form"
+              onSubmit={this.onFormSubmit}>
+              <label htmlFor="text">Your Message</label>
+              <textarea
+                className="new-card-form__form-textarea"
+                name="text"
+                value={this.state.text}
+                onChange={this.onFormChange}
+              />
+            <label htmlFor="emoji">Emoji</label>
+            <select
+              className="new-card-form__form-select"
+              name="emoji"
+              value={this.state.emoji}
+              onChange={this.onFormChange}>
+              {this.emojiSelection()}
+            </select>
+            <input type="submit"
+                   value="Submit Message"
+                   className="new-card-form__form-button"
+            />
+        </form>
+      </div>
+    )
+  }
+
+}
+
+export default NewCardForm;

src/components/NewCardForm.test.js

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

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

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

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

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