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/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..cc41598c 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() { @@ -13,21 +14,96 @@ class Board extends Component { this.state = { cards: [], + errorMessages: "" }; } + componentDidMount() { + const fullUrl = this.props.url + this.props.boardName + "/cards" + axios.get(fullUrl) + .then((response) => { + const cards = response.data.map((card) => { + const newCard = { + text: card.card.text, + emoji: card.card.emoji, + id: card.card.id + } + return newCard; + }) + + this.setState({ cards }); + + }) + .catch((error) => { + this.setState({ errorMessages: error.message }); + }); + } + + + addCardCallback = (cardInfo) => { + const fullUrl = this.props.url + this.props.boardName + "/cards" + axios.post(fullUrl, cardInfo) + .then((response) => { + const card = response.data["card"] + let updatedData = this.state.cards; + updatedData.push({ + id: card.id, + text: cardInfo.text, + emoji: cardInfo.emoji + }); + this.setState({ cards: updatedData }) + }) + .catch((error) => { + this.setState({ errorMessages: error.message }); + }); + } + + deleteCardCallback = (id) => { + const updatedCards = this.state.cards.filter((card) => card.id !== id) + + this.setState({ + cards: updatedCards + }); + + const fullUrl = `https://inspiration-board.herokuapp.com/cards/${id}` + axios.delete(fullUrl) + .then((response) => { + + }) + .catch((error) => { + this.setState({ errorMessages: error.message }); + }); + } + + + + render() { + const showCards = this.state.cards.map((card, index) => { + return () + }) + + const errors =
Error: {this.state.errorMessages}
return ( -
- Board +
+ {this.state.errorMessages ? errors : ""} + + {showCards}
) - } - + }; } -Board.propTypes = { +Board.propTypes = { + url: PropTypes.string.isRequired, + boardName: PropTypes.string.isRequired, }; export default Board; diff --git a/src/components/Board.test.js b/src/components/Board.test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..1475031e 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -2,20 +2,38 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; + import './Card.css'; class Card extends Component { + + render() { + const isEmoji = (this.props.emoji) ? this.props.emoji : "" + const id = this.props.id return (
- Card +
+
+ {this.props.text} +
+
+ {emoji.getUnicode(isEmoji)} +
+
+ +
+
) } } Card.propTypes = { - + 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 47331423..4d6a8bde 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -3,4 +3,79 @@ 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 { + 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! +
+
+
+