From e6c6197de2c381b5dc10491433dc19cf6d37eec8 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Fri, 24 Apr 2020 13:44:53 -0700 Subject: [PATCH 1/8] half way through wave 1, figuring out props and how to make a card --- package.json | 4 +-- src/App.js | 39 ++++++++++++++++++++++++---- src/components/Board.js | 48 ++++++++++++++++++++++++++--------- src/components/Card.js | 39 ++++++++++++++++++++-------- src/components/NewCardForm.js | 21 +++++++++++---- 5 files changed, 117 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index 8b404206..cdd51bf0 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { - "axios": "^0.19.2", - "emoji-dictionary": "^1.0.10", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "axios": "^0.19.2", + "emoji-dictionary": "^1.0.10", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" diff --git a/src/App.js b/src/App.js index 60566602..cc0646f2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,48 @@ -import React from 'react'; -import './App.css'; -import Board from './components/Board'; +import React from "react"; +import "./App.css"; +import Board from "./components/Board"; const App = () => { return (
-

Inspiration Board

+

+ Inspiration Board +

); }; export default App; + +// ------ PROPS ------- +//formSubmitCallback +//allBoardsState + +// ------- CREATING NEXT ID ------ + +//----- GET API ---------------- +//const App = () => { +// const [studentList, setStudentList] = useState([]); +// const [errorMessage, setErrorMessage] = useState(null); + +// useEffect(() => { +// axios.get(API_URL_BASE) +// .then((response) => { +// const apiStudentList = response.data; +// setStudentList(apiStudentList); +// }) +// .catch((error) => { +// setErrorMessage(error.message); +// console.log(error.message); +// }); +// }, []); + +//-----RETURN THE ERROR MESSAGE------ +//
+//{ errorMessage ?

{errorMessage}

