From 109f7bd1948fd99b96faa34fad9b652674bdec66 Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 13:42:41 -0800 Subject: [PATCH 01/15] chatEntry add propTypes --- src/components/ChatEntry.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b..c197f3b7 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,6 +17,13 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + id: PropTypes.number, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired + + }; export default ChatEntry; From cc41f76ed266621a24f8312edc1cbdd149de0e5a Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 13:51:43 -0800 Subject: [PATCH 02/15] create ChatLog component --- src/components/ChatLog.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/components/ChatLog.js diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 00000000..e02f65d1 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,7 @@ +import React from "react"; +import './ChatLog.css'; + + +const ChatLog = () =>{ + return +} \ No newline at end of file From eae6fa362c649129dd94f0c3021035da8ee81e7c Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 13:56:39 -0800 Subject: [PATCH 03/15] ChatEntry import Timestamp --- src/components/ChatEntry.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index c197f3b7..6b09494a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,6 +1,8 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + const ChatEntry = (props) => { return ( From b0d48584122572e6af010a1e0794db88b438a03c Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 14:05:54 -0800 Subject: [PATCH 04/15] modify " to ' --- src/components/ChatEntry.test.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c0..8edc3482 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -1,9 +1,9 @@ -import React from "react"; -import "@testing-library/jest-dom/extend-expect"; -import ChatEntry from "./ChatEntry"; +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import ChatEntry from './ChatEntry'; import { render, screen, fireEvent, waitFor } from "@testing-library/react"; -describe("Wave 01: ChatEntry", () => { +describe('Wave 01: ChatEntry', () => { beforeEach(() => { render( { ); }); - test("renders without crashing and shows the sender", () => { + test('renders without crashing and shows the sender', () => { expect(screen.getByText(/Joe Biden/)).toBeInTheDocument(); }); - test("that it will display the body", () => { + test('that it will display the body', () => { expect(screen.getByText(/Get out by 8am/)).toBeInTheDocument(); }); - test("that it will display the time", () => { + test('that it will display the time', () => { expect(screen.getByText(/\d+ years ago/)).toBeInTheDocument(); }); }); From f54c9b85904808a80a245d51ab67ab54e1be6cf1 Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 14:12:11 -0800 Subject: [PATCH 05/15] add TimeStamp wave1 done --- src/components/ChatEntry.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6b09494a..3b113853 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -7,10 +7,12 @@ import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

From 777895eff09014e5a54822c62f16acf7b115606a Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 14:30:53 -0800 Subject: [PATCH 06/15] change" to ' --- src/components/ChatLog.test.js | 48 +++++++++++++++++----------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc..5bafee29 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,49 +1,49 @@ -import React from "react"; -import "@testing-library/jest-dom/extend-expect"; -import ChatLog from "./ChatLog"; -import { render, screen } from "@testing-library/react"; +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import ChatLog from './ChatLog'; +import { render, screen } from '@testing-library/react'; const LOG = [ { - sender: "Vladimir", - body: "why are you arguing with me", - timeStamp: "2018-05-29T22:49:06+00:00", + sender: 'Vladimir', + body: 'why are you arguing with me', + timeStamp: '2018-05-29T22:49:06+00:00', }, { - sender: "Estragon", - body: "Because you are wrong.", - timeStamp: "2018-05-29T22:49:33+00:00", + sender: 'Estragon', + body: 'Because you are wrong.', + timeStamp: '2018-05-29T22:49:33+00:00', }, { - sender: "Vladimir", - body: "because I am what", - timeStamp: "2018-05-29T22:50:22+00:00", + sender: 'Vladimir', + body: 'because I am what', + timeStamp: '2018-05-29T22:50:22+00:00', }, { - sender: "Estragon", - body: "A robot.", - timeStamp: "2018-05-29T22:52:21+00:00", + sender: 'Estragon', + body: 'A robot.', + timeStamp: '2018-05-29T22:52:21+00:00', }, { - sender: "Vladimir", - body: "Notabot", - timeStamp: "2019-07-23T22:52:21+00:00", + sender: 'Vladimir', + body: 'Notabot', + timeStamp: '2019-07-23T22:52:21+00:00', }, ]; -describe("Wave 02: ChatLog", () => { +describe('Wave 02: ChatLog', () => { beforeEach(() => { render(); }); - test("renders without crashing and shows all the names", () => { + test('renders without crashing and shows all the names', () => { [ { - name: "Vladimir", + name: 'Vladimir', numChats: 3, }, { - name: "Estragon", + name: 'Estragon', numChats: 2, }, ].forEach((person) => { @@ -56,7 +56,7 @@ describe("Wave 02: ChatLog", () => { }); }); - test("renders an empty list without crashing", () => { + test('renders an empty list without crashing', () => { const element = render(); expect(element).not.toBeNull(); }); From 67cd30da3255fd1c00b1df92375874d521307ff5 Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 14:53:07 -0800 Subject: [PATCH 07/15] wave 2 done --- src/components/ChatLog.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e02f65d1..bf2c192a 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,7 +1,24 @@ -import React from "react"; +import React from 'react'; import './ChatLog.css'; +import ChatEntry from './ChatEntry'; -const ChatLog = () =>{ - return -} \ No newline at end of file +const ChatLog = (props) =>{ + const entries = props.entries; + const chatEntry = entries.map((entry) =>{ + return ( + + ); + }); + return ( +
+ {chatEntry} +
+ ) +}; + +export default ChatLog; \ No newline at end of file From 11fb11c470b3e2beb9c754a206d27789ac808c5d Mon Sep 17 00:00:00 2001 From: annadu Date: Thu, 26 Jan 2023 20:45:06 -0800 Subject: [PATCH 08/15] import ChatLog --- src/App.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index c1085909..75c339ab 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +//import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog' const App = () => { return ( @@ -9,8 +11,10 @@ const App = () => {

