Inspiration Board - Divya

package.json

@@ -18,8 +18,9 @@
     "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"
   },
   "homepage": "http://adagold.github.io/inspiration-board"

src/App.css

@@ -1,10 +1,10 @@
-
 * {
   box-sizing: border-box;
 }
 
 body {
   font-family: 'Raleway', sans-serif;
+  background-color: ivory
 }
 
 h1, h2 {
@@ -25,11 +25,10 @@ h1, h2 {
   padding: 1rem;
 
   display: inline-block;
-  background-color: #222;
-  color: white;
+  background-color: hotpink;
+  color: ivory;
   text-transform: uppercase;
   font-weight: 800;
   font-size: 3rem;
 
-  transform: rotate(-3deg) skew(-3deg);
 }

src/App.js

@@ -7,11 +7,11 @@ class App extends Component {
     return (
       <section>
         <header className="header">
-          <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+          <h1 className="header__h1"><span className="header__text">Inspire</span></h1>
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={'Divya'}
           />
       </section>
     );

src/components/Board.js

@@ -5,29 +5,103 @@ import axios from 'axios';
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-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 = (cardData) => {
+
+    const ADD_CARD_URL = `https://inspiration-board.herokuapp.com/boards/${this.props.boardName}/cards`;
+
+    axios.post(ADD_CARD_URL, cardData)
+    .then((response) => {
+      this.setState({
+        cards: [ ...this.state.cards, response.data]
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessages: [...this.state.errorMessages, error.message]
+      });
+    });
+  }
+
+  deleteCard = (id) => {
+    const DELETE_CARD_URL = `https://inspiration-board.herokuapp.com/cards/${id}`;
+
+    axios.delete(DELETE_CARD_URL)
+    .then(() => {
+      const updatedCardList = [...this.state.cards];
+      const index = updatedCardList.findIndex(card => card.id === id);
+      updatedCardList.splice(index, 1);
+
+      this.setState({ cards: updatedCardList });
+    })
+    .catch((error) => {
+      this.setState({ errorMessages: [...this.state.errorMessages, error.message] });
+    });
+  }
+
   render() {
+
+    const cardList = this.state.cards.map((card, i) => {
+
+      const { id, text, emoji } = card.card;
+
+      const formattedCard = {
+        id: id,
+        text: text,
+        emoji: emoji
+      };
+
+      return <Card key={i}
+        card={formattedCard}
+        deleteCard={() => this.deleteCard(id)} />
+    });
+
+    const errorMessages = this.state.errorMessages.map((message, i) => {
+      return <li key={i}>{message}</li>;
+      });
+
     return (
-      <div>
-        Board
+      <div className="board">
+        <section className="validation-errors-display">
+          <ul className="validation-errors-display__list">
+            {errorMessages}
+          </ul>
+        </section>
+        {cardList}
+        <NewCardForm addCard={this.addCard} />
       </div>
     )
   }
-
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;

src/components/Card.css

@@ -1,5 +1,5 @@
 .card {
-  background-color: #F4FF81;
+  background-color: lavender;
 
   padding: 1em 0;
   margin: 0.5rem;

src/components/Card.js

@@ -1,21 +1,37 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
-    return (
-      <div className="card">
-        Card
+const Card = (props) => {
+
+  console.log(typeof props.deleteCard);
+
+  const {text, emoji } =  props.card;
+
+  return(
+    <div className="card">
+
+      <div className="card__content">
+        <div className="card__content-emoji">
+          {emoji}
+        </div>
+        <div className="card__content-text">
+          {text}
+        </div>
+        <button
+          className="card__delete"
+          onClick={props.deleteCard}>
+          Delete
+        </button>
       </div>
-    )
-  }
-}
+    </div>
+  );
+};
 
 Card.propTypes = {
-
+  card: PropTypes.object.isRequired,
+  deleteCard: PropTypes.func.isRequired
 };
 
 export default Card;

src/components/NewCardForm.js

@@ -4,3 +4,102 @@ 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);
+
+    const baseState = {
+      text: '',
+      emoji: '',
+      errorMessages: []
+    };
+
+    this.state = {...baseState};
+    this.baseState = {...baseState};
+  }
+
+  onInputChange = (e) => {
+    const { name, value } = e.target;
+
+    const newState = {};
+    newState[name] = value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (e) => {
+    e.preventDefault();
+
+    if (this.state.text === '') {
+      this.setState({ errorMessages: [...this.state.errorMessages, "text cannot be blank"]});
+      return;
+    }
+
+    const newCard = {...this.state};
+    this.setState(this.baseState);
+    this.props.addCard(newCard);
+
+    this.setState({
+      errorMessages: []
+    });
+  }
+
+
+  render () {
+
+    const emojiList = EMOJI_LIST.map((emojiText, i) => {
+
+      const emojiCode = emoji.getUnicode(emojiText);
+
+      return (<option value = {emojiCode} key = {i}>{emojiCode}</option>)
+    });
+
+    const errorMessages = this.state.errorMessages.map((message, i) => {
+      return <li key={i}>{message}</li>;
+      });
+
+    return(
+      <div className="new-card-form">
+        <section className="new-card-form__header">
+          New Card Form
+          <ul>
+            {errorMessages}
+          </ul>
+        </section>
+
+        <form
+          onSubmit={this.onFormSubmit}
+          >
+          <div className="new-card-form__form">
+            <label htmlFor="text" className="new-card-form__form-label">Text:</label>
+            <textarea
+              name="text"
+              value={this.state.text}
+              onChange={this.onInputChange}
+              className="new-card-form__form-textarea"
+              />
+          </div>
+          <div className="new-card-form__form">
+            <label htmlFor="emoji" className="new-card-form__form-label">Emoji:</label>
+            <select name="emoji" value={this.state.emoji} onChange={this.onInputChange}
+              className="new-card-form__form-select">
+              {emojiList}
+            </select>
+          </div>
+          <input
+            type="submit"
+            value="Add Card"
+            className="new-card-form__form-button"
+            />
+        </form>
+      </div>
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCard: PropTypes.func,
+};
+
+export default NewCardForm;

src/components/test/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 testCard = {
+      id: 99,
+      text: 'be happy!'
+    }
+    const wrapper = shallow(
+      <Card card={testCard} deleteCard={ () => {} }/>
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/test/NewCardForm.test.js

@@ -0,0 +1,14 @@
+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 />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});