Ari - Inspiration-Board- Octos

package.json

@@ -20,7 +20,13 @@
   "devDependencies": {
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.4",
     "gh-pages": "^1.2.0"
   },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  },
   "homepage": "http://adagold.github.io/inspiration-board"
 }

src/App.css

@@ -33,3 +33,13 @@ h1, h2 {
 
   transform: rotate(-3deg) skew(-3deg);
 }
+
+.validation-errors-display {
+  text-align: center;
+  margin-bottom: 2em;
+}
+
+.validation-errors-display__list {
+  list-style-type: none;
+  padding: 0;
+}

src/App.js

@@ -1,18 +1,45 @@
 import React, { Component } from 'react';
 import './App.css';
 import Board from './components/Board';
+import Status from './components/Status';
 
 class App extends Component {
+  constructor() {
+  super();
+
+  this.state = {
+    status: {
+      message: '',
+      type: 'success'
+    }
+  }
+}
+
+updateStatus = (message, type) => {
+  this.setState({
+    status: {
+      message: message,
+      type: type
+    }
+  })
+}
   render() {
     return (
       <section>
+        <ul className="validation-errors-display">
+          <li className="validation-errors-display__list">
+          <Status message={this.state.status.message} type={this.state.status.type}/>
+          </li>
+        </ul>
         <header className="header">
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
-        <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
-          />
+        <div className="board">
+          <Board
+            url="https://inspiration-board.herokuapp.com/boards/"
+            boardName={`Ari`}
+            updateStatusCallback={this.updateStatus} />
+        </div>
       </section>
     );
   }

src/components/Board.css

@@ -3,12 +3,7 @@
   flex-wrap: wrap;
 }
 
