diff --git a/package-lock.json b/package-lock.json index b89d6503..8bd0b6a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4567,6 +4567,15 @@ } } }, + "enzyme-to-json": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz", + "integrity": "sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==", + "dev": true, + "requires": { + "lodash": "^4.17.4" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", diff --git a/package.json b/package.json index c97c700f..e70b7e81 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,12 @@ "devDependencies": { "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", + "enzyme-to-json": "^3.3.5", "gh-pages": "^2.0.1" + }, + + "jest": { + "snapshotSerializers": ["enzyme-to-json/serializer"] } + } diff --git a/src/App.js b/src/App.js index c4854e15..d0620700 100644 --- a/src/App.js +++ b/src/App.js @@ -3,15 +3,16 @@ import './App.css'; import Board from './components/Board'; class App extends Component { + render() { return (

Inspiration Board

-
); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..c9925b2f 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,18 +8,97 @@ import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; class Board extends Component { - constructor() { - super(); + constructor(props) { + super(props); this.state = { cards: [], + boardUrl: this.props.url, + cardUrl: this.props.url + this.props.boardName }; } + + componentDidMount() { + axios.get(this.state.cardUrl + '/' + 'cards') + .then((response) => { + + this.setState({ + cards: response.data}); + }) + .catch((error) => { + this.setState({error:error.message}); + }) + } + + onDeleteCard = (cardId) => { + + const newCardList = this.state.cards.filter(cardObject => cardObject.card.id !== cardId) + + this.setState({ + cards: newCardList + }) + + axios.delete(`https://inspiration-board.herokuapp.com/cards/:${cardId}`) + .then((response) => { + console.log(response.data); + }) + .catch((error) => { + this.setState({error:error.message}); + }) + + } + + addCard = (card) => { + + const cardDataToSendToApi = { + text: card.text, + emoji: card.emoji, + }; + + axios.post('https://inspiration-board.herokuapp.com/boards/ngoc-fabulous/cards',cardDataToSendToApi) + .then((response) => { + console.log(response.data) + let updatedCardlist = this.state.cards; + updatedCardlist.push({ card: { + text: card.text, + emoji: card.emoji, + id: response.data.id, + } + }); + this.setState({ + cards: updatedCardlist + }); + }) + .catch((error) => { + this.setState({error:error.message}); + }) + + } render() { + + const cards = this.state.cards.map((cardObject,i) => { + return []; + }); + + const errorSection = (this.state.error) ? + (
+ Error: {this.state.error} +
) : null; + + return ( -
- Board +
+ {errorSection} + + + {cards} +
) } diff --git a/src/components/Board.test.js b/src/components/Board.test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..42991c73 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,12 +5,54 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + constructor(props) { + super(props); + //Change this state latter dont need to do this card + this.state = { + cards: props.cards + }; + } + render() { + const emoji = require("emoji-dictionary"); + const { id, text, symbol } = this.props + if (symbol !== null) { return (
- Card +
+ +

{text}

+

{emoji.getUnicode(symbol)}

+
) + } else { + return ( +
+
+ + + +

+ {text} +

+ +
+
+ ) + } } } diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..0811b953 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,11 @@ +import React from 'react'; +import Card from './Card'; +import { shallow } from 'enzyme'; +describe('Card', () => { + test('that it matches an existing snapshot', () => { + + const wrapper = shallow( ); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..2661b0df 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,4 +3,86 @@ 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"] +class NewCardForm extends Component { + constructor(props) { + super(props); + + this.cleared = { + text: "", + emoji: "" + }; + + this.state = {...this.cleared} + + } + + addCard = (event) => { + event.preventDefault(); + + const card = this.state; + + this.props.addCardCallback(card) + + this.setState({...this.cleared}); + } + + onInputChange =(event) => { + const updatedState = {}; + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + render() { + const emoji = require("emoji-dictionary"); + + const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] + + const emojiOption = EMOJI_LIST.map((symbol) => { + return ( + + ) + }) + return ( +
+
+
+

Add a Card

+
+ + + +
+
+ ) + } +} + + +export default NewCardForm; \ No newline at end of file diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..6405cb15 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,11 @@ +import React from 'react'; +import NewCardForm from './NewCardForm'; +import { shallow } from 'enzyme'; +describe('NewCardForm', () => { + test('that it matches an existing snapshot', () => { + + const wrapper = shallow( {} } />); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..a9fb9ce8 --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches an existing snapshot 1`] = ` +
+
+
+

+ Add a Card +

+
+ + + +
+
+`;