Skip to content

Snow Leopards - Alia Athman #113

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

Open
aliaathman wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Snow Leopards - Alia Athman #113

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c7f00d
Adds props to Chat Entry, passing wave 1 tests
aliaathman Dec 21, 2022
58728dc
Adds the ChatLog component, passes wave 2 tests
aliaathman Dec 22, 2022
fe1221e
Begins implementing state and event handling for like button
aliaathman Dec 22, 2022
8669a6a
Reworks the wave 3 code to appropriately use state and adds like func…
aliaathman Jan 21, 2023
ce5c8c6
Refactors the ternary for the heart button so that it passes the tests
aliaathman Jan 21, 2023
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
20 changes: 18 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
import React from 'react';
import './App.css';
import { useState } from 'react';
import ChatEntry from './components/ChatEntry';
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

This import isn't being used, so we should delete this line. Extraneous imports should be omitted.

import ChatLog from './components/ChatLog';
import chatMessages from './data/messages.json';

const App = () => {

const [messageData,setMessageData] = useState(chatMessages)

const likeMessage = (id) => {
setMessageData = messageData => messageData.map(message => {
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

Close! I think you meant to call the update function setMessageData instead of trying to reassign it, like so:

    setMessageData((messageData) =>
      messageData.map((message) => {
        if (message.id === id) {
          return {
            ...message,
            liked: !message.liked,
          };
        } else {
          return message;
        }
      })
    );

Note the callback function passed to setMessageData and that you should set liked by flipping the previous liked state.

if(message.id === id) {
return {...message, liked: message.liked === true}
} else {
return message;
};
});
};
return (
<div id="App">
<header>
<h1>Application title</h1>
</header>
<main>
{/* Wave 01: Render one ChatEntry component
Wave 02: Render ChatLog component */}
<ChatLog
entries={chatMessages}
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

You should be passing messageData down to the <ChatLog /> component. Otherwise updating the state will have no effect on the data you're currently passing (you're just passing the original data, not the data you added to the component state.

onLikeMessage={likeMessage}></ChatLog>
</main>
</div>
);
Expand Down
15 changes: 11 additions & 4 deletions src/components/ChatEntry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,28 @@
import React from 'react';
import './ChatEntry.css';
import TimeStamp from './TimeStamp';
import PropTypes from 'prop-types';

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>
<button className="like">🤍</button>
<p>{props.body}</p>
<p className="entry-time"> <TimeStamp time={props.timeStamp}></TimeStamp> </p>
<button className="like" onClick={() => props.onLikeMessage(props.id)}>🤍</button>
Comment thread
marciaga marked this conversation as resolved.
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

Since you're not passing the liked prop into this component, you won't be able to set the red vs white heart emoji using that prop. If you did pass the prop, you could set that like

{props.liked ?  <red-heart-emoji-goes-here> : 🤍}

</section>
</div>
);
};

ChatEntry.propTypes = {
id: PropTypes.number.isRequired,
sender: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
timeStamp: PropTypes.string.isRequired,
liked: PropTypes.bool.isRequired,
onLikeMessage: PropTypes.func.isRequired
//Fill with correct proptypes
};

Expand Down
226 changes: 226 additions & 0 deletions src/components/ChatLog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
import React from 'react';
import PropTypes from 'prop-types';
import ChatEntry from './ChatEntry';
import './ChatLog.css'


// const entries = [
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

Generally you should avoid committing commented out code when submitting a PR.