-.validation-errors-display {
+.board-header {
   text-align: center;
-  margin-bottom: 2em;
-}
-
-.validation-errors-display__list {
-  list-style-type: none;
-  padding: 0;
+  text-transform: uppercase;
 }

src/components/Board.js

@@ -1,33 +1,98 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 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 {
+  static propTypes = {
+    url: PropTypes.string,
+    boardName: PropTypes.string,
+    updateStatusCallback: PropTypes.func
+  }
+
   constructor() {
     super();
-
     this.state = {
       cards: [],
     };
   }
 
+  componentDidMount() {
+    axios.get(`${this.props.url}${this.props.boardName}/cards`)
+    .then((response) => {
+      this.props.updateStatusCallback(`Successfully loaded board, ${this.props.boardName}`)
+      const cards = response.data;
+      this.setState({ cards: cards });
+    })
+    .catch((error) => {
+      console.log(error.message)
+      this.props.updateStatusCallback(error.messages, 'error')
+    })
+  }
+
+  addCard = (card) => {
+    axios.post(`${this.props.url}${this.props.boardName}/cards`, card)
+
+      .then((response) => {
+        this.props.updateStatusCallback(`Successfully added card to board ${this.props.boardName}`)
+        let updatedCards = this.state.cards;
+        updatedCards.push(response.data);
+        this.setState({ cards: updatedCards });
+      })
+      .catch((error) =>{
+        console.log(error.message)
+        this.props.updateStatusCallback(error.messages, 'error')
+      })
+  }
+
+
+  deleteCard = (id) => {
+      axios.delete(`${this.props.url}${this.props.boardName}/cards/${id}`)
+        .then((response) =>{
+          console.log(response.data)
+          this.props.updateStatusCallback('Successfully deleted card')
+          let updatedCards = this.state.cards;
+          let index = updatedCards.findIndex((card) => {
+            return card.card.id === id;
+          });
+          updatedCards.splice(index, 1);
+          this.setState({ cards: updatedCards });
+        })
+        .catch((error) => {
+          console.log(error.message);
+          this.props.updateStatusCallback(error.messages, 'error')
+        })
+  }
+
   render() {
+
+    const cards = this.state.cards.map((note, index) =>{
+      return <Card key={index}
+      text={note.card.text}
+      emoji={note.card.emoji}
+      deleteCallback={this.deleteCard}
+      id={note.card.id} />
+    })
+
     return (
-      <div>
-        Board
-      </div>
+      <section>
+        <div className="board-header">
+          Board: {this.props.boardName}
+        </div>
+        <div className="board">
+          {cards}
+        </div>
+        <div>
+          <NewCardForm addCardCallback={this.addCard}/>
+        </div>
+      </section>
     )
   }
 
 }
 
-Board.propTypes = {
-
-};
-
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Board from './Board';
+import { shallow } from 'enzyme';
+
+describe('Board', () =>{
+  test('matches snapshot', () =>{
+    const boardComponent = shallow(
+      <Board
+      url= 'some url'
+      boardName= 'board name'
+      updateStatusCallback={()=>{}} />
+    );
+    expect(boardComponent).toMatchSnapshot();
+    boardComponent.unmount();
+  });
+
+})

src/components/Card.css

@@ -1,5 +1,5 @@
 .card {
-  background-color: #F4FF81;
+  background-color: rgb(27, 219, 150);
 
   padding: 1em 0;
   margin: 0.5rem;
@@ -15,6 +15,11 @@
   align-items: center;
 }
 
+@keyframes example {
+    from {background-color: rgb(27, 219, 150);}
+    to {background-color: rgb(216, 122, 244);}
+}
+
 .card__content {
   grid-column-start: 2;
 
@@ -34,6 +39,7 @@
 
 .card__content-emoji {
   font-size: 3rem;
+
 }
 
 .card__content-text, .card__content-emoji {

src/components/Card.js

@@ -1,15 +1,40 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
-
 import './Card.css';
 
 class Card extends Component {
+
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    emoji: PropTypes.string,
+    id: PropTypes.number.isRequired,
+    deleteCallback: PropTypes.func
+  };
+
+  removeCard = () => {
+    this.props.deleteCallback(this.props.id)
+  }
+
   render() {
+
     return (
-      <div className="card">
-        Card
-      </div>
+      <section className="card">
+        <article className="card__content">
+          <div className="card__content-text">
+            {this.props.text}
+          </div>
+
+          <div className="card__content-emoji">
+            {emoji.getUnicode(`${this.props.emoji}`)}
+          </div>
+
+          <div>
+            <button className="card__delete" onClick={this.removeCard}>Delete!</button>
+          </div>
+        </article>
+
+      </section>
     )
   }
 }

src/components/Card.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () =>{
+  test('matches snapshot', () =>{
+    const cardComponent = shallow(
+      <Card
+      text= 'hello world'
+      emoji= 'smiley'
+      deleteCallback={()=>{}} />
+    );
+    expect(cardComponent).toMatchSnapshot();
+    cardComponent.unmount();
+  });
+});

src/components/NewCardForm.js

@@ -3,4 +3,81 @@ 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 = ["grinning", "grimacing", "grin", "joy", "rofl", "smiley", "smile", "sweat_smile", "laughing", "innocent", "wink", "blush", "slightly_smiling_face", "upside_down_face", "relaxed", "yum", "relieved", "heart_eyes", "kissing_heart", "kissing", "kissing_smiling_eyes", "kissing_closed_eyes", "stuck_out_tongue_winking_eye", "zany", "raised_eyebrow", "monocle", "stuck_out_tongue_closed_eyes", "stuck_out_tongue", "money_mouth_face", "nerd_face", "sunglasses", "star_struck", "clown_face", "cowboy_hat_face", "hugs", "smirk", "no_mouth", "neutral_face", "expressionless", "unamused", "roll_eyes", "thinking", "lying_face", "hand_over_mouth", "shushing", "symbols_over_mouth", "exploding_head", "flushed", "disappointed", "worried", "angry", "rage", "pensive", "confused", "slightly_frowning_face", "frowning_face", "persevere", "confounded", "tired_face", "weary", "triumph", "open_mouth", "scream", "fearful", "cold_sweat", "hushed", "frowning", "anguished", "cry", "disappointed_relieved", "drooling_face", "sleepy", "sweat", "sob", "dizzy_face", "astonished", "zipper_mouth_face", "nauseated_face", "sneezing_face", "vomiting", "mask", "face_with_thermometer", "face_with_head_bandage", "sleeping", "zzz", "poop", "smiling_imp", "imp", "skull", "ghost", "alien", "robot", "smiley_cat", "smile_cat", "joy_cat", "heart_eyes_cat", "woman_technologist"]
+
+
+class NewCardForm extends Component {
+  static propTypes = {
+    addCardCallback: PropTypes.func.isRequired
+  }
+
+  constructor() {
+    super();
+    this.state = {
+        text: '',
+        emoji: ''
+  };
+}
+
+  onInput = (event) => {
+    let updatedMessage = {};
+    updatedMessage[event.target.name] = event.target.value
+    this.setState(updatedMessage)
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    this.props.addCardCallback(this.state);
+
+    this.setState({
+        text: '',
+        emoji: ''
+    })
+  }
+
+  render () {
+    const emojiList = EMOJI_LIST.map((char, index) =>{
+      return (
+        <option
+        key={index}
+        value={char}>{emoji.getUnicode(`${char}`)}</option>
+      );
+    })
+
+    return (
+      <section className="new-card-form">
+        <form className="form" onSubmit={this.onFormSubmit}>
+
+          <div className="new-card-form__header">
+            NEW CARD FORM
+          </div>
+
+          <div className="new-card-form__label">
+            <label htmlFor="text">Message </label>
+            <input
+            type="text"
+            name="text"
+            value={this.state.text}
+            onChange={this.onInput}/>
+          </div>
+
+          <div className="new-card-form__select">
+            Emoji
+            <select
+              value={this.state.emoji}
+              onChange={this.onInput}
+              name="emoji">
+              {emojiList}
+            </select>
+          </div>
+
+          <div>
+            <input className="new-card-form__form-button" type="submit"/>
+          </div>
+        </form>
+      </section>
+    );
+  }
+}
+
+export default NewCardForm;