From 5b8490215d68d84e514d877b27856d223f0be10b Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Tue, 18 Jul 2023 20:33:52 -0400 Subject: [PATCH 1/6] Updated ChatEntry and App - Wave 01. --- src/App.js | 4 +++- src/components/ChatEntry.js | 11 ++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..170838dcf 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,18 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { return ( <div id="App"> <header> - <h1>Application title</h1> + <h1>Chat between Lisa and Olivia</h1> </header> <main> {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} + <ChatEntry></ChatEntry> </main> </div> ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..8618f73dc 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,16 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + return ( <div className="chat-entry local"> - <h2 className="entry-name">Replace with name of sender</h2> + <h2 className="entry-name">{props.sender}</h2> <section className="entry-bubble"> - <p>Replace with body of ChatEntry</p> - <p className="entry-time">Replace with TimeStamp component</p> + <p>{props.body}</p> + <p className="entry-time"><TimeStamp time ={props.timeStamp}/></p> <button className="like">🤍</button> </section> </div> @@ -17,6 +19,9 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; From ff8708ebfe312ac43ff0a81da238ad5b17e26aca Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Sun, 30 Jul 2023 14:14:11 -0400 Subject: [PATCH 2/6] Implemented a ChatLog component. --- src/App.js | 6 +++--- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 28 ++++++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 170838dcf..4ae90f4e3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,18 @@ 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 ( <div id="App"> <header> - <h1>Chat between Lisa and Olivia</h1> + <h1>Chat between Vladimir and Estragon</h1> </header> <main> {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - <ChatEntry></ChatEntry> + <ChatLog entries={chatMessages}/> </main> </div> ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8618f73dc..c99eb9047 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..94a936807 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,28 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + const chatEntryComponents = props.entries.map((entry) => ( + <ChatEntry + key={entry.id} + id={entry.id} + sender={entry.sender} + body={entry.body} + timeStamp={entry.timeStamp} + /> + )); + + return ( + <div> + <h1>Conversation</h1> + {chatEntryComponents} + </div> + ); +}; + +ChatLog.propTypes = { + entries: PropTypes.array.isRequired, +}; +export default ChatLog; \ No newline at end of file From 250dd2af6bc93c8681542c9a58d63344617299f3 Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Sun, 30 Jul 2023 23:41:05 -0400 Subject: [PATCH 3/6] updated componentes to manage a like feature. --- src/App.js | 15 +++++++++++++-- src/components/ChatEntry.js | 20 +++++++++++++++++--- src/components/ChatLog.js | 4 ++++ 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 4ae90f4e3..a49b32e40 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,29 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; const App = () => { + const [totalLikes, setTotalLikes] = useState(0); + + const likeChangeHandler = (liked) => { + if (liked) { + setTotalLikes((prevTotal) => prevTotal + 1); + } else { + setTotalLikes((prevTotal) => prevTotal - 1); + } + }; + return ( <div id="App"> <header> <h1>Chat between Vladimir and Estragon</h1> + <p> Total Likes: {totalLikes} ❤️ </p> </header> <main> {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - <ChatLog entries={chatMessages}/> + <ChatLog entries={chatMessages} onLikeChange={likeChangeHandler} /> </main> </div> ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index c99eb9047..eed129c27 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,14 +4,27 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + const [liked, setLiked] = useState(false); + + const likeClickHandler = () => { + setLiked((prevLiked) => !prevLiked); + + props.onLikeChange(!liked); + + }; + return ( - <div className="chat-entry local"> + <div className={ `chat-entry ${liked ? 'liked': ''}`}> <h2 className="entry-name">{props.sender}</h2> <section className="entry-bubble"> <p>{props.body}</p> - <p className="entry-time"><TimeStamp time ={props.timeStamp}/></p> - <button className="like">🤍</button> + <p className="entry-time"> + <TimeStamp time ={props.timeStamp} /> + </p> + <button className="like" onClick={likeClickHandler}> + {liked ? '❤️' : '🤍'} + </button> </section> </div> ); @@ -22,6 +35,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + onLikeChange: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 94a936807..e3d92da80 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { + // console.log(props.onLikeChange) const chatEntryComponents = props.entries.map((entry) => ( <ChatEntry key={entry.id} @@ -11,6 +12,7 @@ const ChatLog = (props) => { sender={entry.sender} body={entry.body} timeStamp={entry.timeStamp} + onLikeChange={props.onLikeChange} /> )); @@ -24,5 +26,7 @@ const ChatLog = (props) => { ChatLog.propTypes = { entries: PropTypes.array.isRequired, + onLikeChange: PropTypes.func.isRequired, }; + export default ChatLog; \ No newline at end of file From 33ecccfc7b04a72ae5ae0fb9762ad7edbc8df8cd Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Mon, 31 Jul 2023 10:13:29 -0400 Subject: [PATCH 4/6] Implemented wave 3, and local and remote changes. --- src/App.js | 2 +- src/components/ChatEntry.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index a49b32e40..a73d97ee8 100644 --- a/src/App.js +++ b/src/App.js @@ -18,7 +18,7 @@ const App = () => { <div id="App"> <header> <h1>Chat between Vladimir and Estragon</h1> - <p> Total Likes: {totalLikes} ❤️ </p> + <p> {totalLikes} ❤️s</p> </header> <main> {/* Wave 01: Render one ChatEntry component diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index eed129c27..41f010cf1 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -13,9 +13,11 @@ const ChatEntry = (props) => { }; + const isLocal = props.sender === 'Vladimir'; + const entryClass = `chat-entry ${isLocal ? 'local': 'remote'}`; return ( - <div className={ `chat-entry ${liked ? 'liked': ''}`}> + <div className={entryClass}> <h2 className="entry-name">{props.sender}</h2> <section className="entry-bubble"> <p>{props.body}</p> From cc4d29653a5bb01c4c1b57dc04c7e26b3868900e Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Mon, 31 Jul 2023 14:09:28 -0400 Subject: [PATCH 5/6] modifying Chatlog, adding an empty function. --- src/components/ChatLog.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e3d92da80..9b05b87f8 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,6 +5,7 @@ import ChatEntry from './ChatEntry'; const ChatLog = (props) => { // console.log(props.onLikeChange) + const chatEntryComponents = props.entries.map((entry) => ( <ChatEntry key={entry.id} @@ -29,4 +30,9 @@ ChatLog.propTypes = { onLikeChange: PropTypes.func.isRequired, }; + +ChatLog.defaultProps = { + onLikeChange: () => {}, +}; + export default ChatLog; \ No newline at end of file From 5ed7d17084600969bcdeca0de48191dbd24c0770 Mon Sep 17 00:00:00 2001 From: Diana <diana38974@gmail.com> Date: Mon, 31 Jul 2023 14:15:41 -0400 Subject: [PATCH 6/6] removed function in Chatlog. --- src/components/ChatLog.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 9b05b87f8..ddcfceafe 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -30,9 +30,4 @@ ChatLog.propTypes = { onLikeChange: PropTypes.func.isRequired, }; - -ChatLog.defaultProps = { - onLikeChange: () => {}, -}; - export default ChatLog; \ No newline at end of file