Jazz 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"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "homepage": "http://adagold.github.io/inspiration-board",
+  "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="Jazz"
           />
       </section>
     );

src/components/Board.js

@@ -7,27 +7,101 @@ import Card from './Card';
 import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
+const URL = "https://inspiration-board.herokuapp.com/boards/jazz/cards"
+
 class Board extends Component {
   constructor() {
     super();
 
     this.state = {
-      cards: [],
+      cards: CARD_DATA.cards,
     };
   }
 
+
+
+  componentDidMount() {
+    axios.get(URL)
+    .then((response) => {
+      const cards = response.data.map((datum) => {
+        return datum.card
+      })
+      this.setState({
+        cards: cards
+      })
+    })
+    .catch((error) => {
+      console.log(error.message);
+      this.setState({
+        error: error.message,
+        // add error messages buy mapping through check validations??
+      })
+    })
+  }
+
+  onAddCard = (newCard) => {
+    axios.post(URL, newCard)
+    .then((response) => {
+      const addCard = response.data.card;
+      const cards = [addCard, ...this.state.cards]
+      this.setState({
+        cards,
+      })
+
+
+    })
+    .catch((error) => {
+      // What should we do when we know the post request failed?
+      this.setState({
+        errorMessage: `Failure ${error.message}`,
+      })
+    });
+  }
+
+  onDeleteCallback = (id) => {
+    let url = `https://inspiration-board.herokuapp.com/cards/${id}`
+
+    console.log(url)
+    axios.delete(url)
+    .then((response) => {
+      console.log(response)
+
+      const cards = [...this.state.cards]
+
+      const deleteCard = cards.find((card) => card.id === id);
+      cards.splice(cards.indexOf(deleteCard), 1);
+
+      this.setState({cards});
+    })
+    .catch((error) => {
+      // What should we do when we know the post request failed?
+      this.setState({
+        errorMessage: `Failure ${error.message}`,
+      })
+    });
+  }
+
+
   render() {
+
+    const cards = this.state.cards.map((card, i) => {
+      return <Card key={i} id={card.id} text={card.text} emoji={card.emoji} onDeleteCallback={this.onDeleteCallback} />
+    })
+
     return (
       <div>
-        Board
+        <NewCardForm addCardCallback={this.onAddCard} />
+        {cards}
+
       </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: #F8B195;
 
   padding: 1em 0;
   margin: 0.5rem;
@@ -30,6 +30,9 @@
 .card__content-text {
   text-overflow: ellipsis;
   overflow: hidden;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
+  font-size: 2em;
+  color: white;
 }
 
 .card__content-emoji {
@@ -44,4 +47,12 @@
 .card__delete {
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  font-size: 2em;
+}
+
+.card__delete:hover {
+  align-self: start;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
+  font-size: 3em;
+  cursor: pointer;
 }

src/components/Card.js

@@ -1,21 +1,45 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
-
+import { getUnicode } from 'emoji-dictionary';
 import './Card.css';
 
+
 class Card extends Component {
+
+  renderEmoji(emoji) {
+    return <p className="card__content-emoji">{getUnicode(emoji)}</p>
+  }
+
+  renderText(text) {
+    return <p className="card__content-text">{text}</p>
+  }
+
+
   render() {
+
+    const icon = this.props.emoji ? this.renderEmoji(this.props.emoji) : null
+    const text = this.props.text ? this.renderText(this.props.text) : null
+
+
     return (
       <div className="card">
-        Card
+        <div className="card__content">
+
+          {text}
+          {icon}
+
+        </div>
+        <div className="card__delete" onClick={() => this.props.onDeleteCallback(this.props.id)}>X</div>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  onDeleteCallback: PropTypes.func,
+  text: PropTypes.string,
+  id: PropTypes.number,
+  emoji: PropTypes.string,
 };
 
 export default Card;

src/components/NewCardForm.css

@@ -3,12 +3,14 @@
 .new-card-form {
   width: 50%;
   margin: auto;
-  padding-bottom: 4rem;
+  padding-bottom: 2rem;
 }
 
 .new-card-form__header {
   text-align: center;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
   text-transform: uppercase;
+  padding-bottom: 1em;
 }
 
 .new-card-form__form {
@@ -37,4 +39,29 @@
   background-color: inherit;
   border: 1px solid black;
   font-size: 1em;
+  border-radius: 50px;
+  font-family: 'Permanent Marker', Helvetica, sans-serif;
+  padding: .3em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.new-card-form__form-button:hover {
+  color: white;
+  background-color: black;
+  cursor: pointer;
+}
+
+.new-card-form__form-select:hover {
+  cursor: pointer;
+}
+
+.card-grid {
+  display: inline-grid;
+  padding-left: 50px;
+}
+
+.submit {
+  padding-top: 1em;
+  text-align: center;
 }

src/components/NewCardForm.js

@@ -1,6 +1,92 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+import { getUnicode } 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: EMOJI_LIST,
+    };
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value;
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState);
+  }
+
+  resetState = () => {
+    this.setState({
+      text: '',
+      emoji: '',
+    });
+  }
+
+
+  renderEmoji = () => {
+    return EMOJI_LIST.map((emoji, i) => {
+      console.log(getUnicode(emoji))
+      return <option value={emoji} key={i}>{getUnicode(emoji)}</option>
+    })
+  }
+
+  onSubmit = (event) => {
+
+    event.preventDefault();
+    const { text } = this.state;
+    console.log(event)
+
+    if ( text === '' ) return;
+    console.log()
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  render() {
+    return (
+    <section className="new-card-form">
+      <section className="new-card-form__header">Add Your Inspiration Quote</section>
+
+      <form
+        onSubmit={this.onSubmit}
+        className=".new-card-form__form"
+        >
+
+        <div className="card-grid">
+          <label className="new-card-form__form-label" htmlFor="text">Your Inspiration Quote</label>
+          <textarea className="new-card-form__form-textarea" name="text" onChange={this.onFormChange} value={this.state.text}>
+          </textarea>
+        </div>
+
+        <div className="card-grid">
+        <label className="new-card-form__form-label">Pick your Emoji:</label>
+           <select className="new-card-form__form-select" name="emoji" value={this.state.emoji} onChange={this.onFormChange}>
+            {this.renderEmoji()}
+          </select>
+        </div>
+
+        <div className="submit">
+          <input className="new-card-form__form-button" type="submit" name="submit" value="Add a Card" />
+        </div>
+      </form>
+    </section>
+    );
+  }
+
+
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: 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('inspiration card', () => {
+
+  it('will match the inspirationCard Snapshot', () => {
+      const wrapper = shallow( <Card
+        text="hi"
+        emoji=""
+        id={1}
+        onDeleteCallback={() => {}}
+        />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+
+})

src/components/test/NewCardForm.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+ describe('NewCardForm', () => {
+  it('will match the NewCardForm Snapshot', () => {
+    const wrapper = shallow( <NewCardForm addCardCallback={()=>{}}/> )
+    expect(wrapper).toMatchSnapshot();
+  })
+});