From 2d31754db9a3f5a662ef3ad4be4c01cbf356343e Mon Sep 17 00:00:00 2001 From: Eva Liu Date: Sat, 28 Jan 2023 02:13:01 -0500 Subject: [PATCH 1/4] wave1 and wave2 showwing all datas and right time format. --- src/App.js | 7 +++-- src/components/ChatEntry.js | 18 +++++++++---- src/components/ChatLog.js | 38 ++++++++++++++++++++++++++ src/components/ChatLog.test.js | 49 +++++++++++++++++----------------- 4 files changed, 79 insertions(+), 33 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..6ca5d08b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,16 @@ import React from 'react'; import './App.css'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { + const chatDatas = chatMessages; return (

Application title

-
- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} -
+
{}
); }; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..8cf31826e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,30 @@ +//Presentational Component + import React from 'react'; import './ChatEntry.css'; +import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

+ +

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..24d1764fe --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,38 @@ +//Container Component + +import React from 'react'; +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const ChatLog = ({ entries }) => { + // function for passing into ChatLog + const getChatEntry = (entries) => { + return entries.map((chatdata) => { + return ( + + ); + }); + }; + + return
{getChatEntry(entries)}
; +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + }) + ).isRequired, +}; + +export default ChatLog; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..b1983fcfe 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,49 +1,50 @@ -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 = [ + // need to add id from the message.json { - 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 +57,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 b7cef875c1e41f9eaf112bd461f4d4d3fa8ca7e2 Mon Sep 17 00:00:00 2001 From: Eva Liu Date: Sun, 29 Jan 2023 02:31:53 -0500 Subject: [PATCH 2/4] heart button and add count section --- src/App.css | 32 ++++++++++++++++++++++---------- src/App.js | 20 +++++++++++++++++--- src/components/ChatEntry.css | 23 ++++++++++++++++------- src/components/ChatEntry.js | 11 +++++++++-- src/components/ChatLog.test.js | 5 +++++ 5 files changed, 69 insertions(+), 22 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..3c33e0ea4 100644 --- a/src/App.css +++ b/src/App.css @@ -28,6 +28,18 @@ #App header section { background-color: #e0ffff; + color: black; + height: 4rem; + font-size: 1.25rem; + display: flex; + justify-content: center; + align-items: center; +} + +#App header section span { + font-size: 1.25rem; + color: rgba(100%, 0%, 0%, 0); + text-shadow: 0 0 0 red; } #App .widget { @@ -35,40 +47,40 @@ line-height: 0.5em; border-radius: 10px; color: black; - font-size:0.8em; + font-size: 0.8em; padding-left: 1em; padding-right: 1em; } #App #heartWidget { font-size: 1.5em; - margin: 1em + margin: 1em; } #App span { - display: inline-block + display: inline-block; } .red { - color: #b22222 + color: #b22222; } .orange { - color: #e6ac00 + color: #e6ac00; } .yellow { - color: #e6e600 + color: #e6e600; } .green { - color: green + color: green; } .blue { - color: blue + color: blue; } .purple { - color: purple -} \ No newline at end of file + color: purple; +} diff --git a/src/App.js b/src/App.js index 6ca5d08b6..73976b135 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,30 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { - const chatDatas = chatMessages; + // const [entries, setEntries] = useState(chatMessages); + // const updateChatDatas = (updateEntrie) => { + // const chatDatas = entries.map((data) => { + // if (data.id === updateEntrie.id) { + // return updateEntrie; + // }else{ + // return data; + // } + // }); + // setEntries(chatDatas); + // }; + return (

Application title

+
+ 0   🤍s +
-
{}
+
{}
); }; diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..8e9c32cf9 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -1,11 +1,11 @@ button { background: none; - color: inherit; - border: none; - padding: 10px; - font: inherit; - cursor: pointer; - outline: inherit; + color: inherit; + border: none; + padding: 10px; + font: inherit; + cursor: pointer; + outline: inherit; } .chat-entry { @@ -97,4 +97,13 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; -} \ No newline at end of file +} + +.like { + color: white; +} + +.liked { + color: rgba(100%, 0%, 0%, 0); + text-shadow: 0 0 0 red; +} diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8cf31826e..92b2a6bf1 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,11 +1,16 @@ //Presentational Component -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { + const [isLike, setLike] = useState(props.liked); + const heartColor = isLike ? 'liked' : 'like'; + const changeLike = () => { + setLike(!isLike); + }; return (

{props.sender}

