Chatlog

src/App.css

@@ -11,13 +11,15 @@
   z-index: 100;
   text-align: center;
   align-items: center;
+  height: 80px;
 }
 
 #App main {
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 5rem;
   padding-top: 10rem;
+  margin: auto;
 }
 
 #App h1 {
@@ -28,14 +30,20 @@
 
 #App header section {
   background-color: #e0ffff;
+  color: black;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center
 }
 
 #App .widget {
   display: inline-block;
-  line-height: 0.5em;
+  /* line-height: 0.5em; */
   border-radius: 10px;
   color: black;
-  font-size:0.8em;
+  font-size: 0.8em;
   padding-left: 1em;
   padding-right: 1em;
 }
@@ -71,4 +79,8 @@
 
 .purple {
   color: purple
+}
+
+.black {
+  color: black
 }

src/App.js

@@ -1,16 +1,66 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import ColorChoice from './components/ColorChoice';
 
 const App = () => {
+  const [messages, setMessages] = React.useState(chatMessages);
+
+  const likeMessage = (id) => {
+    setMessages(
+      messages.map((message) => (message.id === id ? {
+        ...message,
+        liked: !message.liked
+      } : message))
+    );
+  };
+
+  const [colorChoice, setColor] = React.useState({
+    [messages[0].sender]: 'red',
+    [messages[1].sender]: 'green'
+  })
+
+  const setColorChoice = (sender, chosenColor) => {
+    console.log(sender, chosenColor)
+    setColor(prevColor => {
+      return {
+        ...prevColor,
+        [sender]: chosenColor
+      }
+    })
+  }
+
+
+  console.log(colorChoice)
+
+  let totalHearts = 0;
+
+  for (let message of messages) {
+    if (message.liked) {
+      totalHearts++
+    }
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between 
+          <i className={colorChoice[messages[0].sender]}>{messages[0].sender}</i> and <i className={colorChoice[messages[1].sender]}>{messages[1].sender}</i></h1>
+        <section>
+          <span className="widget">
+            <ColorChoice sender={messages[0].sender} setColorCallback={setColorChoice}/>
+          </span>
+          <span id="heartWidget">
+            <p>{totalHearts} ❤️s</p>
+          </span>
+          <span className="widget">
+            <ColorChoice sender={messages[1].sender} setColorCallback={setColorChoice}/>
+          </span>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messages} colorChoice={colorChoice} likeMessage={likeMessage} />
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -1,22 +1,44 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
-  return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of 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>
-      </section>
-    </div>
-  );
+const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage, colorChoice = 'black' }) => {
+	const likedHeart = '❤️';
+	const notLikedHeart = '🤍';
+	const likedClass = liked ? likedHeart : notLikedHeart;
+
+	const bubbleClass = colorChoice[sender] ?? 'black'
+
+	// console.log(bubbleClass)
+
+	const stateMessage = (sender) => {
+		return sender === 'Vladimir' ? 'local' : 'remote';
+	};
+
+	return (
+		<div className={'chat-entry ' + stateMessage(sender)}>
+			<h2 className={`entry-name ${bubbleClass}`}>{sender}</h2>
+			<section className={`entry-bubble ${bubbleClass}`}>
+				<p>{body}</p>
+				<p className="entry-time">
+					<TimeStamp time={timeStamp} />
+				</p>
+				<button className="like" onClick={() => likeMessage(id)}>
+					{likedClass}
+				</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,
+	colorChoice: PropTypes.func
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import './ChatLog.css'
+import ChatEntry from './ChatEntry'
+
+const ChatLog = ({ entries, likeMessage, colorChoice }) => {
+    const entryComponents = entries.map(entry => {
+        return (
+            <ChatEntry 
+            id= {entry.id}
+            sender= {entry.sender}
+            body= {entry.body}
+            timeStamp= {entry.timeStamp}
+            liked= {entry.liked}
+            likeMessage= {likeMessage} 
+            colorChoice={colorChoice}
+            />
+        )
+    })
+
+    return (
+    <div className="chat-log">
+        <section>{entryComponents}</section>
+    </div>
+    )
+}
+
+export default ChatLog

src/components/ColorChoice.css

@@ -0,0 +1,19 @@
+ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    overflow: hidden;
+    padding: 0
+}
+
+#color-picker {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+li {
+    float: left;
+}

src/components/ColorChoice.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './ColorChoice.css'
+
+const ColorChoice = ({ setColorCallback, sender }) => {
+    return (
+        <div>
+            <p>{`${sender}'s Color:`}</p>
+            <ul>
+                <li onClick={() => setColorCallback(sender, 'red')}>🔴</li>
+                <li onClick={() => setColorCallback(sender, 'orange')}>🟠</li>
+                <li onClick={() => setColorCallback(sender, 'yellow')}>🟡</li>
+                <li onClick={() => setColorCallback(sender, 'green')}>🟢</li>
+                <li onClick={() => setColorCallback(sender, 'blue')}>🔵</li>
+                <li onClick={() => setColorCallback(sender,'purple')}>🟣</li>
+            </ul>
+        </div>
+
+    )
+}
+
+export default ColorChoice