From 36ab8787970f82a03a746a90faeabebb58eddbae Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Fri, 21 Jun 2019 14:43:33 -0700 Subject: [PATCH 01/11] installed NPM, Axios, and added proptypes to boards and card. --- package-lock.json | 7 ------- src/App.js | 2 +- src/components/Board.js | 2 +- src/components/Card.js | 4 +++- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index b89d6503..4f5feed9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1952,13 +1952,6 @@ "requires": { "follow-redirects": "1.5.10", "is-buffer": "^2.0.2" - }, - "dependencies": { - "is-buffer": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", - "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==" - } } }, "axobject-query": { diff --git a/src/App.js b/src/App.js index c4854e15..c234f7be 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..bf432a7e 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -27,7 +27,7 @@ class Board extends Component { } Board.propTypes = { - + name: PropTypes.string, }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 6788cc03..cab34777 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; import './Card.css'; +import { prototype } from 'events'; class Card extends Component { render() { @@ -15,7 +16,8 @@ class Card extends Component { } Card.propTypes = { - + message: PropTypes.string, + emoji: PropTypes.string, }; export default Card; From e41bde6f031cd3f1a8f17968ecbe4987435a71d9 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 23 Jun 2019 23:42:48 -0700 Subject: [PATCH 02/11] created card and board components --- src/App.js | 2 +- src/components/Board.js | 28 +++++++++++++++++++++++++--- src/components/Card.js | 5 +++-- src/data/card-data.json | 2 +- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index c234f7be..31d1c957 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ class App extends Component { return (
-

Inspiration Board

+

Amy's Inspirations

{ + const cards = this.state.cards.map(card => ); + return cards; + } + + addCards = () => { + this.setState({ + cards: CARD_DATA.cards + }); + } + + componentDidMount() { + this.addCards(); + // axios.get(`${this.props.url}${this.props.boardName}`) + // .then((response) => { + + // }) + // .catch((error) => { + + // }); + } + render() { return (
- Board + {this.renderCards()}
) } diff --git a/src/components/Card.js b/src/components/Card.js index cab34777..514efd9e 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -9,14 +9,15 @@ class Card extends Component { render() { return (
- Card +
{this.props.text}
+
{this.props.emoji}
) } } Card.propTypes = { - message: PropTypes.string, + text: PropTypes.string, emoji: PropTypes.string, }; 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 b01e456482d2d39530c10b65bb9ec39e3b2107a7 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 23 Jun 2019 23:50:22 -0700 Subject: [PATCH 03/11] added board and card styling --- src/components/Board.js | 4 ++-- src/components/Card.js | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index d59d6822..bff9f4eb 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -17,7 +17,7 @@ class Board extends Component { } renderCards = () => { - const cards = this.state.cards.map(card => ); + const cards = this.state.cards.map(card => ); return cards; } @@ -40,7 +40,7 @@ class Board extends Component { render() { return ( -
+
{this.renderCards()}
) diff --git a/src/components/Card.js b/src/components/Card.js index 514efd9e..d0853328 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -9,8 +9,10 @@ class Card extends Component { render() { return (
-
{this.props.text}
-
{this.props.emoji}
+
+
{this.props.text}
+
{this.props.emoji}
+
) } From c49fade00c10344e199959ff2bf61563724ec3d6 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Sun, 23 Jun 2019 23:55:05 -0700 Subject: [PATCH 04/11] implemented emoji library --- 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 d0853328..f2de8d95 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -10,8 +10,8 @@ class Card extends Component { return (
-
{this.props.text}
-
{this.props.emoji}
+ {this.props.text &&
{this.props.text}
} + {this.props.emoji &&
{emoji.getUnicode(this.props.emoji)}
}
) From 417f2bc245c3bc18894e98386e7e677ccc63f563 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 00:06:05 -0700 Subject: [PATCH 05/11] used axios to get card information --- src/components/Board.js | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index bff9f4eb..99795205 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -12,30 +12,33 @@ class Board extends Component { super(props); this.state = { + error: "", cards: [], }; } renderCards = () => { - const cards = this.state.cards.map(card => ); - return cards; + if (this.state.cards) { + const cards = this.state.cards.map(card => ); + return cards; + } } - addCards = () => { - this.setState({ - cards: CARD_DATA.cards - }); - } + // addCards = () => { + // this.setState({ + // cards: CARD_DATA.cards + // }); + // } componentDidMount() { - this.addCards(); - // axios.get(`${this.props.url}${this.props.boardName}`) - // .then((response) => { - - // }) - // .catch((error) => { - - // }); + // this.addCards(); + axios.get(`${this.props.url}${this.props.boardName}`) + .then((response) => { + this.setState({ cards: response.data.cards }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); } render() { From 31f29d1b26395d3dbaddd9958bf267bdc9972e7f Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 00:17:37 -0700 Subject: [PATCH 06/11] accessed API data with axios --- src/components/Board.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 99795205..c5b71e43 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -19,7 +19,7 @@ class Board extends Component { renderCards = () => { if (this.state.cards) { - const cards = this.state.cards.map(card => ); + const cards = this.state.cards.map(card => ); return cards; } } @@ -32,9 +32,10 @@ class Board extends Component { componentDidMount() { // this.addCards(); - axios.get(`${this.props.url}${this.props.boardName}`) + axios.get(`${this.props.url}${this.props.boardName}/cards`) .then((response) => { - this.setState({ cards: response.data.cards }); + console.log(response) + this.setState({ cards: response.data }); }) .catch((error) => { this.setState({ error: error.message }); From 1062054883529eb539946b35b3b54798bff50dd8 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 00:26:41 -0700 Subject: [PATCH 07/11] delete button added --- src/components/Card.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Card.js b/src/components/Card.js index f2de8d95..f1529aa1 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -13,6 +13,9 @@ class Card extends Component { {this.props.text &&
{this.props.text}
} {this.props.emoji &&
{emoji.getUnicode(this.props.emoji)}
}
+
+ +
) } From 46b538aa8d46771ef2e03853e836f7261096d77b Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 01:09:39 -0700 Subject: [PATCH 08/11] delete using axios --- src/components/Board.js | 44 ++++++++++++++++++++++++++--------------- src/components/Card.js | 5 ++++- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index c5b71e43..6152316a 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -19,27 +19,39 @@ class Board extends Component { renderCards = () => { if (this.state.cards) { - const cards = this.state.cards.map(card => ); + const cards = this.state.cards.map(card => + ); return cards; } } - // addCards = () => { - // this.setState({ - // cards: CARD_DATA.cards - // }); - // } - - componentDidMount() { - // this.addCards(); + getCards = () => { axios.get(`${this.props.url}${this.props.boardName}/cards`) - .then((response) => { - console.log(response) - this.setState({ cards: response.data }); - }) - .catch((error) => { - this.setState({ error: error.message }); - }); + .then((response) => { + this.setState({ cards: response.data }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + componentDidMount() { + this.getCards(); + } + + deleteCard = (cardId) => { + axios.delete(`https://inspiration-board.herokuapp.com/cards/${cardId}`) + .then((response) => { + this.getCards(); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); } render() { diff --git a/src/components/Card.js b/src/components/Card.js index f1529aa1..41ed2ce8 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -14,7 +14,7 @@ class Card extends Component { {this.props.emoji &&
{emoji.getUnicode(this.props.emoji)}
}
- +
) @@ -24,6 +24,9 @@ class Card extends Component { Card.propTypes = { text: PropTypes.string, emoji: PropTypes.string, + deleteCardCallback: PropTypes.func, + key: PropTypes.number, + id: PropTypes.number }; export default Card; From dcb1884c7d9bac5990361a10cad5cd237f2ab093 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 14:49:59 -0700 Subject: [PATCH 09/11] new card form --- src/components/Board.js | 24 ++++++++++-- src/components/NewCardForm.js | 74 +++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 3 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 6152316a..010d9cc5 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,7 +5,6 @@ import axios from 'axios'; import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; -import CARD_DATA from '../data/card-data.json'; class Board extends Component { constructor(props) { @@ -40,6 +39,7 @@ class Board extends Component { this.setState({ error: error.message }); }); } + componentDidMount() { this.getCards(); } @@ -54,11 +54,29 @@ class Board extends Component { }); } + addCard = (card) => { + axios.post(`${this.props.url}${this.props.boardName}/cards`, card) + .then((response) => { + const cardList = [...this.state.cards]; + cardList.push(card); + this.setState({ cards: cardList }); + }) + .catch((error) => { + this.setState({ error: error.message }); + }); + } + render() { return ( -
- {this.renderCards()} +
+
+ {this.renderCards()} +
+
+ < NewCardForm newCardCallback={this.addCard}/> +
+ ) } diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..499fbab5 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,77 @@ 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: '', + }; + } + + createEmojis = () => { + const image = EMOJI_LIST.map(emo => + + ); + return image; + } + + onChangeHandler = (event) => { + const field = {} + field[event.target.name] = event.target.value; + + this.setState(field); + } + + handleSubmit = (event) => { + event.preventDefault(); + this.props.newSubmissionCallback({ + text: this.state.text, + emoji: this.state.emoji, + }); + this.setState({ + text: '', + emoji: '', + }); + } + + render() { + + return ( +
+

New card form

+
+
+ + +
+
+ +
+
+ this.newCardCallback()}/> +
+
+
+ ); + } +} + +NewCardForm.propTypes = { + newCardCallback: PropTypes.func, +}; + +export default NewCardForm; From 61b10f13c7a9cfc6e3ba46b28734534184c5fa84 Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 15:20:00 -0700 Subject: [PATCH 10/11] can create new card --- src/components/Board.js | 5 ++++- src/components/NewCardForm.js | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 010d9cc5..f2d4eb06 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,6 +5,7 @@ import axios from 'axios'; import './Board.css'; import Card from './Card'; import NewCardForm from './NewCardForm'; +import { createReadStream } from 'fs'; class Board extends Component { constructor(props) { @@ -58,7 +59,9 @@ class Board extends Component { axios.post(`${this.props.url}${this.props.boardName}/cards`, card) .then((response) => { const cardList = [...this.state.cards]; - cardList.push(card); + const newCard = response.data.card; + const objCard = {card: newCard} + cardList.push(objCard); this.setState({ cards: cardList }); }) .catch((error) => { diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 499fbab5..c91f455e 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -31,7 +31,7 @@ class NewCardForm extends Component { handleSubmit = (event) => { event.preventDefault(); - this.props.newSubmissionCallback({ + this.props.newCardCallback({ text: this.state.text, emoji: this.state.emoji, }); @@ -59,13 +59,13 @@ class NewCardForm extends Component {
- this.newCardCallback()}/> +
From f114a84bfbedc07cd4b9c36258eb43498bfd730e Mon Sep 17 00:00:00 2001 From: Amy Wyatt Date: Mon, 24 Jun 2019 15:26:38 -0700 Subject: [PATCH 11/11] can add a emoji to card --- src/components/NewCardForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index c91f455e..44081e84 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -33,7 +33,7 @@ class NewCardForm extends Component { event.preventDefault(); this.props.newCardCallback({ text: this.state.text, - emoji: this.state.emoji, + emoji: emoji.getName(this.state.emoji), }); this.setState({ text: '',