C24 Possum: Makiko Yokoyama

src/App.css

@@ -27,6 +27,9 @@
 }
 
 #App header section {
+  display: flex;
+  justify-content: space-around;
+  color: black;
   background-color: #e0ffff;
 }
 

src/App.jsx

@@ -1,14 +1,76 @@
+import { useState } from 'react';
+import messages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import ColorChoice from './components/ColorChoice';
 import './App.css';
 
+const numOfLikes = (messageData) => {
+  return messageData.reduce(
+    (count, message) => {
+      return message.liked ? count + 1 : count;
+    },
+    0
+  );
+};
+
 const App = () => {
+  const [messageData, setMessageData] = useState(messages);
+  const [messageColors, setMessageColors] = useState({ local: 'green', remote: 'blue' });
+
+  const localSender = messageData[0]?.sender;
+  const remoteSender = messageData.find(message => message.sender !== localSender)?.sender;
+
+  const handleLikeStatus = messageId => {
+    setMessageData((prevMessages) => (
+      prevMessages.map(message =>
+        message.id === messageId
+          ? { ...message, liked: !message.liked }
+          : message
+      )
+    ));
+  };
+
+  const getSenderType = (senderName) => (
+    senderName === localSender ? 'local' : 'remote'
+  );
+
+  const updateMessageColor = (sender, color) => {
+    const senderType = getSenderType(sender);
+    setMessageColors(prevColors => (
+      { ...prevColors, [senderType]: color }
+    ));
+  };
+
+  const totalLikes = numOfLikes(messageData);
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>
+          Chat Between{' '}
+          <span className={messageColors.local}>{localSender}</span>{' '}
+          and{' '}
+          <span className={messageColors.remote}>{remoteSender}</span>
+        </h1>
+        <section>
+          <div>
+            <p className={messageColors.local}>{localSender}'s color:</p>
+            <ColorChoice sender={localSender} onUpdateColor={updateMessageColor} />
+          </div>
+          <h1>{totalLikes} ❤️s</h1>
+          <div>
+            <p className={messageColors.remote}>{remoteSender}'s color:</p>
+            <ColorChoice sender={remoteSender} onUpdateColor={updateMessageColor} />
+          </div>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={messageData}
+          onToggleMessageLike={handleLikeStatus}
+          messageColors={messageColors}
+          getSenderType={getSenderType}
+        />
       </main>
     </div>
   );

src/components/ChatEntry.css

@@ -97,4 +97,5 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
+}
+

src/components/ChatEntry.jsx

@@ -1,21 +1,41 @@
+import PropTypes from 'prop-types';
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp';
+import { messageDataProtoTypes, messageColorsProtoTypes } from './sharedPropTypes';
+
+const ChatEntry = ({
+  id,
+  sender,
+  body,
+  timeStamp,
+  liked,
+  onToggleLike,
+  messageColors,
+  getSenderType,
+}) => {
+
+  const senderType = getSenderType && getSenderType(sender);
 
-const ChatEntry = () => {
   return (
-    // Replace the outer tag name with a semantic element that fits our use case
-    <replace-with-relevant-semantic-element className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <section className={`chat-entry ${senderType}`}>
+      <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 className={messageColors?.[senderType] ?? ''}>{body}</p>
+        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+        <button className="like" onClick={() => onToggleLike(id)}>{liked ? '❤️' : '🤍'}
+        </button>
       </section>
-    </replace-with-relevant-semantic-element>
+    </section>
   );
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  ...messageDataProtoTypes,
+  onToggleLike: PropTypes.func,
+  messageColors: PropTypes.shape(
+    messageColorsProtoTypes
+  ),
+  getSenderType: PropTypes.func,
 };
 
 export default ChatEntry;

src/components/ChatEntry.test.jsx

@@ -15,6 +15,7 @@ describe('Wave 01: ChatEntry', () => {
     );
   });
 
+
   test('renders without crashing and shows the sender', () => {
     expect(screen.getByText(/Joe Biden/)).toBeInTheDocument();
   });

src/components/ChatLog.css

@@ -2,3 +2,5 @@
   margin: auto;
   max-width: 50rem;
 }
+
+

src/components/ChatLog.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import { messageDataProtoTypes, messageColorsProtoTypes } from './sharedPropTypes';
+
+const ChatLog = ({
+  entries,
+  onToggleMessageLike,
+  messageColors,
+  getSenderType,
+}) => {
+
+  return (
+    <div className='chat-log'>
+      {entries.map(message =>
+        <ChatEntry
+          key={message.id}
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+          liked = {message.liked}
+          onToggleLike={onToggleMessageLike}
+          messageColors={messageColors}
+          getSenderType={getSenderType}
+        />)}
+    </div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    ...messageDataProtoTypes
+  })).isRequired,
+  onToggleMessageLike: PropTypes.func,
+  messageColors: PropTypes.shape(
+    messageColorsProtoTypes
+  ),
+  getSenderType: PropTypes.func,
+};
+
+export default ChatLog;

src/components/ColorChoice.css

@@ -0,0 +1,9 @@
+.color-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.button-size {
+  font-size: 2rem;
+}

src/components/ColorChoice.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import './ColorChoice.css';
+
+const COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
+
+const ColorChoice = ({ sender, onUpdateColor }) => {
+  return (
+    <div className="color-container">
+      {COLORS.map((color, index) => {
+        return (
+          <button
+            key={index}
+            className={`button-size ${color}`}
+            onClick={() => onUpdateColor(sender, color)}
+          >
+            <p className='button-size'>&#9679;</p>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+ColorChoice.propTypes = {
+  sender: PropTypes.string.isRequired,
+  onUpdateColor: PropTypes.func.isRequired
+};
+
+export default ColorChoice;

src/components/sharedPropTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+export const messageDataProtoTypes = {
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+};
+
+export const messageColorsProtoTypes = {
+      local: PropTypes.string.isRequired,
+      remote: PropTypes.string.isRequired,
+};