From f03adb30ea7c1f229e2f3f8e0bb026eba968a876 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Mon, 11 Jun 2018 15:31:35 -0700 Subject: [PATCH 1/3] added intial setup of board and card --- src/components/Board.js | 16 +++++++++++++++- src/components/Card.js | 12 ++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..819868c2 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -16,10 +16,24 @@ class Board extends Component { }; } + renderCardList = () => { + console.log('Rendering Card List') + const cardList = CARD_DATA.cards.map((card, index) => { + return ( + + ) + }) + return cardList; +} + render() { return (
- Board + {this.renderCardList()}
) } diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..07ef9c4c 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,17 +5,25 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + showEmoji = () => { + if (this.props.emoji) { + return (emoji.getUnicode(this.props.emoji)); + } + } + render() { return (
- Card +

{this.props.text}

+

{this.showEmoji()}

) } } Card.propTypes = { - + text: PropTypes.string, + emoji: PropTypes.string }; export default Card; From 198cab4c7eb1b3ff2ae2f4540228c92893d14a3b Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Tue, 12 Jun 2018 13:14:34 -0700 Subject: [PATCH 2/3] updated deleteCard method to remove card from cards array and update board state --- src/components/Board.js | 51 +++++++++++++++++++++++--- src/components/Card.css | 1 + src/components/Card.js | 16 +++++++-- src/components/NewCardForm.js | 68 +++++++++++++++++++++++++++++++++++ src/data/card-data.json | 2 +- 5 files changed, 130 insertions(+), 8 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 819868c2..b0788694 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -16,25 +16,68 @@ 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 = (card) => { + //do a post request + } + renderCardList = () => { console.log('Rendering Card List') - const cardList = CARD_DATA.cards.map((card, index) => { + const cardList = this.state.cards.map((card, index) => { return ( ) }) + console.log(cardList) return cardList; } render() { return ( -
+
{this.renderCardList()} +
+ ) } diff --git a/src/components/Card.css b/src/components/Card.css index e86d4329..83b61267 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -42,6 +42,7 @@ } .card__delete { + justify-self: end; align-self: start; font-family: 'Permanent Marker', Helvetica, sans-serif; } diff --git a/src/components/Card.js b/src/components/Card.js index 07ef9c4c..2abfbfec 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -11,19 +11,29 @@ class Card extends Component { } } + deleteCard = () => { + console.log(this.props.id) + this.props.deleteThisCard(this.props.id, this.props.key) + } + render() { return (
-

{this.props.text}

-

{this.showEmoji()}

+ x +
+

{this.props.text}

+

{this.showEmoji()}

+
) } } Card.propTypes = { + id: PropTypes.number.isRequired, text: PropTypes.string, - emoji: PropTypes.string + emoji: PropTypes.string, + deleteThisCard: PropTypes.func }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..f3865dc7 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() { + 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 ; + }; + + render() { + return ( +
+
+ + +
+
+ + +
+ +
+ ) + } +} + +NewCardForm.propTypes = { + addCardCallback: PropTypes.func.isRequired, +}; + +export default NewCardForm; diff --git a/src/data/card-data.json b/src/data/card-data.json index 068e019d..f93646ec 100644 --- a/src/data/card-data.json +++ b/src/data/card-data.json @@ -5,7 +5,7 @@ "text": "Make sure you pet a dog this week!" }, { - "text": "", + "text": "something!", "emoji": "heart_eyes" }, { From c18c1f2a142efd019a71e2d8849fa38b0e659b1c Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Mon, 18 Jun 2018 08:52:48 -0700 Subject: [PATCH 3/3] delete and add methods written for card and board --- package.json | 4 + src/components/Board.js | 12 +- src/components/Board.test.js | 11 + src/components/Card.css | 1 + src/components/Card.test.js | 12 + src/components/NewCardForm.js | 43 +- src/components/NewCardForm.test.js | 15 + .../__snapshots__/Board.test.js.snap | 86 ++ .../__snapshots__/Card.test.js.snap | 220 +++++ .../__snapshots__/NewCardForm.test.js.snap | 825 ++++++++++++++++++ 10 files changed, 1208 insertions(+), 21 deletions(-) create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Board.test.js.snap create mode 100644 src/components/__snapshots__/Card.test.js.snap create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/package.json b/package.json index ba61363d..db589b4c 100644 --- a/package.json +++ b/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" } diff --git a/src/components/Board.js b/src/components/Board.js index b0788694..aa3492f5 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -50,8 +50,16 @@ class Board extends Component { }); } - addCard = (card) => { - //do a post request + 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 = () => { diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..46a8e276 100644 --- a/src/components/Board.test.js +++ b/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( + + ); + + expect(board).toMatchSnapshot(); +}); diff --git a/src/components/Card.css b/src/components/Card.css index 83b61267..e73ff0fe 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -45,4 +45,5 @@ justify-self: end; align-self: start; font-family: 'Permanent Marker', Helvetica, sans-serif; + cursor: pointer; } diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..9b1fb01a --- /dev/null +++ b/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( + {}} /> + ); + + expect(card).toMatchSnapshot(); + card.unmount(); +}); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index f3865dc7..891a7cba 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -34,6 +34,7 @@ constructor() { onFormSubmit = (event) => { event.preventDefault(); + this.props.addCardCallback(this.state); this.clearForm(); } @@ -44,25 +45,29 @@ constructor() { render() { return ( -
-
- - -
-
- - -
- -
+
+

Add a Card

+
+
+ + +
+
+ + +
+ +
+
) } } diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..092d1de1 100644 --- a/src/components/NewCardForm.test.js +++ b/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( {} } /> ); + + // 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(); +}); diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..496f3a8e --- /dev/null +++ b/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__): , + 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 [], + , + ], + "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 [], + , + ], + "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, + }, + }, + }, +} +`; diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..9c20d4a7 --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,220 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`shallow mount 1`] = ` +ShallowWrapper { + "length": 1, + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__unrendered__): , + 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 [ + + x +, +
+