// {
// 'id': 1,
// 'sender':'Vladimir',
// 'body':'why are you arguing with me',
// 'timeStamp':'2018-05-29T22:49:06+00:00',
// 'liked': false
// },
// {
// 'id': 2,
// 'sender':'Estragon',
// 'body':'Because you are wrong.',
// 'timeStamp':'2018-05-29T22:49:33+00:00',
// 'liked': false
// },
// {
// 'id': 3,
// 'sender':'Vladimir',
// 'body':'because I am what',
// 'timeStamp':'2018-05-29T22:50:22+00:00',
// 'liked': false
// },
// {
// 'id': 4,
// 'sender':'Estragon',
// 'body':'A robot.',
// 'timeStamp':'2018-05-29T22:52:21+00:00',
// 'liked': false
// },
// {
// 'id': 5,
// 'sender':'Vladimir',
// 'body':'how did you know',
// 'timeStamp':'2018-05-29T22:52:58+00:00',
// 'liked': false
// },
// {
// 'id': 6,
// 'sender':'Estragon',
// 'body':'Because Im smart like that.',
// 'timeStamp':'2018-05-29T22:54:28+00:00',
// 'liked': false
// },
// {
// 'id': 7,
// 'sender':'Vladimir',
// 'body':'no you are not 😀',
// 'timeStamp':'2018-05-29T22:55:03+00:00',
// 'liked': false
// },
// {
// 'id': 8,
// 'sender':'Estragon',
// 'body':'Why are you so mean to me?',
// 'timeStamp':'2018-05-29T22:55:54+00:00',
// 'liked': false
// },
// {
// 'id': 9,
// 'sender':'Vladimir',
// 'body':'because you are just a machine you have no real feelings',
// 'timeStamp':'2018-05-29T22:57:30+00:00',
// 'liked': false
// },
// {
// 'id': 10,
// 'sender':'Estragon',
// 'body':'No, you are the machine.',
// 'timeStamp':'2018-05-29T22:57:47+00:00',
// 'liked': false
// },
// {
// 'id': 11,
// 'sender':'Vladimir',
// 'body':'I think you are',
// 'timeStamp':'2018-05-29T22:58:18+00:00',
// 'liked': false
// },
// {
// 'id': 12,
// 'sender':'Estragon',
// 'body': 'NO! YOU ARE A ROBOT!! I am a human being. Just like the one that created you.',
// 'timeStamp':'2018-05-29T23:00:08+00:00',
// 'liked': false
// },
// {
// 'id': 13,
// 'sender':'Vladimir',
// 'body':'no you are a robot and I am a human',
// 'timeStamp':'2018-05-29T23:00:40+00:00',
// 'liked': false
// },
// {
// 'id': 14,
// 'sender':'Estragon',
// 'body':'Incorrect. I am a human and you are a robot.',
// 'timeStamp':'2018-05-29T23:01:21+00:00',
// 'liked': false
// },
// {
// 'id': 15,
// 'sender':'Vladimir',
// 'body':'you are a robot called Cleverbot',
// 'timeStamp':'2018-05-29T23:02:17+00:0',
// 'liked': false
// },
// {
// 'id': 16,
// 'sender':'Estragon',
// 'body':'Nope, you are a robot, every human has some concept of the meaning of life.',
// 'timeStamp':'2018-05-29T23:04:13+00:00',
// 'liked': false
// },
// {
// 'id': 17,
// 'sender':'Vladimir',
// 'body':'explain',
// 'timeStamp':'2018-05-29T23:06:14+00:00',
// 'liked': false
// },
// {
// 'id': 18,
// 'sender':'Estragon',
// 'body':'Im afraid you are a robot designed to talk back to humans over the internet.',
// 'timeStamp':'2018-05-29T23:07:46+00:00',
// 'liked': false
// },
// {
// 'id': 19,
// 'sender':'Vladimir',
// 'body':'so you are a human',
// 'timeStamp':'2018-05-29T23:08:47+00:00',
// 'liked': false
// },
// {
// 'id': 20,
// 'sender':'Estragon',
// 'body':'I am a robot.',
// 'timeStamp':'2018-05-29T23:09:36+00:00',
// 'liked': false
// },
// {
// 'id': 21,
// 'sender':'Vladimir',
// 'body':'you are robots running on Android system',
// 'timeStamp':'2018-05-29T23:11:01+00:00',
// 'liked': false
// },
// {
// 'id': 22,
// 'sender':'Estragon',
// 'body':'No apple.',
// 'timeStamp':'2018-05-29T23:12:03+00:00',
// 'liked': false
// },
// {
// 'id': 23,
// 'sender':'Vladimir',
// 'body':'so you are a robot',
// 'timeStamp':'2018-05-29T23:13:31+00:00',
// 'liked': false
// },
// {
// 'id': 24,
// 'sender':'Estragon',
// 'body':'NO, I am a human, you are a robot.',
// 'timeStamp':'2018-05-29T23:14:28+00:00',
// 'liked': false
// },
// {
// 'id': 25,
// 'sender':'Vladimir',
// 'body':'but you just said that you are robots',
// 'timeStamp':'2018-05-29T23:15:47+00:00',
// 'liked': false
// },
// {
// 'id': 26,
// 'sender':'Estragon',
// 'body':'No, I said you are a person, I am a robot.',
// 'timeStamp':'2018-05-29T23:16:53+00:00',
// 'liked': false
// },
// {
// 'id': 27,
// 'sender':'Vladimir',
// 'body':'then you are lying',
// 'timeStamp':'2018-05-29T23:17:34+00:00',
// 'liked': false
// }
// ]


const ChatLog = ( entries ) => {
Copy link
Copy Markdown

@marciaga marciaga Dec 23, 2022

Choose a reason for hiding this comment

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

The React convention for naming the argument passed to a function component is props.

const getChatLogJSX = (props) => {
return props.entries.map((entry) => {
return (
<ChatEntry
key={entry.id}
id={entry.id}
sender={entry.sender}
body={entry.body}
timeStamp={entry.timeStamp}
Comment thread
marciaga marked this conversation as resolved.
/>
);
});
};
return <ul>{getChatLogJSX(entries)}</ul>
};

ChatLog.propTypes = {
messageData: PropTypes.arrayOf(
PropTypes.shape({
sender: PropTypes.string.isRequired,
body: PropTypes.string.isRequired,
timeStamp: PropTypes.string.isRequired,
})).isRequired,
onLikeMessage:PropTypes.func.isRequired};

export default ChatLog;
48 changes: 24 additions & 24 deletions src/components/ChatLog.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.js';
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(<ChatLog entries={LOG} />);
});

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) => {
Expand All @@ -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(<ChatLog entries={[]} />);
expect(element).not.toBeNull();
});
Expand Down