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..9cafe890 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..76f5aaa3 100644 --- a/src/App.js +++ b/src/App.js @@ -10,8 +10,8 @@ class App extends Component {

Inspiration Board

); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..a27969c2 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,29 +5,89 @@ 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() { - super(); + constructor(props) { + super(props); this.state = { cards: [], - }; + error: null, + } + } + + componentDidMount() { + axios.get(this.props.url + 'boards/' + this.props.boardName + '/cards') + .then((response) => { + console.log(response.data) + const cards = response.data.map((card) => { + const newCard = { + id: card.card.id, + text: card.card.text, + emoji: card.card.emoji + } + return newCard; + }) + this.setState({ cards }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }) + } + + onDeleteCard = (cardId) => { + const newCardList = this.state.cards.filter(card => card.id !== cardId); + this.setState({ + cards: newCardList + }); + + axios.delete(this.props.url + 'cards/' + cardId) + .then((response) => { + console.log(`Deleted card ${response.data.card.id}`) + }) + .catch((error) => { + this.setState({ error: error.message }); + }) + } + + addCardCallback = (card) => { + axios.post(this.props.url + 'boards/' + this.props.boardName + '/cards', card) + .then((response) => { + this.setState({ + cards: [...this.state.cards, response.data.card] + }); + }) + .catch((error) => { + this.setState({error: error.message}); + }); } render() { + const cardComponents = this.state.cards.map((card, index) => { + return ( -
- Board -
- ) - } + + ); + }); + return ( +
+ {cardComponents} + +
) + } } 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..d23e7af5 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,17 +5,33 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + render() { + const displayEmoji = (this.props.emoji) ? emoji.getUnicode(this.props.emoji) : "" + const {onDeleteCard, id, text} = this.props; + return (
- Card +
+

{text}

+

{displayEmoji}

+
+
) } } Card.propTypes = { - + text: PropTypes.string, + emoji: PropTypes.string, + onDeleteCard: PropTypes.func, + id: PropTypes.number }; export default Card; diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..7925dbd9 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Card from './Card'; +import { shallow } from 'enzyme'; + +describe('Card', () => { + test('that it matches an existing snapshot', () => { + const props = { + key: 1, + id: 1, + text: 'You got this!', + emoji: '', + } + + const wrapper = shallow( ); + + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..98b41b5f 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,71 @@ 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 = {}; + updatedState[event.target.name] = event.target.value; + this.setState(updatedState); + } + + generateEmoji = (emojis) => { + return emojis.map((emojiText, i) => { + return + }) + } + + render() { + return ( +
+
+

Add a Card

+ + + + + +
+
+ ) + } + +} + +NewCardForm.propTypes = { + addCardCallback: PropTypes.func.isRequired, +}; + +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..8a7a66fe 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(); + }); +}); \ No newline at end of file diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..0187d735 --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches an existing snapshot 1`] = ` +
+
+

+ You got this! +

+

+

+ +
+`; diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..80765b0a --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,87 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches an existing snapshot 1`] = ` +
+
+

+ Add a Card +

+ +