Steffany AMpers

package.json

@@ -20,7 +20,11 @@
   "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/components/Board.js

@@ -16,11 +16,76 @@ class Board extends Component {
     };
   }
 
+
+  componentDidMount= () => {
+    console.log('Component did mount');
+
+    axios.get('https://inspiration-board.herokuapp.com/boards/steffany/cards')
+      .then( (response) => {
+        console.log(response.data);
+        this.setState({
+          cards: response.data
+        });
+      })
+      .catch( (error) => {
+        this.setState({
+          error: error.message,
+        });
+      });
+  }
+
+
+  deleteCard = (id, key) => {
+    console.log(id);
+    axios.delete(`https://inspiration-board.herokuapp.com/boards/steffany/cards/${id}`)
+      .then( (response) => {
+        console.log(response);
+      })
+
+    let cardArray = this.state.cards
+    cardArray.splice(key, 1)
+
+    this.setState({
+      cards: cardArray
+    });
+  }
+
+  addCard = (cardInfo) => {
+    console.log(cardInfo)
+   axios.post('https://inspiration-board.herokuapp.com/boards/steffany/cards', cardInfo)
+     .then((response) => {
+
+       this.componentDidMount()
+     })
+     .catch((error) => {
+       this.setState({ error: error.message });
+     });
+  }
+
+  renderCardList = () => {
+  console.log('Rendering Card List')
+  const cardList = this.state.cards.map((card, index) => {
+    return (
+      <Card
+        id={card.card.id}
+        key={index}
+        text={card.card.text}
+        emoji={card.card.emoji}
+        deleteThisCard={this.deleteCard}
+      />
+    )
+  })
+  console.log(cardList)
+  return cardList;
+}
+
   render() {
     return (
-      <div>
-        Board
+      <div className="board">
+        {this.renderCardList()}
+        <NewCardForm addCardCallback={this.addCard}/>
       </div>
+
     )
   }
 

src/components/Board.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Board from './Board';
+import { shallow } from 'enzyme';
+
+test('shallow mount', () => {
+  const board = shallow(
+    <Board url="https://inspiration-board.herokuapp.com/boards/" boardName={`test-board`} />
+  );
+
+  expect(board).toMatchSnapshot();
+});

src/components/Card.css

@@ -42,6 +42,8 @@
 }
 
 .card__delete {
+  justify-self: end;
   align-self: start;
   font-family: 'Permanent Marker', Helvetica, sans-serif;
+  cursor: pointer;
 }

src/components/Card.js

@@ -5,17 +5,35 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  showEmoji = () => {
+    if (this.props.emoji) {
+      return (emoji.getUnicode(this.props.emoji));
+    }
+  }
+
+  deleteCard = () => {
+    console.log(this.props.id)
+    this.props.deleteThisCard(this.props.id, this.props.key)
+  }
+
   render() {
     return (
       <div className="card">
-        Card
+      <span onClick={this.deleteCard} className="card__delete">x</span>
+        <section className="card__content">
+          <p className="card__content-text">{this.props.text}</p>
+          <p className="card__content-emoji">{this.showEmoji()}</p>
+        </section>
       </div>
     )
   }
 }
 
 Card.propTypes = {
-
+  id: PropTypes.number.isRequired,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteThisCard: PropTypes.func
 };
 
 export default Card;

src/components/Card.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+test('shallow mount', () => {
+  const card = shallow(
+    <Card id='0' key='0' text='ok' emoji='beer' deleteThisCard={() => {}} />
+  );
+
+  expect(card).toMatchSnapshot();
+  card.unmount();
+});

src/components/NewCardForm.js

@@ -4,3 +4,76 @@ import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+constructor() {
+    super();
+
+    this.state = {
+      text: '',
+      emoji: '',
+    };
+  }
+
+  onFieldChange = (event) => {
+    const fieldName = event.target.name;
+    const fieldValue = event.target.value;
+    const updateState = {};
+
+    updateState[fieldName] = fieldValue;
+    this.setState(updateState);
+  }
+
+
+  clearForm = () => {
+    this.setState({
+      text: '',
+      emoji: '',
+    });
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.addCardCallback(this.state);
+    this.clearForm();
+  }
+
+  MakeItem = function(X) {
+      return <option>{X}</option>;
+    };
+
+  render() {
+    return (
+      <section className="new-card-form">
+        <h3 className="new-card-form__header">Add a Card</h3>
+        <form className="new-card-form__form" onSubmit={this.onFormSubmit}>
+          <div>
+            <label htmlFor="text" className="new-card-form__form-label">Text: </label>
+            <input
+              className="new-card-form__form-textarea"
+              name="text"
+              value={this.state.text}
+              type="text"
+              onChange = {this.onFieldChange}/>
+          </div>
+          <div>
+            <label htmlFor="emoji" className="new-card-form__form-label">Emoji: </label>
+            <select className="new-card-form__form-select" name="emoji" onChange={this.onFieldChange}>
+              {EMOJI_LIST.map( (emoji, index) =>
+                <option key={index} > {emoji} </option>
+              )};
+            </select>
+          </div>
+          <input type="submit" value="Add Card" className="new-card-form__form-button" />
+        </form>
+      </section>
+    )
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;

src/components/NewCardForm.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import NewCardForm from './NewCardForm';
+import { shallow } from 'enzyme';
+
+test('that it matches an existing snapshot', () => {
+  // First Mount the Component in the testing DOM
+  // Arrange
+  const cardForm = shallow( <NewCardForm addCardCallback={() => {} } /> );
+
+  // Assert that it looks like the last snapshot
+  expect(cardForm).toMatchSnapshot();
+
+  // Remove the component from the DOM (save memory and prevent side effects).
+  cardForm.unmount();
+});

src/components/__snapshots__/Board.test.js.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`shallow mount 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Board
+    boardName="test-board"
+    url="https://inspiration-board.herokuapp.com/boards/"
+/>,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        Array [],
+        <NewCardForm
+          addCardCallback={[Function]}
+/>,
+      ],
+      "className": "board",
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "addCardCallback": [Function],
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          Array [],
+          <NewCardForm
+            addCardCallback={[Function]}
+/>,
+        ],
+        "className": "board",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "addCardCallback": [Function],
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+      ],
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+  },
+}
+`;