: '' } diff --git a/src/components/Board.js b/src/components/Board.js index 698faaaa..aa60afca 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,21 +1,45 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import axios from 'axios'; +import React, { Component, useState, useEffect } 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"; + +const createBoard = (props) => { + const board = { + board: [], //array is going to hold all the cards + boardName: props.boardName, + boardURL: props.url, + error: "", + }; + + return board; +}; + +const Board = (props) => { + const [listCards, setListCards] = useState([]); + const [errorMessage, setErrorMessage] = useState(null); //api error message + const [board, setBoard] = useState(createBoard()); //props inside createBoard? + + const deleteCallback = (id) => {}; -const Board = () => { return ( -
- Board +
+
Board
+
- ) + ); }; -Board.propTypes = { +Board.propTypes = { + url: PropTypes.string, + boardName: PropTypes.string, }; export default Board; + +//allCards +//formSubmitCallback +//board has a name or an unique id diff --git a/src/components/Card.js b/src/components/Card.js index 51a33966..2eed9dc5 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,19 +1,38 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import emoji from "emoji-dictionary"; -import './Card.css'; +import "./Card.css"; -const Card = () => { +const Card = ({emoji, text, deleteCallback, id}) => { + return ( -
- Card +
//?? should we keep this? +
+
{text ? text : ''}
+
{emoji ? emoji.getUnicode(emoji) : ''}
+ +
) -} + +// { +// "card": { +// "id": 4733, +// "text": "'Be patient'", +// "emoji": "'heart'" +// } +// }; -Card.propTypes = { +// Card.propTypes = { +// id: PropTypes.number, +// text: PropTypes.string.isRequired, +// emoji: PropTypes.string, +// deleteCallback: PropTypes.func, +// }; +//card data -}; +// const studentIds = newStudentList.map(student => student.id); +//const nextId = Math.max(...studentIds) + 1; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..0eb143b2 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,6 +1,17 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; -import './NewCardForm.css'; +import React, { Component } from "react"; //this is new +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", +]; + +//formSubmitCallback +//name or id of the board From 2c13c6ba9326204e057b9802ab55a5bd2e151c99 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Fri, 24 Apr 2020 16:19:01 -0700 Subject: [PATCH 2/8] list of cards api call --- src/App.js | 2 +- src/components/Board.js | 51 ++++++++++++++++++++++++++++++----------- src/components/Card.js | 12 +++++----- 3 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/App.js b/src/App.js index cc0646f2..c007c660 100644 --- a/src/App.js +++ b/src/App.js @@ -29,7 +29,7 @@ export default App; //----- GET API ---------------- //const App = () => { // const [studentList, setStudentList] = useState([]); -// const [errorMessage, setErrorMessage] = useState(null); +//; // useEffect(() => { // axios.get(API_URL_BASE) diff --git a/src/components/Board.js b/src/components/Board.js index aa60afca..bdadd546 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,33 +1,44 @@ import React, { Component, useState, useEffect } 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"; -const createBoard = (props) => { - const board = { - board: [], //array is going to hold all the cards - boardName: props.boardName, - boardURL: props.url, - error: "", - }; - - return board; -}; - -const Board = (props) => { +const Board = ({ url, boardName }) => { const [listCards, setListCards] = useState([]); const [errorMessage, setErrorMessage] = useState(null); //api error message - const [board, setBoard] = useState(createBoard()); //props inside createBoard? + + //--------- API CALL ------------ + + useEffect(() => { + axios + .get(`${url}${boardName}`) + .then((response) => { + const apiListCards = response.data; + setListCards(apiListCards); + }) + .catch((error) => { + setErrorMessage(error.message); + console.log(error.message); + }); + }, [listCards]); + console.log(listCards); + const formSubmitCallback = () => {}; const deleteCallback = (id) => {}; return (
Board
+ {errorMessage ? ( +
+

{errorMessage}

+
+ ) : ( + "" + )}
); @@ -43,3 +54,15 @@ export default Board; //allCards //formSubmitCallback //board has a name or an unique id + +//if something is always a prop you dont need to track in state, because you are never going to change it + +// const createBoard = () => { +// const board = { +// board: [], //array is going to hold all the cards +// boardName: props.boardName, +// boardURL: props.url, +// error: "", +// }; +// return board; +// }; diff --git a/src/components/Card.js b/src/components/Card.js index 2eed9dc5..158a066b 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -24,12 +24,12 @@ const Card = ({emoji, text, deleteCallback, id}) => { // } // }; -// Card.propTypes = { -// id: PropTypes.number, -// text: PropTypes.string.isRequired, -// emoji: PropTypes.string, -// deleteCallback: PropTypes.func, -// }; +Card.propTypes = { + id: PropTypes.number, + text: PropTypes.string.isRequired, + emoji: PropTypes.string, + deleteCallback: PropTypes.func, +}; //card data // const studentIds = newStudentList.map(student => student.id); From bde9c0af9126bba920651250edafc5eb1a9e16e3 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Fri, 24 Apr 2020 18:17:32 -0700 Subject: [PATCH 3/8] api renders text, emoji and it has id --- src/components/Board.js | 17 +++++++++------ src/components/Card.js | 46 ++++++++++++++++++++++++----------------- 2 files changed, 38 insertions(+), 25 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index bdadd546..1348e080 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -9,29 +9,30 @@ import CARD_DATA from "../data/card-data.json"; const Board = ({ url, boardName }) => { const [listCards, setListCards] = useState([]); const [errorMessage, setErrorMessage] = useState(null); //api error message + console.log(listCards); //--------- API CALL ------------ - useEffect(() => { axios - .get(`${url}${boardName}`) + .get(`${url}${boardName}/cards`) .then((response) => { const apiListCards = response.data; setListCards(apiListCards); + console.log(apiListCards[0].card.id); }) .catch((error) => { setErrorMessage(error.message); console.log(error.message); }); - }, [listCards]); - console.log(listCards); + }, [boardName]); // this is a dependency array. If one of the dependencies change the callback method will be run, if it is empty it will only run on the first render + const formSubmitCallback = () => {}; const deleteCallback = (id) => {}; return (
-
Board
+
Board {boardName}
{errorMessage ? (

{errorMessage}

@@ -39,7 +40,11 @@ const Board = ({ url, boardName }) => { ) : ( "" )} - + {listCards.map((el) => { + return ( + + ); + })}
); }; diff --git a/src/components/Card.js b/src/components/Card.js index 158a066b..b768ebdb 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,28 +1,29 @@ -import React, { Component } from "react"; +import React from "react"; import PropTypes from "prop-types"; -import emoji from "emoji-dictionary"; +import emojiLib from "emoji-dictionary"; import "./Card.css"; -const Card = ({emoji, text, deleteCallback, id}) => { - +const Card = ({ emoji, text, deleteCallback, id }) => { return ( -
//?? should we keep this? +
-
{text ? text : ''}
-
{emoji ? emoji.getUnicode(emoji) : ''}
- +
{text ? text : ""}
+
+ {emoji ? emojiLib.getUnicode(emoji) : ""} +
+
- ) - -// { -// "card": { -// "id": 4733, -// "text": "'Be patient'", -// "emoji": "'heart'" -// } -// }; + ); +}; Card.propTypes = { id: PropTypes.number, @@ -30,9 +31,16 @@ Card.propTypes = { emoji: PropTypes.string, deleteCallback: PropTypes.func, }; +export default Card; + +// { +// "card": { +// "id": 4733, +// "text": "'Be patient'", +// "emoji": "'heart'" +// } +// }; //card data // const studentIds = newStudentList.map(student => student.id); //const nextId = Math.max(...studentIds) + 1; - -export default Card; From 1ef70efd1ba082f811581afa8b57fa5d091cb46c Mon Sep 17 00:00:00 2001 From: mulhoo Date: Sat, 25 Apr 2020 12:16:24 -0700 Subject: [PATCH 4/8] Wave 3, still some bugs --- src/components/Board.js | 41 ++++++++++++++++++--- src/components/Card.js | 16 ++++----- src/components/NewCardForm.js | 68 ++++++++++++++++++++++++++++++++++- 3 files changed, 111 insertions(+), 14 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 1348e080..aa8c03f6 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,4 +1,4 @@ -import React, { Component, useState, useEffect } from "react"; +import React, { useState, useEffect } from "react"; import PropTypes from "prop-types"; import axios from "axios"; import "./Board.css"; @@ -9,6 +9,8 @@ import CARD_DATA from "../data/card-data.json"; const Board = ({ url, boardName }) => { const [listCards, setListCards] = useState([]); const [errorMessage, setErrorMessage] = useState(null); //api error message + const [board, setBoard] = useState([]) + console.log(listCards); //--------- API CALL ------------ @@ -26,9 +28,38 @@ const Board = ({ url, boardName }) => { }); }, [boardName]); // this is a dependency array. If one of the dependencies change the callback method will be run, if it is empty it will only run on the first render - const formSubmitCallback = () => {}; + // const formSubmitCallback = () => {}; + + const addCard = (card) => { + axios + .post(url + boardName + '/cards', {text: card.text, emoji: card.emoji}) + .then((response) => { + const newCard = { + "card": { + "id": response.data.card.id, + "text": response.data.card.text, + "emoji": response.data.card.emoji, + } + } + setBoard(board.push(newCard)); + }) + .catch((error) => { + setErrorMessage(error.message); + console.log(error.message); + }) + }; - const deleteCallback = (id) => {}; + const deleteCard = (id) => { + axios.delete(`${url}${boardName}/cards/${id}`) + .then((response) => { + const updateBoard = response.data.filter((card) => card.card.id !== id); + setBoard(updateBoard); + }) + .catch((error) => { + setErrorMessage(error.message); + console.log(error.message); + }); + }; return (
@@ -42,9 +73,11 @@ const Board = ({ url, boardName }) => { )} {listCards.map((el) => { return ( - + ); })} + +
); }; diff --git a/src/components/Card.js b/src/components/Card.js index b768ebdb..13e10c3e 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -4,20 +4,18 @@ import emojiLib from "emoji-dictionary"; import "./Card.css"; -const Card = ({ emoji, text, deleteCallback, id }) => { +const Card = ({ emoji, text, deleteCardCallback, id }) => { return (
-
-
{text ? text : ""}
-
+
+
{text ? text : ""}
+
{emoji ? emojiLib.getUnicode(emoji) : ""}
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 0eb143b2..5b303da0 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,4 +1,4 @@ -import React, { Component } from "react"; //this is new +import React, { useState } from "react"; import PropTypes from "prop-types"; import emoji from "emoji-dictionary"; import "./NewCardForm.css"; @@ -13,5 +13,71 @@ const EMOJI_LIST = [ "dog", ]; +const NewCardForm = (props) => { + const [text, setText] = useState(''); + const [emoji, setEmoji] =useState('') + + // function for submitting the form + const onFormSubmit = (event) => { + event.preventDefault(); + const message = { + text: {text}, + emoji: {emoji} + }; + + setText('') + setEmoji('') + + // props.onFormSubmit(text); + props.addCardCallback(message) + } + + return ( +
+

What inspires you?

+ +
+ + setText(e.target.value)} + /> +
+ +
+ + setEmoji(e.target.value)} + /> +
+ + +
+ ); +} + +NewCardForm.propTypes = { + text: PropTypes.string, + emoji: PropTypes.string, + addCardCallback: PropTypes.func, +} + +export default NewCardForm + //formSubmitCallback //name or id of the board From 638e058d154b93539bb58eed4050f8993cf1ca73 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Sat, 25 Apr 2020 12:36:13 -0700 Subject: [PATCH 5/8] Added a key to card component, made card text not required string --- src/components/Board.js | 23 ++++++----------------- src/components/Card.js | 2 +- src/data/card-data.json | 2 ++ 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 1348e080..6cefc35a 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -42,7 +42,12 @@ const Board = ({ url, boardName }) => { )} {listCards.map((el) => { return ( - + ); })}
@@ -55,19 +60,3 @@ Board.propTypes = { }; export default Board; - -//allCards -//formSubmitCallback -//board has a name or an unique id - -//if something is always a prop you dont need to track in state, because you are never going to change it - -// const createBoard = () => { -// const board = { -// board: [], //array is going to hold all the cards -// boardName: props.boardName, -// boardURL: props.url, -// error: "", -// }; -// return board; -// }; diff --git a/src/components/Card.js b/src/components/Card.js index b768ebdb..2c2d7122 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -27,7 +27,7 @@ const Card = ({ emoji, text, deleteCallback, id }) => { Card.propTypes = { id: PropTypes.number, - text: PropTypes.string.isRequired, + text: PropTypes.string, emoji: PropTypes.string, deleteCallback: PropTypes.func, }; diff --git a/src/data/card-data.json b/src/data/card-data.json index 1f9793ec..525e5452 100644 --- a/src/data/card-data.json +++ b/src/data/card-data.json @@ -19,3 +19,5 @@ } ] } + + From aca455eac50cdda8c59b23f2b93444afe15b3014 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Sat, 25 Apr 2020 13:49:37 -0700 Subject: [PATCH 6/8] fixed api delete and list of cards state is now board --- src/App.js | 27 --------------------------- src/components/Board.js | 24 ++++++++++-------------- src/components/Card.js | 10 ++++++---- 3 files changed, 16 insertions(+), 45 deletions(-) diff --git a/src/App.js b/src/App.js index c007c660..c5755335 100644 --- a/src/App.js +++ b/src/App.js @@ -19,30 +19,3 @@ const App = () => { }; export default App; - -// ------ PROPS ------- -//formSubmitCallback -//allBoardsState - -// ------- CREATING NEXT ID ------ - -//----- GET API ---------------- -//const App = () => { -// const [studentList, setStudentList] = useState([]); -//; - -// useEffect(() => { -// axios.get(API_URL_BASE) -// .then((response) => { -// const apiStudentList = response.data; -// setStudentList(apiStudentList); -// }) -// .catch((error) => { -// setErrorMessage(error.message); -// console.log(error.message); -// }); -// }, []); - -//-----RETURN THE ERROR MESSAGE------ -//
-//{ errorMessage ?

