Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

C22 -Phoenix -- Beenish Ali #35

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+114 −20
Open

C22 -Phoenix -- Beenish Ali #35

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3101aa6
wave 1 and wave 2 tests passing
beenishali693 Dec 11, 2024
f40e007
all waves passing + messages are displayed on different sides of the …
beenishali693 Dec 12, 2024
d3c6871
added senders names to the chat heading
beenishali693 Dec 12, 2024
3a7c37c
added space in h2 between # and heart
beenishali693 Dec 16, 2024
fa32bbf
fixed chatlog to try and get tests on learn to pass
beenishali693 Dec 16, 2024
f85d7d6
took out prop validation for onLiked on chat entry and chat log
beenishali693 Dec 16, 2024
e7ba0f3
added onLiked prop type but took out is required
beenishali693 Dec 16, 2024
c317629
fixed minor error
beenishali693 Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added senders names to the chat heading
@beenishali693
beenishali693 committed Dec 12, 2024
commit d3c6871e22e4af29dc0993e5e3e45897116781a5
5 changes: 4 additions & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -3,9 +3,12 @@ import Data from './data/messages.json';
import ChatLog from './components/ChatLog';
import { useState } from 'react';


function App () {
const [messageData, setMessageData] = useState(Data);

const senders = [...new Set(Data.map(message => message.sender))];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of map to extract the sender information, then uniquing that with a Set to get the participants in the conversation. We can confirm with the docs that iterating over the Set contents will occur in insertion order, meaning the resulting list of senders, however many there are, will be in the order they participated in the conversation.


const handleLiked = (id) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Since our state is defined here, we also need to define our mutating function here so that it can "see" the setter function. All we need to receive is the id of the message to toggle, which allows us to locate the message to update, and calculate the next state value. We can pass this all the way down to our ChatEntry which handles the click event, passing us the id of the message that was clicked.

setMessageData(messageData => messageData.map(message => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of the callback setter style. In this application, it doesn't really matter whether we use the callback style or the value style, but it's good practice to get in the habit of using the callback style.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of map here to both handle making a new list so that React sees the message data has changed, and make new data for the clicked message with its like status toggled.

if (message.id === id) {
@@ -32,7 +35,7 @@ function App () {
<>
<div id="App">
<header>
<h1>ChatLog</h1>
<h1>Chat between {senders[0]} and {senders[1]}</h1>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the conversation in the project, there are exactly two participants and both have sent messages, which is the only reason we can find them. What would happen for other conversation situations?

  • no one has sent a message yet
  • only one participant has sent a message (the local user? a remote user?)
  • there are more than two participants in this conversation

Some of these cases might not really be workable given the limited data we're working with, but it's worth thinking about what this could look like for a more complete application.

<h2>{totalLiked}❤️s</h2>
</header>
<main>