diff --git a/README.md b/README.md index 1ef9a904..a816c8a1 100644 --- a/README.md +++ b/README.md @@ -75,3 +75,43 @@ Possible optional enhancements include: ## What we're looking for You can see what your instructors are looking for [here](./feedback.md) + + +#### CODE PARKING LOT: + +this.state = { + cards: [ + { + text: 'Be Here Now.', + }, + { + text: 'Ok, now be somewhere else.', + }, + { + text: 'Being present in the present is the greatest present you can present to yourself.', + emoji: 'gift', + }, + ], +}; + +test('addPetCallback prop is called when the form is submitted', () => { + // Arrange + const mockAddPetCallback = jest.fn(); + const wrapper = shallow(); + const form = wrapper.find('form'); + + // Act + form.simulate('submit', { + preventDefault: () => {}, + }); + wrapper.update(); + + // Assert + expect(mockAddPetCallback).toHaveBeenCalled(); + expect(mockAddPetCallback.mock.calls[0][0]).toEqual({ + name: '', + age: '', + breed: '', + about: '', + }); +}); 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..da542049 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,13 @@ "devDependencies": { "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", + "enzyme-to-json": "^3.3.4", "gh-pages": "^1.2.0" }, + "jest": { + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ] + }, "homepage": "http://adagold.github.io/inspiration-board" } diff --git a/src/App.js b/src/App.js index c4854e15..4780fd76 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,11 @@ import './App.css'; import Board from './components/Board'; class App extends Component { + + constructor(props) { + super(props); + } + render() { return (
@@ -11,8 +16,9 @@ class App extends Component { +
); } diff --git a/src/App.test.js b/src/App.test.js index 5a29f6cb..5ff61eae 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -10,5 +10,4 @@ describe('App', () => { ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); - }); diff --git a/src/components/Board.js b/src/components/Board.js index 9222fd88..536c6216 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,7 +1,6 @@ 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'; @@ -10,24 +9,75 @@ import CARD_DATA from '../data/card-data.json'; class Board extends Component { constructor() { super(); - this.state = { cards: [], }; } + componentDidMount() { + axios.get('https://inspiration-board.herokuapp.com/boards/victoria/cards') + .then((response) => { + this.setState({ cards: response.data }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + + addCard = (card) => { + axios.post('https://inspiration-board.herokuapp.com/boards/victoria/cards', + card) + .then((response) => { + this.setState({ + message: `Successfully Added A Card!` + }); + window.parent.location.reload() + }) + .catch((error) => { + console.log(error.message); + this.setState({ + message: error.message, + }); + }); + } + render() { + + const cardKeysAttempt = Object.keys(this.state.cards).map( + key => + ({ + cardId: this.state.cards[key]["card"]["id"], + cardTxt: this.state.cards[key]["card"]["text"], + cardEmo: this.state.cards[key]["card"]["emoji"] + }) + ) + + const cardComponents = cardKeysAttempt.map((card) => { + return ( +
  • + +
    • + ) + }); + return ( -
    - Board -
    +
    +
    + {this.state.message ? this.state.message: "" } +
    + {cardComponents} + +
    ) } } Board.propTypes = { - }; export default Board; diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..381b4a7d 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { mount, shallow } from 'enzyme'; +import TestRenderer from 'react-test-renderer'; +import Board from './Board'; + +describe('Board', () => { + test('that it matches an existing snapshot', () => { + // First Mount the Component in the testing DOM + // Arrange + const wrapper = mount( ); + + // Assert that it looks like the last snapshot + expect(wrapper).toMatchSnapshot(); + + // Remove the component from the DOM (save memory and prevent side effects). + wrapper.unmount(); + }); + + test('That it can render without crashing', () => { + + const testRenderer = TestRenderer.create( ); + + expect(testRenderer.toJSON()).toMatchSnapshot(); + }); + +}); diff --git a/src/components/Card.css b/src/components/Card.css index e86d4329..a4cf91cb 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -11,7 +11,7 @@ border-radius: 5px; display: grid; - grid-template-columns: 1fr 5fr 1fr; + grid-template-columns: 1fr 3fr 1fr; align-items: center; } @@ -36,6 +36,10 @@ font-size: 3rem; } +.card_content-id { + font-size: 1rem; +} + .card__content-text, .card__content-emoji { padding: 0; margin: 0; @@ -43,5 +47,7 @@ .card__delete { align-self: start; + border: 2px solid black; + border-radius: 5px; font-family: 'Permanent Marker', Helvetica, sans-serif; } diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..e3924dd0 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,21 +1,67 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; import emoji from 'emoji-dictionary'; import './Card.css'; class Card extends Component { + + constructor(props) { + super(); + this.state = { + cardId: props.cardID, + cardWorden: props.cardText, + cardEmoji: props.cardEmoji, + } + } + + handleDelete = event => { + event.preventDefault(); + let deleteURL = `https://inspiration-board.herokuapp.com/boards/victoria/cards/${this.props.cardID}` + axios.delete(deleteURL) + .then(response => { + console.log('response to API request is happening') + console.log(response); + console.log(response.data); + console.log("about to reload") + console.log(window.parent.location.href) + window.parent.location.reload() + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + render() { + + const hasEmoji = this.state.cardEmoji; + let displayEmoji; + if (hasEmoji) { + displayEmoji = emoji.getUnicode(this.props.cardEmoji) + } else { displayEmoji = "" } + console.log('trying to report cardID') + console.log(this.state.cardId) + return (
    - Card +
    +
    {this.state.cardWorden}
    +
    {displayEmoji}
    +
    This is Quantum of Inspiration Number: {this.state.cardId}
    +
    +
    + +
    ) } } Card.propTypes = { - + cardID: PropTypes.number, + cardText: PropTypes.string, + cardEmoji: PropTypes.string, }; export default Card; diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..5958de0a --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { mount, shallow } from 'enzyme'; +import TestRenderer from 'react-test-renderer'; +import Card from './Card'; + +describe('Card', () => { + test('that it matches an existing snapshot', () => { + + const wrapper = mount( ); + + + expect(wrapper).toMatchSnapshot(); + + + wrapper.unmount(); + }); + + test('That it can render without crashing', () => { + + const testRenderer = TestRenderer.create( ); + + expect(testRenderer.toJSON()).toMatchSnapshot(); + }); + +}); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..4beab972 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,80 @@ 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() { + super(); + this.state = { + text:'', + emoji: '', + }; + } + + onFieldChange = (event) => { + const fieldName = event.target.name; + const fieldValue = event.target.value; + const updateState = {}; + updateState[fieldName] = fieldValue; + this.setState(updateState); + } + + valid = () => { + return this.state.text.length > 0 || + this.state.emoji.length > 0; + } + + clearForm = () => { + this.setState({ + text: '', + emoji: '', + }); + } + + onFormSubmit = (event) => { + event.preventDefault(); + if (this.valid()) { + this.props.addCardCallback(this.state); + this.clearForm(); + } + } + + + render() { + + const emojiPicker = EMOJI_LIST.map((emoj, index) => { + return ( + + ) + }); + + return ( +
    +

    Add An Edifying Post-It of Your Very Own:

    +
    +
    +