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..9cafe890 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,12 @@ "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..a73abf96 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ class App extends Component { ); diff --git a/src/App.test.js b/src/App.test.js index 5a29f6cb..6bf42adc 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,14 +1,25 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { shallow } from 'enzyme'; -import App from './App'; +import React from "react"; +import ReactDOM from "react-dom"; +import { mount, shallow } from "enzyme"; +import App from "./App"; -describe('App', () => { +it("renders without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); - it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); +describe("", () => { + test("that it renders App with shallow rendering", () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); }); + test("will match the last snapshot with deep rendering", () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + + // Remove the component from the DOM (save memory and prevent side effects). + wrapper.unmount(); + }); }); diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap new file mode 100644 index 00000000..4a2d696d --- /dev/null +++ b/src/__snapshots__/App.test.js.snap @@ -0,0 +1,148 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` that it renders App with shallow rendering 1`] = ` +
+
+

+ + Inspiration Board + +

+
+ +
+`; + +exports[` will match the last snapshot with deep rendering 1`] = ` + +
+
+

+ + Inspiration Board + +

+
+ +
+
+
+ +
+
+

+ Add a Card +

+ + + +
+
+ +
+
+
+ +
+ +`; diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..94eb21de 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,33 +1,114 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import axios from 'axios'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import axios from "axios"; -import './Board.css'; -import Card from './Card'; -import NewCardForm from './NewCardForm'; -import CARD_DATA from '../data/card-data.json'; +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(); + constructor(props) { + super(props); this.state = { cards: [], + errorMessage: null + // cards: CARD_DATA.cards, }; } + componentDidMount() { + axios.get(`${this.props.url}/${this.props.boardName}/cards`) + .then((response) => { + this.setState({ cards: response.data }); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message + }) + }) + } + + addCardCallback = (card) => { + const infoCard = { + text: card.text, + emoji: card.cardEmoji, + }; + axios.post(`${this.props.url}/${this.props.boardName}/cards`, infoCard) + .then((response) => { + console.log(card); + let newcardsUpdate = this.state.cards; + newcardsUpdate.unshift({ + card: { + text: card.text, + id: card.id, + emoji: card.cardEmoji, + } + }); //add new items + this.setState({ + cards: newcardsUpdate + }); + console.log(newcardsUpdate); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }); + }); + } + + deleteCardCallback = (cardId) => { + axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`) + .then((response) => { + const updatedCardList = this.state.cards.filter(card => card.card.id !== cardId); + + this.setState({ + cards: updatedCardList + }); + }) + .catch((error) => { + this.setState({ + errorMessage: error.message, + }); + }); + } + render() { + const errorDisplay = this.state.errorMessage ? ( +
+ Error: {this.state.errorMessage} +
+ ) : null; + + const cardList = this.state.cards.map((card, i) => { + return ( + + ) + }); + return ( -
- Board -
+
+
+ {errorDisplay} +
+
+ +
+
{cardList}
+
) } - } 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.css b/src/components/Card.css index e86d4329..77e17491 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -1,5 +1,5 @@ .card { - background-color: #F4FF81; + background-color: rgb(241, 204, 239); padding: 1em 0; margin: 0.5rem; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..1767a2d6 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,21 +1,39 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; import './Card.css'; -class Card extends Component { - render() { +const Card = (props) => { + + const { text, cardEmoji, deleteCardCallback, id} = props; + + const toDelete = () => { + return deleteCardCallback(id) + } + return ( -
- Card +
+ +

{id}

+

{text}

+

{cardEmoji ? emoji.getUnicode(cardEmoji) : ""}

) - } } -Card.propTypes = { +Card.propTypes = { + text: PropTypes.string, + emoji: PropTypes.string, + id: PropTypes.number, + deleteCardCallback: PropTypes.func.isRequired }; export default Card; diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index d11b9ad4..ad811fa5 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -28,7 +28,7 @@ .new-card-form__form-textarea, .new-card-form__form-button { font-family: 'Raleway', sans-serif; - font-size: 1.25em; + font-size: 1em; grid-column: controls; grid-row: auto; } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..ea07a5eb 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,6 +1,95 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; -import './NewCardForm.css'; +import React, { Component } from "react"; +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", + "pizza", + "see_no_evil", + "apple", +]; + +const emojiList = EMOJI_LIST.map((oneEmoji, i) => { + return +}); + + +class NewCardForm extends Component { + constructor(props) { + super(props); + + this.state = { + text: '', + emoji: '', + } + } + + addNewCard = (event) => { + event.preventDefault(); + + const card = this.state; + + this.props.addCardCallback(card); + }; + + inputChange = (event) => { + const stateUpdate = {}; + + const field = event.target.name; + const value = event.target.value; + + stateUpdate[field] = value; + this.setState(stateUpdate); + }; + + render() { + return ( +
+
+

Add a Card

+ + + +
+
+ ); + } +} + +NewCardForm.propTypes = { +addCardCallback: PropTypes.func.isRequired, +}; + +export default NewCardForm; diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/data/card-data.json b/src/data/card-data.json index 1f9793ec..b93d5095 100644 --- a/src/data/card-data.json +++ b/src/data/card-data.json @@ -5,8 +5,8 @@ "text": "Make sure you pet a dog this week!" }, { - "text": "", - "Emoji": "heart_eyes" + "text": "test", + "emoji": "heart_eyes" }, { "text": "REST is part of work"