From 14f32bf413cb4dfe72f0fc8b6305ab18cf9086b0 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Thu, 23 Apr 2020 21:24:32 -0700 Subject: [PATCH 01/31] got card to display with an emoji --- package.json | 4 +-- src/App.js | 72 ++++++++++++++++++++++++++++++++++++++--- src/components/Board.js | 24 ++++++++++++-- src/components/Card.js | 28 ++++++++++++---- 4 files changed, 113 insertions(+), 15 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..e9d4e2c0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,81 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import './App.css'; +import axios from 'axios'; import Board from './components/Board'; +import Card from './components/Card'; +const emoji = require("emoji-dictionary"); + + +const cards = [ + { + id: 5050, + text: "Life is good!", + emoji: emoji.getUnicode("heart_eyes") + }, + { + id: 5125, + text: "Hala and Diana are doing great!", + emoji: "\"Heart Decoration\"" + }, + { + id: 5039, + text: "Be good to people for no reason", + emoji: emoji.getUnicode("heart_eyes") + } +]; + const App = () => { + + const [cardList, setCardList] = useState(cards); + console.log("cardList", cardList) + + return (

Inspiration Board

- + {console.log('please work')}; + {/* */} +
); }; export default App; +// +// const App = () => { + // console.log('rendering'); + // const [studentList, setStudentList] = useState([]); +// + // useEffect(() => { + // get the studentList from localstorage + // const jsonStudentList = localStorage.getItem('studentList'); + // Convert the json into an Array, if it's null use the students array. + // const startingStudents = JSON.parse(jsonStudentList) || students; +// + // Use the local storage to update state + // setStudentList(startingStudents); +// + // Cleanup function + // return () => { + // cleanup actions here +// + // localStorage.setItem('studentList', JSON.stringify(studentList)); + // } + // }, []); +// + + + +// useEffect to get StudentData from API + +// const [studentList, setStudentList] = useState([]); + // const [errorMessage, setErrorMessage] = useState(null); + + diff --git a/src/components/Board.js b/src/components/Board.js index 698faaaa..36385b48 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,10 +7,30 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const Board = () => { +const Board = ({cards}) => { + // const [cardList, setCardList] = useState([]); + // const [errorMessage, setErrorMessage] = useState(null); + + // useEffect(() => { + // axios.get(url) + // .then((response) => { + // const apiCardList = response.data; + // console.log("it works", response.data); + // setCardList(apiCardList); + // }) + // .catch((error) => { + // const errorMessage = error.message + // setErrorMessage(errorMessage); + // console.log(errorMessage) + // }); + // }, []); + + return (
+
) }; diff --git a/src/components/Card.js b/src/components/Card.js index 51a33966..7edff908 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,19 +1,35 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; - import './Card.css'; +const emoji = require("emoji-dictionary"); + +// Build the Card component to display a single +// inspirational quote and optional emoji + +const Card = ({cards}) => { + const newCards = cards.map((card) => ( +

{card.text} {card.emoji}

