From 8d5ed4ae32894a2b475bea3174650d4254a26fb2 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 14:00:37 -0700 Subject: [PATCH 01/24] change board to myself --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 60566602..4b40f74b 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,7 @@ const App = () => { ); From db7bc76afe8ed51401ddd7918078bdd2f7b4c2ca Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 14:22:49 -0700 Subject: [PATCH 02/24] add text and emoji to card --- src/components/Board.js | 15 +++++++++++++-- src/components/Card.js | 7 ++++--- src/data/card-data.json | 2 +- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 698faaaa..4ca4f177 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,14 +8,25 @@ import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; const Board = () => { + const boardComponents = CARD_DATA.cards.map((card, i) => { + return ( +
  • + +
    • + ); + }); + return (
    - Board + {boardComponents}
    ) }; Board.propTypes = { - + }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 51a33966..e6430511 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,13 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; +import emojiDictionary from 'emoji-dictionary'; import './Card.css'; -const Card = () => { +const Card = (props) => { return (
    - Card + {props.text} + {props.emoji}
    ) } 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 d0bb03313ebe94468b0d0e59820398de31bfbe4e Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 14:23:25 -0700 Subject: [PATCH 03/24] load board with cards --- src/components/Board.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Board.js b/src/components/Board.js index 4ca4f177..b24255ef 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -21,7 +21,7 @@ const Board = () => { return (
    - {boardComponents} + { boardComponents }
    ) }; From 388860c6e52ea916a06e72bde6d05c652edab17b Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 14:52:15 -0700 Subject: [PATCH 04/24] generate cards using API --- src/components/Board.js | 51 ++++++++++++++++++++++++++++++----------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index b24255ef..f484a1c0 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; @@ -7,23 +7,46 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const Board = () => { - const boardComponents = CARD_DATA.cards.map((card, i) => { - return ( -
  • - -
    • - ); - }); +const Board = (props) => { + // const boardComponents = CARD_DATA.cards.map((card, i) => { + // return ( + //
  • + // + //
    • + // ); + // }); + + const [cardList, setCardList] = useState([]); + const [errorMessage, setErrorMessage] = useState(null); + const newCardList = []; + + useEffect(() => { + axios.get(props.url + props.boardName + "/cards") + .then( (response) => { + for (let card of response.data) { + newCardList.push(); + }; + + setCardList(newCardList); + }) + .catch((error) => { + setErrorMessage(error.message); + console.log(error.message); + }) + }) return (
    - { boardComponents } + { cardList }
    - ) + ); }; Board.propTypes = { From 96fa393f50735a2ac2bb90b8e6bc8df38778de73 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 15:30:12 -0700 Subject: [PATCH 05/24] add button to delete --- src/App.js | 2 +- src/components/Board.js | 41 ++++++++++++++++++++++++++++++++--------- src/components/Card.js | 16 ++++++++++++++-- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 4b40f74b..35309624 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ const App = () => {

    Inspiration Board

    diff --git a/src/components/Board.js b/src/components/Board.js index f484a1c0..1d0afb27 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -24,23 +24,46 @@ const Board = (props) => { const newCardList = []; useEffect(() => { - axios.get(props.url + props.boardName + "/cards") + axios.get(props.url + "boards/" + props.boardName + "/cards") .then( (response) => { for (let card of response.data) { - newCardList.push(); + newCardList.push( +
  • + +
    • + ); }; - + setCardList(newCardList); }) .catch((error) => { setErrorMessage(error.message); console.log(error.message); - }) - }) + }); + }, []); + + const deleteCard = (props) => { + console.log("This is linked to " + props); + const newCardList = cardList.filter((card) => { + return card.id !== props; + }); + + if (newCardList.length < cardList.length) { + axios.delete(props.url + "cards/:" + props) + .then((response) => { + setErrorMessage(`Card ${ props } deleted`); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${ props }`); + }) + setCardList(newCardList); + } + } return (
    diff --git a/src/components/Card.js b/src/components/Card.js index e6430511..887184cc 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,10 +5,22 @@ import emojiDictionary from 'emoji-dictionary'; import './Card.css'; const Card = (props) => { + + const onDeleteClick = () => { + props.onDeleteCard(props.id); + } + return (
    - {props.text} - {props.emoji} +
    + {props.text} + {props.emoji} +
    +
    ) } From ceaeb3f64da4e50c1d13dec0a53ff6adcb6b003b Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 15:36:10 -0700 Subject: [PATCH 06/24] link components to button --- src/App.js | 27 ++++++++++++++++++++++++++- src/components/Board.js | 35 ++++++++++++++++++----------------- src/components/Card.js | 7 ++----- 3 files changed, 46 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index 35309624..a5b6c165 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,32 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import Board from './components/Board'; +import axios from 'axios' const App = () => { + + const [cardList, setCardList] = useState([]); + const [errorMessage, setErrorMessage] = useState(null); + const newCardList = []; + + const deleteCard = (props) => { + console.log("This is linked to " + props); + const newCardList = cardList.filter((card) => { + return card.id !== props; + }); + + if (newCardList.length < cardList.length) { + axios.delete(props.url + "cards/:" + props) + .then((response) => { + setErrorMessage(`Card ${ props } deleted`); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${ props }`); + }) + setCardList(newCardList); + } + } + return (
    @@ -11,6 +35,7 @@ const App = () => {
    ); diff --git a/src/components/Board.js b/src/components/Board.js index 1d0afb27..6cc1639c 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -31,9 +31,10 @@ const Board = (props) => {
    • ); @@ -47,23 +48,23 @@ const Board = (props) => { }); }, []); - const deleteCard = (props) => { - console.log("This is linked to " + props); - const newCardList = cardList.filter((card) => { - return card.id !== props; - }); + // const deleteCard = (props) => { + // console.log("This is linked to " + props); + // const newCardList = cardList.filter((card) => { + // return card.id !== props; + // }); - if (newCardList.length < cardList.length) { - axios.delete(props.url + "cards/:" + props) - .then((response) => { - setErrorMessage(`Card ${ props } deleted`); - }) - .catch((error) => { - setErrorMessage(`Unable to delete card ${ props }`); - }) - setCardList(newCardList); - } - } + // if (newCardList.length < cardList.length) { + // axios.delete(props.url + "cards/:" + props) + // .then((response) => { + // setErrorMessage(`Card ${ props } deleted`); + // }) + // .catch((error) => { + // setErrorMessage(`Unable to delete card ${ props }`); + // }) + // setCardList(newCardList); + // } + // } return (
    diff --git a/src/components/Card.js b/src/components/Card.js index 887184cc..7fb2721d 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,10 +5,7 @@ import emojiDictionary from 'emoji-dictionary'; import './Card.css'; const Card = (props) => { - - const onDeleteClick = () => { - props.onDeleteCard(props.id); - } + console.log(props); return (
    @@ -17,7 +14,7 @@ const Card = (props) => { {props.emoji}
    From 4c832ddcbda16aa8dbc1d633afefd806e3e96c53 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 15:49:22 -0700 Subject: [PATCH 07/24] corrected endpoint for deletion --- src/App.js | 7 ++++++- src/components/Card.js | 2 -- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index a5b6c165..22a1d4f6 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,8 @@ import './App.css'; import Board from './components/Board'; import axios from 'axios' +const BASE_URL = "https://inspiration-board.herokuapp.com/" +// http://inspiration-board.herokuapp.com/boards/jessica-liang/cards const App = () => { const [cardList, setCardList] = useState([]); @@ -11,13 +13,16 @@ const App = () => { const deleteCard = (props) => { console.log("This is linked to " + props); + console.log(BASE_URL + "cards/" + props); const newCardList = cardList.filter((card) => { return card.id !== props; }); if (newCardList.length < cardList.length) { - axios.delete(props.url + "cards/:" + props) + axios.delete(BASE_URL + "cards/" + props) .then((response) => { + console.log("This is linked to " + props); + setErrorMessage(`Card ${ props } deleted`); }) .catch((error) => { diff --git a/src/components/Card.js b/src/components/Card.js index 7fb2721d..c4daa118 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -5,8 +5,6 @@ import emojiDictionary from 'emoji-dictionary'; import './Card.css'; const Card = (props) => { - console.log(props); - return (
    From 013783b1779d163b643a968644d6dc74b678518f Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 16:21:54 -0700 Subject: [PATCH 08/24] add new card form --- src/App.js | 22 +++++--- src/components/Board.js | 3 +- src/components/NewCardForm.js | 103 ++++++++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 22a1d4f6..c35f7762 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import './App.css'; import Board from './components/Board'; -import axios from 'axios' +import axios from 'axios'; +import NewCardForm from './components/NewCardForm'; const BASE_URL = "https://inspiration-board.herokuapp.com/" // http://inspiration-board.herokuapp.com/boards/jessica-liang/cards @@ -11,14 +12,18 @@ const App = () => { const [errorMessage, setErrorMessage] = useState(null); const newCardList = []; + // console.log(props); const deleteCard = (props) => { console.log("This is linked to " + props); - console.log(BASE_URL + "cards/" + props); - const newCardList = cardList.filter((card) => { - return card.id !== props; - }); + // console.log(BASE_URL + "cards/" + props); + // const newCardList = cardList.filter((card) => { + // console.log(card); + // console.log(props); + // return card.id !== props; + // }); + // setCardList(newCardList); - if (newCardList.length < cardList.length) { + // if (newCardList.length < cardList.length) { axios.delete(BASE_URL + "cards/" + props) .then((response) => { console.log("This is linked to " + props); @@ -28,9 +33,9 @@ const App = () => { .catch((error) => { setErrorMessage(`Unable to delete card ${ props }`); }) - setCardList(newCardList); + } - } + // } return (
    @@ -41,6 +46,7 @@ const App = () => { url="https://inspiration-board.herokuapp.com/" boardName={`jessica-liang`} deleteCardCallBack={deleteCard} + setCardList={setCardList} />
    ); diff --git a/src/components/Board.js b/src/components/Board.js index 6cc1639c..74deb640 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'; const Board = (props) => { // const boardComponents = CARD_DATA.cards.map((card, i) => { @@ -68,6 +67,8 @@ const Board = (props) => { return (
    + + { cardList }
    ); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..611fdf0c 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,3 +4,106 @@ import emoji from 'emoji-dictionary'; import './NewCardForm.css'; const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] + +const NewCardForm = (props) => { +return ( +
    +

    Add a Card

    +
    +
    + + +
    +
    + + {/* */} +
    + +
    +
    + ) +} + +// const NewStudentForm = (props) => { +// const [formFields, setFormFields] = useState({ +// fullName: '', +// email: '', +// }); + +// // event handlers +// const onInputChange = (event) => { +// const newFormFields = { +// ...formFields, +// } +// newFormFields[event.target.name] = event.target.value; +// setFormFields(newFormFields); +// } + +// const onFormSubmit = (event) => { +// event.preventDefault(); + +// props.addStudentCallback(formFields); + +// setFormFields({ +// fullName: '', +// email: '', +// }); +// }; + +// // validate email +// const emailValid = () => { +// return formFields.email.match(/\S+@\S+/) || formFields.email === ''; +// } + +// return ( +//
    +//
    +// +// +//
    +//
    +// +// +//
    +// +//
    +// ); +// } + +export default NewCardForm; \ No newline at end of file From d80c250e05999cb11db38436e8d8e9d948e2274e Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 16:45:07 -0700 Subject: [PATCH 09/24] add card, delete card --- src/App.js | 18 ++++-- src/components/Board.js | 4 +- src/components/NewCardForm.js | 105 +++++++++++----------------------- 3 files changed, 49 insertions(+), 78 deletions(-) diff --git a/src/App.js b/src/App.js index c35f7762..3a5605d7 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,6 @@ const App = () => { const [errorMessage, setErrorMessage] = useState(null); const newCardList = []; - // console.log(props); const deleteCard = (props) => { console.log("This is linked to " + props); // console.log(BASE_URL + "cards/" + props); @@ -34,9 +33,19 @@ const App = () => { setErrorMessage(`Unable to delete card ${ props }`); }) - } + }; // } + const addCard = (props) => { + axios.post(BASE_URL + "boards/jessica-liang/cards", props) + .then((response) => { + setErrorMessage(`Card ${ props } added`); + }) + .catch((response) => { + setErrorMessage(`Unable to add card ${ props }`); + }); + }; + return (
    @@ -45,8 +54,9 @@ const App = () => {
    ); diff --git a/src/components/Board.js b/src/components/Board.js index 74deb640..2f29c4e4 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -67,8 +67,8 @@ const Board = (props) => { return (
    - - + + { cardList }
    ); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 611fdf0c..71aff723 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, useState } from 'react'; import PropTypes from 'prop-types'; import emoji from 'emoji-dictionary'; import './NewCardForm.css'; @@ -6,8 +6,34 @@ import './NewCardForm.css'; const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] const NewCardForm = (props) => { + +const [formFields, setFormFields] = useState({ + text: '', + emoji: '' +}); + +const onFieldChange = (event) => { + const updatedFormState = {...formFields}; + + updatedFormState[event.target.name] = event.target.value; + setFormFields(updatedFormState); +} + +const onSubmitHandler = (event) => { + event.preventDefault(); + + if(formFields.text || formFields.emoji){ + props.addCardCallBack(formFields) + } + + setFormFields({ + text: '', + emoji: '' + }) +} + return ( -
    +

    Add a Card

    @@ -15,8 +41,8 @@ return (
    @@ -25,7 +51,7 @@ return ( name="emoji" id="emoji" onChange={ onFieldChange } - value={ emoji } + value={ formFields.emoji } > { emojiOptions } */} @@ -34,76 +60,11 @@ return ( type="submit" name="submit" value="Submit" - // onClick={ onSubmitHandler } + onClick={ onSubmitHandler } />
    ) } -// const NewStudentForm = (props) => { -// const [formFields, setFormFields] = useState({ -// fullName: '', -// email: '', -// }); - -// // event handlers -// const onInputChange = (event) => { -// const newFormFields = { -// ...formFields, -// } -// newFormFields[event.target.name] = event.target.value; -// setFormFields(newFormFields); -// } - -// const onFormSubmit = (event) => { -// event.preventDefault(); - -// props.addStudentCallback(formFields); - -// setFormFields({ -// fullName: '', -// email: '', -// }); -// }; - -// // validate email -// const emailValid = () => { -// return formFields.email.match(/\S+@\S+/) || formFields.email === ''; -// } - -// return ( -//
    -//
    -// -// -//
    -//
    -// -// -//
    -// -//
    -// ); -// } - -export default NewCardForm; \ No newline at end of file +export default NewCardForm; From ecd144a36d6c4074b0292a3c7df80512e3326e67 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 16:48:05 -0700 Subject: [PATCH 10/24] add emoji --- src/components/NewCardForm.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 71aff723..6889ec84 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -31,6 +31,7 @@ const onSubmitHandler = (event) => { emoji: '' }) } +const emojiOptions = EMOJI_LIST.map((emoji, i) => ); return (
    @@ -47,14 +48,14 @@ return (
    - {/* */} +
    Date: Thu, 23 Apr 2020 16:50:50 -0700 Subject: [PATCH 11/24] clean up of old console logs and minor format changes --- src/App.js | 4 +- src/components/Board.js | 1 + src/components/NewCardForm.js | 107 +++++++++++++++++----------------- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/App.js b/src/App.js index 3a5605d7..d7a74667 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import axios from 'axios'; import NewCardForm from './components/NewCardForm'; const BASE_URL = "https://inspiration-board.herokuapp.com/" -// http://inspiration-board.herokuapp.com/boards/jessica-liang/cards + const App = () => { const [cardList, setCardList] = useState([]); @@ -25,8 +25,6 @@ const App = () => { // if (newCardList.length < cardList.length) { axios.delete(BASE_URL + "cards/" + props) .then((response) => { - console.log("This is linked to " + props); - setErrorMessage(`Card ${ props } deleted`); }) .catch((error) => { diff --git a/src/components/Board.js b/src/components/Board.js index 2f29c4e4..3a9e3a4c 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -73,6 +73,7 @@ const Board = (props) => {
    ); }; + Board.propTypes = { }; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 6889ec84..84ee028e 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -7,65 +7,66 @@ const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_ const NewCardForm = (props) => { -const [formFields, setFormFields] = useState({ - text: '', - emoji: '' -}); + const [formFields, setFormFields] = useState({ + text: '', + emoji: '' + }); -const onFieldChange = (event) => { - const updatedFormState = {...formFields}; + const onFieldChange = (event) => { + const updatedFormState = {...formFields}; - updatedFormState[event.target.name] = event.target.value; - setFormFields(updatedFormState); -} + updatedFormState[event.target.name] = event.target.value; + setFormFields(updatedFormState); + }; -const onSubmitHandler = (event) => { - event.preventDefault(); + const onSubmitHandler = (event) => { + event.preventDefault(); - if(formFields.text || formFields.emoji){ - props.addCardCallBack(formFields) - } + if(formFields.text || formFields.emoji){ + props.addCardCallBack(formFields) + } - setFormFields({ - text: '', - emoji: '' - }) -} -const emojiOptions = EMOJI_LIST.map((emoji, i) => ); + setFormFields({ + text: '', + emoji: '' + }) + }; + + const emojiOptions = EMOJI_LIST.map((emoji, i) => ); -return ( - -

    Add a Card

    -
    -
    - - -
    -
    - - -
    - -
    - - ) + return ( +
    +

    Add a Card

    +
    +
    + + +
    +
    + + +
    + +
    +
    + ) } export default NewCardForm; From 0be3fccd8c75674de732eb0ccb38167db936bd3d Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Thu, 23 Apr 2020 16:54:18 -0700 Subject: [PATCH 12/24] add style to card --- src/components/Card.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index c4daa118..8ae94ec8 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -7,11 +7,16 @@ import './Card.css'; const Card = (props) => { return (
    -
    - {props.text} - {props.emoji} +
    +
    + {props.text} +
    +
    + {props.emoji} +
    diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index d11b9ad4..2ee27638 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -13,8 +13,9 @@ .new-card-form__form { font-size: 1.5em; - display: grid; - grid-template-columns: [labels] auto [controls] 1fr; + display: flex; + flex-direction: column; + align-items: center; grid-auto-flow: row; grid-gap: .8em; } @@ -22,6 +23,7 @@ .new-card-form__form-label { grid-column: labels; grid-row: auto; + align-self: center; } .new-card-form__form-select, @@ -31,6 +33,9 @@ font-size: 1.25em; grid-column: controls; grid-row: auto; + margin: 10px; + align-self: center; + border-radius: 5%; } .new-card-form__form-button { From 9b0ccadcf14b5cf1899c0efb5ce61a19f27907af Mon Sep 17 00:00:00 2001 From: Corinna Fabre Date: Fri, 24 Apr 2020 08:22:46 -0700 Subject: [PATCH 16/24] Updated emoji rendering in cards and on drop down menu --- src/components/Card.js | 2 +- src/components/NewCardForm.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index d5e511f8..920134cd 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -12,7 +12,7 @@ const Card = (props) => { {props.text}
    - {props.emoji} + {emojiDictionary.getUnicode(`${props.emoji}`)}
    Date: Fri, 24 Apr 2020 10:15:04 -0700 Subject: [PATCH 17/24] add snapshot testing to Card --- src/components/Card.test.js | 17 +++++++ .../__snapshots__/Card.test.js.snap | 49 +++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Card.test.js.snap diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..9cc77118 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { render, cleanup } from '@testing-library/react'; +import Card from './Card'; + +describe('Card', () => { + test('that it matches the existing snapshot', () => { + // Arrange-Act + const { asFragment } = render( + + ); + + // Assert + expect(asFragment()).toMatchSnapshot(); + cleanup(); + }); +}); \ No newline at end of file diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..62a5b278 --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches the existing snapshot 1`] = ` + +
    +
    +
    +
    +
    + +
    +     +`; + +exports[`NewCardForm that it matches the existing snapshot 1`] = ` + +
    +
    +
    +
    +
    + +
    +     +`; From 01c04d7a38776015e2285e53b493f5821caedd04 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 10:41:46 -0700 Subject: [PATCH 18/24] move add and delete card to level of Board --- src/App.js | 43 ++--------------------------------------- src/components/Board.js | 35 +++++++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 43 deletions(-) diff --git a/src/App.js b/src/App.js index c7f6364f..e47de587 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import './App.css'; import Board from './components/Board'; import axios from 'axios'; @@ -8,42 +8,6 @@ const BASE_URL = "https://inspiration-board.herokuapp.com/" const App = () => { - const [cardList, setCardList] = useState([]); - const [errorMessage, setErrorMessage] = useState(null); - const newCardList = []; - - const deleteCard = (props) => { - console.log("This is linked to " + props); - // console.log(BASE_URL + "cards/" + props); - // const newCardList = cardList.filter((card) => { - // console.log(card); - // console.log(props); - // return card.id !== props; - // }); - // setCardList(newCardList); - - // if (newCardList.length < cardList.length) { - axios.delete(BASE_URL + "cards/" + props) - .then((response) => { - setErrorMessage(`Card ${ props } deleted`); - }) - .catch((error) => { - setErrorMessage(`Unable to delete card ${ props }`); - }) - - }; - // } - - const addCard = (props) => { - axios.post(BASE_URL + "boards/jessica-liang/cards", props) - .then((response) => { - setErrorMessage(`Card ${ props } added`); - }) - .catch((response) => { - setErrorMessage(`Unable to add card ${ props }`); - }); - }; - return (
    @@ -51,11 +15,8 @@ const App = () => {
    diff --git a/src/components/Board.js b/src/components/Board.js index 451c038e..e96f53ac 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,6 +8,7 @@ import NewCardForm from './NewCardForm'; const Board = (props) => { + const BASE_URL = "https://inspiration-board.herokuapp.com/" const [cardList, setCardList] = useState([]); const [errorMessage, setErrorMessage] = useState(null); const newCardList = []; @@ -23,7 +24,7 @@ const Board = (props) => { id={card.card.id} text={card.card.text} emoji={card.card.emoji} - deleteCardCallBack={props.deleteCardCallBack} + deleteCardCallBack ={ deleteCard } /> ); @@ -37,9 +38,39 @@ const Board = (props) => { }); }, []); + const deleteCard = (props) => { + console.log("This is linked to " + props); + // console.log(BASE_URL + "cards/" + props); + // const newCardList = cardList.filter((card) => { + // console.log(card); + // console.log(props); + // return card.id !== props; + // }); + // setCardList(newCardList); + + // if (newCardList.length < cardList.length) { + axios.delete(BASE_URL + "cards/" + props) + .then((response) => { + setErrorMessage(`Card ${ props } deleted`); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${ props }`); + }); + }; + + const addCard = (props) => { + axios.post(BASE_URL + "boards/jessica-liang/cards", props) + .then((response) => { + setErrorMessage(`Card ${ props } added`); + }) + .catch((response) => { + setErrorMessage(`Unable to add card ${ props }`); + }); + }; + return (
    - +
      { cardList } From 77b843f402fefe38f81ea572e80ceec975a6677a Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 10:54:52 -0700 Subject: [PATCH 19/24] dynamically load list on add and delete --- src/components/Board.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index e96f53ac..d3b40b6e 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -29,24 +29,23 @@ const Board = (props) => { ); }; - + // console.log(cardList); + // console.log(newCardList);z setCardList(newCardList); }) .catch((error) => { setErrorMessage(error.message); console.log(error.message); }); - }, []); + }, [cardList]); const deleteCard = (props) => { console.log("This is linked to " + props); - // console.log(BASE_URL + "cards/" + props); - // const newCardList = cardList.filter((card) => { - // console.log(card); - // console.log(props); - // return card.id !== props; - // }); - // setCardList(newCardList); + + const newCardList = cardList; + console.log(cardList); + console.log(newCardList); + setCardList(newCardList); // if (newCardList.length < cardList.length) { axios.delete(BASE_URL + "cards/" + props) From 48a1f0000a7e2625b60241c49ad59f2e3b967b82 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 11:02:20 -0700 Subject: [PATCH 20/24] small formatting change --- src/components/Card.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Card.test.js b/src/components/Card.test.js index 9cc77118..15a8a704 100644 --- a/src/components/Card.test.js +++ b/src/components/Card.test.js @@ -6,8 +6,7 @@ describe('Card', () => { test('that it matches the existing snapshot', () => { // Arrange-Act const { asFragment } = render( - + ); // Assert From 18dc1349a84053f0b822f71a58c0b0d495fe085c Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 11:05:38 -0700 Subject: [PATCH 21/24] change CSS --- src/App.js | 4 +--- src/components/Board.css | 1 + src/components/Board.js | 28 ++++++++++------------------ src/components/NewCardForm.js | 1 - 4 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/App.js b/src/App.js index e47de587..8e6d874d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,6 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import './App.css'; import Board from './components/Board'; -import axios from 'axios'; -import NewCardForm from './components/NewCardForm'; const BASE_URL = "https://inspiration-board.herokuapp.com/" diff --git a/src/components/Board.css b/src/components/Board.css index 00263981..2e865903 100644 --- a/src/components/Board.css +++ b/src/components/Board.css @@ -1,5 +1,6 @@ .board { display: flex; + flex-direction: column; flex-wrap: wrap; } diff --git a/src/components/Board.js b/src/components/Board.js index d3b40b6e..a3859915 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -29,8 +29,6 @@ const Board = (props) => { ); }; - // console.log(cardList); - // console.log(newCardList);z setCardList(newCardList); }) .catch((error) => { @@ -39,24 +37,18 @@ const Board = (props) => { }); }, [cardList]); + // Delete a card from board. const deleteCard = (props) => { - console.log("This is linked to " + props); - - const newCardList = cardList; - console.log(cardList); - console.log(newCardList); - setCardList(newCardList); - - // if (newCardList.length < cardList.length) { - axios.delete(BASE_URL + "cards/" + props) - .then((response) => { - setErrorMessage(`Card ${ props } deleted`); - }) - .catch((error) => { - setErrorMessage(`Unable to delete card ${ props }`); - }); - }; + axios.delete(BASE_URL + "cards/" + props) + .then((response) => { + setErrorMessage(`Card ${ props } deleted`); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${ props }`); + }); + }; + // Add a card to board. const addCard = (props) => { axios.post(BASE_URL + "boards/jessica-liang/cards", props) .then((response) => { diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 506ff26c..cf94ea1a 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -58,7 +58,6 @@ const NewCardForm = (props) => { value={emojiDictionary.getUnicode(`${emojiOptions}`)} > { emojiOptions } - {/* {emojiDictionary.getUnicode(`${emojiOptions}`)} */}
    Date: Fri, 24 Apr 2020 11:12:10 -0700 Subject: [PATCH 22/24] clear text and emoji on submit --- src/components/NewCardForm.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index cf94ea1a..03762f70 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -28,7 +28,7 @@ const NewCardForm = (props) => { setFormFields({ text: '', - emoji: '' + emoji: '' }) }; @@ -55,8 +55,7 @@ const NewCardForm = (props) => { name="emoji" id="emoji" onChange={ onFieldChange } - value={emojiDictionary.getUnicode(`${emojiOptions}`)} - > + value={(formFields.emoji === '') ? '' : emojiDictionary.getUnicode(`${emojiOptions}`)}> { emojiOptions }
    From 77c4a862ba4f362848076ddfcb36ca5160a158db Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 11:22:45 -0700 Subject: [PATCH 23/24] add proptypes, remove props from Board --- src/App.js | 7 +------ src/components/Board.js | 14 +++++--------- src/components/Card.js | 8 ++++++-- src/components/NewCardForm.js | 6 +++++- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 8e6d874d..338d1906 100644 --- a/src/App.js +++ b/src/App.js @@ -2,8 +2,6 @@ import React from 'react'; import './App.css'; import Board from './components/Board'; -const BASE_URL = "https://inspiration-board.herokuapp.com/" - const App = () => { return ( @@ -12,10 +10,7 @@ const App = () => {

    Inspiration Board

    - +
    ); diff --git a/src/components/Board.js b/src/components/Board.js index a3859915..5d2bb333 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,5 +1,4 @@ -import React, { Component, useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; +import React, { useState, useEffect } from 'react'; import axios from 'axios'; import './Board.css'; @@ -9,12 +8,13 @@ import NewCardForm from './NewCardForm'; const Board = (props) => { const BASE_URL = "https://inspiration-board.herokuapp.com/" + const BASE_BOARD = "jessica-liang" const [cardList, setCardList] = useState([]); const [errorMessage, setErrorMessage] = useState(null); const newCardList = []; useEffect(() => { - axios.get(props.url + "boards/" + props.boardName + "/cards") + axios.get(BASE_URL + "boards/" + BASE_BOARD + "/cards") .then( (response) => { for (let card of response.data) { newCardList.push( @@ -35,7 +35,7 @@ const Board = (props) => { setErrorMessage(error.message); console.log(error.message); }); - }, [cardList]); + }, [newCardList]); // Delete a card from board. const deleteCard = (props) => { @@ -50,7 +50,7 @@ const Board = (props) => { // Add a card to board. const addCard = (props) => { - axios.post(BASE_URL + "boards/jessica-liang/cards", props) + axios.post(BASE_URL + "boards/" + BASE_BOARD + "/cards", props) .then((response) => { setErrorMessage(`Card ${ props } added`); }) @@ -70,8 +70,4 @@ const Board = (props) => { ); }; -Board.propTypes = { - -}; - export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 920134cd..257ee4bf 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import emojiDictionary from 'emoji-dictionary'; @@ -25,7 +25,11 @@ const Card = (props) => { } Card.propTypes = { - + // key: PropTypes.number.isRequired, + id: PropTypes.number.isRequired, + text: PropTypes.string, + emoji: PropTypes.string, + deleteCardCallBack: PropTypes.func.isRequired, }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 03762f70..7face1c5 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,4 +1,4 @@ -import React, { Component, useState } from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import emojiDictionary from 'emoji-dictionary'; import './NewCardForm.css'; @@ -71,4 +71,8 @@ const NewCardForm = (props) => { ) } +NewCardForm.propTypes = { + addCardCallBack: PropTypes.func.isRequired +}; + export default NewCardForm; From 3d45f06ee15a9c8919fba087c4847ca3c7dde252 Mon Sep 17 00:00:00 2001 From: Jessica Liang Date: Fri, 24 Apr 2020 11:23:29 -0700 Subject: [PATCH 24/24] remove single comment --- src/components/Card.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Card.js b/src/components/Card.js index 257ee4bf..08e2d061 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -25,7 +25,6 @@ const Card = (props) => { } Card.propTypes = { - // key: PropTypes.number.isRequired, id: PropTypes.number.isRequired, text: PropTypes.string, emoji: PropTypes.string,