Application title

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + + + +
); From 145ae2f3dcbab2797cf336e01099fad02211e425 Mon Sep 17 00:00:00 2001 From: annadu Date: Mon, 30 Jan 2023 15:00:35 -0800 Subject: [PATCH 09/15] finish add heart button and toggle --- src/components/ChatEntry.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3b113853..170013ae 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,10 +1,17 @@ -import React from 'react'; +import React, {useState}from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; + const ChatEntry = (props) => { + const [Liked, setLiked] = useState(props.liked); + //const toggleLikes = () =>{ + //setLikes(!Likes); + //}; + const heartColor = Liked ? '❤️' : '🤍'; + return (

{props.sender}

@@ -13,21 +20,18 @@ const ChatEntry = (props) => {

- +
setLiked(!Liked)}>{heartColor}
); }; ChatEntry.propTypes = { - //Fill with correct proptypes - id: PropTypes.number, + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired - - }; export default ChatEntry; From 50c7ba3a9aee5384589d63d2a6615a97ab3a5054 Mon Sep 17 00:00:00 2001 From: annadu Date: Mon, 30 Jan 2023 15:01:04 -0800 Subject: [PATCH 10/15] import json data --- src/App.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 75c339ab..f4b51451 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -//import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog' const App = () => { @@ -12,7 +11,7 @@ const App = () => {
- +
From 9b5207488446a4d545acf5568790b8283deb854c Mon Sep 17 00:00:00 2001 From: annadu Date: Mon, 30 Jan 2023 15:01:54 -0800 Subject: [PATCH 11/15] complete ChatLog props --- src/components/ChatLog.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index bf2c192a..5fa03424 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,16 +1,19 @@ import React from 'react'; import './ChatLog.css'; +import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; const ChatLog = (props) =>{ const entries = props.entries; - const chatEntry = entries.map((entry) =>{ + const chatEntry = entries.map(entry =>{ return ( ); }); @@ -21,4 +24,16 @@ const ChatLog = (props) =>{ ) }; +ChatLog.prototype = { + entries:PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + }) + ) + +} export default ChatLog; \ No newline at end of file From 062aefc82bb28080c8704df4cbf4f896557591aa Mon Sep 17 00:00:00 2001 From: annadu Date: Mon, 30 Jan 2023 15:12:14 -0800 Subject: [PATCH 12/15] modify contain div to button --- src/components/ChatEntry.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 170013ae..45f34e96 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -7,9 +7,7 @@ import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { const [Liked, setLiked] = useState(props.liked); - //const toggleLikes = () =>{ - //setLikes(!Likes); - //}; + const heartColor = Liked ? '❤️' : '🤍'; return ( @@ -20,7 +18,7 @@ const ChatEntry = (props) => {

-
setLiked(!Liked)}>{heartColor}
+ ); From 42c210b1e60d75e01e7d186293217c6267e487e5 Mon Sep 17 00:00:00 2001 From: annadu Date: Wed, 1 Feb 2023 21:20:34 -0800 Subject: [PATCH 13/15] add ontoggleheart --- src/components/ChatLog.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 5fa03424..12a9a779 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -14,6 +14,7 @@ const ChatLog = (props) =>{ body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} + onToggleHeart={props.onToggleHeart} /> ); }); From c8e17f9abd295ce9245f71421ade70e05401bc97 Mon Sep 17 00:00:00 2001 From: annadu Date: Wed, 1 Feb 2023 21:21:35 -0800 Subject: [PATCH 14/15] delete useSTATE --- src/components/ChatEntry.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 45f34e96..ddac9d24 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,4 +1,4 @@ -import React, {useState}from 'react'; +import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; @@ -6,9 +6,9 @@ import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - const [Liked, setLiked] = useState(props.liked); + //const [Liked, setLiked] = useState(props.liked); - const heartColor = Liked ? '❤️' : '🤍'; + const heartColor = props.liked ? '❤️' : '🤍'; return (
@@ -18,7 +18,7 @@ const ChatEntry = (props) => {

- +
); @@ -29,7 +29,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired + liked: PropTypes.bool.isRequired, + onToggleHeart: PropTypes.func.isRequired, }; export default ChatEntry; From 4cf1f8231a04a469a13e1beab32eb49c6fae99df Mon Sep 17 00:00:00 2001 From: annadu Date: Wed, 1 Feb 2023 21:26:33 -0800 Subject: [PATCH 15/15] wave 3 done --- src/App.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index f4b51451..bab3bf4a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,16 +2,36 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog' +import { useState } from 'react'; const App = () => { + const [chatData, setChatData] = useState(chatMessages) + + const toggleHeart = (id) =>{ + setChatData(chatData => chatData.map(message =>{ + if (message.id === id) { + return {...message, liked: !message.liked} + } else{ + return message; + } + })); + } + const calcHearts = (chatData) =>{ + return chatData.reduce((total, message) =>{ + return total + message.liked; + },0) + }; + + const totalHearts = calcHearts(chatData); return (
-

Application title

+

Anna's Chat Log

+

{totalHearts} ❤️s

- +