From ac7eedf0fae8cf8f8b0564d768daee35e67a102a Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Mon, 11 Jun 2018 15:25:17 -0700 Subject: [PATCH 01/15] List of hardcoded cards appear! Working on getting emojis to show up properly. --- src/App.js | 4 ++-- src/components/Board.js | 25 +++++++++++++++++++++---- src/components/Card.js | 10 ++++++++-- src/data/card-data.json | 2 +- 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index c4854e15..63390472 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..9877a2c0 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,18 +8,35 @@ 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: [], + cards: CARD_DATA["cards"], }; } + renderCards = () => { + console.log('Rendering cards') + const cardList = this.state.cards.map((card, index) => { + return ( + + ); + }); + return cardList; + } + render() { return (
- Board +
+

{this.state.error}

+ {this.renderCards()} +
) } diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..78d24900 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,17 +5,23 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + + render() { + console.log('Rendering a card') + const displayEmoji = require("emoji-dictionary"); return (
- Card +

Message:{this.props.text}

+

{this.props.emoji}

) } } Card.propTypes = { - + text: PropTypes.string.isRequired, + enoji: PropTypes.string, }; export default 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" From d76393c00d28694fbd2badd732ed6ffa9575333e Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Mon, 11 Jun 2018 15:52:15 -0700 Subject: [PATCH 02/15] minor styling added --- src/App.css | 1 + src/components/Board.js | 4 ++-- src/components/Card.css | 2 +- src/components/Card.js | 14 ++++++++++---- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 5db345f2..d9cdf0e1 100644 --- a/src/App.css +++ b/src/App.css @@ -5,6 +5,7 @@ body { font-family: 'Raleway', sans-serif; + /*background-color: #92FED5;*/ } h1, h2 { diff --git a/src/components/Board.js b/src/components/Board.js index 9877a2c0..bce7fbd7 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -33,8 +33,8 @@ class Board extends Component { render() { return (
-
-

{this.state.error}