@@ -14,7 +19,9 @@ const ChatEntry = (props) => {

- +
); diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index b1983fcfe..8f9af7cc5 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -6,26 +6,31 @@ import { render, screen } from '@testing-library/react'; const LOG = [ // need to add id from the message.json { + id: 1, sender: 'Vladimir', body: 'why are you arguing with me', timeStamp: '2018-05-29T22:49:06+00:00', }, { + id: 2, sender: 'Estragon', body: 'Because you are wrong.', timeStamp: '2018-05-29T22:49:33+00:00', }, { + id: 3, sender: 'Vladimir', body: 'because I am what', timeStamp: '2018-05-29T22:50:22+00:00', }, { + id: 4, sender: 'Estragon', body: 'A robot.', timeStamp: '2018-05-29T22:52:21+00:00', }, { + id: 5, sender: 'Vladimir', body: 'Notabot', timeStamp: '2019-07-23T22:52:21+00:00', From 49c9b1df9bc094d6383f54893bdfd5a9398d8462 Mon Sep 17 00:00:00 2001 From: Eva Liu Date: Wed, 1 Feb 2023 01:23:57 -0500 Subject: [PATCH 3/4] wave 3 and all test finished. --- src/App.js | 33 +++++++++++++++++++-------------- src/components/ChatEntry.js | 26 ++++++++++++++++++-------- src/components/ChatLog.js | 37 ++++++++++++++++++------------------- 3 files changed, 55 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index 73976b135..aed526196 100644 --- a/src/App.js +++ b/src/App.js @@ -1,30 +1,35 @@ -import React, { useState } from 'react'; import './App.css'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; +import React, { useState } from 'react'; const App = () => { - // const [entries, setEntries] = useState(chatMessages); - // const updateChatDatas = (updateEntrie) => { - // const chatDatas = entries.map((data) => { - // if (data.id === updateEntrie.id) { - // return updateEntrie; - // }else{ - // return data; - // } - // }); - // setEntries(chatDatas); - // }; + const [chatsData, setChatsData] = useState(chatMessages); + + const updateChatsData = (updateChat) => { + const chats = chatsData.map((chat) => { + if (chat.id === updateChat.id) { + return updateChat; + } else { + return chat; + } + }); + setChatsData(chats); + }; + + const heartCounts = chatsData.filter((chat) => chat.liked === true); return (

Application title

- 0   🤍s +

{heartCounts.length} ❤️s

-
{}
+
+ +
); }; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 92b2a6bf1..d48abe20e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,16 +1,25 @@ //Presentational Component - -import React, { useState } from 'react'; +import React from 'react'; import './ChatEntry.css'; import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { - const [isLike, setLike] = useState(props.liked); - const heartColor = isLike ? 'liked' : 'like'; - const changeLike = () => { - setLike(!isLike); + const changeLikeData = () => { + const chatData = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + props.updateChatsData(chatData); }; + //I was did the recolor heart emoji first. + // const heartColor = props.liked ? 'liked' : 'like'; + + const heartColor = props.liked ? '❤️' : '🤍'; + return (

{props.sender}

@@ -19,8 +28,8 @@ const ChatEntry = (props) => {

-
@@ -32,6 +41,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, + updateChatsData: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 24d1764fe..55ba195d0 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,23 +4,21 @@ import React from 'react'; import ChatEntry from './ChatEntry'; import PropTypes from 'prop-types'; -const ChatLog = ({ entries }) => { - // function for passing into ChatLog - const getChatEntry = (entries) => { - return entries.map((chatdata) => { - return ( - - ); - }); - }; - - return
{getChatEntry(entries)}
; +const ChatLog = (props) => { + const getChatEntry = props.entries.map((entrie) => { + return ( + + ); + }); + return
{getChatEntry}
; }; ChatLog.propTypes = { @@ -31,8 +29,9 @@ ChatLog.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - }) - ).isRequired, + }).isRequired + ), + updateChatsData: PropTypes.func.isRequired, }; export default ChatLog; From f4ce65e8b37283f9902d0e577322b93f75f58aae Mon Sep 17 00:00:00 2001 From: Eva Liu Date: Thu, 2 Feb 2023 02:19:58 -0500 Subject: [PATCH 4/4] add local and remote. --- src/components/ChatEntry.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d48abe20e..fa8d19ed3 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -19,9 +19,10 @@ const ChatEntry = (props) => { // const heartColor = props.liked ? 'liked' : 'like'; const heartColor = props.liked ? '❤️' : '🤍'; + const messageType = props.sender === 'Vladimir' ? 'local' : 'remote'; return ( -
+

{props.sender}

{props.body}