Luxi Lindsey - 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"
   },
-  "homepage": "http://adagold.github.io/inspiration-board"
+  "homepage": "https://lindseyls.github.io/inspiration-board/",
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
 }

src/App.js

@@ -1,18 +1,49 @@
 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: {
+        messasge: 'loaded the page',
+        type: 'success'
+      }
+    }
+  }
+
+  updateStatus = (message, type) => {
+    this.setState({
+      status: {
+        message: message,
+        type: type
+      }
+    })
+  }
+
   render() {
+
     return (
       <section>
         <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`}
-          />
+
+      <Status
+        message={this.state.status.message}
+        type={this.state.status.type}
+      />
+
+      <Board
+        updateStatusCallback={this.updateStatus}
+        // url="https://inspiration-board.herokuapp.com/boards/"
+        // boardName={`Luxi-Lindsey`}
+      />
+
       </section>
     );
   }

src/components/Board.css

@@ -6,6 +6,8 @@
 .validation-errors-display {
   text-align: center;
   margin-bottom: 2em;
+  font-family: 'Raleway', sans-serif;
+  font-size: 1.25em;
 }
 
 .validation-errors-display__list {

src/components/Board.js

@@ -5,7 +5,9 @@ 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';
+
+const CARDS_URL = "https://inspiration-board.herokuapp.com/boards/Luxi/cards";
 
 class Board extends Component {
   constructor() {
@@ -16,18 +18,100 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    console.log('In componentsDidMount');
+
+    this.props.updateStatusCallback('Loading...', 'success');
+
+    axios.get(CARDS_URL)
+    .then((response) => {
+      console.log('Success!');
+
+      this.props.updateStatusCallback('Successfully loaded all cards!', 'success');
+
+      const cards = response.data;
+      this.setState({ cards: cards });
+    })
+    .catch((error) => {
+      // console.log('Error :(');
+      // console.log(error);
+
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+  }
+
+  addCard = (cardInfo) => {
+    console.log('In addCard');
+
+    axios.post(CARDS_URL, cardInfo)
+    .then((response) => {
+
+      this.props.updateStatusCallback(`Successfully added card ${ response.data.card.id }!`, 'success');
+
+      let updateCards = this.state.cards;
+      updateCards.push(response.data);
+
+      this.setState({ cards: updateCards });
+    })
+    .catch((error) => {
+      console.log(error);
+
+      this.props.updateStatusCallback(`${error.message} - failed to add new card`, 'error');
+    });
+  }
+
+  deleteCard = (index, id) => {
+    console.log('In deleteCard')
+
+    let updateCards = this.state.cards;
+    updateCards.splice(index, 1)
+    this.setState({ cards: updateCards });
+
+    const DELETE_URL = `https://inspiration-board.herokuapp.com/cards/${id}`
+
+    axios.delete(DELETE_URL)
+    .then((response) => {
+      console.log('Deleted!');
+      console.log(response.data);
+
+      this.props.updateStatusCallback('Successfully deleted card!', 'success');
+
+    })
+    .catch((error) => {
+      // console.log('Error :(');
+      // console.log(error);
+
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+  }
+
   render() {
+
+    const cards = this.state.cards.map((card, index) => {
+      return <Card key={index}
+        index={index}
+        id={card.card.id}
+        text={card.card.text}
+        emoji={card.card.emoji}
+        deleteCallback={this.deleteCard}/>
+    });
+
     return (
-      <div>
-        Board
+      <section>
+      <NewCardForm addCardCallback={this.addCard}/>
+
+      <div className="board">
+        { cards }
       </div>
-    )
+      </section>
+    );
   }
 
 }
 
 Board.propTypes = {
-
+  // cards: PropTypes.array.isRequired,
+  updateStatusCallback: PropTypes.func.isRequired
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Board from './Board';
+import { mount, shallow } from 'enzyme';
+
+describe ('Board', () => {
+  test('deep mount', () => {
+    const boardComponent = mount(
+      <Board updateStatusCallback={() => {} } />
+    );
+
+    expect(boardComponent).toMatchSnapshot();
+
+    boardComponent.unmount();
+  });
+
+  test('shallow mount', () => {
+    const boardComponent = shallow(
+      <Board updateStatusCallback={() => {} } />
+    );
+
+    expect(boardComponent).toMatchSnapshot();
+
+  });
+});

src/components/Card.css

@@ -44,4 +44,12 @@
 .card__delete {
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  background-color: inherit;
+  border: none;
+  font-size: 1em;
+}
+
+.card__delete:hover {
+  font-size: 2rem;
+  color: orange;
 }

src/components/Card.js

@@ -1,21 +1,40 @@
-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
-      </div>
-    )
+const Card = (props) => {
+
+  let onClickHandler = () => {
+    props.deleteCallback(props.index, props.id);
   }
+
+  return (
+    <section className="card">
+      <button
+      className="card__delete"
+      onClick={ onClickHandler }>X</button>
+
+      <div className="card__content">
+        <h1 className="card__content-text">
+          {props.text}
+        </h1>
+
+        <h1 className="card__content-emoji">
+          {emoji.getUnicode(`${props.emoji}`)}
+        </h1>
+      </div>
+    </section>
+  )
 }
 
 Card.propTypes = {
-
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  index: PropTypes.number,
+  id: PropTypes.number,
+  deleteCallback: 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('shallow mount', () => {
+    const cardComponent = shallow(
+      <Card deleteCallback={()=> {} } />
+    );
+
+    expect(cardComponent).toMatchSnapshot();
+  });
+});