Ocelots-Diana A

README.md

@@ -1,5 +1,5 @@
 # React Chat Log
-In this project we will use core React concepts to build a chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. We will build user interaction with a like feature. 
+Chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. User interaction is built in with a like feature. 
 
 ## Skills Assessed
 - Building React components that receive data through props
@@ -10,27 +10,6 @@ In this project we will use core React concepts to build a chat messenger-style
 - Using git as part of the development workflow
 - Demonstrating understanding of the front-end layer, and the relationship between user interaction and the UI
 
-## Project Outline
-This project comes with a minimal scaffold based on the baseline React application generated by `create-react-app`. We provide the JSON file with static chat message data and the CSS styles, and you will need to implement all of the components except for the provided `TimeStamp` component.
-
-![React Chat Log demo](./images/react-chatlog-demo.png)
-
-## Project Directions
-- [Planning and Setup](./project-docs/setup.md)
-- [Wave 01: Presentational Component](./project-docs/wave-01.md)
-- [Wave 02: Container Component](./project-docs/wave-02.md)
-- [Wave 03: Event Handling and Lifting Up State](./project-docs/wave-03.md)
-- [Optional Enhancements](./project-docs/optional-enhancements.md)
-
-## Testing
-
-The tests for this project are a mix of unit tests (Waves 01 and 02) and integration tests (Wave 03). The directions for each wave include a section about the tests for that wave. The unit tests provided for Wave 01 and Wave 02 require us to be prescriptive around component and prop names. The integration tests for Wave 03 allow for more freedom in the implementation details of this wave's feature. 
-
-Writing front-end tests is outside the scope of the core curriculum. We provide minimal tests for this project for a few reasons. We can use these tests to partially verify the correctness of our code. Tests support the refactoring process and enforce consistency in implementation details. Additionally, by reviewing these front-end tests, we have some exposure to what unit tests and integration tests look like in front-end testing.
-
-Follow your curiosity to learn more about front-end testing:
-- [Front End Testing: A Complete Conceptual Overview](https://www.testim.io/blog/front-end-testing-complete-overview/)
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-
-
 
+##
+<img width="1227" alt="react-chatlog" src="https://github.com/diarreola/react-chatlog/assets/35948232/7c268926-152f-410d-a91d-42a9e4108b43">

src/App.js

@@ -1,16 +1,44 @@
 import React from 'react';
 import './App.css';
+import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
+import { useState } from 'react';
 
 const App = () => {
+  const [entryData, setEntryData] = useState(chatMessages);
+
+  const updateLikedMessage = (id) => {
+    const allEntries = entryData.map((entry) => {
+      if (entry.id === id) {
+        return { ...entry, liked: !entry.liked };
+      } else {
+        return entry;
+      }
+    });
+    setEntryData(allEntries);
+  };
+
+  const totalLikes = () => {
+    const allLikes = entryData.reduce((likeCount, entry) => 
+    likeCount + entry.liked, 0);
+    return allLikes
+  };
+
+  const allLikes = totalLikes();
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
+        <section>
+          <div className="widget" id="heartWidget">{allLikes} ❤️s</div>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={entryData}
+          onUpdateLikedMessage={updateLikedMessage}
+        />
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -1,22 +1,43 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  const id = props.id;
+  const sender = props.sender;
+  const body = props.body;
+  const timeStamp = props.timeStamp;
+  const liked = props.liked;
+
+  const senderSide =
+    sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+
+  const heart = liked ? '❤️' : '🤍';
+
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={senderSide}>
+      <h2 className="entry-name">{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>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
+        <button className="like" onClick={() => props.onUpdateLikedMessage(id)}>
+          {heart}
+        </button>
       </section>
     </div>
   );
 };
 
 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,
+  onUpdateLikedMessage: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import './ChatLog.css';
+import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+  const messages = props.entries.map((message) => {
+    return (
+      <div key={message.id}>
+        <ChatEntry
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+          liked={message.liked}
+          onUpdateLikedMessage={props.onUpdateLikedMessage}
+        />
+      </div>
+
+    );
+  });
+
+  return <section className="chat-log">{messages}</section>;
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string,
+      timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired
+    })
+  ), 
+  onUpdateLikedMessage: PropTypes.func.isRequired
+};
+
+export default ChatLog;