+
+ {this.renderCards()}
diff --git a/src/components/Card.css b/src/components/Card.css index e86d4329..7bb5ab4e 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -1,5 +1,5 @@ .card { - background-color: #F4FF81; + background-color: #D6CADA; padding: 1em 0; margin: 0.5rem; diff --git a/src/components/Card.js b/src/components/Card.js index 78d24900..9d738408 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -6,14 +6,20 @@ import './Card.css'; class Card extends Component { + displayEmoji = () => { + if (this.props.emoji) { + return emoji.getUnicode(this.props.emoji) + } + }; render() { console.log('Rendering a card') - const displayEmoji = require("emoji-dictionary"); return (
-

Message:{this.props.text}

-

{this.props.emoji}

+
+

{this.props.text}

+

{this.displayEmoji()}

+
) } @@ -21,7 +27,7 @@ class Card extends Component { Card.propTypes = { text: PropTypes.string.isRequired, - enoji: PropTypes.string, + emoji: PropTypes.string, }; export default Card; From 6388f24116bd5b167bb7722a49da1d3de97f0bb6 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Mon, 11 Jun 2018 16:18:38 -0700 Subject: [PATCH 03/15] nonfunctional delete button on every card --- src/components/Board.js | 33 +++++++++++++++++++++++++++++---- src/components/Card.js | 17 +++++++++-------- 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index bce7fbd7..d47f5953 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -12,29 +12,54 @@ class Board extends Component { super(props); this.state = { - cards: CARD_DATA["cards"], + cards: [], }; } + componentDidMount = () => { + console.log('Component did mount was called') + + axios.get('https://inspiration-board.herokuapp.com/boards/angelap/cards') + .then((response) => { + this.setState({ cards: response.data }); + console.log(response.data) + }) + .catch((error) => { + console.log('Error is happening'); + console.log(error); + this.setState({ error: error.message}); + return error; + + }); + } + renderCards = () => { console.log('Rendering cards') const cardList = this.state.cards.map((card, index) => { return ( ); }); return cardList; } + deleteCard = (card) => { + const cards = this.state.cards; + + cards.delete(card); + this.setState({ + cards, + }); + } + render() { return (
- {this.renderCards()}
diff --git a/src/components/Card.js b/src/components/Card.js index 9d738408..154a7c6f 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -19,15 +19,16 @@ class Card extends Component {

{this.props.text}

{this.displayEmoji()}

+ +
- - ) + ) + } } -} -Card.propTypes = { - text: PropTypes.string.isRequired, - emoji: PropTypes.string, -}; + Card.propTypes = { + text: PropTypes.string.isRequired, + emoji: PropTypes.string, + }; -export default Card; + export default Card; From 9513cb562ea9a710947cee9a77997b09cda29685 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 12 Jun 2018 14:26:14 -0700 Subject: [PATCH 04/15] adds one snapshot test to Card.test.js --- src/components/Board.js | 20 +- src/components/Card.js | 10 +- src/components/Card.test.js | 14 ++ .../__snapshots__/Card.test.js.snap | 203 ++++++++++++++++++ 4 files changed, 241 insertions(+), 6 deletions(-) create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Card.test.js.snap diff --git a/src/components/Board.js b/src/components/Board.js index d47f5953..f794dad8 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -39,20 +39,29 @@ class Board extends Component { return ( ); }); return cardList; } - deleteCard = (card) => { - const cards = this.state.cards; + deleteCard = (id) => { + console.log(id) + axios.delete(`https://inspiration-board.herokuapp.com/boards/angelap/cards/${id}`) + .then((response) => { + this.componentDidMount(); + console.log(response) + }) + .catch((error) => { + console.log('Unable to delete card'); + console.log(error); + this.setState({ error: error.message}); + return error; - cards.delete(card); - this.setState({ - cards, }); } @@ -60,6 +69,7 @@ class Board extends Component { return (
+

{this.state.error}

{this.renderCards()}
diff --git a/src/components/Card.js b/src/components/Card.js index 154a7c6f..4b36d518b 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -12,6 +12,12 @@ class Card extends Component { } }; + removeCard = (event) => { + console.log(event.target.id); + event.preventDefault(); + this.props.deleteCard(this.props.id); + } + render() { console.log('Rendering a card') return ( @@ -19,7 +25,7 @@ class Card extends Component {

{this.props.text}

{this.displayEmoji()}

- +
) @@ -29,6 +35,8 @@ class Card extends Component { Card.propTypes = { text: PropTypes.string.isRequired, emoji: PropTypes.string, + deleteCard: PropTypes.func, + id: PropTypes.string.isRequired, }; export default Card; diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..e419b17e --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,14 @@ + +import React, { Component } from 'react'; +import {mount, shallow} from 'enzyme'; +import Card from './Card' + +describe('Card', () => { + test('that it matches an existing snapshot', () => { + const wrapper = shallow() + + expect(wrapper).toMatchSnapshot(); + + wrapper.unmount(); + }); +}); diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..7e8d13e2 --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card 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":
+

+

+ +

, + "className": "card", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

, +

, + , + ], + "className": "card__content", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + "className": "card__content-text", + }, + "ref": null, + "rendered": null, + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + "className": "card__content-emoji", + }, + "ref": null, + "rendered": null, + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Delete", + "className": "card__delete", + "onClick": [Function], + }, + "ref": null, + "rendered": "Delete", + "type": "button", + }, + ], + "type": "div", + }, + "type": "div", + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children":

+

+

+ +

, + "className": "card", + }, + "ref": null, + "rendered": Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

, +

, + , + ], + "className": "card__content", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + "className": "card__content-text", + }, + "ref": null, + "rendered": null, + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + "className": "card__content-emoji", + }, + "ref": null, + "rendered": null, + "type": "p", + }, + Object { + "instance": null, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": "Delete", + "className": "card__delete", + "onClick": [Function], + }, + "ref": null, + "rendered": "Delete", + "type": "button", + }, + ], + "type": "div", + }, + "type": "div", + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`; From 140de06c811b939fea2d0b01af1d87dfe243ba49 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 12 Jun 2018 14:32:02 -0700 Subject: [PATCH 05/15] adds snapshot test for Board. Not sure if I implemented correctly though. --- package-lock.json | 15 + package.json | 3 +- src/components/Board.test.js | 14 + .../__snapshots__/Board.test.js.snap | 1453 +++++++++++++++++ 4 files changed, 1484 insertions(+), 1 deletion(-) create mode 100644 src/components/__snapshots__/Board.test.js.snap diff --git a/package-lock.json b/package-lock.json index 0d789ea1..3efe48a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6085,6 +6085,21 @@ "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-20.0.3.tgz", "integrity": "sha1-i8Bw6QQUqhVcEajWTIaaDVxx2lk=" }, + "jest-mock-axios": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/jest-mock-axios/-/jest-mock-axios-2.1.11.tgz", + "integrity": "sha512-rxF13chmHuelAh/rysNQEY4YqmOO94XmBO5Mk2+edFh2dOwe3j/XIRSnY8+m61t1658AU6nGoTh1s7tCgvridg==", + "dev": true, + "requires": { + "jest-mock-promise": "1.0.23" + } + }, + "jest-mock-promise": { + "version": "1.0.23", + "resolved": "https://registry.npmjs.org/jest-mock-promise/-/jest-mock-promise-1.0.23.tgz", + "integrity": "sha1-ySH9a1EqxUYJftvPR389QWllfkA=", + "dev": true + }, "jest-regex-util": { "version": "20.0.3", "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-20.0.3.tgz", diff --git a/package.json b/package.json index ba61363d..e802d51a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "devDependencies": { "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", - "gh-pages": "^1.2.0" + "gh-pages": "^1.2.0", + "jest-mock-axios": "^2.1.11" }, "homepage": "http://adagold.github.io/inspiration-board" } diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..1862df05 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,14 @@ + +import React, { Component } from 'react'; +import {mount, shallow} from 'enzyme'; +import Board from './Board' + +describe('Board', () => { + test('that it matches an existing snapshot', () => { + const wrapper = mount() + + expect(wrapper).toMatchSnapshot(); + + wrapper.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..78c6defa --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,1453 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board that it matches an existing snapshot 1`] = ` +ReactWrapper { + "length": 1, + Symbol(enzyme.__unrendered__): , + Symbol(enzyme.__renderer__): Object { + "batchedUpdates": [Function], + "getNode": [Function], + "render": [Function], + "simulateEvent": [Function], + "unmount": [Function], + }, + Symbol(enzyme.__root__): [Circular], + Symbol(enzyme.__node__): Object { + "instance": Board { + "_reactInternalFiber": FiberNode { + "_debugID": 5, + "_debugIsCurrentlyTiming": false, + "_debugOwner": FiberNode { + "_debugID": 4, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": [Circular], + "effectTag": 1, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "memoizedState": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "ref": null, + "return": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": [Circular], + "child": null, + "effectTag": 0, + "expirationTime": 1, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": null, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":

+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": null, + "expirationTime": 1, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + }, + }, + "child": [Circular], + "effectTag": 32, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": null, + "memoizedState": Object { + "element": , + }, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": Object { + "element": , + }, + "expirationTime": 0, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": null, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": null, + }, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": WrapperComponent { + "_reactInternalFiber": [Circular], + "_reactInternalInstance": Object {}, + "context": Object {}, + "props": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "refs": Object {}, + "state": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "_debugSource": null, + "alternate": null, + "child": FiberNode { + "_debugID": 6, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 70, + }, + "alternate": null, + "child": FiberNode { + "_debugID": 7, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 71, + }, + "alternate": null, + "child": FiberNode { + "_debugID": 8, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 72, + }, + "alternate": null, + "child": null, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children": undefined, + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children": undefined, + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": FiberNode { + "_debugID": 9, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": null, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 1, + "key": null, + "lastEffect": null, + "memoizedProps": Array [], + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Array [], + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode": null, + "tag": 10, + "treeBaseTime": 0, + "type": null, + "updateQueue": null, + }, + "stateNode":

, + "tag": 5, + "treeBaseTime": 0, + "type": "p", + "updateQueue": null, + }, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode":

+

+

, + "tag": 5, + "treeBaseTime": 0, + "type": "section", + "updateQueue": null, + }, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children":
+

+

, + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children":
+

+

, + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode":
+
+

+

+
, + "tag": 5, + "treeBaseTime": 0, + "type": "div", + "updateQueue": null, + }, + "effectTag": 5, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object {}, + "memoizedState": Object { + "cards": Array [], + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object {}, + "ref": null, + "return": FiberNode { + "_debugID": 4, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": [Circular], + "effectTag": 1, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "memoizedState": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "ref": null, + "return": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": [Circular], + "child": null, + "effectTag": 0, + "expirationTime": 1, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": null, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": null, + "expirationTime": 1, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + }, + }, + "child": [Circular], + "effectTag": 32, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": null, + "memoizedState": Object { + "element": , + }, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": Object { + "element": , + }, + "expirationTime": 0, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": null, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": null, + }, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": WrapperComponent { + "_reactInternalFiber": [Circular], + "_reactInternalInstance": Object {}, + "context": Object {}, + "props": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "refs": Object {}, + "state": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": [Circular], + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "_reactInternalInstance": Object {}, + "componentDidMount": [Function], + "context": Object {}, + "deleteCard": [Function], + "props": Object {}, + "refs": Object {}, + "renderCards": [Function], + "state": Object { + "cards": Array [], + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "key": undefined, + "nodeType": "class", + "props": Object {}, + "ref": null, + "rendered": Object { + "instance":
+
+

+

+
, + "key": undefined, + "nodeType": "host", + "props": Object { + "children":
+

+

, + }, + "ref": null, + "rendered": Array [ + Object { + "instance":
+

+

, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "ref": null, + "rendered": Array [ + Object { + "instance":

, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + }, + "ref": null, + "rendered": Array [ + undefined, + ], + "type": "p", + }, + null, + ], + "type": "section", + }, + ], + "type": "div", + }, + "type": [Function], + }, + Symbol(enzyme.__nodes__): Array [ + Object { + "instance": Board { + "_reactInternalFiber": FiberNode { + "_debugID": 5, + "_debugIsCurrentlyTiming": false, + "_debugOwner": FiberNode { + "_debugID": 4, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": [Circular], + "effectTag": 1, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "memoizedState": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "ref": null, + "return": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": [Circular], + "child": null, + "effectTag": 0, + "expirationTime": 1, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": null, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":

+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": null, + "expirationTime": 1, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + }, + }, + "child": [Circular], + "effectTag": 32, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": null, + "memoizedState": Object { + "element": , + }, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": Object { + "element": , + }, + "expirationTime": 0, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": null, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": null, + }, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": WrapperComponent { + "_reactInternalFiber": [Circular], + "_reactInternalInstance": Object {}, + "context": Object {}, + "props": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "refs": Object {}, + "state": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "_debugSource": null, + "alternate": null, + "child": FiberNode { + "_debugID": 6, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 70, + }, + "alternate": null, + "child": FiberNode { + "_debugID": 7, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 71, + }, + "alternate": null, + "child": FiberNode { + "_debugID": 8, + "_debugIsCurrentlyTiming": false, + "_debugOwner": [Circular], + "_debugSource": Object { + "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", + "lineNumber": 72, + }, + "alternate": null, + "child": null, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children": undefined, + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children": undefined, + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": FiberNode { + "_debugID": 9, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": null, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 1, + "key": null, + "lastEffect": null, + "memoizedProps": Array [], + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Array [], + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode": null, + "tag": 10, + "treeBaseTime": 0, + "type": null, + "updateQueue": null, + }, + "stateNode":

, + "tag": 5, + "treeBaseTime": 0, + "type": "p", + "updateQueue": null, + }, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode":

+

+

, + "tag": 5, + "treeBaseTime": 0, + "type": "section", + "updateQueue": null, + }, + "effectTag": 0, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object { + "children":
+

+

, + }, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "children":
+

+

, + }, + "ref": null, + "return": [Circular], + "selfBaseTime": 0, + "sibling": null, + "stateNode":
+
+

+

+
, + "tag": 5, + "treeBaseTime": 0, + "type": "div", + "updateQueue": null, + }, + "effectTag": 5, + "expirationTime": 0, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": Object {}, + "memoizedState": Object { + "cards": Array [], + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object {}, + "ref": null, + "return": FiberNode { + "_debugID": 4, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": null, + "child": [Circular], + "effectTag": 1, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "memoizedState": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "mode": 0, + "nextEffect": null, + "pendingProps": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "ref": null, + "return": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": FiberNode { + "_debugID": 1, + "_debugIsCurrentlyTiming": false, + "_debugOwner": null, + "_debugSource": null, + "alternate": [Circular], + "child": null, + "effectTag": 0, + "expirationTime": 1, + "firstEffect": null, + "index": 0, + "key": null, + "lastEffect": null, + "memoizedProps": null, + "memoizedState": null, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": null, + "expirationTime": 1, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": Object { + "callback": null, + "expirationTime": 1, + "next": null, + "nextEffect": null, + "payload": Object { + "element": , + }, + "tag": 0, + }, + }, + }, + "child": [Circular], + "effectTag": 32, + "expirationTime": 0, + "firstEffect": [Circular], + "index": 0, + "key": null, + "lastEffect": [Circular], + "memoizedProps": null, + "memoizedState": Object { + "element": , + }, + "mode": 0, + "nextEffect": null, + "pendingProps": null, + "ref": null, + "return": null, + "selfBaseTime": 0, + "sibling": null, + "stateNode": Object { + "containerInfo":
+
+
+

+

+
+
, + "context": Object {}, + "current": [Circular], + "earliestPendingTime": 0, + "earliestSuspendedTime": 0, + "finishedWork": null, + "firstBatch": null, + "hydrate": false, + "latestPendingTime": 0, + "latestPingedTime": 0, + "latestSuspendedTime": 0, + "nextScheduledRoot": null, + "pendingChildren": null, + "pendingCommitExpirationTime": 0, + "pendingContext": null, + "remainingExpirationTime": 0, + }, + "tag": 3, + "treeBaseTime": 0, + "type": null, + "updateQueue": Object { + "baseState": Object { + "element": , + }, + "expirationTime": 0, + "firstCapturedEffect": null, + "firstCapturedUpdate": null, + "firstEffect": null, + "firstUpdate": null, + "lastCapturedEffect": null, + "lastCapturedUpdate": null, + "lastEffect": null, + "lastUpdate": null, + }, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": WrapperComponent { + "_reactInternalFiber": [Circular], + "_reactInternalInstance": Object {}, + "context": Object {}, + "props": Object { + "Component": [Function], + "context": null, + "props": Object {}, + }, + "refs": Object {}, + "state": Object { + "context": null, + "mount": true, + "props": Object {}, + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "selfBaseTime": 0, + "sibling": null, + "stateNode": [Circular], + "tag": 2, + "treeBaseTime": 0, + "type": [Function], + "updateQueue": null, + }, + "_reactInternalInstance": Object {}, + "componentDidMount": [Function], + "context": Object {}, + "deleteCard": [Function], + "props": Object {}, + "refs": Object {}, + "renderCards": [Function], + "state": Object { + "cards": Array [], + }, + "updater": Object { + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + }, + }, + "key": undefined, + "nodeType": "class", + "props": Object {}, + "ref": null, + "rendered": Object { + "instance":
+
+

+

+
, + "key": undefined, + "nodeType": "host", + "props": Object { + "children":
+

+

, + }, + "ref": null, + "rendered": Array [ + Object { + "instance":
+

+

, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": Array [ +

, + Array [], + ], + "className": "board", + }, + "ref": null, + "rendered": Array [ + Object { + "instance":

, + "key": undefined, + "nodeType": "host", + "props": Object { + "children": undefined, + }, + "ref": null, + "rendered": Array [ + undefined, + ], + "type": "p", + }, + null, + ], + "type": "section", + }, + ], + "type": "div", + }, + "type": [Function], + }, + ], + Symbol(enzyme.__options__): Object { + "adapter": ReactSixteenAdapter { + "options": Object { + "enableComponentDidUpdateOnSetState": true, + }, + }, + }, +} +`; From 0abc4ab06ece381df700ff7f2a6cf7d0020d85c1 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 12 Jun 2018 15:30:54 -0700 Subject: [PATCH 06/15] adds the start of new card functionality...not quite working yet --- src/components/Board.js | 21 ++++++++++ src/components/Card.js | 3 +- src/components/NewCardForm.js | 72 ++++++++++++++++++++++++++++++++++- 3 files changed, 94 insertions(+), 2 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index f794dad8..0d1d1555 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -49,6 +49,25 @@ class Board extends Component { return cardList; } + addCard = (note) => { + const cards = this.state.cards; + axios.post('https://inspiration-board.herokuapp.com/boards/angela/cards', note) + .then((response) => { + cards.push(note); + this.setState({ + cards, + message: `Sucessfully Added a new Card` + }); + }) + .catch((error) => { + console.log(error) + this.setState({ + message: error.message, + }); + }) + + } + deleteCard = (id) => { console.log(id) axios.delete(`https://inspiration-board.herokuapp.com/boards/angelap/cards/${id}`) @@ -70,7 +89,9 @@ class Board extends Component {

{this.state.error}

+

{this.state.message}

{this.renderCards()} +
) diff --git a/src/components/Card.js b/src/components/Card.js index 4b36d518b..6a4dbbd2 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -22,10 +22,11 @@ class Card extends Component { console.log('Rendering a card') return (
+
+

{this.props.text}

{this.displayEmoji()}

-
) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..cc26c8e9 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,4 +3,74 @@ 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"] +const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog", "joy"] + +class NewCardForm extends Component { + constructor() { + super(); + + this.state = { + text:'', + emoji: '', + }; + } + + onFieldChange = (event) => { + const fieldName = event.target.text; + const fieldValue = event.target.value; + const updateState = {}; + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + valid = () => { + return this.state.text.length > 0; + } + + clearForm = () => { + this.setState({ + text: '', + emoji: '', + }) + } + + onFormSubmit = (event) => { + event.preventDefault(); + if (this.valid()) { + this.props.addCardCallBack(this.state) + this.clearForm() + + } + } + + render() { + return( +
+
+ + +
+
+ + +
+ +
+ ); + } + +} + +NewCardForm.propTypes = { + addCardCallBack: PropTypes.func.isRequired, +} + +export default NewCardForm; From d1e8a3e472a0e7147f815059c51feb620522dca4 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 12 Jun 2018 15:41:00 -0700 Subject: [PATCH 07/15] added some css to newCardForm --- src/components/NewCardForm.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index cc26c8e9..8249a1b9 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -45,25 +45,30 @@ class NewCardForm extends Component { render() { return( -
+
+

Create new card:

+
- + + type="text" + className="new-card-form__form-textarea"/>
- + + type="text" + className="new-card-form__form-textarea"/>
- + +
); } From b457756315e9afa767cfe51da024a93f9141acb5 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Tue, 12 Jun 2018 22:08:35 -0700 Subject: [PATCH 08/15] form now allows typing but still broke and not adding new cards to board. --- src/components/Board.js | 6 +++--- src/components/Card.js | 2 +- src/components/NewCardForm.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 0d1d1555..90c7630b 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(props) { @@ -51,7 +51,7 @@ class Board extends Component { addCard = (note) => { const cards = this.state.cards; - axios.post('https://inspiration-board.herokuapp.com/boards/angela/cards', note) + axios.post(`https://inspiration-board.herokuapp.com/boards/angelap/cards/`, note) .then((response) => { cards.push(note); this.setState({ @@ -100,7 +100,7 @@ class Board extends Component { } Board.propTypes = { - + cards: PropTypes.array.isRequired, }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6a4dbbd2..8bf715ed 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -37,7 +37,7 @@ class Card extends Component { text: PropTypes.string.isRequired, emoji: PropTypes.string, deleteCard: PropTypes.func, - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 8249a1b9..31d0cdb5 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -16,7 +16,7 @@ class NewCardForm extends Component { } onFieldChange = (event) => { - const fieldName = event.target.text; + const fieldName = event.target.name; const fieldValue = event.target.value; const updateState = {}; updateState[fieldName] = fieldValue; @@ -49,7 +49,7 @@ class NewCardForm extends Component {

Create new card:

- +
- + Date: Wed, 13 Jun 2018 16:01:36 -0700 Subject: [PATCH 09/15] adds functionality to get an id properly onto a new card from the API response --- src/components/Board.js | 8 ++++++-- src/components/NewCardForm.js | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 90c7630b..2ec7604a 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -35,7 +35,9 @@ class Board extends Component { renderCards = () => { console.log('Rendering cards') + const cardList = this.state.cards.map((card, index) => { + return ( + /> ); }); return cardList; @@ -53,7 +55,9 @@ class Board extends Component { const cards = this.state.cards; axios.post(`https://inspiration-board.herokuapp.com/boards/angelap/cards/`, note) .then((response) => { + note.id = response.data.card.id; cards.push(note); + console.log(note); this.setState({ cards, message: `Sucessfully Added a new Card` @@ -87,11 +91,11 @@ class Board extends Component { render() { return (
+

{this.state.error}

{this.state.message}

{this.renderCards()} -
) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 31d0cdb5..9c29b04f 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -11,7 +11,7 @@ class NewCardForm extends Component { this.state = { text:'', - emoji: '', + emoji: '', }; } @@ -66,7 +66,7 @@ class NewCardForm extends Component { type="text" className="new-card-form__form-textarea"/>
- +
); From e055b692fc2659f7364bc2b1d2d1562cf18d02e2 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Wed, 13 Jun 2018 16:54:28 -0700 Subject: [PATCH 10/15] fixes render when adding a new card --- src/components/Board.js | 44 +++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 2ec7604a..aeef194d 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -37,15 +37,15 @@ class Board extends Component { console.log('Rendering cards') const cardList = this.state.cards.map((card, index) => { - + let singleCard = card["card"] return ( + /> ); }); return cardList; @@ -54,21 +54,21 @@ class Board extends Component { addCard = (note) => { const cards = this.state.cards; axios.post(`https://inspiration-board.herokuapp.com/boards/angelap/cards/`, note) - .then((response) => { - note.id = response.data.card.id; - cards.push(note); - console.log(note); - this.setState({ - cards, - message: `Sucessfully Added a new Card` - }); - }) - .catch((error) => { - console.log(error) - this.setState({ - message: error.message, - }); - }) + .then((response) => { + note.id = response.data.card.id; + cards.push({card: note}); + console.log(note); + this.setState({ + cards, + message: `Sucessfully Added a new Card` + }); + }) + .catch((error) => { + console.log(error) + this.setState({ + message: error.message, + }); + }) } @@ -88,9 +88,11 @@ class Board extends Component { }); } + + render() { return ( -
+

{this.state.error}

From 1856c6ec219bf70a1ec8d08338361f007726f755 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Thu, 14 Jun 2018 12:11:13 -0700 Subject: [PATCH 11/15] adds dropdown menu for selecting an emoji. Also took out validation to require text incase only an emoji is wanted for a note. --- src/components/Board.js | 2 +- src/components/NewCardForm.js | 23 +++++++++++------------ 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index aeef194d..7ab5b16b 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -92,7 +92,7 @@ class Board extends Component { render() { return ( -
+

{this.state.error}

diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 9c29b04f..3c231464 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,7 +3,7 @@ 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", "joy"] +const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog", "joy", "sparkles", "clapping"] class NewCardForm extends Component { constructor() { @@ -11,7 +11,7 @@ class NewCardForm extends Component { this.state = { text:'', - emoji: '', + emoji:'', }; } @@ -22,10 +22,10 @@ class NewCardForm extends Component { updateState[fieldName] = fieldValue; this.setState(updateState); } - - valid = () => { - return this.state.text.length > 0; - } + // + // valid = () => { + // return this.state.text.length > 0; + // } clearForm = () => { this.setState({ @@ -36,11 +36,8 @@ class NewCardForm extends Component { onFormSubmit = (event) => { event.preventDefault(); - if (this.valid()) { this.props.addCardCallBack(this.state) this.clearForm() - - } } render() { @@ -59,12 +56,14 @@ class NewCardForm extends Component {
- + className="new-card-form__form-textarea"> + {EMOJI_LIST.map(x => )}; +
From 64e2043d99d59b5e1c1e28a317070c7d7c42a956 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Fri, 15 Jun 2018 13:49:38 -0700 Subject: [PATCH 12/15] adds snapshot test for NewCardForm --- package-lock.json | 33 +- package.json | 6 + src/components/Board.js | 4 +- src/components/Card.css | 1 + src/components/NewCardForm.test.js | 14 + .../__snapshots__/Board.test.js.snap | 1563 ++--------------- .../__snapshots__/NewCardForm.test.js.snap | 109 ++ 7 files changed, 269 insertions(+), 1461 deletions(-) create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/package-lock.json b/package-lock.json index 3efe48a9..1674a795 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@types/node": { - "version": "10.3.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.0.tgz", - "integrity": "sha512-hWzNviaVFIr1TqcRA8ou49JaSHp+Rfabmnqg2kNvusKqLhPU0rIsGPUj5WJJ7ld4Bb7qdgLmIhLfCD1qS08IVA==", + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz", + "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==", "dev": true }, "abab": { @@ -2961,7 +2961,7 @@ "object.values": "1.0.4", "prop-types": "15.6.1", "react-reconciler": "0.7.0", - "react-test-renderer": "16.4.0" + "react-test-renderer": "16.4.1" } }, "enzyme-adapter-utils": { @@ -2975,6 +2975,15 @@ "prop-types": "15.6.1" } }, + "enzyme-to-json": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz", + "integrity": "sha1-Z8YEDpMRgvGDQYry659DIyWKp38=", + "dev": true, + "requires": { + "lodash": "4.17.10" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -7414,7 +7423,7 @@ "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", "dev": true, "requires": { - "@types/node": "10.3.0" + "@types/node": "10.3.3" } }, "parseurl": { @@ -9020,9 +9029,9 @@ "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, "react-is": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.0.tgz", - "integrity": "sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.1.tgz", + "integrity": "sha512-xpb0PpALlFWNw/q13A+1aHeyJyLYCg0/cCHPUA43zYluZuIPHaHL3k8OBsTgQtxqW0FhyDEMvi8fZ/+7+r4OSQ==", "dev": true }, "react-reconciler": { @@ -9223,15 +9232,15 @@ } }, "react-test-renderer": { - "version": "16.4.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.0.tgz", - "integrity": "sha512-Seh1t9xFY6TKiV/hRlPzUkqX1xHOiKIMsctfU0cggo1ajsLjoIJFL520LlrxV+4/VIj+clrCeH6s/aVv/vTStg==", + "version": "16.4.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz", + "integrity": "sha512-wyyiPxRZOTpKnNIgUBOB6xPLTpIzwcQMIURhZvzUqZzezvHjaGNsDPBhMac5fIY3Jf5NuKxoGvV64zDSOECPPQ==", "dev": true, "requires": { "fbjs": "0.8.16", "object-assign": "4.1.1", "prop-types": "15.6.1", - "react-is": "16.4.0" + "react-is": "16.4.1" } }, "read-pkg": { diff --git a/package.json b/package.json index e802d51a..c6ac3678 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,14 @@ "devDependencies": { "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", + "enzyme-to-json": "^3.3.4", "gh-pages": "^1.2.0", "jest-mock-axios": "^2.1.11" }, + "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 7ab5b16b..c4652141 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -60,7 +60,7 @@ class Board extends Component { console.log(note); this.setState({ cards, - message: `Sucessfully Added a new Card` + message: `Successfully Added a new Card` }); }) .catch((error) => { @@ -94,9 +94,9 @@ class Board extends Component { return (
-

{this.state.error}

{this.state.message}

+
{this.renderCards()}
diff --git a/src/components/Card.css b/src/components/Card.css index 7bb5ab4e..c5283621 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -44,4 +44,5 @@ .card__delete { align-self: start; font-family: 'Permanent Marker', Helvetica, sans-serif; + margin-left: 8px; } diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..9deb8718 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,14 @@ + +import React, { Component } from 'react'; +import {mount, shallow} from 'enzyme'; +import NewCardForm from './NewCardForm' + +describe('NewCardForm', () => { + test('that it matches an existing snapshot', () => { + const wrapper = shallow() + + expect(wrapper).toMatchSnapshot(); + + wrapper.unmount(); + }); +}); diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap index 78c6defa..2fcbf518 100644 --- a/src/components/__snapshots__/Board.test.js.snap +++ b/src/components/__snapshots__/Board.test.js.snap @@ -1,1453 +1,122 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Board that it matches an existing snapshot 1`] = ` -ReactWrapper { - "length": 1, - Symbol(enzyme.__unrendered__): , - Symbol(enzyme.__renderer__): Object { - "batchedUpdates": [Function], - "getNode": [Function], - "render": [Function], - "simulateEvent": [Function], - "unmount": [Function], - }, - Symbol(enzyme.__root__): [Circular], - Symbol(enzyme.__node__): Object { - "instance": Board { - "_reactInternalFiber": FiberNode { - "_debugID": 5, - "_debugIsCurrentlyTiming": false, - "_debugOwner": FiberNode { - "_debugID": 4, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": null, - "child": [Circular], - "effectTag": 1, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "memoizedState": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "ref": null, - "return": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": [Circular], - "child": null, - "effectTag": 0, - "expirationTime": 1, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": null, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":
-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": null, - "expirationTime": 1, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - }, - }, - "child": [Circular], - "effectTag": 32, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": null, - "memoizedState": Object { - "element": , - }, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":
-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": Object { - "element": , - }, - "expirationTime": 0, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": null, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": null, - }, - }, - "selfBaseTime": 0, - "sibling": null, - "stateNode": WrapperComponent { - "_reactInternalFiber": [Circular], - "_reactInternalInstance": Object {}, - "context": Object {}, - "props": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "refs": Object {}, - "state": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "updater": Object { - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - }, - }, - "tag": 2, - "treeBaseTime": 0, - "type": [Function], - "updateQueue": null, - }, - "_debugSource": null, - "alternate": null, - "child": FiberNode { - "_debugID": 6, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 70, - }, - "alternate": null, - "child": FiberNode { - "_debugID": 7, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 71, - }, - "alternate": null, - "child": FiberNode { - "_debugID": 8, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 72, - }, - "alternate": null, - "child": null, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children": undefined, - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children": undefined, - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": FiberNode { - "_debugID": 9, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": null, - "child": null, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 1, - "key": null, - "lastEffect": null, - "memoizedProps": Array [], - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Array [], - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode": null, - "tag": 10, - "treeBaseTime": 0, - "type": null, - "updateQueue": null, - }, - "stateNode":

, - "tag": 5, - "treeBaseTime": 0, - "type": "p", - "updateQueue": null, - }, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children": Array [ -

, - Array [], - ], - "className": "board", - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children": Array [ -

, - Array [], - ], - "className": "board", - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode":

-

-

, - "tag": 5, - "treeBaseTime": 0, - "type": "section", - "updateQueue": null, - }, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children":
-

-

, - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children":
-

-

, - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode":
-
-

-

-
, - "tag": 5, - "treeBaseTime": 0, - "type": "div", - "updateQueue": null, - }, - "effectTag": 5, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object {}, - "memoizedState": Object { - "cards": Array [], - }, - "mode": 0, - "nextEffect": null, - "pendingProps": Object {}, - "ref": null, - "return": FiberNode { - "_debugID": 4, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": null, - "child": [Circular], - "effectTag": 1, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "memoizedState": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "ref": null, - "return": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": [Circular], - "child": null, - "effectTag": 0, - "expirationTime": 1, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": null, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":
-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": null, - "expirationTime": 1, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - }, - }, - "child": [Circular], - "effectTag": 32, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": null, - "memoizedState": Object { - "element": , - }, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":
-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": Object { - "element": , - }, - "expirationTime": 0, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": null, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": null, - }, - }, - "selfBaseTime": 0, - "sibling": null, - "stateNode": WrapperComponent { - "_reactInternalFiber": [Circular], - "_reactInternalInstance": Object {}, - "context": Object {}, - "props": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "refs": Object {}, - "state": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "updater": Object { - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - }, - }, - "tag": 2, - "treeBaseTime": 0, - "type": [Function], - "updateQueue": null, - }, - "selfBaseTime": 0, - "sibling": null, - "stateNode": [Circular], - "tag": 2, - "treeBaseTime": 0, - "type": [Function], - "updateQueue": null, - }, - "_reactInternalInstance": Object {}, - "componentDidMount": [Function], - "context": Object {}, - "deleteCard": [Function], - "props": Object {}, - "refs": Object {}, - "renderCards": [Function], - "state": Object { - "cards": Array [], - }, - "updater": Object { - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - }, - }, - "key": undefined, - "nodeType": "class", - "props": Object {}, - "ref": null, - "rendered": Object { - "instance":
-
+
+ +
+

+ Create new card: +

+
-

-

-
, - "key": undefined, - "nodeType": "host", - "props": Object { - "children":
-

-

, - }, - "ref": null, - "rendered": Array [ - Object { - "instance":
-

-

, - "key": undefined, - "nodeType": "host", - "props": Object { - "children": Array [ -

, - Array [], - ], - "className": "board", - }, - "ref": null, - "rendered": Array [ - Object { - "instance":

, - "key": undefined, - "nodeType": "host", - "props": Object { - "children": undefined, - }, - "ref": null, - "rendered": Array [ - undefined, - ], - "type": "p", - }, - null, - ], - "type": "section", - }, - ], - "type": "div", - }, - "type": [Function], - }, - Symbol(enzyme.__nodes__): Array [ - Object { - "instance": Board { - "_reactInternalFiber": FiberNode { - "_debugID": 5, - "_debugIsCurrentlyTiming": false, - "_debugOwner": FiberNode { - "_debugID": 4, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": null, - "child": [Circular], - "effectTag": 1, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "memoizedState": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "ref": null, - "return": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": FiberNode { - "_debugID": 1, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": [Circular], - "child": null, - "effectTag": 0, - "expirationTime": 1, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": null, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":

-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": null, - "expirationTime": 1, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": Object { - "callback": null, - "expirationTime": 1, - "next": null, - "nextEffect": null, - "payload": Object { - "element": , - }, - "tag": 0, - }, - }, - }, - "child": [Circular], - "effectTag": 32, - "expirationTime": 0, - "firstEffect": [Circular], - "index": 0, - "key": null, - "lastEffect": [Circular], - "memoizedProps": null, - "memoizedState": Object { - "element": , - }, - "mode": 0, - "nextEffect": null, - "pendingProps": null, - "ref": null, - "return": null, - "selfBaseTime": 0, - "sibling": null, - "stateNode": Object { - "containerInfo":
-
-
-

-

-
-
, - "context": Object {}, - "current": [Circular], - "earliestPendingTime": 0, - "earliestSuspendedTime": 0, - "finishedWork": null, - "firstBatch": null, - "hydrate": false, - "latestPendingTime": 0, - "latestPingedTime": 0, - "latestSuspendedTime": 0, - "nextScheduledRoot": null, - "pendingChildren": null, - "pendingCommitExpirationTime": 0, - "pendingContext": null, - "remainingExpirationTime": 0, - }, - "tag": 3, - "treeBaseTime": 0, - "type": null, - "updateQueue": Object { - "baseState": Object { - "element": , - }, - "expirationTime": 0, - "firstCapturedEffect": null, - "firstCapturedUpdate": null, - "firstEffect": null, - "firstUpdate": null, - "lastCapturedEffect": null, - "lastCapturedUpdate": null, - "lastEffect": null, - "lastUpdate": null, - }, - }, - "selfBaseTime": 0, - "sibling": null, - "stateNode": WrapperComponent { - "_reactInternalFiber": [Circular], - "_reactInternalInstance": Object {}, - "context": Object {}, - "props": Object { - "Component": [Function], - "context": null, - "props": Object {}, - }, - "refs": Object {}, - "state": Object { - "context": null, - "mount": true, - "props": Object {}, - }, - "updater": Object { - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - }, - }, - "tag": 2, - "treeBaseTime": 0, - "type": [Function], - "updateQueue": null, - }, - "_debugSource": null, - "alternate": null, - "child": FiberNode { - "_debugID": 6, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 70, - }, - "alternate": null, - "child": FiberNode { - "_debugID": 7, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 71, - }, - "alternate": null, - "child": FiberNode { - "_debugID": 8, - "_debugIsCurrentlyTiming": false, - "_debugOwner": [Circular], - "_debugSource": Object { - "fileName": "/Users/angelapoland/ada/JavaScript-Projects/inspiration-board/src/components/Board.js", - "lineNumber": 72, - }, - "alternate": null, - "child": null, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children": undefined, - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children": undefined, - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": FiberNode { - "_debugID": 9, - "_debugIsCurrentlyTiming": false, - "_debugOwner": null, - "_debugSource": null, - "alternate": null, - "child": null, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 1, - "key": null, - "lastEffect": null, - "memoizedProps": Array [], - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Array [], - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode": null, - "tag": 10, - "treeBaseTime": 0, - "type": null, - "updateQueue": null, - }, - "stateNode":

, - "tag": 5, - "treeBaseTime": 0, - "type": "p", - "updateQueue": null, - }, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children": Array [ -

, - Array [], - ], - "className": "board", - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children": Array [ -

, - Array [], - ], - "className": "board", - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode":

-

-

, - "tag": 5, - "treeBaseTime": 0, - "type": "section", - "updateQueue": null, - }, - "effectTag": 0, - "expirationTime": 0, - "firstEffect": null, - "index": 0, - "key": null, - "lastEffect": null, - "memoizedProps": Object { - "children":
-

-

, - }, - "memoizedState": null, - "mode": 0, - "nextEffect": null, - "pendingProps": Object { - "children":
-

-

, - }, - "ref": null, - "return": [Circular], - "selfBaseTime": 0, - "sibling": null, - "stateNode":
-
+ + +
+
+ + +
+ + +
+ +

+

+

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

+ Create new card: +

+
+
+ + +
+
+ + +
+ +
+
+`; From f3acfb6df216cebc446e1d0e575059d762228b69 Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Sun, 17 Jun 2018 20:16:20 -0700 Subject: [PATCH 13/15] adds one interactive test --- src/components/NewCardForm.test.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index 9deb8718..96ff187e 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -11,4 +11,34 @@ describe('NewCardForm', () => { wrapper.unmount(); }); + + test('When a user enters text in the text field the field is updated', () => { + // arrange + // shallow mounted the wrapper + + const wrapper = shallow({}} />) + + // find the input field + + let nameField = wrapper.find('input[name="text"]'); + + // Act + nameField.simulate('change', { + target: { + name: 'text', + value: 'Boomer loves you', + }, + }); + + //force the onChange event + wrapper.update(); + nameField = wrapper.find('input[name="text"]'); + + //assert + expect(nameField.getElement().props.value).toEqual('Boomer loves you'); + }); + + + }); From 4188c4765fcc3397df901d338614e10c70e4b91a Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Sun, 17 Jun 2018 20:19:39 -0700 Subject: [PATCH 14/15] small styling adjustment to card form --- src/components/NewCardForm.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 3c231464..c4b61a61 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -65,7 +65,9 @@ class NewCardForm extends Component { {EMOJI_LIST.map(x => )};
+
+
); From 0331a3d2217f0c5407e93c1062f385f724a6be3b Mon Sep 17 00:00:00 2001 From: AngelaPoland Date: Mon, 10 Dec 2018 17:58:04 -0800 Subject: [PATCH 15/15] dockerized this app WOOOO --- .dockerignore | 1 + Dockerfile | 20 ++++++++++++++++++++ src/components/Board.js | 1 - 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 .dockerignore create mode 100644 Dockerfile diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..19f374ad --- /dev/null +++ b/.dockerignore @@ -0,0 +1 @@ +#node_modules diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..0e878c39 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,20 @@ +# base image +FROM node:9.6.1 + +# set working directory +RUN mkdir /usr/inspiration-board +WORKDIR /usr/inspiration-board + +# add `/usr/src/app/node_modules/.bin` to $PATH +ENV PATH /usr/inspiration-board/node_modules/.bin:$PATH + +# install and cache app dependencies +COPY . /usr/inspiration-board +#COPY package.json /usr/src/app/package.json + + +RUN npm install --silent +RUN npm install react-scripts@1.1.1 -g --silent + +# start app +CMD ["npm", "start"] diff --git a/src/components/Board.js b/src/components/Board.js index c4652141..3ee3f545 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -69,7 +69,6 @@ class Board extends Component { message: error.message, }); }) - } deleteCard = (id) => {