+ ok +

+

+ 🍺 +

+
, + ], + "className": "card", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "x", + "className": "card__delete", + "onClick": [Function], + }, + "ref": null, + "rendered": "x", + "type": "span", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

+ ok +

, +

+ 🍺 +

, + ], + "className": "card__content", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "ok", + "className": "card__content-text", + }, + "ref": null, + "rendered": "ok", + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "🍺", + "className": "card__content-emoji", + }, + "ref": null, + "rendered": "🍺", + "type": "p", + }, + ], + "type": "section", + }, + ], + "type": "div", + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + + x +, +
+

+ ok +

+

+ 🍺 +

+
, + ], + "className": "card", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "x", + "className": "card__delete", + "onClick": [Function], + }, + "ref": null, + "rendered": "x", + "type": "span", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

+ ok +

, +

+ 🍺 +

, + ], + "className": "card__content", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "ok", + "className": "card__content-text", + }, + "ref": null, + "rendered": "ok", + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "🍺", + "className": "card__content-emoji", + }, + "ref": null, + "rendered": "🍺", + "type": "p", + }, + ], + "type": "section", + }, + ], + "type": "div", + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`; diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..e66601b6 --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,825 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`that it matches an existing snapshot 1`] = ` +ShallowWrapper { + "length": 1, + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__unrendered__): , + 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 [ +
+ + +
, +
+ + +
, + , + ], + "onSubmit": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + , + , + ], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Text: ", + "htmlFor": "text", + }, + "ref": null, + "rendered": "Text: ", + "type": "label", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "name": "text", + "onChange": [Function], + "type": "text", + "value": "", + }, + "ref": null, + "rendered": null, + "type": "input", + }, + ], + "type": "div", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + , + , + ], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Emoji: ", + "htmlFor": "emoji", + }, + "ref": null, + "rendered": "Emoji: ", + "type": "label", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + Array [ + , + , + , + , + , + , + , + ], + ";", + ], + "name": "emoji", + "onChange": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "0", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "1", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "heart_eyes", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "heart_eyes", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "2", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "beer", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "beer", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "3", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "clap", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "clap", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "4", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "sparkling_heart", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "sparkling_heart", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "5", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "heart_eyes_cat", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "heart_eyes_cat", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "6", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "dog", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "dog", + " ", + ], + "type": "option", + }, + ";", + ], + "type": "select", + }, + ], + "type": "div", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "type": "submit", + "value": "Add Card", + }, + "ref": null, + "rendered": null, + "type": "input", + }, + ], + "type": "form", + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +
+ + +
, +
+ + +
, + , + ], + "onSubmit": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + , + , + ], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Text: ", + "htmlFor": "text", + }, + "ref": null, + "rendered": "Text: ", + "type": "label", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "name": "text", + "onChange": [Function], + "type": "text", + "value": "", + }, + "ref": null, + "rendered": null, + "type": "input", + }, + ], + "type": "div", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + , + , + ], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Emoji: ", + "htmlFor": "emoji", + }, + "ref": null, + "rendered": "Emoji: ", + "type": "label", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ + Array [ + , + , + , + , + , + , + , + ], + ";", + ], + "name": "emoji", + "onChange": [Function], + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "0", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "1", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "heart_eyes", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "heart_eyes", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "2", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "beer", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "beer", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "3", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "clap", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "clap", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "4", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "sparkling_heart", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "sparkling_heart", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "5", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "heart_eyes_cat", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "heart_eyes_cat", + " ", + ], + "type": "option", + }, + Object { + "instance": null, + "key": "6", + "nodeType": "host", + "props": Object { + "children": Array [ + " ", + "dog", + " ", + ], + }, + "ref": null, + "rendered": Array [ + " ", + "dog", + " ", + ], + "type": "option", + }, + ";", + ], + "type": "select", + }, + ], + "type": "div", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "type": "submit", + "value": "Add Card", + }, + "ref": null, + "rendered": null, + "type": "input", + }, + ], + "type": "form", + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`;