Ana Lisa Sutherland -- Octos C9

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "emoji-dictionary": "^1.0.9",
+    "npm": "^6.1.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-scripts": "1.1.4"
@@ -20,7 +21,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": "http://adagold.github.io/inspiration-board",
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
 }

src/App.js

@@ -1,18 +1,44 @@
 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: ''
+      }
+    }
+  }
+
+  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`}
-          />
+      <header className="header">
+      <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
+      </header>
+      <section>
+      <Status message={this.state.status.message}
+      type={this.state.status.type}
+      />
+      </section>
+      <Board
+      url="https://inspiration-board.herokuapp.com/boards/AnaLisa"
+      updateStatusCallback={this.updateStatus}
+      />
       </section>
     );
   }

src/components/Board.js

@@ -7,7 +7,15 @@ import Card from './Card';
 import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
+// NOTE: WILL RENDER OUT A LIST OF CARDS
+
+const CARDS_URL = 'https://inspiration-board.herokuapp.com/boards/AnaLisa/cards';
+
 class Board extends Component {
+  static propTypes = {
+    updateStatusCallback: PropTypes.func.isRequired
+  };
+
   constructor() {
     super();
 
@@ -16,18 +24,97 @@ class Board extends Component {
     };
   }
 
+  componentDidMount() {
+    this.props.updateStatusCallback('Loading Cards...', 'success');
+
+    axios.get(CARDS_URL)
+    .then((response) => {
+      console.log('Success');
+      // console.log(response);
+
+      this.props.updateStatusCallback('Successfully loaded cards, Take one!', 'success');
+      // if we wanted only a first 10 cards, pre-processing on data, additional pre-processing or logic on data would be done here
+      const cards = response.data
+      // To get all of the cards, we reset the state with the response data (which is the cards)
+      this.setState({ cards: cards });
+    })
+    .catch((error) => {
+      // console.log('Error :(');
+      // console.log(error);
+      // Alert user to errors on screen by altering the status we are tracking with state
+      this.props.updateStatusCallback(error.message, 'error');
+    });
+  }
+
+  // FIXME: This portion of functionality is not working. I keep receiving a 404 Not Found, and need to turn it in.
+
+  // need a callback function that we will then pass to the NewCardForm
+  // Call back function for deleting card
+  deleteCard = ( index, id) => {
+    axios.delete(CARDS_URL + `${id}`)
+    .then((response) => {
+      console.log(response);
+      console.log(response.data);
+      this.props.updateStatusCallback(`Successfully Deleted Card ${response.data.card.text}`, 'success');
+
+      let updatedCards = this.state.cards
+      console.log(updatedCards);
+
+      updatedCards.splice(index,1);
+      this.setState({cards: updatedCards });
+    })
+
+    .catch((error) => {
+      console.log(error);
+      this.props.updateStatusCallback('Error deleting card', 'error');
+    });
+  }
+
+
+  addCard = (props) => {
+    axios.post(CARDS_URL, props)
+    .then((response) => {
+      console.log(response.data);
+
+      let updatedCards = this.state.cards;
+      updatedCards.push(response.data);
+
+      // then update state to updated cards collection
+      this.setState({ cards: updatedCards });
+
+      this.props.updateStatusCallback('Successfully added card', 'success');
+    })
+
+    .catch((error) => {
+      this.props.updateStatusCallback('Error adding card', 'error');
+      console.log(error);
+    });
+  }
+
+
   render() {
+    const cards = this.state.cards.map((card, index) => {
+      // console.log(card)
+      // console.log(card.card.text)
+      return <Card
+      key={ index }
+      index={ index }
+      text={ card.card.text }
+      id={ card.card.id }
+      emoji={ card.card.emoji }
+      deleteCardCallback={ this.deleteCard }
+      />
+    });
     return (
-      <div>
-        Board
+      <div className="board">
+      { cards }
+        <section className="new-card-form">
+          <NewCardForm addCardCallback={this.addCard}/>
+        </section>
       </div>
     )
   }
 
 }
 
-Board.propTypes = {
-
-};
-
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Board from './Board';
+import { mount } from 'enzyme';
+
+describe('Board', () => {
+  test('that it matches the snapshot with no cards', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <Board data={[]} />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+  test('that it matches the snapshot with cards', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const cardData = [
+      {
+        text: 'Inspirational Stuff'
+      },
+      {
+        text: 'Calming Words'
+      },
+    ];
+    const wrapper = mount( <Board data={cardData} />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+});

src/components/Card.css

@@ -44,4 +44,5 @@
 .card__delete {
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  margin-right: 10px;
 }

src/components/Card.js

@@ -3,19 +3,47 @@ import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
+// NOTE: RENDERS OUT A SINGLE CARD
 
 class Card extends Component {
+  static propTypes = {
+    emoji: PropTypes.string,
+    text: PropTypes.string.isRequired,
+    id: PropTypes.number,
+    index: PropTypes.number,
+    deleteCardCallback: PropTypes.func.isRequired
+  };
+
+  handleDeleteClick = (event) => {
+    console.log('Delete Button Clicked');
+    let index = event.target.value;
+    let id = event.target.id;
+    this.props.deleteCardCallback( index, id);
+  }
+
   render() {
+    let face = emoji.getUnicode(this.props.emoji || 'hugging_face')
     return (
+      // <h2>{ this.props.emoji}</h2>
       <div className="card">
-        Card
+        <section className="card__content">
+          <article className=".card__content-text">
+            <h3>{ this.props.text }</h3>
+            <h2 className="card__content-emoji">{face}</h2>
+          </article>
+        </section>
+        <button
+        className="card__delete"
+        onClick={this.handleDeleteClick}
+        id={this.props.id}
+        value={this.props.index}
+        >
+        Delete
+        </button>
       </div>
     )
   }
 }
 
-Card.propTypes = {
-
-};
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Card from './Card';
+import { mount } from 'enzyme';
+
+describe('Card', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <Card text='Inspirational Stuff' />);
+
+    // Assert that it looks like the last snapshot
+    expect(wrapper).toMatchSnapshot();
+
+    // Remove the component from the DOM (save memory and prevent side effects).
+    wrapper.unmount();
+  });
+
+  test('that displays the text prop that is given', () => {
+    // Arrange
+    const wrapper = mount( <Card text='Something' />);
+    const header = wrapper.find('h3');
+    // Assert: check that the h3 inner text is 'Something'
+
+    expect(header.text()).toEqual('Something');
+
+    // Clean up, remove the component from the DOM
+    wrapper.unmount();
+  });
+});