diff --git a/package-lock.json b/package-lock.json index b89d6503..603b28cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1952,13 +1952,6 @@ "requires": { "follow-redirects": "1.5.10", "is-buffer": "^2.0.2" - }, - "dependencies": { - "is-buffer": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", - "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==" - } } }, "axobject-query": { @@ -4567,6 +4560,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..4801fa8d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,10 @@ "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..7ebba994 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import './App.css'; import Board from './components/Board'; +// import NewCardForm from './components/NewCardForm'; class App extends Component { render() { @@ -11,7 +12,7 @@ class App extends Component { ); diff --git a/src/App.test.js b/src/App.test.js index 5a29f6cb..a21fb139 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -8,6 +8,9 @@ describe('App', () => { it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); + + console.log(div.innerHTML); + ReactDOM.unmountComponentAtNode(div); }); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..be7abfa6 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,7 +5,7 @@ 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'; class Board extends Component { constructor() { @@ -13,21 +13,120 @@ class Board extends Component { this.state = { cards: [], + error: "", }; + + } + + componentDidMount() { + const { url, boardName } = this.props; + + const getURL = url + boardName + "/cards"; + + axios.get(getURL) + .then((response) => { + + const cardList = response.data.map((card) => { + + + const newCard = { + id: card.card.id, + text: card.card.text, + emoji: card.card.emoji, + } + + return newCard; + }) + + this.setState({ cards: cardList }); + + }) + .catch((error) => { + this.setState({ error: `${error.message} while loading your cards!` }); + }); } + addCard = (cardInfo) => { + + const { url, boardName } = this.props; + const postURL = url + boardName + "/cards"; + + axios.post(postURL, cardInfo) + .then((response) => { + cardInfo.id = response.data.card.id; + let updatedCards = [...this.state.cards]; + updatedCards.push(cardInfo); + this.setState({cards: updatedCards}); + + }) + .catch((error) => { + this.setState({ error: `${error.message} while adding your card!` }) + }) + } + + + deleteCard = (index) => { + + let updatedCards = this.state.cards; + let id = updatedCards[index].id; + + const deleteUrl = "https://inspiration-board.herokuapp.com/cards/" + id; + + axios.delete(deleteUrl) + .then((response) => { + + updatedCards.splice(index, 1); + + this.setState({ + cards: updatedCards, + }); + + }) + .catch((error) => { + this.setState({ error: `${error.message} while deleting your card!`}) + }) + }; + + render() { + const cards = this.state.cards.map((card, i) => { + + return ( +
  • + +
    • + ); + }); + + return ( +
    + +
    + {this.state.errors} +
    + +
    + {cards} +
    +
    - Board +
    +
    ) } } Board.propTypes = { - + url: PropTypes.string, + boardName: PropTypes.string, }; export default Board; 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..c57c442d 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,17 +5,28 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + + onDeleteButtonClick = (event) => { + this.props.deleteCardCallback(this.props.index); + } render() { + return ( -
    - Card -
    +
    +
    {this.props.quote}
    +
    {this.props.emoji && emoji.getUnicode(this.props.emoji)}
    + {} +
    ) } } Card.propTypes = { - + id: PropTypes.number, + index: PropTypes.number, + quote: PropTypes.string, + emoji: PropTypes.string, + deleteCardCallback: PropTypes.func, }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..410a87ca 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,100 @@ 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.state = { + text: "", + emoji: "", + } + } + + + onSubmitCardButtonClick = (event) => { + event.preventDefault(); + + const newCard = { + text: this.state.text, + emoji: this.state.emoji + }; + + this.setState({ + text: "", + emoji: "" + }) + + this.props.addCardCallback(newCard); + } + + onInputChange = (event) => { + const updatedCard = {}; + + const field = event.target.name; + const value = event.target.value; + + console.log(event.target.name); + console.log(event.target.value); + + updatedCard[field] = value; + this.setState(updatedCard); + } + + emojiList = () => { + return EMOJI_LIST.map((emojiChoice, i) => { + return + }); + } + + render() { + + const { text, emoji } = this.state; + + return ( +
    +

    Submit a New Card

    +
    + +
    + +
    + +
    + + +
    + +
    + +
    + +
    +
    + ) + } +} + +export default NewCardForm; + +NewCardForm.propTypes = { + addCardCallback: PropTypes.func.isRequired, +}; \ No newline at end of file diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js new file mode 100644 index 00000000..c6fe2ebd --- /dev/null +++ b/src/components/test/Card.test.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Card from '../Card'; +import { shallow } from 'enzyme'; + +describe('Card', () => { + test('that it matches an existing snapshot', () => { + // First Mount the Component in the testing DOM + // Arrange + const wrapper = shallow( {} } />); + + // Assert that it looks like the last snapshot + expect(wrapper).toMatchSnapshot(); + }); + }); \ No newline at end of file diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js new file mode 100644 index 00000000..ebba2a34 --- /dev/null +++ b/src/components/test/NewCardForm.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import NewCardForm from '../NewCardForm'; +import { shallow } from 'enzyme'; + +describe('NewCardForm', () => { + test('that it matches an existing snapshot', () => { + // First Mount the Component in the testing DOM + // Arrange + const wrapper = shallow( {} } />); + + // Assert that it looks like the last snapshot + expect(wrapper).toMatchSnapshot(); + }); + }); + + \ No newline at end of file diff --git a/src/components/test/__snapshots__/Card.test.js.snap b/src/components/test/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..115ae418 --- /dev/null +++ b/src/components/test/__snapshots__/Card.test.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches an existing snapshot 1`] = ` +
    +
    +
    + +
    +`; diff --git a/src/components/test/__snapshots__/NewCardForm.test.js.snap b/src/components/test/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..e1cf3ec0 --- /dev/null +++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,89 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches an existing snapshot 1`] = ` +
    +

    + Submit a New Card +

    +
    +
    +