From 14c6b102a285a4fc36b2871701567e7642a94450 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:03:27 -0800 Subject: [PATCH 01/25] Basic functionality to render --- src/App.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 70 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index c4854e15..d0044362 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,85 @@ import React, { Component } from 'react'; +import axios from 'axios'; import './App.css'; import Board from './components/Board'; +import Status from './components/Status'; class App extends Component { + constructor() { + super(); + this.state = { + boardName: 'Divya', + boards: [], + boardsUrl: 'https://inspiration-board.herokuapp.com/boards/', + status: { + message: 'Successfully loaded the page', + type: 'success' + } + }; + } + + updateStatus = (message, type) => { + this.setState({ + status: { + message: message, + type: type + } + }); + } + + componentDidMount() { + this.updateStatus('Retrieving inspirational boards', 'success'); + + axios.get(this.state.boardsUrl) + .then((response) => { + this.updateStatus('Successfully retrieved all boards', 'success'); + let updatedBoards = response.data.map((boardInfo) => { + return boardInfo.board; + }); + this.setState({ + boards: updatedBoards + }); + }) + .catch((error) => { + this.updateStatus(`There was a problem retrieving the boards: ${error.message}`, 'error'); + }); + } + + onBoardSelectionChange = (event) => { + let updatedBoardName = { + boardName: event.target.value + }; + this.setState(updatedBoardName); + } + render() { + const boardOptions = this.state.boards.map((board) => { + return + }); return (

Inspiration Board

+ + +
+ +
+
); From d93a9f45417f9358ebd98bacfff1e592557a31e1 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:03:50 -0800 Subject: [PATCH 02/25] Viewing for each card --- src/components/Card.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..a7d44a78 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,21 +1,40 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; - import './Card.css'; + class Card extends Component { + static propTypes = { + id: PropTypes.number.isRequired, + text: PropTypes.string.isRequired, + emoji: PropTypes.string, + removeCardCallback: PropTypes.func.isRequired + }; + + removeThisCard = () => { + this.props.removeCardCallback(this.props.id); + }; + render() { + + + let emojiSymbol = ''; + if (this.props.emoji != null) { + emojiSymbol = emoji.getUnicode(this.props.emoji); + } return ( -
- Card -
+
+
+

+ { this.props.text } + { emojiSymbol } +

+ +
+
) } } -Card.propTypes = { - -}; - export default Card; From c8eb85cf2ef58630c27b58972e154a092b909201 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:04:06 -0800 Subject: [PATCH 03/25] Creation of new card --- src/components/NewCardForm.js | 69 +++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..ee3b0157 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,72 @@ 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 { + static propTypes = { + addCardCallback: PropTypes.func.isRequired, + }; + + constructor() { + super(); + this.state = { + text: '', + emoji: '' + }; + } + + onInputChange = (event) => { + let newState = {}; + newState[event.target.name] = event.target.value; + this.setState(newState); + } + + onFormSubmit = (event) => { + event.preventDefault(); + this.props.addCardCallback(this.state); + this.setState({ + text: '', + emoji: '' + }); + } + + render() { + const emoji_options = EMOJI_LIST.map((emojiCode, index) => { + return ; + }); + return ( +
+

Add a new inspirational note to this board.

+
+ + +
+
+ + +
+
+ +
+
+ ); + } +} + +export default NewCardForm; From 0e3ca252f7fb875715b31916798080bf15262a64 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:04:22 -0800 Subject: [PATCH 04/25] File for status created --- src/components/Status.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/Status.js diff --git a/src/components/Status.js b/src/components/Status.js new file mode 100644 index 00000000..f01dc7cb --- /dev/null +++ b/src/components/Status.js @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import './Status.css'; + +class Status extends Component { + static propTypes = { + message: PropTypes.string.isRequired, + type: PropTypes.string.isRequired + }; + + render() { + return ( +
+ { this.props.message } +
+ ); + } +} + +export default Status; From 1119b4ad40728466beab8f29d9d302e39f6b3abf Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:04:41 -0800 Subject: [PATCH 05/25] Board functionality --- src/components/Board.js | 108 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 97 insertions(+), 11 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..b6a913c4 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,29 +5,115 @@ import axios from 'axios'; import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; -import CARD_DATA from '../data/card-data.json'; + class Board extends Component { - constructor() { - super(); + static propTypes = { + url: PropTypes.string.isRequired, + boardName: PropTypes.string.isRequired, + updateStatusCallback: PropTypes.func.isRequired + }; + constructor(props) { + super(); this.state = { - cards: [], + boardName: props.boardName, + cards: [] }; } + getBoardData = (boardName) => { + this.props.updateStatusCallback(`Loading cards for ${this.props.boardName}`, 'success'); + const BOARD_URL = `${this.props.url + boardName}/cards`; + + axios.get(BOARD_URL) + .then((response) => { + this.props.updateStatusCallback(`Successfully loaded cards for ${boardName}`, 'success'); + const cardData = response.data.slice(0, 100); + this.setState({ + cards: cardData + }); + }) + .catch((error) => { + this.props.updateStatusCallback(`There was a problem loading cards: ${error.message}`, 'error'); + }) + } + + componentDidMount() { + this.getBoardData(this.props.boardName); + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.boardName !== this.state.boardName) { + this.setState({ + boardName: nextProps.boardName + }); + this.getBoardData(nextProps.boardName); + } + } + + addCard = (newCard) => { + this.props.updateStatusCallback(`Creating new card`, 'success'); + + const BOARD_URL = `${this.props.url + this.props.boardName}/cards`; + + + axios.post(BOARD_URL, newCard) + .then((response) => { + this.props.updateStatusCallback(`New card created!`, 'success'); + const updatedCards = this.state.cards; + updatedCards.unshift({ + card: response.data.card + }); + this.setState({ + cards: updatedCards + }); + }) + .catch((error) => { + this.props.updateStatusCallback(`Something went wrong trying to create a new card: ${error.message}`, 'error'); + }); + } + + removeCard = (id) => { + const DELETE_URL = `${this.props.url + this.props.boardName}/cards/${id}`; + this.props.updateStatusCallback(`Removing card ${id}`, 'success'); + + axios.delete(DELETE_URL) + .then(() => { + this.props.updateStatusCallback(`Successfully removed card ${id}`, 'success'); + const updatedCards = this.state.cards.filter((cardInfo) => { + if (cardInfo.card.id !== id) { + return cardInfo + } + }); + this.setState({ + cards: updatedCards + }); + }) + .catch((error) => { + this.props.updateStatusCallback(`Encountered an error trying to remove card ${id}: ${error.message}`, 'error'); + }); + } + render() { + const cards = this.state.cards.map((cardInfo) => { + return + }); return ( -
- Board -
+
+ + { cards } +
) } } -Board.propTypes = { - -}; - export default Board; From 62c002f9406df1f2675831d90581e84e253531b7 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:04:57 -0800 Subject: [PATCH 06/25] Styling for App --- src/App.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 5db345f2..21907fc1 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,3 @@ - * { box-sizing: border-box; } @@ -33,3 +32,13 @@ h1, h2 { transform: rotate(-3deg) skew(-3deg); } + +.board-selection { + text-align: center; +} + +.board-selection__select { + font-family: 'Raleway', sans-serif; + margin: 20px auto; + font-size: 1.5em; +} From 690836a14eb4cebf1c050f25b81da400288770b4 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:05:14 -0800 Subject: [PATCH 07/25] NewCard styled --- src/components/NewCardForm.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index d11b9ad4..b008a133 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -1,9 +1,8 @@ -/* The Modal (background) */ - .new-card-form { width: 50%; margin: auto; padding-bottom: 4rem; + text-align: center; } .new-card-form__header { @@ -13,7 +12,9 @@ .new-card-form__form { font-size: 1.5em; - display: grid; + display: block; + margin: 0 15%; + width: 70%; grid-template-columns: [labels] auto [controls] 1fr; grid-auto-flow: row; grid-gap: .8em; @@ -22,6 +23,7 @@ .new-card-form__form-label { grid-column: labels; grid-row: auto; + display: block; } .new-card-form__form-select, @@ -37,4 +39,9 @@ background-color: inherit; border: 1px solid black; font-size: 1em; + margin-top: 10px; +} + +.new-card-form__form-textarea { + resize: none; } From 60b59caba1dfcb470a4b2b9cba4d66f7f0a41a97 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:05:31 -0800 Subject: [PATCH 08/25] Status - css --- src/components/Status.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/Status.css diff --git a/src/components/Status.css b/src/components/Status.css new file mode 100644 index 00000000..5875b0ca --- /dev/null +++ b/src/components/Status.css @@ -0,0 +1,17 @@ +.status { + /* border: solid 1px green; */ + display: block; + text-align: center; + width: 50%; + margin: 0 auto; + height: 50px; + line-height: 50px; +} + +.success { + background-color: lightgreen; +} + +.error { + background-color: lightcoral; +} From 32f1550016d3391c32193aec5ce5e89162621355 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:05:46 -0800 Subject: [PATCH 09/25] Board testing --- src/components/Board.test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..c33978f7 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; +import Board from './Board'; + +describe('Board', () => { + test('That it matches an existing snapshot', () => { + const board = shallow( + {}} /> + ); + + expect(board).toMatchSnapshot(); + + board.unmount(); + }); +}); From 1d7073d52138f978a79de96350079e389641a13e Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:05:59 -0800 Subject: [PATCH 10/25] File for Card testing created --- src/components/Card.test.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/Card.test.js diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..58f00d89 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,21 @@ +import React from 'react'; +import ReactDOM from 'react'; +import { shallow } from 'enzyme'; +import Card from './Card'; + +describe('Card', () => { + test('That it matches an existing snapshot', () => { + const card = shallow( + {}} + /> + ); + + expect(card).toMatchSnapshot(); + + card.unmount(); + }); +}); From 2b61869fc7ca46203832487ac5082e1aabb56259 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:06:13 -0800 Subject: [PATCH 11/25] NewCardForm.test --- src/components/NewCardForm.test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..5aad6e27 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; +import NewCardForm from './NewCardForm'; + +describe('NewCardForm', () => { + test('That it matches an existing snapshot', () => { + const cardForm = shallow( + {} } /> + ); + + expect(cardForm).toMatchSnapshot(); + + cardForm.unmount(); + }); +}); From ac4309792d351aa85d59fd0fff90a7c6bad5a7c3 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:06:30 -0800 Subject: [PATCH 12/25] Board snapshot testing --- src/components/__snapshots__/Board.test.js.snap | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/__snapshots__/Board.test.js.snap diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..d90b4404 --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,9 @@ +exports[`Board That it matches an existing snapshot 1`] = ` +
+ +
+`; From 42305cb2aabeb4b3fc9107f66870e44eda8cc4b4 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:06:45 -0800 Subject: [PATCH 13/25] Card.js - snapshot testing --- .../__snapshots__/Card.test.js.snap | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/components/__snapshots__/Card.test.js.snap diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..a697592d --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,23 @@ +exports[`Card That it matches an existing snapshot 1`] = ` +
+
+

+ test message + +

+ +
+
+`; From c150ade6772d26edd2da8c7e1e4d0bb4beef7e44 Mon Sep 17 00:00:00 2001 From: Divya Date: Mon, 17 Dec 2018 23:07:04 -0800 Subject: [PATCH 14/25] NewCardForm testing snapshot --- .../__snapshots__/NewCardForm.test.js.snap | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..eb090014 --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,88 @@ +exports[`NewCardForm That it matches an existing snapshot 1`] = ` +
+

+ Add a new inspirational note to this board. +

+
+ + -
-
- - -
-
- -
-
- ); +
+ +