+ )) + + // const newCards = cards.map((card) => ( + // card.text + // )); + + // emoji.getUnicode("heart_eyes"); + // 😍 -const Card = () => { return ( -
- Card +
+ {/* {emoji.getUnicode("heart_eyes")} */} + {newCards}
) } Card.propTypes = { - + id: PropTypes.number.isRequired, + text: PropTypes.string.isRequired, + emoji: PropTypes.string, }; export default Card; From 6ae1b746c7cc7f0fac1420386726fffb5646c828 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Thu, 23 Apr 2020 21:50:38 -0700 Subject: [PATCH 02/31] reorganize board --- src/App.js | 6 +++--- src/components/Board.js | 34 ++++++++++++++++++++++++++++++++-- src/components/Card.js | 15 +++------------ 3 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index e9d4e2c0..58ff8ffc 100644 --- a/src/App.js +++ b/src/App.js @@ -37,12 +37,12 @@ const App = () => {

Inspiration Board

{console.log('please work')}; - {/* */} - + /> + ); }; diff --git a/src/components/Board.js b/src/components/Board.js index 36385b48..8b2f1f89 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,6 +8,22 @@ import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; const Board = ({cards}) => { + + const cardCollection = cards.map((card, i) => { + return ( +
  • + +
    • + ); + }); + //

    {card.text} {card.emoji}

    + + + // const [cardList, setCardList] = useState([]); // const [errorMessage, setErrorMessage] = useState(null); @@ -24,12 +40,26 @@ const Board = ({cards}) => { // console.log(errorMessage) // }); // }, []); + + // const studentComponents = props.students.map((student, i) => { + // return ( + //
  • + // + //
    • + // ); + // }); return ( -
    +
    ) diff --git a/src/components/Card.js b/src/components/Card.js index 7edff908..1d5d2415 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -6,22 +6,13 @@ const emoji = require("emoji-dictionary"); // Build the Card component to display a single // inspirational quote and optional emoji -const Card = ({cards}) => { - const newCards = cards.map((card) => ( -

    {card.text} {card.emoji}

    - )) - - // const newCards = cards.map((card) => ( - // card.text - // )); - - // emoji.getUnicode("heart_eyes"); - // 😍 +const Card = (props) => { return (
    {/* {emoji.getUnicode("heart_eyes")} */} - {newCards} + {props.card.text} + {props.card.emoji}
    ) } From 738344355448ff3ba446979ff63d178588711990 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Thu, 23 Apr 2020 22:46:18 -0700 Subject: [PATCH 03/31] board and card components display hard coded data --- src/App.js | 23 ++--------------------- src/components/Board.js | 11 +++-------- src/components/Card.js | 7 +++---- 3 files changed, 8 insertions(+), 33 deletions(-) diff --git a/src/App.js b/src/App.js index 58ff8ffc..f25fec71 100644 --- a/src/App.js +++ b/src/App.js @@ -6,29 +6,11 @@ import Card from './components/Card'; const emoji = require("emoji-dictionary"); -const cards = [ - { - id: 5050, - text: "Life is good!", - emoji: emoji.getUnicode("heart_eyes") - }, - { - id: 5125, - text: "Hala and Diana are doing great!", - emoji: "\"Heart Decoration\"" - }, - { - id: 5039, - text: "Be good to people for no reason", - emoji: emoji.getUnicode("heart_eyes") - } -]; - const App = () => { - const [cardList, setCardList] = useState(cards); - console.log("cardList", cardList) + // const [cardList, setCardList] = useState(cards); + // console.log("cardList", cardList) return ( @@ -40,7 +22,6 @@ const App = () => { diff --git a/src/components/Board.js b/src/components/Board.js index 8b2f1f89..e5ca3e39 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,17 +7,14 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const Board = ({cards}) => { +const Board = (props) => { - const cardCollection = cards.map((card, i) => { + const cardCollection = CARD_DATA.cards.map((card) => { return ( -
  • -
    • ); }); //

    {card.text} {card.emoji}

    @@ -58,9 +55,7 @@ const Board = ({cards}) => { return (
    - + {cardCollection}
    ) }; diff --git a/src/components/Card.js b/src/components/Card.js index 1d5d2415..dfb551aa 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -11,15 +11,14 @@ const Card = (props) => { return (
    {/* {emoji.getUnicode("heart_eyes")} */} - {props.card.text} - {props.card.emoji} + {props.text} + {emoji.getUnicode(`${props.emoji}`)}
    ) } Card.propTypes = { - id: PropTypes.number.isRequired, - text: PropTypes.string.isRequired, + text: PropTypes.string, emoji: PropTypes.string, }; From fb70dfadaa08bcb9954fbd009db03f28a03973e7 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Thu, 23 Apr 2020 23:01:08 -0700 Subject: [PATCH 04/31] can get the card data --- src/components/Board.js | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index e5ca3e39..910ee6ee 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -7,9 +7,28 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const Board = (props) => { +const Board = ({url}) => { - const cardCollection = CARD_DATA.cards.map((card) => { + const [cardList, setCardList] = useState([]); + const [errorMessage, setErrorMessage] = useState(null); + + useEffect(() => { + axios.get(url) + .then((response) => { + const apiCardList = response.data; + console.log("it works", response.data); + setCardList(apiCardList); + }) + .catch((error) => { + const errorMessage = error.message + setErrorMessage(errorMessage); + console.log(errorMessage) + }); + }, []); + + console.log("this is cardList", cardList, cardList[2]); + + const cardCollection = cardList.map((card) => { return ( { - // const [cardList, setCardList] = useState([]); - // const [errorMessage, setErrorMessage] = useState(null); - - // useEffect(() => { - // axios.get(url) - // .then((response) => { - // const apiCardList = response.data; - // console.log("it works", response.data); - // setCardList(apiCardList); - // }) - // .catch((error) => { - // const errorMessage = error.message - // setErrorMessage(errorMessage); - // console.log(errorMessage) - // }); - // }, []); // const studentComponents = props.students.map((student, i) => { // return ( From 0e06c48e71a4486f7cbd770dc5408b57d15179a9 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 00:03:46 -0700 Subject: [PATCH 05/31] board api get request working Co-authored-by: halahaddad1 --- src/components/Board.js | 50 ++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 910ee6ee..195cb001 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,4 +1,4 @@ -import React, { Component , useState, useEffect} from 'react'; +import React, { Component, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; @@ -7,7 +7,7 @@ import Card from './Card'; import NewCardForm from './NewCardForm'; import CARD_DATA from '../data/card-data.json'; -const Board = ({url}) => { +const Board = ({ url }) => { const [cardList, setCardList] = useState([]); const [errorMessage, setErrorMessage] = useState(null); @@ -16,8 +16,17 @@ const Board = ({url}) => { axios.get(url) .then((response) => { const apiCardList = response.data; - console.log("it works", response.data); - setCardList(apiCardList); + let cardCollection = apiCardList.map((item) => { + return ({ + id: item.card.id, + text: item.card.text, + emoji: item.card.emoji + + }); + }); + console.log("this is Card Collection:", cardCollection); + console.log("this is response", response); + setCardList(cardCollection); }) .catch((error) => { const errorMessage = error.message @@ -25,20 +34,20 @@ const Board = ({url}) => { console.log(errorMessage) }); }, []); - - console.log("this is cardList", cardList, cardList[2]); - const cardCollection = cardList.map((card) => { - return ( - - ); - }); - //

    {card.text} {card.emoji}

    - + console.log("this is cardList", cardList); + + // console.log("this is cardcollection", cardCollection); + //

    {card.text} {card.emoji}

    + + // const parsedCardCollection = cardList.map((card) => { + // + // }) // const studentComponents = props.students.map((student, i) => { @@ -54,11 +63,16 @@ const Board = ({url}) => { // // ); // }); - + return (
    - {cardCollection} + { + cardList.map((card) => ( + + )) + } + {/* {parsedCardCollection} */}
    ) }; From 4679a39235facc88821bf0c706f1ec307702ee19 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Fri, 24 Apr 2020 09:49:55 -0700 Subject: [PATCH 06/31] parsing through card work --- 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 910ee6ee..e7554184 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -29,10 +29,11 @@ const Board = ({url}) => { console.log("this is cardList", cardList, cardList[2]); const cardCollection = cardList.map((card) => { - return ( + console.log(card); + return ( ); }); From b488317fd4fd0640195eba2dfda7fb18f3305021 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 09:50:23 -0700 Subject: [PATCH 07/31] added emoji css styling --- src/components/Card.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Card.js b/src/components/Card.js index dfb551aa..ca9e84d6 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -12,7 +12,8 @@ const Card = (props) => {
    {/* {emoji.getUnicode("heart_eyes")} */} {props.text} - {emoji.getUnicode(`${props.emoji}`)} +

    {emoji.getUnicode(`${props.emoji}`)}

    +
    ) } From 95a8a43644a44357670f88de639b8e0a736a377e Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 09:55:19 -0700 Subject: [PATCH 08/31] able to display board and cards from api endpoint --- src/components/Board.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 195cb001..5ebb3dc9 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -17,12 +17,16 @@ const Board = ({ url }) => { .then((response) => { const apiCardList = response.data; let cardCollection = apiCardList.map((item) => { - return ({ - id: item.card.id, - text: item.card.text, - emoji: item.card.emoji - - }); + return ( + // id: item.card.id, + // text: item.card.text, + // emoji: item.card.emoji + + ); }); console.log("this is Card Collection:", cardCollection); console.log("this is response", response); @@ -67,12 +71,13 @@ const Board = ({ url }) => { return (
    - { + {/* { cardList.map((card) => ( )) - } + } */} {/* {parsedCardCollection} */} + {cardList}
    ) }; From 1d204b873809e12435800d431beb2de815021f50 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 10:02:39 -0700 Subject: [PATCH 09/31] css styling classNames adjusted --- src/components/Card.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index ca9e84d6..162e26a2 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -9,11 +9,11 @@ const emoji = require("emoji-dictionary"); const Card = (props) => { return ( -
    +
    {/* {emoji.getUnicode("heart_eyes")} */} - {props.text} -

    {emoji.getUnicode(`${props.emoji}`)}

    - +

    + {props.text} {emoji.getUnicode(`${props.emoji}`)} +

    ) } From 720e433184310d01b725022d89be18cc04c3dba5 Mon Sep 17 00:00:00 2001 From: Halahaddad1 Date: Fri, 24 Apr 2020 11:01:43 -0700 Subject: [PATCH 10/31] merging changes --- src/App.js | 2 +- src/components/Board.js | 57 +++++++++++------------------------------ src/components/Card.js | 17 +++++++----- 3 files changed, 26 insertions(+), 50 deletions(-) diff --git a/src/App.js b/src/App.js index f25fec71..8a1ba68f 100644 --- a/src/App.js +++ b/src/App.js @@ -18,7 +18,7 @@ const App = () => {

    Inspiration Board

    - {console.log('please work')}; + {console.log('please work')} { // id: item.card.id, // text: item.card.text, // emoji: item.card.emoji + + // so yeah for here i gave up trying to get card to work outside of the api call + // i don't know why we can't perform this mapping outside of the call, hope to get answers + // at roundtable { }); }, []); - const cardCollection = cardList.map((card) => { - console.log(card); - return ( - - ); - }); + // const cardCollection = cardList.map((card) => { + // console.log(card); + // return ( + // card + // // + // ); + // }); //

    {card.text} {card.emoji}

    console.log("this is cardList", cardList); - // console.log("this is cardcollection", cardCollection); - //

    {card.text} {card.emoji}

    - - // const parsedCardCollection = cardList.map((card) => { - // - // }) - - - // const studentComponents = props.students.map((student, i) => { - // return ( - //
  • - // - //
    • - // ); - // }); - - return (
    - {/* { - cardList.map((card) => ( - - )) - } */} - {/* {parsedCardCollection} */} {cardList}
    ) diff --git a/src/components/Card.js b/src/components/Card.js index ca9e84d6..e4b6519a 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,24 +1,27 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './Card.css'; -const emoji = require("emoji-dictionary"); +import emojis from 'emoji-dictionary'; +// const emoji = require("emoji-dictionary"); // Build the Card component to display a single // inspirational quote and optional emoji -const Card = (props) => { +const Card = ({emoji, id, text}) => { return ( -
    - {/* {emoji.getUnicode("heart_eyes")} */} - {props.text} -

    {emoji.getUnicode(`${props.emoji}`)}

    - +
    + {/* {emoji.getUnicode("heart_eyes")} */} +

    + {text} +

    + {emojis.getUnicode(`${emoji}`)}
    ) } Card.propTypes = { + id: PropTypes.number, text: PropTypes.string, emoji: PropTypes.string, }; From d4f443b27d9331ba6b45cc669c52bdf6225a96bd Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 12:28:23 -0700 Subject: [PATCH 11/31] removed unneeded comments --- src/components/Board.js | 38 +------------------------------------- 1 file changed, 1 insertion(+), 37 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 5ebb3dc9..9eaa90b4 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -18,10 +18,8 @@ const Board = ({ url }) => { const apiCardList = response.data; let cardCollection = apiCardList.map((item) => { return ( - // id: item.card.id, - // text: item.card.text, - // emoji: item.card.emoji { }); }, []); - console.log("this is cardList", cardList); - // console.log("this is cardcollection", cardCollection); - //

    {card.text} {card.emoji}

    - - // const parsedCardCollection = cardList.map((card) => { - // - // }) - - - // const studentComponents = props.students.map((student, i) => { - // return ( - //
  • - // - //
    • - // ); - // }); - - return (
    - {/* { - cardList.map((card) => ( - - )) - } */} - {/* {parsedCardCollection} */} {cardList}
    ) From 018cbb50a51cca06a4a3ad4c591d7f4c2b59f42c Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 12:29:31 -0700 Subject: [PATCH 12/31] fixed indentation for readability --- src/components/Card.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index e4b6519a..7ea8f01d 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -11,11 +11,12 @@ const Card = ({emoji, id, text}) => { return (
    - {/* {emoji.getUnicode("heart_eyes")} */} -

    - {text} -

    - {emojis.getUnicode(`${emoji}`)} +

    + {text} +

    + + {emojis.getUnicode(`${emoji}`)} +
    ) } From 8c6a03294aeb489b16544f5eaee040105befd01c Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 12:30:20 -0700 Subject: [PATCH 13/31] removed unneeded console.log message --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index f25fec71..aa0e52ca 100644 --- a/src/App.js +++ b/src/App.js @@ -18,7 +18,6 @@ const App = () => {

    Inspiration Board

    - {console.log('please work')}; Date: Fri, 24 Apr 2020 13:18:34 -0700 Subject: [PATCH 14/31] added and styled takethiscard button-nonfunctional --- src/components/Card.css | 2 +- src/components/Card.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Card.css b/src/components/Card.css index e86d4329..799f0156 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -1,5 +1,5 @@ .card { - background-color: #F4FF81; + background-color: #ffff88; padding: 1em 0; margin: 0.5rem; diff --git a/src/components/Card.js b/src/components/Card.js index 7ea8f01d..44cc3bab 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -17,8 +17,13 @@ const Card = ({emoji, id, text}) => { {emojis.getUnicode(`${emoji}`)} +
    ) + } Card.propTypes = { From db7e6df6014999d41578d06f59095a74fbab5d41 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 17:33:21 -0700 Subject: [PATCH 15/31] card can be deleted but not refreshed automatically Co-authored-by: halahaddad1 --- src/components/Board.js | 107 ++++++++++++++++++++++++++++------ src/components/Card.js | 31 +++++----- src/components/NewCardForm.js | 20 ++++++- 3 files changed, 125 insertions(+), 33 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 9eaa90b4..81c2ce48 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,18 +1,17 @@ -import React, { Component, useState, useEffect } 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 Board = ({ url }) => { - const [cardList, setCardList] = useState([]); const [errorMessage, setErrorMessage] = useState(null); - useEffect(() => { + const loadCards = () => { axios.get(url) .then((response) => { const apiCardList = response.data; @@ -23,6 +22,7 @@ const Board = ({ url }) => { id={item.card.id} text={item.card.text} emoji={item.card.emoji} + deleteCardCallback={deleteCard} /> ); }); @@ -31,22 +31,95 @@ const Board = ({ url }) => { setCardList(cardCollection); }) .catch((error) => { - const errorMessage = error.message + const errorMessage = error.message; setErrorMessage(errorMessage); - console.log(errorMessage) + console.log(errorMessage); }); + }; + + const renderCards = useEffect(() => { + loadCards(); }, []); - console.log("this is cardList", cardList); + // const deleteCard = (id) => { + // console.log(`It\'s going through cardList through deleteCardCallback`, { + // cardList, + // }); + + // axios + // .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) + // .then((response) => { + // setErrorMessage(`Card ${id} deleted`); + // setCardList(loadCards); + // }) + // .catch((error) => { + // setErrorMessage(`Unable to delete card ${id}`); + // }); + // }; + + // const newCardList = cardList.filter((card) => { + // return card.id !== id; + // }); + const deleteCard = (id) => { + // setCardList(renderCards); + console.log( + `It\'s going through cardList through deleteCardCallback`, + cardList + ); + + const newCardList = cardList.filter((card) => { + return card.id !== id; + }); + console.log(`this is the new card list`, newCardList); + if (newCardList.length < cardList.length) { + axios + .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) + .then((response) => { + setCardList(newCardList); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${id}`); + }); + } + setCardList(renderCards) + }; + + // const loadCards = () => { + // + // } + // + // useEffect({loadCards}, []); + + // delete card axios pseudocode + // const deleteStudent = (id) => { + // const newStudentList = studentList.filter((student) => { + // return student.id !== id; + // }); + + // if (newStudentList.length < studentList.length) { + // axios.delete(`${ API_URL_BASE }/${ id }`) + // .then((response) => { + // setErrorMessage(`Student ${ id } deleted`); + // }) + // .catch((error) => { + // setErrorMessage(`Unable to delete student ${ id }`); + // }) + // setStudentList(newStudentList); + // } + // } + + // delete button callback return ( -
    - {cardList} +
    + +
    {cardList}
    - ) + ); }; -Board.propTypes = { -}; +// Board.propTypes = { + +// }; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index 44cc3bab..ac5c5197 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,35 +1,36 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import './Card.css'; -import emojis from 'emoji-dictionary'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import "./Card.css"; +import emojis from "emoji-dictionary"; // const emoji = require("emoji-dictionary"); -// Build the Card component to display a single +// Build the Card component to display a single // inspirational quote and optional emoji -const Card = ({emoji, id, text}) => { - +const Card = ({ emoji, id, text, deleteCardCallback }) => { return (
    -

    - {text} -

    +

    {text}

    {emojis.getUnicode(`${emoji}`)} + > + ✨ Take this card ✨ +
    - ) - -} + ); +}; Card.propTypes = { id: PropTypes.number, text: PropTypes.string, emoji: PropTypes.string, + deleteCardCallback: PropTypes.func, }; export default Card; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 47331423..63dddadd 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,6 +1,24 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import emoji from 'emoji-dictionary'; +import emojis from 'emoji-dictionary'; import './NewCardForm.css'; const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"] + +const NewCardForm = () => { + return ( +
    +
    Submit a card!
    + + +
    + ) +} + +export default NewCardForm; \ No newline at end of file From 38c6ea165a979d992cb4087ef36982362204fd81 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 17:50:42 -0700 Subject: [PATCH 16/31] =?UTF-8?q?able=20to=20delete=20card=20and=20automat?= =?UTF-8?q?ically=20render=20=CE=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Board.js | 46 +++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 81c2ce48..cf9b4493 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -12,7 +12,8 @@ const Board = ({ url }) => { const [errorMessage, setErrorMessage] = useState(null); const loadCards = () => { - axios.get(url) + axios + .get(url) .then((response) => { const apiCardList = response.data; let cardCollection = apiCardList.map((item) => { @@ -37,7 +38,7 @@ const Board = ({ url }) => { }); }; - const renderCards = useEffect(() => { + useEffect(() => { loadCards(); }, []); @@ -62,26 +63,27 @@ const Board = ({ url }) => { // }); const deleteCard = (id) => { // setCardList(renderCards); - console.log( - `It\'s going through cardList through deleteCardCallback`, - cardList - ); - - const newCardList = cardList.filter((card) => { - return card.id !== id; - }); - console.log(`this is the new card list`, newCardList); - if (newCardList.length < cardList.length) { - axios - .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) - .then((response) => { - setCardList(newCardList); - }) - .catch((error) => { - setErrorMessage(`Unable to delete card ${id}`); - }); - } - setCardList(renderCards) + // console.log( + // `It\'s going through cardList through deleteCardCallback`, + // cardList + // ); + + // const newCardList = cardList.filter((card) => { + // return card.id !== id; + // }); + // console.log(`this is the new card list`, newCardList); + // if (newCardList.length < cardList.length) { + + // LEE SAVES THE DAY + axios + .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) + .then((response) => { + loadCards(); + }) + .catch((error) => { + setErrorMessage(`Unable to delete card ${id}`); + }); + // } }; // const loadCards = () => { From 42e47e0ee3660cf9c82b5fe29cef2596e3b38c6c Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 18:21:33 -0700 Subject: [PATCH 17/31] can now post new cards! :D --- src/App.js | 50 ++++---------------- src/components/Board.js | 14 +++++- src/components/NewCardForm.js | 87 ++++++++++++++++++++++++++++------- 3 files changed, 91 insertions(+), 60 deletions(-) diff --git a/src/App.js b/src/App.js index aa0e52ca..ecb5e153 100644 --- a/src/App.js +++ b/src/App.js @@ -1,61 +1,27 @@ -import React, { useState, useEffect } from 'react'; -import './App.css'; -import axios from 'axios'; -import Board from './components/Board'; -import Card from './components/Card'; +import React, { useState, useEffect } from "react"; +import "./App.css"; +import axios from "axios"; +import Board from "./components/Board"; +import Card from "./components/Card"; const emoji = require("emoji-dictionary"); - - const App = () => { - // const [cardList, setCardList] = useState(cards); // console.log("cardList", cardList) - return (
    -

    Inspiration Board

    +

    + Inspiration Board +

    -
    ); }; export default App; -// -// const App = () => { - // console.log('rendering'); - // const [studentList, setStudentList] = useState([]); -// - // useEffect(() => { - // get the studentList from localstorage - // const jsonStudentList = localStorage.getItem('studentList'); - // Convert the json into an Array, if it's null use the students array. - // const startingStudents = JSON.parse(jsonStudentList) || students; -// - // Use the local storage to update state - // setStudentList(startingStudents); -// - // Cleanup function - // return () => { - // cleanup actions here -// - // localStorage.setItem('studentList', JSON.stringify(studentList)); - // } - // }, []); -// - - - -// useEffect to get StudentData from API - -// const [studentList, setStudentList] = useState([]); - // const [errorMessage, setErrorMessage] = useState(null); - - diff --git a/src/components/Board.js b/src/components/Board.js index cf9b4493..77a05d09 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -86,6 +86,18 @@ const Board = ({ url }) => { // } }; + const postCard = (cardObject) => { + axios + .post( + `https://inspiration-board.herokuapp.com/boards/Hala&Diana/cards`, + cardObject) + .then((response) => { + loadCards(); + }) + .catch((error) => { + setErrorMessage(`Unable to post card`); + }); + }; // const loadCards = () => { // // } @@ -114,7 +126,7 @@ const Board = ({ url }) => { return (
    - +
    {cardList}
    ); diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 63dddadd..6c2d6bab 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,24 +1,77 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import emojis from 'emoji-dictionary'; -import './NewCardForm.css'; +import React, { Component, useState } from "react"; +import PropTypes from "prop-types"; +import emojis 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", +]; -const NewCardForm = () => { - return ( -
    -
    Submit a card!
    +const NewCardForm = (props) => { + // onclickcallback prop & function + // within callback function in Board, we will need axios POST request + const [cardFields, setCardFields] = useState({ + text: "", + emoji: "", + }); + + const onInputChange = (event) => { + const newCardFields = { + ...cardFields, + }; + newCardFields[event.target.name] = event.target.value; + setCardFields(newCardFields); + }; + + const onFormSubmit = (event) => { + event.preventDefault(); + + props.addCardCallback(cardFields); + + setCardFields({ + text: "", + emoji: "", + }); + }; + return ( + +
    Submit a card!
    + {/* text input */} + + + {/* emoji */} + +
    - ) -} + ); +}; -export default NewCardForm; \ No newline at end of file +export default NewCardForm; From 379c35eab3f1972e5f61c060b5f6ba80c7ff3aff Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 18:25:18 -0700 Subject: [PATCH 18/31] made submit form more aesthetic --- src/components/NewCardForm.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index d11b9ad4..513b85c4 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -16,10 +16,10 @@ display: grid; grid-template-columns: [labels] auto [controls] 1fr; grid-auto-flow: row; - grid-gap: .8em; + grid-gap: 0.8em; } -.new-card-form__form-label { +.new-card-form__form-label { grid-column: labels; grid-row: auto; } @@ -27,14 +27,16 @@ .new-card-form__form-select, .new-card-form__form-textarea, .new-card-form__form-button { - font-family: 'Raleway', sans-serif; + font-family: "Raleway", sans-serif; font-size: 1.25em; grid-column: controls; grid-row: auto; } .new-card-form__form-button { - background-color: inherit; + background-color: black; border: 1px solid black; font-size: 1em; + font-family: 'Permanent Marker'; + color: white; } From 479d2476184cfc1ea74b272577f492c823179463 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 19:53:39 -0700 Subject: [PATCH 19/31] cleaned up comments and console.logs --- src/components/Board.js | 70 +++-------------------------------- src/components/Card.js | 6 +-- src/components/NewCardForm.js | 3 +- 3 files changed, 7 insertions(+), 72 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 77a05d09..27a15cb2 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -38,45 +38,10 @@ const Board = ({ url }) => { }); }; - useEffect(() => { - loadCards(); - }, []); + useEffect(() => {loadCards();}, []); - // const deleteCard = (id) => { - // console.log(`It\'s going through cardList through deleteCardCallback`, { - // cardList, - // }); - - // axios - // .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) - // .then((response) => { - // setErrorMessage(`Card ${id} deleted`); - // setCardList(loadCards); - // }) - // .catch((error) => { - // setErrorMessage(`Unable to delete card ${id}`); - // }); - // }; - - // const newCardList = cardList.filter((card) => { - // return card.id !== id; - // }); const deleteCard = (id) => { - // setCardList(renderCards); - // console.log( - // `It\'s going through cardList through deleteCardCallback`, - // cardList - // ); - - // const newCardList = cardList.filter((card) => { - // return card.id !== id; - // }); - // console.log(`this is the new card list`, newCardList); - // if (newCardList.length < cardList.length) { - - // LEE SAVES THE DAY - axios - .delete(`https://inspiration-board.herokuapp.com/cards/${id}`) + axios.delete(`https://inspiration-board.herokuapp.com/cards/${id}`) .then((response) => { loadCards(); }) @@ -98,31 +63,6 @@ const Board = ({ url }) => { setErrorMessage(`Unable to post card`); }); }; - // const loadCards = () => { - // - // } - // - // useEffect({loadCards}, []); - - // delete card axios pseudocode - // const deleteStudent = (id) => { - // const newStudentList = studentList.filter((student) => { - // return student.id !== id; - // }); - - // if (newStudentList.length < studentList.length) { - // axios.delete(`${ API_URL_BASE }/${ id }`) - // .then((response) => { - // setErrorMessage(`Student ${ id } deleted`); - // }) - // .catch((error) => { - // setErrorMessage(`Unable to delete student ${ id }`); - // }) - // setStudentList(newStudentList); - // } - // } - - // delete button callback return (
    @@ -132,8 +72,8 @@ const Board = ({ url }) => { ); }; -// Board.propTypes = { - -// }; +Board.propTypes = { + url: PropTypes.string +}; export default Board; diff --git a/src/components/Card.js b/src/components/Card.js index ac5c5197..c14ec13d 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -2,10 +2,6 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import "./Card.css"; import emojis from "emoji-dictionary"; -// const emoji = require("emoji-dictionary"); - -// Build the Card component to display a single -// inspirational quote and optional emoji const Card = ({ emoji, id, text, deleteCardCallback }) => { return ( @@ -18,7 +14,7 @@ const Card = ({ emoji, id, text, deleteCardCallback }) => { onClick={() => { deleteCardCallback(id) }} - className="card__delete" + className="card__delete card__delete:hover" > ✨ Take this card ✨ diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 6c2d6bab..c7e481de 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -14,8 +14,6 @@ const EMOJI_LIST = [ ]; const NewCardForm = (props) => { - // onclickcallback prop & function - // within callback function in Board, we will need axios POST request const [cardFields, setCardFields] = useState({ text: "", emoji: "", @@ -65,6 +63,7 @@ const NewCardForm = (props) => { value={cardFields.emoji} className="new-card-form__form-label new-card-form__form-textarea" /> + {/* submit */} Date: Fri, 24 Apr 2020 19:53:50 -0700 Subject: [PATCH 20/31] cleaned up console.log --- src/components/Board.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 27a15cb2..f1fcdff2 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -27,8 +27,6 @@ const Board = ({ url }) => { /> ); }); - console.log("this is Card Collection:", cardCollection); - console.log("this is response", response); setCardList(cardCollection); }) .catch((error) => { From 36ce35e73192b627375d13dd7e93186c1d2b4649 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 19:54:12 -0700 Subject: [PATCH 21/31] changed styling of board --- src/components/Card.css | 10 ++++++++++ src/components/NewCardForm.css | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/src/components/Card.css b/src/components/Card.css index 799f0156..578814be 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -17,6 +17,7 @@ .card__content { grid-column-start: 2; + font-family: 'Permanent Marker', Helvetica, sans-serif; display: flex; flex-direction: column; @@ -44,4 +45,13 @@ .card__delete { align-self: start; font-family: 'Permanent Marker', Helvetica, sans-serif; + background-color: black; + border: 1px solid black; + color: white; +} + +.card__delete:hover { + background-color: white; + border: 1px solid white; + color: black; } diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index 513b85c4..58623c25 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -40,3 +40,8 @@ font-family: 'Permanent Marker'; color: white; } + +.new-card-form__form-button:hover { + background-color: white; + color: black; +} \ No newline at end of file From 2e851f5138fd9b4ef8fbb5b7a798ded6f13fd5dc Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 20:13:17 -0700 Subject: [PATCH 22/31] +enzyme and enzyme-adapter-react-16 to run test --- package-lock.json | 315 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + 2 files changed, 317 insertions(+) diff --git a/package-lock.json b/package-lock.json index 2f3ca7f6..b79f9a9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2157,6 +2157,23 @@ "indent-string": "^4.0.0" } }, + "airbnb-prop-types": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz", + "integrity": "sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==", + "requires": { + "array.prototype.find": "^2.1.0", + "function.prototype.name": "^1.1.1", + "has": "^1.0.3", + "is-regex": "^1.0.4", + "object-is": "^1.0.1", + "object.assign": "^4.1.0", + "object.entries": "^1.1.0", + "prop-types": "^15.7.2", + "prop-types-exact": "^1.2.0", + "react-is": "^16.9.0" + } + }, "ajv": { "version": "6.12.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz", @@ -2277,6 +2294,11 @@ "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz", "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=" }, + "array-filter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz", + "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=" + }, "array-flatten": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz", @@ -2310,6 +2332,15 @@ "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, + "array.prototype.find": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz", + "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==", + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.4" + } + }, "array.prototype.flat": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz", @@ -3325,6 +3356,68 @@ "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==" }, + "cheerio": { + "version": "1.0.0-rc.3", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz", + "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==", + "requires": { + "css-select": "~1.2.0", + "dom-serializer": "~0.1.1", + "entities": "~1.1.1", + "htmlparser2": "^3.9.1", + "lodash": "^4.15.0", + "parse5": "^3.0.1" + }, + "dependencies": { + "css-select": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", + "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", + "requires": { + "boolbase": "~1.0.0", + "css-what": "2.1", + "domutils": "1.5.1", + "nth-check": "~1.0.1" + } + }, + "css-what": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", + "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==" + }, + "dom-serializer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", + "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==", + "requires": { + "domelementtype": "^1.3.0", + "entities": "^1.1.1" + } + }, + "domutils": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz", + "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=", + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + }, + "parse5": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", + "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", + "requires": { + "@types/node": "*" + } + } + } + }, "chokidar": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz", @@ -4375,6 +4468,11 @@ "path-type": "^3.0.0" } }, + "discontinuous-range": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz", + "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=" + }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -4698,6 +4796,87 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz", "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==" }, + "enzyme": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz", + "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==", + "requires": { + "array.prototype.flat": "^1.2.3", + "cheerio": "^1.0.0-rc.3", + "enzyme-shallow-equal": "^1.0.1", + "function.prototype.name": "^1.1.2", + "has": "^1.0.3", + "html-element-map": "^1.2.0", + "is-boolean-object": "^1.0.1", + "is-callable": "^1.1.5", + "is-number-object": "^1.0.4", + "is-regex": "^1.0.5", + "is-string": "^1.0.5", + "is-subset": "^0.1.1", + "lodash.escape": "^4.0.1", + "lodash.isequal": "^4.5.0", + "object-inspect": "^1.7.0", + "object-is": "^1.0.2", + "object.assign": "^4.1.0", + "object.entries": "^1.1.1", + "object.values": "^1.1.1", + "raf": "^3.4.1", + "rst-selector-parser": "^2.2.3", + "string.prototype.trim": "^1.2.1" + } + }, + "enzyme-adapter-react-16": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.2.tgz", + "integrity": "sha512-SkvDrb8xU3lSxID8Qic9rB8pvevDbLybxPK6D/vW7PrT0s2Cl/zJYuXvsd1EBTz0q4o3iqG3FJhpYz3nUNpM2Q==", + "requires": { + "enzyme-adapter-utils": "^1.13.0", + "enzyme-shallow-equal": "^1.0.1", + "has": "^1.0.3", + "object.assign": "^4.1.0", + "object.values": "^1.1.1", + "prop-types": "^15.7.2", + "react-is": "^16.12.0", + "react-test-renderer": "^16.0.0-0", + "semver": "^5.7.0" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + } + } + }, + "enzyme-adapter-utils": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.0.tgz", + "integrity": "sha512-YuEtfQp76Lj5TG1NvtP2eGJnFKogk/zT70fyYHXK2j3v6CtuHqc8YmgH/vaiBfL8K1SgVVbQXtTcgQZFwzTVyQ==", + "requires": { + "airbnb-prop-types": "^2.15.0", + "function.prototype.name": "^1.1.2", + "object.assign": "^4.1.0", + "object.fromentries": "^2.0.2", + "prop-types": "^15.7.2", + "semver": "^5.7.1" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + } + } + }, + "enzyme-shallow-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz", + "integrity": "sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==", + "requires": { + "has": "^1.0.3", + "object-is": "^1.0.2" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -5905,11 +6084,26 @@ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, + "function.prototype.name": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.2.tgz", + "integrity": "sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==", + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "functions-have-names": "^1.2.0" + } + }, "functional-red-black-tree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, + "functions-have-names": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.1.tgz", + "integrity": "sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==" + }, "gensync": { "version": "1.0.0-beta.1", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz", @@ -6268,6 +6462,14 @@ "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz", "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==" }, + "html-element-map": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.2.0.tgz", + "integrity": "sha512-0uXq8HsuG1v2TmQ8QkIhzbrqeskE4kn52Q18QJ9iAA/SnHoEKXWiUxHQtclRsCFWEUD2So34X+0+pZZu862nnw==", + "requires": { + "array-filter": "^1.0.0" + } + }, "html-encoding-sniffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz", @@ -6700,6 +6902,11 @@ "binary-extensions": "^2.0.0" } }, + "is-boolean-object": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.1.tgz", + "integrity": "sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==" + }, "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", @@ -6807,6 +7014,11 @@ "kind-of": "^3.0.2" } }, + "is-number-object": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz", + "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==" + }, "is-obj": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", @@ -6884,6 +7096,11 @@ "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==" }, + "is-subset": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz", + "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=" + }, "is-svg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz", @@ -8325,6 +8542,21 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.escape": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", + "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=" + }, + "lodash.flattendeep": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", + "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=" + }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -8756,6 +8988,11 @@ "minimist": "^1.2.5" } }, + "moo": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz", + "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -8829,6 +9066,25 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=" }, + "nearley": { + "version": "2.19.2", + "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.2.tgz", + "integrity": "sha512-h6lygT0BWAGErDvoE2LfI+tDeY2+UUrqG5dcBPdCmjnjud9z1wE0P7ljb85iNbE93YA+xJLpoSYGMuUqhnSSSA==", + "requires": { + "commander": "^2.19.0", + "moo": "^0.5.0", + "railroad-diagrams": "^1.0.0", + "randexp": "0.4.6", + "semver": "^5.4.1" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + } + } + }, "negotiator": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", @@ -10654,6 +10910,16 @@ "react-is": "^16.8.1" } }, + "prop-types-exact": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz", + "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==", + "requires": { + "has": "^1.0.3", + "object.assign": "^4.1.0", + "reflect.ownkeys": "^0.2.0" + } + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -10763,6 +11029,20 @@ "performance-now": "^2.1.0" } }, + "railroad-diagrams": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz", + "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=" + }, + "randexp": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz", + "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==", + "requires": { + "discontinuous-range": "1.0.0", + "ret": "~0.1.10" + } + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -11140,6 +11420,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-test-renderer": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", + "integrity": "sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.8.6", + "scheduler": "^0.19.1" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -11242,6 +11533,11 @@ "strip-indent": "^3.0.0" } }, + "reflect.ownkeys": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", + "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=" + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -11615,6 +11911,15 @@ "inherits": "^2.0.1" } }, + "rst-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz", + "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=", + "requires": { + "lodash.flattendeep": "^4.4.0", + "nearley": "^2.7.10" + } + }, "rsvp": { "version": "4.8.5", "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz", @@ -12531,6 +12836,16 @@ "side-channel": "^1.0.2" } }, + "string.prototype.trim": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz", + "integrity": "sha512-MjGFEeqixw47dAMFMtgUro/I0+wNqZB5GKXGt1fFr24u3TzDXCPu7J9Buppzoe3r/LqkSDLDDJzE15RGWDGAVw==", + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1" + } + }, "string.prototype.trimend": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.0.tgz", diff --git a/package.json b/package.json index cdd51bf0..ed1b2a91 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "@testing-library/user-event": "^7.1.2", "axios": "^0.19.2", "emoji-dictionary": "^1.0.10", + "enzyme": "^3.11.0", + "enzyme-adapter-react-16": "^1.15.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" From bf0fe89debae8ca44ba2932c62bff382c1dd23d0 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 20:27:24 -0700 Subject: [PATCH 23/31] card snapshot tests created and passed --- src/components/test/Card.test.js | 52 +++++++++++++++++++ .../test/__snapshots__/Card.test.js.snap | 25 +++++++++ 2 files changed, 77 insertions(+) create mode 100644 src/components/test/Card.test.js create mode 100644 src/components/test/__snapshots__/Card.test.js.snap diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js new file mode 100644 index 00000000..0e34271c --- /dev/null +++ b/src/components/test/Card.test.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { render, cleanup } from '@testing-library/react' +import Card from '../Card'; +import Board from '../Board'; + +describe('Card', () => { + test('that it matches the existing snapshot', () => { + // Arrange-Act + const { asFragment } = render( + { }} + /> + ) + // Assert + expect(asFragment()).toMatchSnapshot(); + cleanup(); + }); + + test('The "DeleteCardCallback" prop function is called when the `✨Take This Card✨` button is clicked on', () => { + + // Arrange + // Create a mock callback function + const takeThisCard = jest.fn(); + + // Render a Student + // note the markAbsent callback function + const container = render( + + ); + + // Act + // Find the Mark Absent Button + const button = container.getByText(/✨ Take this card ✨/i); + + // Trigger a click event + button.click(); + + // Assert + // Verify that the callback function was called + expect(takeThisCard).toHaveBeenCalled(); + }); +}); \ No newline at end of file diff --git a/src/components/test/__snapshots__/Card.test.js.snap b/src/components/test/__snapshots__/Card.test.js.snap new file mode 100644 index 00000000..a9464bb7 --- /dev/null +++ b/src/components/test/__snapshots__/Card.test.js.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card that it matches the existing snapshot 1`] = ` + +
    +

    + Are you a git repository? Because I would commit to you. +

    + + 🌌 + + +
    +     +`; From 72dea37e5c4ad198f3436f503fb8c9885cdeb679 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 20:35:50 -0700 Subject: [PATCH 24/31] cleaned up comments and unused variables/imports --- src/App.js | 9 ++------- src/components/Board.js | 3 +-- src/components/Card.js | 2 +- src/components/NewCardForm.js | 21 +++++++-------------- src/components/test/Card.test.js | 6 ++---- 5 files changed, 13 insertions(+), 28 deletions(-) diff --git a/src/App.js b/src/App.js index ecb5e153..faf0bb14 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,9 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import "./App.css"; -import axios from "axios"; import Board from "./components/Board"; -import Card from "./components/Card"; -const emoji = require("emoji-dictionary"); -const App = () => { - // const [cardList, setCardList] = useState(cards); - // console.log("cardList", cardList) +const App = () => { return (
    diff --git a/src/components/Board.js b/src/components/Board.js index f1fcdff2..f88d2907 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -1,11 +1,10 @@ -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"; import Card from "./Card"; import NewCardForm from "./NewCardForm"; -import CARD_DATA from "../data/card-data.json"; const Board = ({ url }) => { const [cardList, setCardList] = useState([]); diff --git a/src/components/Card.js b/src/components/Card.js index c14ec13d..ddca3f5e 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 "./Card.css"; import emojis from "emoji-dictionary"; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index c7e481de..c6856d33 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,19 +1,8 @@ -import React, { Component, useState } from "react"; +import React, { useState } from "react"; import PropTypes from "prop-types"; -import emojis from "emoji-dictionary"; import "./NewCardForm.css"; -const EMOJI_LIST = [ - "", - "heart_eyes", - "beer", - "clap", - "sparkling_heart", - "heart_eyes_cat", - "dog", -]; - -const NewCardForm = (props) => { +const NewCardForm = ({addCardCallback}) => { const [cardFields, setCardFields] = useState({ text: "", emoji: "", @@ -30,7 +19,7 @@ const NewCardForm = (props) => { const onFormSubmit = (event) => { event.preventDefault(); - props.addCardCallback(cardFields); + addCardCallback(cardFields); setCardFields({ text: "", @@ -73,4 +62,8 @@ const NewCardForm = (props) => { ); }; +NewCardForm.propTypes = { + addCardCallback: PropTypes.func +}; + export default NewCardForm; diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js index 0e34271c..18ca73ae 100644 --- a/src/components/test/Card.test.js +++ b/src/components/test/Card.test.js @@ -1,7 +1,6 @@ import React from 'react'; import { render, cleanup } from '@testing-library/react' import Card from '../Card'; -import Board from '../Board'; describe('Card', () => { test('that it matches the existing snapshot', () => { @@ -19,15 +18,14 @@ describe('Card', () => { expect(asFragment()).toMatchSnapshot(); cleanup(); }); - + test('The "DeleteCardCallback" prop function is called when the `✨Take This Card✨` button is clicked on', () => { // Arrange // Create a mock callback function const takeThisCard = jest.fn(); - // Render a Student - // note the markAbsent callback function + // Render card const container = render( Date: Fri, 24 Apr 2020 20:49:19 -0700 Subject: [PATCH 25/31] shallow NewCardForm snap test created and passed --- src/components/test/NewCardForm.test.js | 18 ++++++++ .../__snapshots__/NewCardForm.test.js.snap | 44 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 src/components/test/NewCardForm.test.js create mode 100644 src/components/test/__snapshots__/NewCardForm.test.js.snap diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js new file mode 100644 index 00000000..c0a1c05d --- /dev/null +++ b/src/components/test/NewCardForm.test.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { render, cleanup, fireEvent, getByTestId } from '@testing-library/react'; +import NewCardForm from '../NewCardForm'; + +describe('NewCardForm', () => { + 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/test/__snapshots__/NewCardForm.test.js.snap b/src/components/test/__snapshots__/NewCardForm.test.js.snap new file mode 100644 index 00000000..94f28f9b --- /dev/null +++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NewCardForm that it matches the existing snapshot 1`] = ` + +
    +
    + Submit a card! +
    + + + + + +
    +     +`; From e05423e99f8c0367ba498e06b319fc331da33eb7 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 22:47:39 -0700 Subject: [PATCH 26/31] shallow board test snapshot Co-authored-by: halahaddad1 --- src/components/Board.test.js | 43 ++++++ .../__snapshots__/Board.test.js.snap | 130 ++++++++++++++++++ 2 files changed, 173 insertions(+) create mode 100644 src/components/__snapshots__/Board.test.js.snap diff --git a/src/components/Board.test.js b/src/components/Board.test.js index e69de29b..14864ce4 100644 --- a/src/components/Board.test.js +++ b/src/components/Board.test.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { render, cleanup } from '@testing-library/react' +import Board from './Board'; +import NewCardForm from './NewCardForm'; + +describe ('Board', () => { + // test('renders one card of off the Board', () => { + // const { getByText } = render(); + // const linkElement = getByText(/nap/i); + // expect(linkElement).toBeInTheDocument(); + // }); + + test('will render the NewCardForm properly', () => { + // Arrange-Act + const { asFragment } = render( + { }} + /> + ); + + // Assert + expect(asFragment()).toMatchSnapshot(); + }); +}) + + + + + + + + + + + + + + + + + + + diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap new file mode 100644 index 00000000..1c3e95df --- /dev/null +++ b/src/components/__snapshots__/Board.test.js.snap @@ -0,0 +1,130 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Board will render properly 1`] = ` + +
    +
    + Submit a card! +
    + + + + + +
    +     +`; + +exports[`Board will render the NewCardForm properly 1`] = ` + +
    +
    + Submit a card! +
    + + + + + +
    +     +`; + +exports[`Board will render the add properly 1`] = ` + +
    +
    + Submit a card! +
    + + + + + +
    +     +`; From ac024fc2aff7a86a20e0f6075889698136fa3d66 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 24 Apr 2020 22:48:02 -0700 Subject: [PATCH 27/31] shallow NewCardForm snapshot test completed --- src/components/test/NewCardForm.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js index c0a1c05d..d75f2bc6 100644 --- a/src/components/test/NewCardForm.test.js +++ b/src/components/test/NewCardForm.test.js @@ -15,4 +15,5 @@ describe('NewCardForm', () => { expect(asFragment()).toMatchSnapshot(); cleanup(); }); + }); \ No newline at end of file From bb723ec3124b52b1cb01e50a9052ee553ca84270 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sat, 25 Apr 2020 16:20:13 -0700 Subject: [PATCH 28/31] emoji selection changed to dropdown --- src/components/Board.js | 10 ++++++---- src/components/NewCardForm.js | 22 +++++++++++++++------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index f88d2907..84c5d552 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -62,10 +62,12 @@ const Board = ({ url }) => { }; return ( -
    - -
    {cardList}
    -
    +
    +
    + {cardList} +
    +
    + ); }; diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index c6856d33..63e2ab1e 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -1,6 +1,10 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; import "./NewCardForm.css"; +import emojis from 'emoji-dictionary'; + + +const EMOJI_LIST = ["", "turtle", "heart_eyes", "beer", "clap", "sparkling_heart", "dog", "heart_eyes_cat"] const NewCardForm = ({addCardCallback}) => { const [cardFields, setCardFields] = useState({ @@ -28,11 +32,10 @@ const NewCardForm = ({addCardCallback}) => { }; return ( +
    Add A Card
    -
    Submit a card!
    {/* text input */} { /> {/* emoji */} - + className="new-card-form__form-label new-card-form__form-select" + > + + {EMOJI_LIST.map(emoji => + + )}; + {/* submit */} { className="new-card-form__form-button" />
    +
    ); }; From 184f864282beb76b4d990e77a054e343be9adb60 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Mon, 27 Apr 2020 12:27:08 -0700 Subject: [PATCH 29/31] updated styling --- src/components/Board.css | 5 ++ src/components/Card.css | 96 ++++++++++++++++++++++++++++++ src/components/NewCardForm.css | 105 +++++++++++++++++++++++++++++---- src/components/NewCardForm.js | 20 ++++--- 4 files changed, 208 insertions(+), 18 deletions(-) diff --git a/src/components/Board.css b/src/components/Board.css index ba21589d..7b7840b6 100644 --- a/src/components/Board.css +++ b/src/components/Board.css @@ -1,6 +1,11 @@ .board { display: flex; flex-wrap: wrap; + /* centers board */ + margin-left: auto; + margin-right: auto; + align-items: center; + justify-content: center; } .validation-errors-display { diff --git a/src/components/Card.css b/src/components/Card.css index 578814be..91ff849b 100644 --- a/src/components/Card.css +++ b/src/components/Card.css @@ -55,3 +55,99 @@ border: 1px solid white; color: black; } + + +/* input text styling */ +/* source: https://codepen.io/chrisoncode/pen/IdGKH */ +/* form starting stylings ------------------------------- */ +.group { + position:relative; + margin-bottom:45px; +} +input { + font-size:18px; + padding:10px 10px 10px 5px; + display:block; + width:300px; + border:none; + border-bottom:1px solid #333; +} +input:focus { outline:none; } + +/* LABEL ======================================= */ +label { + color:#999; + font-size:18px; + font-weight:normal; + position:absolute; + pointer-events:none; + left:5px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} + +/* active state */ +input:focus ~ label, input:valid ~ label { + top:-20px; + font-size:14px; + color:#5264AE; +} + +/* BOTTOM BARS ================================= */ +.bar { position:relative; display:block; width:300px; } +.bar:before, .bar:after { + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background:#5264AE; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} +.bar:before { + left:50%; +} +.bar:after { + right:50%; +} + +/* active state */ +input:focus ~ .bar:before, input:focus ~ .bar:after { + width:50%; +} + +/* HIGHLIGHTER ================================== */ +.highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; +} + +/* active state */ +input:focus ~ .highlight { + -webkit-animation:inputHighlighter 0.3s ease; + -moz-animation:inputHighlighter 0.3s ease; + animation:inputHighlighter 0.3s ease; +} + +/* ANIMATIONS ================ */ +@-webkit-keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } +} +@-moz-keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } +} +@keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } +} \ No newline at end of file diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css index 58623c25..965764c3 100644 --- a/src/components/NewCardForm.css +++ b/src/components/NewCardForm.css @@ -1,9 +1,11 @@ -/* The Modal (background) */ - .new-card-form { width: 50%; margin: auto; padding-bottom: 4rem; + margin-left: auto; + margin-right: auto; + align-items: center; + justify-content: center; } .new-card-form__header { @@ -14,34 +16,117 @@ .new-card-form__form { font-size: 1.5em; display: grid; - grid-template-columns: [labels] auto [controls] 1fr; + grid-template-columns: auto auto auto; grid-auto-flow: row; grid-gap: 0.8em; } -.new-card-form__form-label { - grid-column: labels; - grid-row: auto; -} - -.new-card-form__form-select, .new-card-form__form-textarea, .new-card-form__form-button { font-family: "Raleway", sans-serif; font-size: 1.25em; - grid-column: controls; grid-row: auto; } +.new-card-form__form-select { + font-family: "Raleway", sans-serif; + font-size: 0.70em; + /* padding:10px 10px 10px 5px; */ + display:block; + width:200px; + height: auto; + border:none; + grid-row: auto; +} + + .new-card-form__form-button { background-color: black; border: 1px solid black; font-size: 1em; font-family: 'Permanent Marker'; color: white; + display: block; + height: auto; + padding:10px 10px 10px 5px; } .new-card-form__form-button:hover { background-color: white; color: black; +} + +/* for "your message text input" */ +/* source: https://codepen.io/chrisoncode/pen/IdGKH */ +/* form starting stylings ------------------------------- */ +.group { + position:relative; + margin-bottom:45px; +} +input { + font-size:18px; + padding:10px 10px 10px 5px; + display:block; + width:300px; + border:none; + border-bottom:1px solid #333; +} +input:focus { outline:none; } + + +/* BOTTOM BARS ================================= */ +.bar { position:relative; display:block; width:300px; } +.bar:before, .bar:after { + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background:#5264AE; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} +.bar:before { + left:50%; +} +.bar:after { + right:50%; +} + +/* active state */ +input:focus ~ .bar:before, input:focus ~ .bar:after { + width:50%; +} + +/* HIGHLIGHTER ================================== */ +.highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; +} + +/* active state */ +input:focus ~ .highlight { + -webkit-animation:inputHighlighter 0.3s ease; + -moz-animation:inputHighlighter 0.3s ease; + animation:inputHighlighter 0.3s ease; +} + +/* ANIMATIONS ================ */ +@-webkit-keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } +} +@-moz-keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } +} +@keyframes inputHighlighter { + from { background:#ffff88; } + to { width:0; background:transparent; } } \ No newline at end of file diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js index 63e2ab1e..70427aba 100644 --- a/src/components/NewCardForm.js +++ b/src/components/NewCardForm.js @@ -4,7 +4,7 @@ import "./NewCardForm.css"; import emojis from 'emoji-dictionary'; -const EMOJI_LIST = ["", "turtle", "heart_eyes", "beer", "clap", "sparkling_heart", "dog", "heart_eyes_cat"] +const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "dog", "heart_eyes_cat"] const NewCardForm = ({addCardCallback}) => { const [cardFields, setCardFields] = useState({ @@ -32,27 +32,31 @@ const NewCardForm = ({addCardCallback}) => { }; return ( -
    Add A Card +
    +

    Submit your own card~

    {/* text input */} - +
    + + + +
    {/* emoji */} - +