{errorMessage}

: '' } diff --git a/src/components/Board.js b/src/components/Board.js index 6b2e49f6..f960d193 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,20 +7,17 @@ import NewCardForm from "./NewCardForm"; import CARD_DATA from "../data/card-data.json"; const Board = ({ url, boardName }) => { - const [listCards, setListCards] = useState([]); - const [errorMessage, setErrorMessage] = useState(null); //api error message const [board, setBoard] = useState([]); - - console.log(listCards); + const [errorMessage, setErrorMessage] = useState(null); //api error message //--------- API CALL ------------ useEffect(() => { axios .get(`${url}${boardName}/cards`) .then((response) => { - const apiListCards = response.data; - setListCards(apiListCards); - console.log(apiListCards[0].card.id); + const apiBoard = response.data; + setBoard(apiBoard); + console.log(apiBoard[0].card.id); }) .catch((error) => { setErrorMessage(error.message); @@ -28,8 +25,6 @@ const Board = ({ url, boardName }) => { }); }, [boardName]); // this is a dependency array. If one of the dependencies change the callback method will be run, if it is empty it will only run on the first render - // const formSubmitCallback = () => {}; - const addCard = (card) => { axios .post(url + boardName + "/cards", { text: card.text, emoji: card.emoji }) @@ -51,10 +46,11 @@ const Board = ({ url, boardName }) => { const deleteCard = (id) => { axios - .delete(`${url}${boardName}/cards/${id}`) + .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) //https://inspiration-board.herokuapp.com/cards/:card_id .then((response) => { - const updateBoard = response.data.filter((card) => card.card.id !== id); - setBoard(updateBoard); + console.log(response); + const updateBoard = board.filter((card) => card.card.id !== id); //api + setBoard(updateBoard); // }) .catch((error) => { setErrorMessage(error.message); @@ -72,14 +68,14 @@ const Board = ({ url, boardName }) => { ) : ( "" )} - {listCards.map((el) => { + {board.map((el) => { return ( ); })} diff --git a/src/components/Card.js b/src/components/Card.js index 8d6b6c71..01df651a 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -4,7 +4,7 @@ import emojiLib from "emoji-dictionary"; import "./Card.css"; -const Card = ({ emoji, text, deleteCardCallback, id }) => { +const Card = ({ emoji, text, deleteCard, id }) => { return (
@@ -14,8 +14,10 @@ const Card = ({ emoji, text, deleteCardCallback, id }) => {
@@ -27,7 +29,7 @@ Card.propTypes = { id: PropTypes.number, text: PropTypes.string, emoji: PropTypes.string, - deleteCallback: PropTypes.func, + deleteCard: PropTypes.func, }; export default Card; From 256c7685093ea62facb894ba9ad7ec7367038db7 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Sat, 25 Apr 2020 14:56:37 -0700 Subject: [PATCH 7/8] post api is fixed --- src/components/Board.js | 6 ++-- src/components/NewCardForm.js | 53 ++++++++++++++++------------------- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index f960d193..a3dd848f 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -10,6 +10,8 @@ const Board = ({ url, boardName }) => { const [board, setBoard] = useState([]); const [errorMessage, setErrorMessage] = useState(null); //api error message + console.log(board); + //--------- API CALL ------------ useEffect(() => { axios @@ -17,7 +19,6 @@ const Board = ({ url, boardName }) => { .then((response) => { const apiBoard = response.data; setBoard(apiBoard); - console.log(apiBoard[0].card.id); }) .catch((error) => { setErrorMessage(error.message); @@ -36,7 +37,8 @@ const Board = ({ url, boardName }) => { emoji: response.data.card.emoji, }, }; - setBoard(board.push(newCard)); + const newBoard = [newCard, ...board]; + setBoard(newBoard); }) .catch((error) => { setErrorMessage(error.message); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 5b303da0..beb5d3a8 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import emoji from "emoji-dictionary"; +import emojiLib from "emoji-dictionary"; import "./NewCardForm.css"; const EMOJI_LIST = [ @@ -14,23 +14,21 @@ const EMOJI_LIST = [ ]; const NewCardForm = (props) => { - const [text, setText] = useState(''); - const [emoji, setEmoji] =useState('') + const [text, setText] = useState(""); + const [emoji, setEmoji] = useState(""); // function for submitting the form const onFormSubmit = (event) => { event.preventDefault(); const message = { - text: {text}, - emoji: {emoji} + text: text, + emoji: emoji, }; + props.addCardCallback(message); - setText('') - setEmoji('') - - // props.onFormSubmit(text); - props.addCardCallback(message) - } + setText(""); + setEmoji(""); + }; return (
@@ -40,12 +38,12 @@ const NewCardForm = (props) => { - setText(e.target.value)} + value={text} + onChange={(e) => setText(e.target.value)} />
@@ -53,31 +51,28 @@ const NewCardForm = (props) => { - setEmoji(e.target.value)} + value={emoji} + onChange={(e) => setEmoji(e.target.value)} />
- ); -} +}; NewCardForm.propTypes = { text: PropTypes.string, emoji: PropTypes.string, addCardCallback: PropTypes.func, -} - -export default NewCardForm +}; -//formSubmitCallback -//name or id of the board +export default NewCardForm; From cff27293ee0a425549ed6fe9e713d48bcf735100 Mon Sep 17 00:00:00 2001 From: Sara Nilsen Date: Sun, 26 Apr 2020 10:34:49 -0700 Subject: [PATCH 8/8] all tests are READY to go --- src/App.test.js | 14 +-- src/components/Board.js | 7 +- src/components/Board.test.js | 14 +++ src/components/Card.test.js | 22 +++++ src/components/NewCardForm.js | 9 ++ src/components/NewCardForm.test.js | 14 +++ .../__snapshots__/Board.test.js.snap | 92 +++++++++++++++++++ .../__snapshots__/Card.test.js.snap | 29 ++++++ .../__snapshots__/NewCardForm.test.js.snap | 85 +++++++++++++++++ src/setupTests.js | 6 +- 10 files changed, 276 insertions(+), 16 deletions(-) create mode 100644 src/components/Card.test.js create mode 100644 src/components/__snapshots__/Board.test.js.snap create mode 100644 src/components/__snapshots__/Card.test.js.snap create mode 100644 src/components/__snapshots__/NewCardForm.test.js.snap diff --git a/src/App.test.js b/src/App.test.js index e857c27d..3b36a76e 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,11 +1,7 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -describe('App', () => { - - it('renders without crashing', () => { - console.log('testing would be nice! :)'); - }); +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +describe("App", () => { + it("renders without crashing", () => {}); }); diff --git a/src/components/Board.js b/src/components/Board.js index a3dd848f..2bd4db65 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,11 +8,10 @@ import CARD_DATA from "../data/card-data.json"; const Board = ({ url, boardName }) => { const [board, setBoard] = useState([]); - const [errorMessage, setErrorMessage] = useState(null); //api error message + const [errorMessage, setErrorMessage] = useState(null); console.log(board); - //--------- API CALL ------------ useEffect(() => { axios .get(`${url}${boardName}/cards`) @@ -48,10 +47,10 @@ const Board = ({ url, boardName }) => { const deleteCard = (id) => { axios - .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) //https://inspiration-board.herokuapp.com/cards/:card_id + .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) .then((response) => { console.log(response); - const updateBoard = board.filter((card) => card.card.id !== id); //api + const updateBoard = board.filter((card) => card.card.id !== id); setBoard(updateBoard); // }) .catch((error) => { diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..f80dda19 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,14 @@ +import React from "react"; +import { render, cleanup } from "@testing-library/react"; +import Board from "./Board"; + +describe("Board", () => { + test("that it matches the existing snapshot", () => { + // Arrange-Act + const { asFragment } = render(); + + // Assert + expect(asFragment()).toMatchSnapshot(); + cleanup(); + }); +}); diff --git a/src/components/Card.test.js b/src/components/Card.test.js new file mode 100644 index 00000000..82dcdb71 --- /dev/null +++ b/src/components/Card.test.js @@ -0,0 +1,22 @@ +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( + null} + /> + ); + + // Assert + expect(asFragment()).toMatchSnapshot(); + cleanup(); + }); +}); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index beb5d3a8..64d1e517 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -30,6 +30,14 @@ const NewCardForm = (props) => { setEmoji(""); }; + const allEmojis = EMOJI_LIST.map((emoji, index) => { + return ( + + ); + }); + return (

