diff --git a/package-lock.json b/package-lock.json index b89d6503..cefb6211 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2848,8 +2848,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2867,13 +2866,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2886,18 +2883,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -3000,8 +2994,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3011,7 +3004,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3024,20 +3016,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3054,7 +3043,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3127,8 +3115,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3138,7 +3125,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3214,8 +3200,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3245,7 +3230,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3263,7 +3247,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3302,13 +3285,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -4567,6 +4548,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", @@ -7046,8 +7036,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7065,13 +7054,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7084,18 +7071,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -7198,8 +7182,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -7209,7 +7192,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7222,20 +7204,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7252,7 +7231,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7325,8 +7303,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -7336,7 +7313,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7412,8 +7388,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -7443,7 +7418,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7461,7 +7435,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7500,13 +7473,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } } 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..656c87bc 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ class App extends Component { ); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..5fd88a6c 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,19 +7,87 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; + class Board extends Component { constructor() { super(); - this.state = { cards: [], + error: "", + deleteCardCallBack: this.deleteCard, + addCardCallBack: this.addCard, }; } + + componentDidMount() { + this.updateCards() + } + + updateCards = () => { + const url = `${this.props.url}${this.props.boardName}/cards` + axios.get(url) + .then((response) => { + this.setState({ cards: response.data }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + + deleteCard = (id) => { + const url = `https://inspiration-board.herokuapp.com/cards/${id}` + axios.delete(url) + .then(res => { + console.log(res); + console.log(res.data); + this.updateCards() + }) + } + + addCard = (cardContent) => { + const url = `${this.props.url}${this.props.boardName}/cards` + + axios.post(url, cardContent) + .then((response) => { + this.updateCards() + }) + .catch((error) => { + // Use the same idea we had in our GET request + this.setState({ error: error.message }); + }); + } + + + + // componentDidMount() { + // this.importCards() + // } + + // importCards = () => { + // CARD_DATA["cards"].forEach((card) => { + // this.state.cards.push(card) + // const newCards = this.state.cards + // this.setState({cards: newCards}) + // }) + // } + + render() { + console.log(this.state.cards) + const allCards = this.state.cards.map((card, i) => { + return + }) return (
- Board + + {allCards}
) } @@ -27,7 +95,8 @@ class Board extends Component { } Board.propTypes = { - + url: PropTypes.string.isRequired, + boardName: PropTypes.string.isRequired }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..cd4e0e15 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -4,18 +4,37 @@ import emoji from 'emoji-dictionary'; import './Card.css'; + class Card extends Component { + + onDelete = () => { + this.props.deleteCardCallBack(this.props.id) + } + render() { + let foundEmoji = "" + if(this.props.emoji){ + + foundEmoji = emoji.getUnicode(this.props.emoji) + } return (
- Card +
+
{this.props.text}
+
{foundEmoji}
+
+
) } } Card.propTypes = { - + text: PropTypes.string, + emoji: PropTypes.string, + deleteCardCallBack: PropTypes.func.isRequired }; export default Card; diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..a3918c17 --- /dev/null +++ b/src/components/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/NewCardForm.js b/src/components/NewCardForm.js index 47331423..aec7becf 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,81 @@ 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: "" + } + } + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + + } + + onFormSubmit = (event) => { + event.preventDefault(); + if(this.state.emoji === ""){ + this.state.emoji = null + this.setState({emoji: null}) + } + const cardContent = { + "text" : this.state.text, + "emoji": this.state.emoji + } + + this.props.addCardCallBack(cardContent) + + this.setState({ + text: '', + emoji: '', + }); + } + + render() { + + return ( +
+

Add Card

+ +
+ +
+ + + + +
+ +
+ +
+
+
+ ); + } +} + +export default NewCardForm; diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..2d961597 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,14 @@ +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/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..4b9294dc --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches an existing snapshot 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+`; + +exports[`NewCardForm that it matches an existing snapshot 1`] = ` +
+

+ Add Card +

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

+ Add Card +

+
+
+ + +
+
+ +
+
+
+`; diff --git a/src/data/card-data.json b/src/data/card-data.json index 1f9793ec..068e019d 100644 --- a/src/data/card-data.json +++ b/src/data/card-data.json @@ -6,7 +6,7 @@ }, { "text": "", - "Emoji": "heart_eyes" + "emoji": "heart_eyes" }, { "text": "REST is part of work"