From e2b47206406bbe9e5e279851d8b0521d7217ff33 Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 14:56:42 -0800 Subject: [PATCH 01/16] finish wave01 --- src/App.js | 16 ++++++++++++++-- src/components/ChatEntry.js | 20 ++++++++++++++------ 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..7b23117a0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,10 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from '../src/components/ChatEntry' + +const MESSAGES = chatMessages; +const message = MESSAGES[0] const App = () => { return ( @@ -9,8 +13,16 @@ const App = () => {

Application title

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + {/* 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..043f5a34e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,30 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +const ChatEntry = ({id, sender, body, timeStamp, liked}) => { + const heart = liked? 💚 : 🤍; -const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender : PropTypes.string.isRequired, + body : PropTypes.string.isRequired, + timeStamp : PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired }; export default ChatEntry; From 89b28ae97051db301f1ca280a2e99d153f9bee0f Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 16:22:02 -0800 Subject: [PATCH 02/16] finish wave02 --- src/App.js | 15 ++------------- src/components/ChatLog.js | 21 +++++++++++++++++++++ 2 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 7b23117a0..fed6dc5fd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,7 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from '../src/components/ChatEntry' - -const MESSAGES = chatMessages; -const message = MESSAGES[0] +import ChatLog from './components/ChatLog'; const App = () => { return ( @@ -13,16 +10,8 @@ const App = () => {

Application title

- {/* Wave 01: Render one ChatEntry component*/} - {/* Wave 02: Render ChatLog component */} +
{}
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..8d81a902c --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; + +const ChatLog = ({entries}) => { + return +}; + +export default ChatLog; From 1a365dbd0c6b7184968091ddb9de2d9b04945fd4 Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 17:14:19 -0800 Subject: [PATCH 03/16] wave03_toggle and count hearts --- src/App.js | 20 +++++++++++++++++--- src/components/ChatEntry.js | 13 +++++++++---- src/components/ChatLog.js | 3 ++- 3 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index fed6dc5fd..9c7a0f119 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,31 @@ -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 [likesCount, setLikesCount] = useState(0); + const changeLikes = (heart) => { + if (heart) { + setLikesCount(likesCount - 1) + } else { + setLikesCount(likesCount + 1) + } + } + return (

Application title

+
{likesCount} ❤️s
- {/* Wave 02: Render ChatLog component */} -
{}
+
+ {} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 043f5a34e..74312d405 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,10 +1,15 @@ -import React from 'react'; +import React, {useState} from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({id, sender, body, timeStamp, liked}) => { - const heart = liked? 💚 : 🤍; +const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => { + const [heart, setHeart] = useState(liked); + + const toggleHeart = () => { + setHeart(!heart); + changeLikes(heart); + } return (
@@ -13,7 +18,7 @@ const ChatEntry = ({id, sender, body, timeStamp, liked}) => {

{body}

- +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 8d81a902c..a9c5439de 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -const ChatLog = ({entries}) => { +const ChatLog = ({entries, changeLikes}) => { return
    {entries.map((entry) => ( { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} + changeLikes = {changeLikes} /> ))}
From f5bac26f034a70045667ec77f6942209a055136f Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 17:19:35 -0800 Subject: [PATCH 04/16] change the heart color --- src/App.test.js | 1 + src/components/ChatEntry.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.test.js b/src/App.test.js index ca75c71dd..b6f318cc3 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -22,6 +22,7 @@ describe('Wave 03: clicking like button and rendering App', () => { // Arrange const { container } = render() const buttons = container.querySelectorAll('button.like') + console.log(buttons) const firstButton = buttons[0] const lastButton = buttons[buttons.length - 1] diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 74312d405..26cca0aae 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -18,7 +18,7 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => {

{body}

- + ); From d3724629cb4719056eb700c7418151608045f4d6 Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 21:04:29 -0800 Subject: [PATCH 05/16] Apply local-remote css --- src/components/ChatEntry.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 26cca0aae..247b6efcb 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -11,8 +11,12 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => { changeLikes(heart); } + let chatLocation; + if(sender==='Vladimir') + { chatLocation='local' } else {chatLocation='remote'} + return ( -
+

{sender}

{body}

From 2241835d22fc9211bfe8eef5c23d271c4e303b24 Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 26 Jan 2023 21:04:51 -0800 Subject: [PATCH 06/16] Add color buttons --- src/App.css | 21 ++++++++++++++++++++- src/App.js | 30 ++++++++++++++++++++++++++++-- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..c96e482b3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,4 @@ + #App { background-color: #87cefa; } @@ -11,6 +12,7 @@ z-index: 100; text-align: center; align-items: center; + } #App main { @@ -28,8 +30,18 @@ #App header section { background-color: #e0ffff; + padding-bottom:10px; } +#header-container { + margin: auto; + max-width: 50rem; + color: #222; + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + #App .widget { display: inline-block; line-height: 0.5em; @@ -49,8 +61,15 @@ display: inline-block } +#heart{ + display:flex; + justify-content:center; + font-size: 1.5rem; + margin-top:45px; +} + .red { - color: #b22222 + color: #b22222 } .orange { diff --git a/src/App.js b/src/App.js index 9c7a0f119..f1b166d4b 100644 --- a/src/App.js +++ b/src/App.js @@ -13,11 +13,37 @@ const App = () => { } } + const sender1 = chatMessages[0].sender; + const sender2 = chatMessages[1].sender; + return (
-

Application title

-
{likesCount} ❤️s
+

Chat between {sender1} and {sender2}

+
+
+
+

{sender1}'s color

+ + + + + + + +
+ {likesCount} ❤️s +
+

{sender2}'s color

+ + + + + + +
+
+
From f0df86ac12af5c04ac7eb0de72afe5c9e2090146 Mon Sep 17 00:00:00 2001 From: Elaine Date: Tue, 31 Jan 2023 20:12:58 -0800 Subject: [PATCH 07/16] Change ColorChoice and apply PropsTypes --- src/App.js | 74 ++++++++++++++++++++++---------- src/components/ChatEntry.js | 30 ++++++++++--- src/components/ChatEntry.test.js | 16 +++---- src/components/ChatLog.js | 25 ++++++++++- src/components/ChatLog.test.js | 48 ++++++++++----------- src/components/ColorChoice.js | 15 +++++++ 6 files changed, 146 insertions(+), 62 deletions(-) create mode 100644 src/components/ColorChoice.js diff --git a/src/App.js b/src/App.js index f1b166d4b..46ace1ea5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,55 +1,85 @@ import React, {useState} from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; +import messages from './data/messages.json'; import ChatLog from './components/ChatLog'; +import ColorChoice from './components/ColorChoice' + +const COLORS = ['red','orange','yellow','green','blue','purple'] +const MESSAGES = messages; const App = () => { const [likesCount, setLikesCount] = useState(0); - const changeLikes = (heart) => { + const [localColor, setLocalColor] = useState('black'); + const [remoteColor, setRemoteColor] = useState('black'); + + const changeLikes = (event, heart) => { if (heart) { setLikesCount(likesCount - 1) } else { setLikesCount(likesCount + 1) } } + + const handleLocalColor = (changedColor) => { + setLocalColor(changedColor)} - const sender1 = chatMessages[0].sender; - const sender2 = chatMessages[1].sender; + const handleRemoteColor = (changedColor) => { + setRemoteColor(changedColor); + } + + const localSender = MESSAGES[0].sender; + let sender; + for (let message of MESSAGES) { + if (message.sender !== localSender){ + sender = message.sender; + } + } + const remoteSender = sender; return (
-

Chat between {sender1} and {sender2}

+

+ {`Chat between `} + {localSender} + {` and `} + {remoteSender} +

-

{sender1}'s color

- - - - - - +

{localSender}'s color

+ {COLORS.map((preColor, index)=> + )}
{likesCount} ❤️s
-

{sender2}'s color

- - - - - - +

{remoteSender}'s color

+ {COLORS.map((preColor, index)=> + )} +
- {}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 247b6efcb..1f81dd37f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,9 +1,11 @@ import React, {useState} from 'react'; +import '../App.css'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => { +const ChatEntry = ({id, changeLikes, sender, body, timeStamp, liked, localColor, remoteColor, localSender, remoteSender}) => { + const [heart, setHeart] = useState(liked); const toggleHeart = () => { @@ -12,14 +14,24 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => { } let chatLocation; - if(sender==='Vladimir') - { chatLocation='local' } else {chatLocation='remote'} + if(sender === localSender){ + chatLocation='local' + } else if (sender === remoteSender) { + chatLocation='remote' + }; + + let currentColor; + if(chatLocation ==='local'){ + currentColor = localColor; + } else { + currentColor = remoteColor; + }; return (

{sender}

-

{body}

+

{body}

@@ -29,11 +41,17 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, changeLikes}) => { }; ChatEntry.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.number, sender : PropTypes.string.isRequired, body : PropTypes.string.isRequired, timeStamp : PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired + liked: PropTypes.bool, + changeLikes: PropTypes.func, + localColor: PropTypes.string, + remoteColor: PropTypes.string, + localSender: PropTypes.string, + remoteSender: PropTypes.string + }; export default ChatEntry; diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c03..4a9a2b09f 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 { render, screen, fireEvent, waitFor } from "@testing-library/react"; +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(); }); }); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a9c5439de..ada02b929 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,20 +3,41 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -const ChatLog = ({entries, changeLikes}) => { +const ChatLog = ({entries, changeLikes, localColor, remoteColor, localSender, remoteSender}) => { return
    {entries.map((entry) => ( ))}
}; +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id:PropTypes.number, + sender:PropTypes.string.isRequired, + body:PropTypes.string.isRequired, + timeStamp:PropTypes.string.isRequired, + liked:PropTypes.bool, + }) + ).isRequired, + changeLikes: PropTypes.func, + localColor: PropTypes.string, + remoteColor: PropTypes.string, + localSender: PropTypes.string, + remoteSender: PropTypes.string +}; + export default ChatLog; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..5bafee291 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(); }); diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js new file mode 100644 index 000000000..5e191beb2 --- /dev/null +++ b/src/components/ColorChoice.js @@ -0,0 +1,15 @@ +import React from 'react'; + +const BUTTONS = { + 'red': '🔴', + 'orange': '🟠', + 'yellow': '🟡', + 'green': '🟢', + 'blue': '🔵', + 'purple': '🟣', +} + +const ColorChoice = ({color, onChange}) => { + return +} +export default ColorChoice; \ No newline at end of file From aedc77cd9aebe49e68f8f419130707d40496c96e Mon Sep 17 00:00:00 2001 From: Elaine Date: Tue, 31 Jan 2023 21:39:09 -0800 Subject: [PATCH 08/16] Refactoring countlikes by lifting up --- src/App.js | 33 +++++++++++++++++++++++---------- src/components/ChatEntry.js | 20 +++++++++++--------- src/components/ChatLog.js | 5 ++--- 3 files changed, 36 insertions(+), 22 deletions(-) diff --git a/src/App.js b/src/App.js index 46ace1ea5..8b928e4ae 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,36 @@ import React, {useState} from 'react'; import './App.css'; -import messages from './data/messages.json'; +import MESSAGES from './data/messages.json'; import ChatLog from './components/ChatLog'; import ColorChoice from './components/ColorChoice' const COLORS = ['red','orange','yellow','green','blue','purple'] -const MESSAGES = messages; const App = () => { + const [chatMessages, setChatMessages] = useState(MESSAGES); const [likesCount, setLikesCount] = useState(0); const [localColor, setLocalColor] = useState('black'); const [remoteColor, setRemoteColor] = useState('black'); - const changeLikes = (event, heart) => { - if (heart) { - setLikesCount(likesCount - 1) - } else { - setLikesCount(likesCount + 1) - } + + const updateChats = (updatedChat) => { + const chats = chatMessages.map((chat) => { + if (updatedChat.id === chat.id){ + return updatedChat; + } else { + return chat; + } + + }); + setChatMessages(chats); + let likes = 0; + for (const chat of chats){ + if (chat.liked){ + likes++ + } + }; + setLikesCount(likes); + } const handleLocalColor = (changedColor) => { @@ -74,8 +87,8 @@ const App = () => {
{ { - - const [heart, setHeart] = useState(liked); +const ChatEntry = ({id, onUpdate, sender, body, timeStamp, liked, localColor, remoteColor, localSender, remoteSender}) => { const toggleHeart = () => { - setHeart(!heart); - changeLikes(heart); - } + return onUpdate({ + id, + sender, + body, + timeStamp, + liked: !liked, + }) + }; let chatLocation; if(sender === localSender){ @@ -34,7 +37,7 @@ const ChatEntry = ({id, changeLikes, sender, body, timeStamp, liked, localColor,

{body}

- +
); @@ -46,7 +49,6 @@ ChatEntry.propTypes = { body : PropTypes.string.isRequired, timeStamp : PropTypes.string.isRequired, liked: PropTypes.bool, - changeLikes: PropTypes.func, localColor: PropTypes.string, remoteColor: PropTypes.string, localSender: PropTypes.string, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index ada02b929..9789735ec 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -const ChatLog = ({entries, changeLikes, localColor, remoteColor, localSender, remoteSender}) => { +const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender, remoteSender}) => { return
    {entries.map((entry) => ( Date: Tue, 31 Jan 2023 22:04:55 -0800 Subject: [PATCH 09/16] Refactoring color props in ChatEntry --- src/App.js | 21 +++++++++------------ src/components/ChatEntry.js | 28 ++++++---------------------- src/components/ChatLog.js | 24 +++++++++++++++++------- 3 files changed, 32 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index 8b928e4ae..e397c2011 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,14 @@ import ChatLog from './components/ChatLog'; import ColorChoice from './components/ColorChoice' const COLORS = ['red','orange','yellow','green','blue','purple'] +const localSender = MESSAGES[0].sender; +let sender; +for (let message of MESSAGES) { + if (message.sender !== localSender){ + sender = message.sender; + }; +}; +const remoteSender = sender; const App = () => { const [chatMessages, setChatMessages] = useState(MESSAGES); @@ -12,7 +20,6 @@ const App = () => { const [localColor, setLocalColor] = useState('black'); const [remoteColor, setRemoteColor] = useState('black'); - const updateChats = (updatedChat) => { const chats = chatMessages.map((chat) => { if (updatedChat.id === chat.id){ @@ -32,7 +39,7 @@ const App = () => { setLikesCount(likes); } - + const handleLocalColor = (changedColor) => { setLocalColor(changedColor)} @@ -40,15 +47,6 @@ const App = () => { setRemoteColor(changedColor); } - const localSender = MESSAGES[0].sender; - let sender; - for (let message of MESSAGES) { - if (message.sender !== localSender){ - sender = message.sender; - } - } - const remoteSender = sender; - return (
    @@ -92,7 +90,6 @@ const App = () => { localColor={localColor} remoteColor={remoteColor} localSender={localSender} - remoteSender={remoteSender} />}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6388afe36..5f9adabd1 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,7 +4,7 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({id, onUpdate, sender, body, timeStamp, liked, localColor, remoteColor, localSender, remoteSender}) => { +const ChatEntry = ({id, sender, body, timeStamp, liked, onUpdate, color, location}) => { const toggleHeart = () => { return onUpdate({ @@ -16,25 +16,11 @@ const ChatEntry = ({id, onUpdate, sender, body, timeStamp, liked, localColor, re }) }; - let chatLocation; - if(sender === localSender){ - chatLocation='local' - } else if (sender === remoteSender) { - chatLocation='remote' - }; - - let currentColor; - if(chatLocation ==='local'){ - currentColor = localColor; - } else { - currentColor = remoteColor; - }; - return ( -
+

{sender}

-

{body}

+

{body}

@@ -49,11 +35,9 @@ ChatEntry.propTypes = { body : PropTypes.string.isRequired, timeStamp : PropTypes.string.isRequired, liked: PropTypes.bool, - localColor: PropTypes.string, - remoteColor: PropTypes.string, - localSender: PropTypes.string, - remoteSender: PropTypes.string - + onUpdate: PropTypes.func, + color: PropTypes.string, + location: PropTypes.string, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 9789735ec..b7e0bfeb2 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,21 +3,31 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender, remoteSender}) => { +const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender}) => { return
    {entries.map((entry) => ( + (entry.sender === localSender)? + : ))}
@@ -33,10 +43,10 @@ ChatLog.propTypes = { liked:PropTypes.bool, }) ).isRequired, + onUpdate: PropTypes.func, localColor: PropTypes.string, remoteColor: PropTypes.string, localSender: PropTypes.string, - remoteSender: PropTypes.string }; export default ChatLog; From 184be832e38665e4a9c770f0a4cea5a9bee1c3c5 Mon Sep 17 00:00:00 2001 From: Elaine Date: Tue, 31 Jan 2023 22:16:10 -0800 Subject: [PATCH 10/16] Change key props --- src/components/ChatLog.js | 44 +++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index b7e0bfeb2..5c73391ee 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,30 +5,30 @@ import './ChatLog.css'; const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender}) => { return
    - {entries.map((entry) => ( + {entries.map((entry, index) => ( (entry.sender === localSender)? : - + key={entry.timeStamp} + id={entry.id} + sender={entry.sender} + body={entry.body} + timeStamp={entry.timeStamp} + liked={entry.liked} + onUpdate = {onUpdate} + color={localColor} + location='local' + /> : + ))}
}; From 31f86b1f2e636b3171fed3a8a576bb206038b7e2 Mon Sep 17 00:00:00 2001 From: Elaine Date: Wed, 1 Feb 2023 11:04:00 -0800 Subject: [PATCH 11/16] Modify how to figure out senders --- .firebase/hosting.YnVpbGQ.cache | 9 +++++++++ .firebaserc | 5 +++++ firebase.json | 16 ++++++++++++++++ src/App.js | 14 ++++++++------ src/components/ColorChoice.js | 9 ++++++++- 5 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 .firebase/hosting.YnVpbGQ.cache create mode 100644 .firebaserc create mode 100644 firebase.json diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache new file mode 100644 index 000000000..62cb254ad --- /dev/null +++ b/.firebase/hosting.YnVpbGQ.cache @@ -0,0 +1,9 @@ +asset-manifest.json,1675233854523,bc9a5accc974d29ee50ecd3f550f138ef2bcb58e1e1fdf5ef10bcdaedb672004 +favicon.ico,1675233850796,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 +index.html,1675233854523,74dbf661a6f4acb9ea5ab70df25e7639ee22b39417ae6be497b2bc5c83e3330b +manifest.json,1675233850797,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3 +static/css/main.5b7725d0.css,1675233854525,9a59104555478b804142c32a4f225906281f40c82a6cee7d747ab1741c7931a2 +static/css/main.5b7725d0.css.map,1675233854525,19c19799457b1463df71778d2fd72108f0e67c5ab91980f08f952d16afb319bf +static/js/main.c73e5ce3.js.LICENSE.txt,1675233854525,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121 +static/js/main.c73e5ce3.js,1675233854525,ea6cc2325800aec1f846662fc3ac6f6cee508d301710f99522d9a78c477232ee +static/js/main.c73e5ce3.js.map,1675233854525,632039f89a4377da6912feadbf4d70fbbafe144eed56b2917a536874d65d9911 diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 000000000..c4b0ef027 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "react-chatlog" + } +} diff --git a/firebase.json b/firebase.json new file mode 100644 index 000000000..340ed5b73 --- /dev/null +++ b/firebase.json @@ -0,0 +1,16 @@ +{ + "hosting": { + "public": "build", + "ignore": [ + "firebase.json", + "**/.*", + "**/node_modules/**" + ], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} diff --git a/src/App.js b/src/App.js index e397c2011..579fae409 100644 --- a/src/App.js +++ b/src/App.js @@ -4,15 +4,17 @@ import MESSAGES from './data/messages.json'; import ChatLog from './components/ChatLog'; import ColorChoice from './components/ColorChoice' -const COLORS = ['red','orange','yellow','green','blue','purple'] -const localSender = MESSAGES[0].sender; -let sender; +let senders = []; //MESSAGES can have many senders for (let message of MESSAGES) { - if (message.sender !== localSender){ - sender = message.sender; + if (!senders.includes(message.sender)){ + senders.push(message.sender); }; }; -const remoteSender = sender; +//This chatLog has only two people +const localSender = senders[0]; +const remoteSender = senders[1]; + +const COLORS = ['red','orange','yellow','green','blue','purple'] const App = () => { const [chatMessages, setChatMessages] = useState(MESSAGES); diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js index 5e191beb2..ea0adca6b 100644 --- a/src/components/ColorChoice.js +++ b/src/components/ColorChoice.js @@ -10,6 +10,13 @@ const BUTTONS = { } const ColorChoice = ({color, onChange}) => { - return + + const changeColor = (e) => { + onChange(color); + } + + return( + + ); } export default ColorChoice; \ No newline at end of file From 1732c0c803bc495052d2d22e0c2bf8eba6c260f1 Mon Sep 17 00:00:00 2001 From: Elaine Date: Wed, 1 Feb 2023 12:30:40 -0800 Subject: [PATCH 12/16] Generate colors json file and add css stile to header --- src/App.css | 24 ++++++------- src/App.js | 68 +++++++++++++++++------------------ src/components/ColorChoice.js | 24 ++++++------- src/data/colors.json | 32 +++++++++++++++++ 4 files changed, 87 insertions(+), 61 deletions(-) create mode 100644 src/data/colors.json diff --git a/src/App.css b/src/App.css index c96e482b3..2b8946a03 100644 --- a/src/App.css +++ b/src/App.css @@ -28,46 +28,42 @@ display: inline-block; } +#App h3 { + margin-block-start: 0.2em; + margin-block-end: 0.2em; +} + + #App header section { background-color: #e0ffff; - padding-bottom:10px; } #header-container { - margin: auto; - max-width: 50rem; color: #222; display: flex; - flex-direction: row; justify-content: space-evenly; } #App .widget { display: inline-block; - line-height: 0.5em; + line-height: 1em; border-radius: 10px; color: black; - font-size:0.8em; + font-size: 0.8em; padding-left: 1em; padding-right: 1em; + font-weight: bold; } #App #heartWidget { font-size: 1.5em; - margin: 1em + margin: 1em; } #App span { display: inline-block } -#heart{ - display:flex; - justify-content:center; - font-size: 1.5rem; - margin-top:45px; -} - .red { color: #b22222 } diff --git a/src/App.js b/src/App.js index 579fae409..c25647405 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import './App.css'; import MESSAGES from './data/messages.json'; +import COLORS from './data/colors.json'; import ChatLog from './components/ChatLog'; import ColorChoice from './components/ColorChoice' @@ -14,14 +15,12 @@ for (let message of MESSAGES) { const localSender = senders[0]; const remoteSender = senders[1]; -const COLORS = ['red','orange','yellow','green','blue','purple'] - const App = () => { const [chatMessages, setChatMessages] = useState(MESSAGES); const [likesCount, setLikesCount] = useState(0); const [localColor, setLocalColor] = useState('black'); const [remoteColor, setRemoteColor] = useState('black'); - + const updateChats = (updatedChat) => { const chats = chatMessages.map((chat) => { if (updatedChat.id === chat.id){ @@ -39,18 +38,17 @@ const App = () => { } }; setLikesCount(likes); - } const handleLocalColor = (changedColor) => { - setLocalColor(changedColor)} + setLocalColor(changedColor)} - const handleRemoteColor = (changedColor) => { + const handleRemoteColor = (changedColor) => { setRemoteColor(changedColor); } return ( -
+

{`Chat between `} @@ -58,34 +56,34 @@ const App = () => { {` and `} {remoteSender}

-
-
-
-

{localSender}'s color

- {COLORS.map((preColor, index)=> - )} - -
- {likesCount} ❤️s -
-

{remoteSender}'s color

- {COLORS.map((preColor, index)=> - )} - -
-
-
+
+
+

{localSender}'s color

+ {COLORS.map((color)=> + )} +
+ + {likesCount} ❤️s + +
+

{remoteSender}'s color

+ {COLORS.map((color)=> + )} +
+
-
+
{ { remoteColor={remoteColor} localSender={localSender} />} -
+
-
+
); }; diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js index ea0adca6b..20fba1655 100644 --- a/src/components/ColorChoice.js +++ b/src/components/ColorChoice.js @@ -1,22 +1,22 @@ import React from 'react'; +import PropTypes from 'prop-types'; -const BUTTONS = { - 'red': '🔴', - 'orange': '🟠', - 'yellow': '🟡', - 'green': '🟢', - 'blue': '🔵', - 'purple': '🟣', -} - -const ColorChoice = ({color, onChange}) => { +const ColorChoice = ({id, colorName, emoji, onChange}) => { const changeColor = (e) => { - onChange(color); + onChange(colorName); } return( - + ); } + +ColorChoice.propTypes = { + id: PropTypes.number, + colorName: PropTypes.string.isRequired, + emoji: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +}; + export default ColorChoice; \ No newline at end of file diff --git a/src/data/colors.json b/src/data/colors.json new file mode 100644 index 000000000..d3c53428f --- /dev/null +++ b/src/data/colors.json @@ -0,0 +1,32 @@ +[ + { + "id": 1, + "colorName": "red", + "emoji": "🔴" + }, + { + "id": 2, + "colorName": "orange", + "emoji": "🟠" + }, + { + "id": 3, + "colorName": "yellow", + "emoji": "🟡" + }, + { + "id": 4, + "colorName": "green", + "emoji": "🟢" + }, + { + "id": 5, + "colorName": "blue", + "emoji": "🔵" + }, + { + "id": 6, + "colorName": "purple", + "emoji": "🟣" + } +] \ No newline at end of file From 698194417eb6a46449b398adba9aad1caa48e7ba Mon Sep 17 00:00:00 2001 From: Elaine Date: Wed, 1 Feb 2023 12:48:03 -0800 Subject: [PATCH 13/16] add header magin --- src/App.css | 2 ++ src/App.js | 16 +++++++++------- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 2b8946a03..fb8f42f5b 100644 --- a/src/App.css +++ b/src/App.css @@ -42,6 +42,8 @@ color: #222; display: flex; justify-content: space-evenly; + margin: auto; + max-width: 50rem; } #App .widget { diff --git a/src/App.js b/src/App.js index c25647405..7c200c725 100644 --- a/src/App.js +++ b/src/App.js @@ -56,8 +56,9 @@ const App = () => { {` and `} {remoteSender} +
-
+

{localSender}'s color

{COLORS.map((color)=> { colorName={color.colorName} emoji={color.emoji} onChange={handleLocalColor} - />)} + />) + }
- - {likesCount} ❤️s - -
+ {likesCount} ❤️s +

{remoteSender}'s color

{COLORS.map((color)=> { colorName={color.colorName} emoji={color.emoji} onChange={handleRemoteColor} - />)} + />) + }
+
From 679de7b08ba913bcd2cca0a9df1c65739115432a Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 2 Feb 2023 10:33:45 -0800 Subject: [PATCH 14/16] Add colorButtons component --- .firebase/hosting.YnVpbGQ.cache | 18 +++++++++--------- firebase.json | 6 ------ src/App.js | 21 +++------------------ src/components/ChatLog.js | 4 +++- 4 files changed, 15 insertions(+), 34 deletions(-) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 62cb254ad..964e58320 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,9 +1,9 @@ -asset-manifest.json,1675233854523,bc9a5accc974d29ee50ecd3f550f138ef2bcb58e1e1fdf5ef10bcdaedb672004 -favicon.ico,1675233850796,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 -index.html,1675233854523,74dbf661a6f4acb9ea5ab70df25e7639ee22b39417ae6be497b2bc5c83e3330b -manifest.json,1675233850797,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3 -static/css/main.5b7725d0.css,1675233854525,9a59104555478b804142c32a4f225906281f40c82a6cee7d747ab1741c7931a2 -static/css/main.5b7725d0.css.map,1675233854525,19c19799457b1463df71778d2fd72108f0e67c5ab91980f08f952d16afb319bf -static/js/main.c73e5ce3.js.LICENSE.txt,1675233854525,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121 -static/js/main.c73e5ce3.js,1675233854525,ea6cc2325800aec1f846662fc3ac6f6cee508d301710f99522d9a78c477232ee -static/js/main.c73e5ce3.js.map,1675233854525,632039f89a4377da6912feadbf4d70fbbafe144eed56b2917a536874d65d9911 +asset-manifest.json,1675287652834,6c218f188a190c9fd9e47cf218710374f3973f52abf2c67f0a699118cb910a97 +index.html,1675287652834,5be7917ae36338aed08630858dae642f8c03b7040b075e6eb324359490793bee +manifest.json,1675287650250,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3 +favicon.ico,1675287650250,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 +static/css/main.a6e8f088.css.map,1675287652837,12abce3ad8340f964b204829f9fb593ab92dd96d24cd074a8f1380636efd11bb +static/js/main.099203ce.js.LICENSE.txt,1675287652837,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121 +static/css/main.a6e8f088.css,1675287652837,76e1ca20fd6535a8bba07534184f8a7a6eba7698a209b025cca6fb5c763df7fb +static/js/main.099203ce.js,1675287652837,2af173e6becf06e9e3157d71e3528b3f2c13eb1d144b028aeaf64c1e5b50f9c3 +static/js/main.099203ce.js.map,1675287652837,45743004ce34bc865ae3ea7c7210deb4697ebd15ecdb0bbe739d6294bd45de5d diff --git a/firebase.json b/firebase.json index 340ed5b73..f47555498 100644 --- a/firebase.json +++ b/firebase.json @@ -5,12 +5,6 @@ "firebase.json", "**/.*", "**/node_modules/**" - ], - "rewrites": [ - { - "source": "**", - "destination": "/index.html" - } ] } } diff --git a/src/App.js b/src/App.js index 7c200c725..be6505946 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,8 @@ import React, {useState} from 'react'; import './App.css'; import MESSAGES from './data/messages.json'; -import COLORS from './data/colors.json'; import ChatLog from './components/ChatLog'; -import ColorChoice from './components/ColorChoice' +import ColorButtons from './components/ColorButtons' let senders = []; //MESSAGES can have many senders for (let message of MESSAGES) { @@ -60,26 +59,12 @@ const App = () => {

{localSender}'s color

- {COLORS.map((color)=> - ) - } +
{likesCount} ❤️s

{remoteSender}'s color

- {COLORS.map((color)=> - ) - } +
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 5c73391ee..e581eb6fb 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,9 +5,10 @@ import './ChatLog.css'; const ChatLog = ({entries, onUpdate, localColor, remoteColor, localSender}) => { return
    - {entries.map((entry, index) => ( + {entries.map((entry) => ( (entry.sender === localSender)? { location='local' /> : Date: Thu, 2 Feb 2023 11:09:02 -0800 Subject: [PATCH 15/16] Add ColorButtons and initial likedCount --- src/App.js | 8 +++++++- src/components/ColorButtons.js | 19 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/components/ColorButtons.js diff --git a/src/App.js b/src/App.js index be6505946..cd8d73460 100644 --- a/src/App.js +++ b/src/App.js @@ -13,10 +13,16 @@ for (let message of MESSAGES) { //This chatLog has only two people const localSender = senders[0]; const remoteSender = senders[1]; +let initialLiked = 0; +for (let message of MESSAGES) { + if (message.liked){ + initialLiked++ + }; +}; const App = () => { const [chatMessages, setChatMessages] = useState(MESSAGES); - const [likesCount, setLikesCount] = useState(0); + const [likesCount, setLikesCount] = useState(initialLiked); const [localColor, setLocalColor] = useState('black'); const [remoteColor, setRemoteColor] = useState('black'); diff --git a/src/components/ColorButtons.js b/src/components/ColorButtons.js new file mode 100644 index 000000000..8ca1f4655 --- /dev/null +++ b/src/components/ColorButtons.js @@ -0,0 +1,19 @@ +import COLORS from '../data/colors.json'; +import ColorChoice from './ColorChoice' + +const ColorButtons = ({onChange}) => { + return ( +
    + {COLORS.map((color)=> + ) + } +
    + ); +}; + +export default ColorButtons; \ No newline at end of file From 2bc8275ede04bc3c2de9b85bce5f6acd98882c40 Mon Sep 17 00:00:00 2001 From: Elaine Date: Thu, 2 Feb 2023 11:15:28 -0800 Subject: [PATCH 16/16] Add ColorButtons.propsTypes --- .firebase/hosting.YnVpbGQ.cache | 18 +++++++++--------- src/components/ColorButtons.js | 6 ++++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 964e58320..5ff06a31f 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,9 +1,9 @@ -asset-manifest.json,1675287652834,6c218f188a190c9fd9e47cf218710374f3973f52abf2c67f0a699118cb910a97 -index.html,1675287652834,5be7917ae36338aed08630858dae642f8c03b7040b075e6eb324359490793bee -manifest.json,1675287650250,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3 -favicon.ico,1675287650250,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 -static/css/main.a6e8f088.css.map,1675287652837,12abce3ad8340f964b204829f9fb593ab92dd96d24cd074a8f1380636efd11bb -static/js/main.099203ce.js.LICENSE.txt,1675287652837,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121 -static/css/main.a6e8f088.css,1675287652837,76e1ca20fd6535a8bba07534184f8a7a6eba7698a209b025cca6fb5c763df7fb -static/js/main.099203ce.js,1675287652837,2af173e6becf06e9e3157d71e3528b3f2c13eb1d144b028aeaf64c1e5b50f9c3 -static/js/main.099203ce.js.map,1675287652837,45743004ce34bc865ae3ea7c7210deb4697ebd15ecdb0bbe739d6294bd45de5d +asset-manifest.json,1675364990843,dece47109c0ca1e64c1b5e94618f11bfa9d69585a6a8c297d281df22928b0ec7 +manifest.json,1675364988458,5fb9316df9fcb631af8259f9a91b476804b4d68258e1c4144017c018f2b63aa3 +index.html,1675364990843,d7d5a09cf7feab5366cf2d0dbe3c9989a15fe8749268439a902cd564b3e09f40 +favicon.ico,1675364988457,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 +static/js/main.95edea91.js.LICENSE.txt,1675364990845,65c6ecb6192f97a7b3e674b68ee6129941ddc83db480b46ce95eaea24ff40121 +static/css/main.a6e8f088.css.map,1675364990845,12abce3ad8340f964b204829f9fb593ab92dd96d24cd074a8f1380636efd11bb +static/css/main.a6e8f088.css,1675364990845,76e1ca20fd6535a8bba07534184f8a7a6eba7698a209b025cca6fb5c763df7fb +static/js/main.95edea91.js,1675364990845,11186382d3ddf88d44e43905aeb9c485a2e600a7316fd34fc3241184d679ea57 +static/js/main.95edea91.js.map,1675364990845,c45e64aadb10424bf980a4a465c3c7225448e3129425eca8eb25e3486b390fd8 diff --git a/src/components/ColorButtons.js b/src/components/ColorButtons.js index 8ca1f4655..59dd54188 100644 --- a/src/components/ColorButtons.js +++ b/src/components/ColorButtons.js @@ -1,3 +1,4 @@ +import PropTypes from 'prop-types'; import COLORS from '../data/colors.json'; import ColorChoice from './ColorChoice' @@ -16,4 +17,9 @@ const ColorButtons = ({onChange}) => { ); }; +ColorButtons.propTypes = { + onChange: PropTypes.func.isRequired, +}; + + export default ColorButtons; \ No newline at end of file