What inspires you?

@@ -50,6 +58,7 @@ const NewCardForm = (props) => {
{ + test("that it matches the existing snapshot", () => { + // Arrange-Act + const { asFragment } = render( null} />); + + // Assert + expect(asFragment()).toMatchSnapshot(); + cleanup(); + }); +}); diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..31090069 --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,92 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board that it matches the existing snapshot 1`] = ` + +
+
+ Board Pinreact +
+ +

+ What inspires you? +

+
+ + +
+
+ + +
+ + +
+ +`; diff --git a/src/components/__snapshots__/Card.test.js.snap b/src/components/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..50678f95 --- /dev/null +++ b/src/components/__snapshots__/Card.test.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches the existing snapshot 1`] = ` + +
+
+
+ happy +
+
+ 🐶 +
+ +
+
+ +`; diff --git a/src/components/__snapshots__/NewCardForm.test.js.snap b/src/components/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..681f21fa --- /dev/null +++ b/src/components/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches the existing snapshot 1`] = ` + +
+

+ What inspires you? +

+
+ + +
+
+ + +
+ +
+ +`; diff --git a/src/setupTests.js b/src/setupTests.js index fc7b0dce..42caa142 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -1,4 +1,4 @@ -import Enzyme from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +// import Enzyme from "enzyme"; +// import Adapter from "enzyme-adapter-react-16"; -Enzyme.configure({ adapter: new Adapter() }); +// Enzyme.configure({ adapter: new Adapter() });