Victoria Garcia - Ampers - Inspiration Board

README.md

@@ -75,3 +75,43 @@ Possible optional enhancements include:
 
 ## What we're looking for
 You can see what your instructors are looking for [here](./feedback.md)
+
+
+#### CODE PARKING LOT:
+
+this.state = {
+  cards: [
+    {
+      text: 'Be Here Now.',
+    },
+    {
+      text: 'Ok, now be somewhere else.',
+    },
+    {
+      text: 'Being present in the present is the greatest present you can present to yourself.',
+      emoji: 'gift',
+    },
+  ],
+};
+
+test('addPetCallback prop is called when the form is submitted', () => {
+  // Arrange
+  const mockAddPetCallback = jest.fn();
+  const wrapper = shallow(<NewPetForm addPetCallback={mockAddPetCallback} />);
+  const form = wrapper.find('form');
+
+  // Act
+  form.simulate('submit', {
+    preventDefault: () => {},
+  });
+  wrapper.update();
+
+  // Assert
+  expect(mockAddPetCallback).toHaveBeenCalled();
+  expect(mockAddPetCallback.mock.calls[0][0]).toEqual({
+    name: '',
+    age: '',
+    breed: '',
+    about: '',
+  });
+});

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.js

@@ -3,6 +3,11 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
   render() {
     return (
       <section>
@@ -11,8 +16,9 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`Lasiorhine`}
           />
+
       </section>
     );
   }

src/App.test.js

@@ -10,5 +10,4 @@ describe('App', () => {
     ReactDOM.render(<App />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
-
 });

src/components/Board.js

@@ -1,7 +1,6 @@
 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';
@@ -10,24 +9,75 @@ import CARD_DATA from '../data/card-data.json';
 class Board extends Component {
   constructor() {
     super();
-
     this.state = {
       cards: [],
     };
   }
 
+  componentDidMount() {
+    axios.get('https://inspiration-board.herokuapp.com/boards/victoria/cards')
+      .then((response) => {
+        this.setState({ cards: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
+  addCard = (card) => {
+    axios.post('https://inspiration-board.herokuapp.com/boards/victoria/cards',
+              card)
+      .then((response) => {
+        this.setState({
+          message: `Successfully Added A Card!`
+        });
+        window.parent.location.reload()
+      })
+      .catch((error) => {
+        console.log(error.message);
+        this.setState({
+          message: error.message,
+        });
+      });
+  }
+
   render() {
+
+    const cardKeysAttempt = Object.keys(this.state.cards).map(
+      key =>
+      ({
+        cardId: this.state.cards[key]["card"]["id"],
+        cardTxt: this.state.cards[key]["card"]["text"],
+        cardEmo: this.state.cards[key]["card"]["emoji"]
+      })
+    )
+
+    const cardComponents = cardKeysAttempt.map((card) => {
+      return (
+        <li key = {card.cardId} >
+          <Card
+            cardID = {card.cardId}
+            cardText = {card.cardTxt}
+            cardEmoji = {card.cardEmo}
+          />
+        </li>
+      )
+    });
+
     return (
-      <div>
-        Board
-      </div>
+      <section className = "board">
+        <header >
+          {this.state.message ? this.state.message: ""  }
+        </header>
+        {cardComponents}
+        <NewCardForm addCardCallback={this.addCard} />
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
 };
 
 export default Board;

src/components/Board.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import TestRenderer from 'react-test-renderer';
+import Board from './Board';
+
+describe('Board', () => {
+  test('that it matches an existing snapshot', () => {
+    // First Mount the Component in the testing DOM
+    // Arrange
+    const wrapper = mount( <Board />);
+
+    // 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 can render without crashing', () => {
+
+    const testRenderer = TestRenderer.create( <Board
+      />);
+
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+
+});

src/components/Card.css

@@ -11,7 +11,7 @@
   border-radius: 5px;
 
   display: grid;
-  grid-template-columns: 1fr 5fr 1fr;
+  grid-template-columns: 1fr 3fr 1fr;
   align-items: center;
 }
 
@@ -36,12 +36,18 @@
   font-size: 3rem;
 }
 
+.card_content-id {
+  font-size: 1rem;
+}
+
 .card__content-text, .card__content-emoji {
   padding: 0;
   margin: 0;
 }
 
 .card__delete {
   align-self: start;
+  border: 2px solid black;
+  border-radius: 5px;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
 }

src/components/Card.js

@@ -1,21 +1,67 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
 class Card extends Component {
+
+  constructor(props) {
+    super();
+    this.state = {
+      cardId: props.cardID,
+      cardWorden: props.cardText,
+      cardEmoji: props.cardEmoji,
+    }
+  }
+
+  handleDelete = event => {
+    event.preventDefault();
+    let deleteURL = `https://inspiration-board.herokuapp.com/boards/victoria/cards/${this.props.cardID}`
+    axios.delete(deleteURL)
+      .then(response => {
+        console.log('response to API request is happening')
+        console.log(response);
+        console.log(response.data);
+        console.log("about to reload")
+        console.log(window.parent.location.href)
+        window.parent.location.reload()
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
+
   render() {
+
+    const hasEmoji = this.state.cardEmoji;
+    let displayEmoji;
+    if (hasEmoji) {
+      displayEmoji = emoji.getUnicode(this.props.cardEmoji)
+    } else { displayEmoji = "" }
+    console.log('trying to report cardID')
+    console.log(this.state.cardId)
+
     return (
       <div className="card">
-        Card
+        <div className="card_content">
+          <div  className="card_content-text">{this.state.cardWorden}</div>
+          <div className="card_content-emoji">{displayEmoji}</div>
+          <div className="card_content-id">This is Quantum of Inspiration Number: {this.state.cardId}</div>
+        </div>
+        <form onSubmit={this.handleDelete} className="card_delete">
+          <button type="submit">Delete This Card?</button>
+        </form>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  cardID: PropTypes.number,
+  cardText: PropTypes.string,
+  cardEmoji: PropTypes.string,
 };
 
 export default Card;