Valerie - Zoisite

src/App.css

@@ -28,6 +28,7 @@
 
 #App header section {
   background-color: #e0ffff;
+  color: black;
 }
 
 #App .widget {
@@ -71,4 +72,10 @@
 
 .purple {
   color: purple
+}
+
+.colorSection {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
 }

src/App.js

@@ -1,16 +1,65 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
+import ColorChoice from './components/ColorChoice';
 
 const App = () => {
+  const [chatData, setChatData] = useState(chatMessages);
+  const [localColor, setLocalColor] = useState('green');
+  const [remoteColor, setRemoteColor] = useState('blue');
+
+  const onUpdateLikes = (entryToUpdate) => {
+    const entries = chatData.map((entry) => {
+      if (entry.id === entryToUpdate.id) {
+        return entryToUpdate;
+      }
+      return entry;
+    });
+    setChatData(entries);
+  };
+
+  const calcTotalLikes = (Data) => {
+    let totalLikes = 0;
+    for (const chat of Data) {
+      if (chat.liked) {
+        totalLikes += 1;
+      }
+    }
+    return totalLikes;
+  };
+
+const totalLikeCount = calcTotalLikes(chatData);
+
+const updateLocalColor = (color) => {
+  setLocalColor(color);
+} 
+
+const updateRemoteColor = (color) => {
+  setRemoteColor(color);
+} 
+
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Vivi's ChatLogs</h1>
+        <section className='colorSection'>
+          <div>
+          <ColorChoice setColorCallback={updateLocalColor} />
+          </div>
+          <div>
+          <h2>{totalLikeCount} ❤️s</h2>
+          </div>
+          <div>
+          <ColorChoice setColorCallback={updateRemoteColor}/>
+          </div>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={chatData} onUpdateLikes={onUpdateLikes} localColor={localColor} remoteColor={remoteColor}/>
+        {/* pass localcolor & remotecolor to chatentry & chatlog*/}
       </main>
     </div>
   );

src/components/ChatEntry.css

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

src/components/ChatEntry.js

@@ -1,22 +1,47 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
+
+const ChatEntry = ({ id, sender, body, timeStamp, liked, 
+  onUpdateLikes, localColor, remoteColor }) => {
+  const onButtonClick = () => {
+    onUpdateLikes({
+      id: id,
+      sender: sender,
+      body: body,
+      timeStamp: timeStamp,
+      liked: !liked,
+    });
+  };
+
+  const toggleHeart = liked ? '❤️' : '🤍';
+  const chatEntryClass = sender === 'Vladimir' ? 'local' : 'remote';
+  const colorClass = chatEntryClass === 'local' ? localColor : remoteColor;
+
+
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={`chat-entry ${chatEntryClass}`}>
+      <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={colorClass}>{body}</p>
+        <p className="entry-time"><TimeStamp time={timeStamp}/></p>
+        <button className="like" onClick={onButtonClick}>{toggleHeart}</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,
+  onUpdateLikes: PropTypes.func
 };
 
+
 export default ChatEntry;

src/components/ChatLog.js

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

src/components/ColorChoice.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ColorChoice = ({setColorCallback}) => {
+    const onColorClick = (event) => {
+        setColorCallback(event.target.value);
+    }
+
+    return (
+        <div>
+            <button value='red' onClick={onColorClick}>🔴</button>
+            <button value='orange' onClick={onColorClick}>🟠</button>
+            <button value='yellow' onClick={onColorClick}>🟡</button>
+            <button value='green' onClick={onColorClick}>🟢</button>
+            <button value='blue' onClick={onColorClick}>🔵</button>
+            <button value='purple' onClick={onColorClick}>🟣</button>
+        </div>
+    );
+};
+
+export default ColorChoice;