From 00633a36a2f06a41f801cabdd74d588535e81737 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Mon, 11 Jun 2018 14:45:30 -0700 Subject: [PATCH 01/13] npm install and add boiler plate to NewCardForm component --- src/components/NewCardForm.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..d782bf50 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,9 @@ 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 { + +} + +export default NewCardForm; From bd272fc3f3ebbbc64fb49d7eccd3928cd70bd901 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Mon, 11 Jun 2018 15:16:12 -0700 Subject: [PATCH 02/13] add functionality for board to read hardcoded data and render card components --- src/components/Board.js | 21 +++++++++++++++++---- src/components/Card.js | 20 +++++++++++++------- src/data/card-data.json | 2 +- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..b4381fa4 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -16,18 +16,31 @@ class Board extends Component { }; } + componentDidMount(){ + this.setState({ + cards: CARD_DATA.cards + }) + } + render() { + const cardCollection = this.state.cards.map((card, index) =>{ + return + }); return (
- Board + this is a board! + {cardCollection}
) } } -Board.propTypes = { - -}; +// Board.propTypes = { +// +// }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..9f8fe8a5 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,13 +5,19 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { - render() { - return ( -
- Card -
- ) - } + static propTypes = { + text: PropTypes.string, + emoji: PropTypes.string + } + + render() { + return ( +
+
{this.props.text}
+
{this.props.emoji}
+
+ ) + } } Card.propTypes = { 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 ab988a2c377df9d29ca192b424f5cdf49a4e3fa0 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Mon, 11 Jun 2018 15:22:48 -0700 Subject: [PATCH 03/13] Add styles to return elements in card and board --- src/components/Board.js | 3 +-- src/components/Card.js | 5 ++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index b4381fa4..c946cc75 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -30,8 +30,7 @@ class Board extends Component { /> }); return ( -
- this is a board! +
{cardCollection}
) diff --git a/src/components/Card.js b/src/components/Card.js index 9f8fe8a5..f6ff8786 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -13,7 +13,10 @@ class Card extends Component { render() { return (
-
{this.props.text}
+
+

{this.props.text}

+
{this.props.emoji}
+
{this.props.emoji}
) From 6a7d2dca5bda03f6271b81dca2929d4c0f1747f3 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Tue, 12 Jun 2018 11:15:21 -0700 Subject: [PATCH 04/13] Add helper methods to render text and emoji ONLY when provided, instead of all the time --- src/components/Board.js | 23 +++++++++++++++-------- src/components/Card.js | 22 ++++++++++++++++------ 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index c946cc75..4e8bde2d 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,6 +7,7 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; +const BOARD_URL = "https://inspiration-board.herokuapp.com/boards/karinna/cards" class Board extends Component { constructor() { super(); @@ -17,16 +18,25 @@ class Board extends Component { } componentDidMount(){ - this.setState({ - cards: CARD_DATA.cards + + axios.get(BOARD_URL) + + .then((response) =>{ + this.setState({ + cards: response.data + }) }) + .catch((error) => { + + }); + } render() { - const cardCollection = this.state.cards.map((card, index) =>{ + const cardCollection = this.state.cards.map((obj, index) =>{ return }); return ( @@ -38,8 +48,5 @@ class Board extends Component { } -// Board.propTypes = { -// -// }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index f6ff8786..28a87036 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,26 +5,36 @@ import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + static propTypes = { text: PropTypes.string, emoji: PropTypes.string } + getEmoji = () => { + if (this.props.emoji !== undefined && this.props.emoji != null) { + return
{emoji.getUnicode(this.props.emoji)}
+ } + } + + getText = () => { + if (this.props.text !== undefined && this.props.text != null) { + return

{this.props.text}

+ } + } + + render() { return (
-

{this.props.text}

-
{this.props.emoji}
+ {this.getText()} + {this.getEmoji()}
-
{this.props.emoji}
) } } -Card.propTypes = { - -}; export default Card; From 0173717a28a162047ec8a02edc0c6ac314f0029c Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Tue, 12 Jun 2018 11:22:40 -0700 Subject: [PATCH 05/13] Refactor helper methods --- src/components/Card.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index 28a87036..e5939567 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -12,13 +12,13 @@ class Card extends Component { } getEmoji = () => { - if (this.props.emoji !== undefined && this.props.emoji != null) { + if (this.props.emoji != null) { return
{emoji.getUnicode(this.props.emoji)}
} } getText = () => { - if (this.props.text !== undefined && this.props.text != null) { + if (this.props.text != null) { return

{this.props.text}

} } From a266449df5231660e3b3192942cf92e65bdccc22 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Tue, 12 Jun 2018 11:54:43 -0700 Subject: [PATCH 06/13] Add button to card. It does nothing yet --- src/components/Card.css | 2 ++ src/components/Card.js | 1 + 2 files changed, 3 insertions(+) diff --git a/src/components/Card.css b/src/components/Card.css index e86d4329..4fe39eba 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -12,6 +12,7 @@ display: grid; grid-template-columns: 1fr 5fr 1fr; + grid-template-rows: .5fr 5fr; align-items: center; } @@ -43,5 +44,6 @@ .card__delete { align-self: start; + grid-column-start: 3; font-family: 'Permanent Marker', Helvetica, sans-serif; } diff --git a/src/components/Card.js b/src/components/Card.js index e5939567..16ca0c46 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -27,6 +27,7 @@ class Card extends Component { render() { return (
+
X
{this.getText()} {this.getEmoji()} From f44008ca64f9ca329b71875c79ad95a49b5acced Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Wed, 13 Jun 2018 15:37:01 -0700 Subject: [PATCH 07/13] Add functionality for adding a new card to api and to state --- src/components/Board.js | 73 ++++++++++++++++++++++++++++------- src/components/Card.css | 2 + src/components/Card.js | 12 +++++- src/components/NewCardForm.js | 69 +++++++++++++++++++++++++++++++++ 4 files changed, 142 insertions(+), 14 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 4e8bde2d..28f5b48f 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; +import emoji from 'emoji-dictionary'; + import './Board.css'; import Card from './Card'; @@ -8,22 +10,26 @@ import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; const BOARD_URL = "https://inspiration-board.herokuapp.com/boards/karinna/cards" + class Board extends Component { - constructor() { - super(); + constructor() { + super(); - this.state = { - cards: [], - }; - } + this.state = { + cards: [], + }; + } componentDidMount(){ axios.get(BOARD_URL) .then((response) =>{ + console.log(response.data); + this.setState({ cards: response.data + }) }) .catch((error) => { @@ -32,19 +38,60 @@ class Board extends Component { } - render() { + addCard = (card) => { + card.emoji = emoji.getName(card.emoji) + + axios.post(BOARD_URL, card) + + .then((response) => { + let updatedCards = this.state.cards; + updatedCards.push({card}); + this.setState({ cards: updatedCards }); + }) + .catch((error) => { + + }); + + } + + deleteCard = (card) => { + console.log(card); + axios.delete(`${BOARD_URL}/${card.props.id}`) + .then((response) => { + console.log("IT WORKED"); + + + }) + .catch((error) => { + console.log("IT DID NOT WORK :("); + + }); + } + + render() { + const cardCollection = this.state.cards.map((obj, index) =>{ return }); - return ( -
- {cardCollection} -
- ) - } + + return ( +
+
+ +
+
+ {cardCollection} +
+
+ ) + } } diff --git a/src/components/Card.css b/src/components/Card.css index 4fe39eba..977e2ddf 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -45,5 +45,7 @@ .card__delete { align-self: start; grid-column-start: 3; + background: inherit; + border: none; font-family: 'Permanent Marker', Helvetica, sans-serif; } diff --git a/src/components/Card.js b/src/components/Card.js index 16ca0c46..04d740a8 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -7,6 +7,7 @@ import './Card.css'; class Card extends Component { static propTypes = { + id: PropTypes.number, text: PropTypes.string, emoji: PropTypes.string } @@ -23,11 +24,20 @@ class Card extends Component { } } + onButtonClick = () => { + this.props.deleteCardCallback(this) + } + render() { return (
-
X
+
{this.getText()} {this.getEmoji()} diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index d782bf50..bd728d11 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -7,6 +7,75 @@ const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_ class NewCardForm extends Component { + static propTypes = { + addCardCallback: PropTypes.func.isRequired + } + + constructor(){ + super(); + this.state = { + text: '', + emoji: '' + } + } + + onInputChange = (event) => { + let updatedInput = {}; + updatedInput[event.target.name] = event.target.value; + + this.setState( updatedInput ); + } + + onFormSubmit = (event) => { + event.preventDefault(); + this.props.addCardCallback(this.state); + + this.setState({ + text: '', + emoji: '' + }); + } + + render(){ + + const emojiInput = EMOJI_LIST.map((emo, key) => { + return + }); + + + return( +
+ + + + + +
+ ); + } } export default NewCardForm; From cd36a4b94574ecb5b9cdb41787e1b271a446e775 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Wed, 13 Jun 2018 16:37:23 -0700 Subject: [PATCH 08/13] Add functionality for the delete request in axios and remove from state --- src/components/Board.js | 8 ++++++++ src/components/Card.js | 2 +- src/components/NewCardForm.js | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 28f5b48f..722f0c0b 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -59,7 +59,14 @@ class Board extends Component { axios.delete(`${BOARD_URL}/${card.props.id}`) .then((response) => { console.log("IT WORKED"); + let updatedCards = this.state.cards; + + updatedCards.splice(card.props.index,1) + + this.setState({ + cards: updatedCards + }) }) .catch((error) => { @@ -75,6 +82,7 @@ class Board extends Component { text={obj.card.text} emoji={obj.card.emoji} id={obj.card.id} + index={index} deleteCardCallback={this.deleteCard} /> }); diff --git a/src/components/Card.js b/src/components/Card.js index 04d740a8..39e56e64 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -7,7 +7,7 @@ import './Card.css'; class Card extends Component { static propTypes = { - id: PropTypes.number, + index: PropTypes.number, text: PropTypes.string, emoji: PropTypes.string } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index bd728d11..9c15d751 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"] +const EMOJI_LIST = ["", "heart_eyes", "beer", "pizza", "laughing", "kissing_heart", "taco", "sparkling_heart", "bug", "sunflower", "dog"] class NewCardForm extends Component { From 3651b195e98ae958f2de6b1b003b8b12b011b434 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Fri, 15 Jun 2018 14:28:00 -0700 Subject: [PATCH 09/13] Add Status file and make sure it renders in App. Not working yet --- src/App.js | 30 +++++++++++++++++------------- src/components/Status.js | 11 +++++++++++ 2 files changed, 28 insertions(+), 13 deletions(-) create mode 100644 src/components/Status.js diff --git a/src/App.js b/src/App.js index c4854e15..a3b46bf5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,25 @@ import React, { Component } from 'react'; import './App.css'; import Board from './components/Board'; +import Status from './components/Status' class App extends Component { - render() { - return ( -
-
-

Inspiration Board

-
- -
- ); - } + render() { + return ( +
+
+

Inspiration Board

+
+ + + + +
+ ); + } } export default App; diff --git a/src/components/Status.js b/src/components/Status.js new file mode 100644 index 00000000..4c82c737 --- /dev/null +++ b/src/components/Status.js @@ -0,0 +1,11 @@ +import React from 'react'; + +class Status extends React.Component { + render(){ + return ( +

THIS IS A STATUS

+ ) + } +} + +export default Status; From c8707854a45af649c4c6c10df1ac8c3da531b840 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Sat, 16 Jun 2018 11:08:46 -0700 Subject: [PATCH 10/13] add status --- src/App.js | 31 +++++++++++++++++++++++++++++-- src/components/Board.js | 17 +++++++++-------- src/components/Status.js | 11 ++++++++++- 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index a3b46bf5..92a49900 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,29 @@ import Board from './components/Board'; import Status from './components/Status' class App extends Component { + + constructor(){ + super(); + + this.state = { + status: { + message: "this is a message", + type: "and a type" + } + } + + } + + updateStatus = (mess, typ) => { + this.setState({ + status: { + message: mess, + type: typ + } + }) + } + + render() { return (
@@ -11,11 +34,15 @@ class App extends Component {

Inspiration Board

- - + +
); diff --git a/src/components/Board.js b/src/components/Board.js index 722f0c0b..1617239b 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -12,11 +12,14 @@ import CARD_DATA from '../data/card-data.json'; const BOARD_URL = "https://inspiration-board.herokuapp.com/boards/karinna/cards" class Board extends Component { + static propTypes = { + updateStatusCallback: PropTypes.func + } constructor() { super(); this.state = { - cards: [], + cards: [] }; } @@ -25,15 +28,14 @@ class Board extends Component { axios.get(BOARD_URL) .then((response) =>{ - console.log(response.data); + this.props.updateStatusCallback("Successfully loaded board", "Success") this.setState({ cards: response.data - }) }) .catch((error) => { - + this.props.updateStatusCallback(`Failed to load: ${error.message}`) }); } @@ -49,7 +51,7 @@ class Board extends Component { this.setState({ cards: updatedCards }); }) .catch((error) => { - + this.props.updateStatusCallback(`Failed to add Card: ${error.message}`) }); } @@ -58,7 +60,7 @@ class Board extends Component { console.log(card); axios.delete(`${BOARD_URL}/${card.props.id}`) .then((response) => { - console.log("IT WORKED"); + this.props.updateStatusCallback("Successfully Deleted Card", "Success") let updatedCards = this.state.cards; updatedCards.splice(card.props.index,1) @@ -70,8 +72,7 @@ class Board extends Component { }) .catch((error) => { - console.log("IT DID NOT WORK :("); - + this.props.updateStatusCallback(`Failed to add card: ${error.message}`) }); } diff --git a/src/components/Status.js b/src/components/Status.js index 4c82c737..f95bcf37 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -1,9 +1,18 @@ import React from 'react'; +import PropTypes from 'prop-types' class Status extends React.Component { + static propTypes = { + message: PropTypes.string, + type: PropTypes.string + } render(){ return ( -

THIS IS A STATUS

+
+

THIS IS A STATUS

+

and message: {this.props.message}

+

and type: {this.props.type}

+
) } } From 18a17a82ba51ece52a21e015b40d895e6d6cb47f Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Sat, 16 Jun 2018 11:37:41 -0700 Subject: [PATCH 11/13] Refactor status component --- src/components/Board.css | 10 ++++++++++ src/components/Board.js | 14 ++++++++------ src/components/Card.js | 3 ++- src/components/NewCardForm.js | 16 ++++++++++++++-- src/components/Status.js | 6 ++---- 5 files changed, 36 insertions(+), 13 deletions(-) diff --git a/src/components/Board.css b/src/components/Board.css index ba21589d..d6067eca 100644 --- a/src/components/Board.css +++ b/src/components/Board.css @@ -12,3 +12,13 @@ list-style-type: none; padding: 0; } + +.success { + background-color: grey; + color: darkgreen; +} + +.failure { + background-color: grey; + color: darkred; +} diff --git a/src/components/Board.js b/src/components/Board.js index 1617239b..c475b470 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -9,7 +9,7 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const BOARD_URL = "https://inspiration-board.herokuapp.com/boards/karinna/cards" +const BOARD_URL = "https:/inspiration-board.herokuapp.com/boards/karinna/cards" class Board extends Component { static propTypes = { @@ -28,14 +28,15 @@ class Board extends Component { axios.get(BOARD_URL) .then((response) =>{ - this.props.updateStatusCallback("Successfully loaded board", "Success") + this.props.updateStatusCallback("Successfully loaded board", "success") this.setState({ cards: response.data }) }) + .catch((error) => { - this.props.updateStatusCallback(`Failed to load: ${error.message}`) + this.props.updateStatusCallback(`Failed to load: ${error.message}`, "failure") }); } @@ -49,9 +50,10 @@ class Board extends Component { let updatedCards = this.state.cards; updatedCards.push({card}); this.setState({ cards: updatedCards }); + this.props.updateStatusCallback(`Successfully added card`, "success") }) .catch((error) => { - this.props.updateStatusCallback(`Failed to add Card: ${error.message}`) + this.props.updateStatusCallback(`Failed to add Card: ${error.message}`, "failure") }); } @@ -60,7 +62,7 @@ class Board extends Component { console.log(card); axios.delete(`${BOARD_URL}/${card.props.id}`) .then((response) => { - this.props.updateStatusCallback("Successfully Deleted Card", "Success") + this.props.updateStatusCallback("Successfully Deleted Card", "success") let updatedCards = this.state.cards; updatedCards.splice(card.props.index,1) @@ -72,7 +74,7 @@ class Board extends Component { }) .catch((error) => { - this.props.updateStatusCallback(`Failed to add card: ${error.message}`) + this.props.updateStatusCallback(`Failed to add card: ${error.message}`, "failure") }); } diff --git a/src/components/Card.js b/src/components/Card.js index 39e56e64..52a0866e 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -9,7 +9,8 @@ class Card extends Component { static propTypes = { index: PropTypes.number, text: PropTypes.string, - emoji: PropTypes.string + emoji: PropTypes.string, + deleteCardCallback: PropTypes.func.isRequired } getEmoji = () => { diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 9c15d751..98defab2 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,7 +3,19 @@ import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; import './NewCardForm.css'; -const EMOJI_LIST = ["", "heart_eyes", "beer", "pizza", "laughing", "kissing_heart", "taco", "sparkling_heart", "bug", "sunflower", "dog"] +const EMOJI_LIST = [ + "", + "heart_eyes", + "beer", + "pizza", + "laughing", + "kissing_heart", + "taco", + "sparkling_heart", + "bug", + "sunflower", + "dog" +] class NewCardForm extends Component { @@ -39,7 +51,7 @@ class NewCardForm extends Component { render(){ const emojiInput = EMOJI_LIST.map((emo, key) => { - return }); diff --git a/src/components/Status.js b/src/components/Status.js index f95bcf37..1419b582 100644 --- a/src/components/Status.js +++ b/src/components/Status.js @@ -8,10 +8,8 @@ class Status extends React.Component { } render(){ return ( -
-

THIS IS A STATUS

-

and message: {this.props.message}

-

and type: {this.props.type}

+
+

{this.props.message}

) } From 83c20f5892b108af9dc6083defb2e61e078d0b50 Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Sun, 17 Jun 2018 20:59:05 -0700 Subject: [PATCH 12/13] Add drop down to change board --- src/App.js | 22 +++++++++-- src/components/Board.js | 40 +++++++++++++------ src/components/BoardSelection.js | 68 ++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 src/components/BoardSelection.js diff --git a/src/App.js b/src/App.js index 92a49900..6b0a64bd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import './App.css'; import Board from './components/Board'; -import Status from './components/Status' +import Status from './components/Status'; +import BoardSelection from './components/BoardSelection'; class App extends Component { @@ -12,7 +13,9 @@ class App extends Component { status: { message: "this is a message", type: "and a type" - } + }, + board: 'karinna', + url: "https://inspiration-board.herokuapp.com/boards" } } @@ -26,6 +29,12 @@ class App extends Component { }) } + updateBoard = (name) => { + this.setState({ + board: name + }); + } + render() { return ( @@ -34,14 +43,19 @@ class App extends Component {

Inspiration Board

+ +
diff --git a/src/components/Board.js b/src/components/Board.js index c475b470..3e2d4404 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -9,24 +9,28 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const BOARD_URL = "https:/inspiration-board.herokuapp.com/boards/karinna/cards" class Board extends Component { + static propTypes = { - updateStatusCallback: PropTypes.func + updateStatusCallback: PropTypes.func, + url: PropTypes.string, + name: PropTypes.string } constructor() { super(); this.state = { - cards: [] + cards: [], + name: null }; + } - componentDidMount(){ - axios.get(BOARD_URL) + componentDidMount(){ + axios.get(`${this.props.url}/${this.props.name}/cards`) .then((response) =>{ this.props.updateStatusCallback("Successfully loaded board", "success") @@ -34,17 +38,33 @@ class Board extends Component { cards: response.data }) }) - .catch((error) => { this.props.updateStatusCallback(`Failed to load: ${error.message}`, "failure") }); } + componentDidUpdate(prop, state) { + if (prop.name !== this.props.name) { + axios.get(`${this.props.url}/${prop.name}/cards`) + .then((response) =>{ + this.props.updateStatusCallback("Successfully loaded board", "success") + + this.setState({ + cards: response.data, + name: prop.name + }) + }) + .catch((error) => { + this.props.updateStatusCallback(`Failed to load: ${error.message}`, "failure") + }); + } + } + addCard = (card) => { card.emoji = emoji.getName(card.emoji) - axios.post(BOARD_URL, card) + axios.post(`${this.props.url}/${this.props.name}/cards`, card) .then((response) => { let updatedCards = this.state.cards; @@ -60,18 +80,14 @@ class Board extends Component { deleteCard = (card) => { console.log(card); - axios.delete(`${BOARD_URL}/${card.props.id}`) + axios.delete(`${this.props.url}/${this.props.name}/cards/${card.props.id}`) .then((response) => { this.props.updateStatusCallback("Successfully Deleted Card", "success") let updatedCards = this.state.cards; - updatedCards.splice(card.props.index,1) - - this.setState({ cards: updatedCards }) - }) .catch((error) => { this.props.updateStatusCallback(`Failed to add card: ${error.message}`, "failure") diff --git a/src/components/BoardSelection.js b/src/components/BoardSelection.js new file mode 100644 index 00000000..84abbee3 --- /dev/null +++ b/src/components/BoardSelection.js @@ -0,0 +1,68 @@ +import React from 'react'; +import axios from 'axios'; +import PropTypes from 'prop-types' + +class BoardSelection extends React.Component { + + static propTypes = { + updateBoardCallback: PropTypes.func.isRequired, + url: PropTypes.string.isRequired, + board: PropTypes.string + } + + constructor(){ + super(); + this.state = { + boards: [] + } + } + + componentDidMount(){ + axios.get(this.props.url) + .then((response) => { + + const updatedNames = response.data.map((obj, index) => { + return obj.board.name + }); + + this.setState({ + boards: updatedNames + }) + }) + .catch((error) => { + + }); + } + onBoardUpdate = (event) => { + console.log("in update!"); + this.props.updateBoardCallback(event.target.value); + this.setState({ + board: event.target.value + }) + } + + render(){ + const selectOptions = this.state.boards.map((board, index) => { + return + }); + + return ( + + ) + } + + + + + +} + + + +export default BoardSelection; From a414570e0553ffae113fb69a93fd212c46c3988e Mon Sep 17 00:00:00 2001 From: Karinna Iniguez Date: Sun, 17 Jun 2018 21:32:07 -0700 Subject: [PATCH 13/13] adding test files --- package-lock.json | 33 ++++-- package.json | 6 +- src/components/Board.js | 1 - src/components/Board.test.js | 15 +++ src/components/BoardSelection.css | 6 + src/components/BoardSelection.js | 5 +- src/components/BoardSelection.test.js | 14 +++ src/components/Card.test.js | 16 +++ src/components/NewCardForm.test.js | 13 +++ .../__snapshots__/Board.test.js.snap | 16 +++ .../__snapshots__/BoardSelection.test.js.snap | 8 ++ .../__snapshots__/Card.test.js.snap | 26 +++++ .../__snapshots__/NewCardForm.test.js.snap | 104 ++++++++++++++++++ src/setupTests.js | 2 + 14 files changed, 249 insertions(+), 16 deletions(-) create mode 100644 src/components/BoardSelection.css create mode 100644 src/components/BoardSelection.test.js create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Board.test.js.snap create mode 100644 src/components/__snapshots__/BoardSelection.test.js.snap create mode 100644 src/components/__snapshots__/Card.test.js.snap create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/package-lock.json b/package-lock.json index 0d789ea1..dbb0a44c 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", @@ -7399,7 +7408,7 @@ "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", "dev": true, "requires": { - "@types/node": "10.3.0" + "@types/node": "10.3.3" } }, "parseurl": { @@ -9005,9 +9014,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": { @@ -9208,15 +9217,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 ba61363d..bf1cced6 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,11 @@ "devDependencies": { "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", + "enzyme-to-json": "^3.3.4", "gh-pages": "^1.2.0" }, - "homepage": "http://adagold.github.io/inspiration-board" + "homepage": "http://adagold.github.io/inspiration-board", + "jest": { + "snapshotSerializers": ["enzyme-to-json/serializer"] + } } diff --git a/src/components/Board.js b/src/components/Board.js index 3e2d4404..4772a25e 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -22,7 +22,6 @@ class Board extends Component { this.state = { cards: [], - name: null }; } diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..8bc155df 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import Board from './Board'; +import {shallow} from 'enzyme'; + +describe('Board', () => { + + test('shallow mount', () => { + const board = shallow( {}} + />); + expect(board).toMatchSnapshot(); + }); +}); diff --git a/src/components/BoardSelection.css b/src/components/BoardSelection.css new file mode 100644 index 00000000..7cbe95e7 --- /dev/null +++ b/src/components/BoardSelection.css @@ -0,0 +1,6 @@ +.selection { + font-family: 'Raleway', sans-serif; + font-size: 1.25em; + text-align: center; + margin-left: 40%; +} diff --git a/src/components/BoardSelection.js b/src/components/BoardSelection.js index 84abbee3..1f1630f6 100644 --- a/src/components/BoardSelection.js +++ b/src/components/BoardSelection.js @@ -1,6 +1,7 @@ import React from 'react'; import axios from 'axios'; -import PropTypes from 'prop-types' +import PropTypes from 'prop-types'; +import './BoardSelection.css'; class BoardSelection extends React.Component { @@ -48,10 +49,10 @@ class BoardSelection extends React.Component { return ( ) diff --git a/src/components/BoardSelection.test.js b/src/components/BoardSelection.test.js new file mode 100644 index 00000000..5ba48458 --- /dev/null +++ b/src/components/BoardSelection.test.js @@ -0,0 +1,14 @@ +import React from 'react'; +import BoardSelection from './BoardSelection'; +import {shallow} from 'enzyme'; + +describe('BoardSelection', () => { + + test('shallow mount', () => { + const boardSelection = shallow( {}} + />); + expect(boardSelection).toMatchSnapshot(); + }); +}); diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..bb0ea7a1 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import Card from './Card'; +import {shallow} from 'enzyme'; + +describe('Card', () => { + + test('shallow mount', () => { + const card = shallow( {}} + />); + expect(card).toMatchSnapshot(); + }); +}); diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js index e69de29b..5572a4e9 100644 --- a/src/components/NewCardForm.test.js +++ b/src/components/NewCardForm.test.js @@ -0,0 +1,13 @@ +import React from 'react'; +import NewCardForm from './NewCardForm'; +import {shallow} from 'enzyme'; + +describe('NewCardForm', () => { + + test('shallow mount', () => { + const newForm = shallow( {}} + />); + expect(newForm).toMatchSnapshot(); + }); +}); diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..9f5a7c09 --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board shallow mount 1`] = ` +
+
+ +
+
+
+`; diff --git a/src/components/__snapshots__/BoardSelection.test.js.snap b/src/components/__snapshots__/BoardSelection.test.js.snap new file mode 100644 index 00000000..af7c9487 --- /dev/null +++ b/src/components/__snapshots__/BoardSelection.test.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BoardSelection shallow mount 1`] = ` + + + + +`; diff --git a/src/setupTests.js b/src/setupTests.js index fc7b0dce..ca4bc6ea 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,4 +1,6 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; +import { configure } from 'enzyme'; +configure({ adapter: new Adapter() }); Enzyme.configure({ adapter: new Adapter() });