From e1029e2aee40c759c138bd9b3cf63afd3262b62d Mon Sep 17 00:00:00 2001 From: Riyo Date: Fri, 21 Jun 2019 15:17:48 -0700 Subject: [PATCH 1/4] finished 1st and 2nd wave --- src/App.js | 2 +- src/components/Board.js | 46 +++++++++++++++++++++++++++++++---- src/components/Card.js | 33 +++++++++++++++++++++++-- src/components/NewCardForm.js | 4 +++ src/data/card-data.json | 2 +- 5 files changed, 78 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index c4854e15..51e87ada 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ class App extends Component { ); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..830a5255 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -6,6 +6,7 @@ import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; +import { pseudoRandomBytes } from 'crypto'; class Board extends Component { constructor() { @@ -16,18 +17,53 @@ class Board extends Component { }; } + componentDidMount() { + const fullUrl = this.props.url + this.props.boardName + "/cards" + axios.get(fullUrl) + .then((response) => { + console.log(response.data) + const cards = response.data.map((card) => { + const newCard = { + quote: card.card.text, + emoji: card.card.emoji, + } + return newCard; + }) + + console.log(cards) + this.setState({ cards }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + + + + render() { + console.log(this.state.cards) + const showCards = this.state.cards.map((card, index) => { + return () + }) + + return ( -
- Board +
+ {showCards}
) - } - + }; } -Board.propTypes = { +Board.propTypes = { + url: PropTypes.string.isRequired, + boardName: PropTypes.string.isRequired, }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..65f919cb 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -2,20 +2,49 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; + import './Card.css'; class Card extends Component { + // constructor(props){ + // super(props); + // this.state = { + + // } + // } + isEmoji = (emoji) => { + console.log(this.props.emoji) + if (this.props.emoji !== undefined) { + return this.props.emoji + } else { + return "" + } + } + + + render() { + console.log(this.props.quote) + const isQuote = (this.props.quote) ? this.props.quote : "" + const isEmoji = (this.props.emoji) ? this.props.emoji : "" return (
- Card +
+
+ {this.props.quote} +
+
+ {emoji.getUnicode(isEmoji)} +
+
) } } Card.propTypes = { - + quote: PropTypes.string, + emoji: PropTypes.string, }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..7bcfc3fb 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,4 +3,8 @@ 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"] +class NewCardForm extends Component { + +} 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 cefc89e6e414d13fd8893c4e7dfad317135e20ad Mon Sep 17 00:00:00 2001 From: Riyo Date: Fri, 21 Jun 2019 17:55:40 -0700 Subject: [PATCH 2/4] newcardform componenent and snapshot tests --- package-lock.json | 9 +++ package.json | 4 + src/components/Board.js | 34 +++++++-- src/components/Card.js | 28 ++++--- src/components/NewCardForm.js | 71 +++++++++++++++++ src/components/test/NewCardForm.test.js | 12 +++ .../__snapshots__/NewCardForm.test.js.snap | 76 +++++++++++++++++++ 7 files changed, 217 insertions(+), 17 deletions(-) create mode 100644 src/components/test/NewCardForm.test.js create mode 100644 src/components/test/__snapshots__/NewCardForm.test.js.snap diff --git a/package-lock.json b/package-lock.json index b89d6503..8bd0b6a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4567,6 +4567,15 @@ } } }, + "enzyme-to-json": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz", + "integrity": "sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==", + "dev": true, + "requires": { + "lodash": "^4.17.4" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", diff --git a/package.json b/package.json index c97c700f..4801fa8d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,10 @@ "devDependencies": { "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", + "enzyme-to-json": "^3.3.5", "gh-pages": "^2.0.1" + }, + "jest": { + "snapshotSerializers": ["enzyme-to-json/serializer"] } } diff --git a/src/components/Board.js b/src/components/Board.js index 830a5255..d4fe9b50 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -21,16 +21,14 @@ class Board extends Component { const fullUrl = this.props.url + this.props.boardName + "/cards" axios.get(fullUrl) .then((response) => { - console.log(response.data) const cards = response.data.map((card) => { const newCard = { - quote: card.card.text, + text: card.card.text, emoji: card.card.emoji, } return newCard; }) - console.log(cards) this.setState({ cards }); }) .catch((error) => { @@ -38,22 +36,48 @@ class Board extends Component { }); } + addCardCallback = (cardInfo) => { + const fullUrl = this.props.url + this.props.boardName + "/cards" + axios.post(fullUrl, cardInfo) + .then((response) => { + let updatedData = this.state.cards; + updatedData.push(cardInfo); + this.setState({cards: updatedData}) + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + + deleteCardCallback = (cardID) => { + const fullUrl = "https://inspiration-board.herokuapp.com/cards/:" + {cardID} + axios.delete(fullUrl) + .then((response) => { + + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + render() { - console.log(this.state.cards) const showCards = this.state.cards.map((card, index) => { return () }) return (
+ {showCards}
) diff --git a/src/components/Card.js b/src/components/Card.js index 65f919cb..2066fdfe 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -12,30 +12,32 @@ class Card extends Component { // } // } - isEmoji = (emoji) => { - console.log(this.props.emoji) - if (this.props.emoji !== undefined) { - return this.props.emoji - } else { - return "" - } - } + // isEmoji = (emoji) => { + // if (this.props.emoji !== undefined) { + // return this.props.emoji + // } else { + // return "" + // } + render() { - console.log(this.props.quote) - const isQuote = (this.props.quote) ? this.props.quote : "" + const isText = (this.props.text) ? this.props.text : "" const isEmoji = (this.props.emoji) ? this.props.emoji : "" + const id = this.props.id return (
- {this.props.quote} + {this.props.text}
{emoji.getUnicode(isEmoji)}
+
+
) @@ -43,8 +45,10 @@ class Card extends Component { } Card.propTypes = { - quote: PropTypes.string, + text: PropTypes.string, emoji: PropTypes.string, + id: PropTypes.number, + deleteCardCallback: PropTypes.func }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 7bcfc3fb..4d6a8bde 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -6,5 +6,76 @@ import './NewCardForm.css'; const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] class NewCardForm extends Component { + constructor(props) { + super(props); + this.state = { + text: "", + emoji: "", + } + } + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + + clearForm = () => { + this.setState({ + text: "", + emoji: "", + }); + } + + onFormSubmit = (event) => { + event.preventDefault(); + + const newCard = { + text: this.state.text, + emoji: this.state.emoji, + } + + this.props.addCardCallback(newCard) + this.clearForm() + } + + + emojiOptions = (emojis) => { + const select = emojis.map((emojiString) => { + return ( + + ) + }) + return select + } + + render() { + return ( +
+
+ Write a Inspirational Card! +
+
+
+