C24 Possum Ekaterina Belova Chat log

src/App.css

@@ -2,73 +2,9 @@
   background-color: #87cefa;
 }
 
-#App header {
-  background-color: #222;
-  color: #fff;
-  padding-bottom: 0.5rem;
-  position: fixed;
-  width: 100%;
-  z-index: 100;
-  text-align: center;
-  align-items: center;
-}
-
 #App main {
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 5rem;
   padding-top: 10rem;
-}
-
-#App h1 {
-  font-size: 1.5em;
-  text-align: center;
-  display: inline-block;
-}
-
-#App header section {
-  background-color: #e0ffff;
-}
-
-#App .widget {
-  display: inline-block;
-  line-height: 0.5em;
-  border-radius: 10px;
-  color: black;
-  font-size:0.8em;
-  padding-left: 1em;
-  padding-right: 1em;
-}
-
-#App #heartWidget {
-  font-size: 1.5em;
-  margin: 1em
-}
-
-#App span {
-  display: inline-block
-}
-
-.red {
-  color: #b22222
-}
-
-.orange {
-  color: #e6ac00
-}
-
-.yellow {
-  color: #e6e600
-}
-
-.green {
-  color: green
-}
-
-.blue {
-  color: blue
-}
-
-.purple {
-  color: purple
 }

src/App.jsx

@@ -1,14 +1,53 @@
 import './App.css';
+import { useState } from 'react';
+import ChatLog from './components/ChatLog.jsx';
+import messages from './data/messages.json';
+import Header from './components/Header.jsx';
 
 const App = () => {
+  const [entries, setEntries] = useState(messages);
+  const [fontColorForLocalSender, setFontColorForLocalSender] = useState('black');
+  const [fontColorForRemoteSender, setFontColorForRemoteSender] = useState('black');
+  const localSender = 'Vladimir';
+
+  const totalLikes = entries.reduce((total, entry) => {
+    return entry.isLiked ? total + 1 : total;
+  }, 0);
+
+  const toggleHeart = (entryId) => {
+    setEntries(entries => {
+      return entries.map(entry => {
+        if (entry.id === entryId) {
+          return { ...entry, isLiked: !entry.isLiked };
+        } else {
+          return entry;
+        }
+      });
+    });
+  };
+
+  const chooseFontColor = (senderName, color) => {
+    if (senderName === localSender) {
+      setFontColorForLocalSender(color);
+    } else {
+      setFontColorForRemoteSender(color);
+    }
+  };
+
   return (
     <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
+      <Header
+        totalLikes={totalLikes}
+        chooseFontColor={chooseFontColor}
+      />
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={entries}
+          localSender={localSender}
+          onToggleHeart={toggleHeart}
+          fontColorForLocalSender={fontColorForLocalSender}
+          fontColorForRemoteSender={fontColorForRemoteSender}
+        />
       </main>
     </div>
   );

src/components/ChatEntry.css

@@ -2,7 +2,7 @@ button {
   background: none;
 	color: inherit;
 	border: none;
-	padding: 10px;
+  padding: 10px;
 	font: inherit;
 	cursor: pointer;
 	outline: inherit;
@@ -97,4 +97,18 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
+}
+
+.entry-attributes {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.like {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  line-height: 1;
 }

src/components/ChatEntry.jsx

@@ -1,21 +1,40 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = (props) => {
+  const isLocal = props.sender === props.localSender;
+  const entryClass = isLocal ? 'local' : 'remote';
+  const isLiked = props.isLiked ? '❤️' : '🤍';
+  const isLikedButtonClicked = () => {
+    props.onToggleHeart(props.id);
+  };
+
+  const fontColor = isLocal ? props.fontColorForLocalSender : props.fontColorForRemoteSender;
 
-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>
+    <article className={`chat-entry ${entryClass}`}>
+      <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 className={`entry-body ${fontColor}`}>{props.body}</p>
+        <div className="entry-attributes">
+          <p className="entry-time">
+            <TimeStamp time={props.timeStamp} />
+          </p>
+          <button className="like" onClick={isLikedButtonClicked}>{isLiked}</button>
+        </div>
       </section>
-    </replace-with-relevant-semantic-element>
+    </article>
   );
 };
 
-ChatEntry.propTypes = {
-  // Fill with correct proptypes
-};
-
 export default ChatEntry;
+
+ChatEntry.propTypes = {
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  localSender: PropTypes.string,
+  isLiked: PropTypes.bool,
+  onToggleHeart: PropTypes.func,
+};

src/components/ChatLog.jsx

@@ -0,0 +1,39 @@
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({entries, localSender, onToggleHeart, fontColorForLocalSender, fontColorForRemoteSender}) => {
+  return (
+    <section className="chat-log">
+      {entries.map((entry) => (
+        <ChatEntry
+          key={entry.id}
+          id={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+          localSender={localSender}
+          isLiked={entry.isLiked}
+          onToggleHeart={onToggleHeart}
+          fontColorForLocalSender={fontColorForLocalSender}
+          fontColorForRemoteSender={fontColorForRemoteSender}
+        />
+      ))}
+    </section>
+  );
+};
+
+export default ChatLog;
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  localSender: PropTypes.string,
+  onToggleHeart: PropTypes.func,
+};

src/components/Header.css

@@ -0,0 +1,20 @@
+#App header {
+  background-color: #2c2c2c;
+  color: #fff;
+  padding-bottom: 0.5rem;
+  position: fixed;
+  width: 100%;
+  z-index: 100;
+  text-align: center;
+  align-items: center;
+}
+
+#App h1 {
+  font-size: 1.5em;
+  text-align: center;
+  display: inline-block;
+}
+
+#App header section {
+  background-color: #e0ffff;
+}

src/components/Header.jsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import './Header.css';
+import HeartCounter from './HeartCounter.jsx';
+import SenderColorPicker from './SenderColorPicker.jsx';
+
+const Header = ({ totalLikes, chooseFontColor }) => {
+  const [localColor, setLocalColor] = useState('white');
+  const [remoteColor, setRemoteColor] = useState('white');
+
+  const changeFontColor = (senderName, color) => {
+    if (senderName === 'Vladimir') {
+      setLocalColor(color);
+    } else {
+      setRemoteColor(color);
+    }
+    chooseFontColor(senderName, color);
+  };
+
+  return (
+    <header>
+      <h1>
+        Chat between <span className={localColor}>Vladimir</span> and <span className={remoteColor}>Estragon</span>
+      </h1>
+
+      <section>
+        <SenderColorPicker senderName="Vladimir" chooseFontColor={changeFontColor} />
+        <HeartCounter totalLikes={totalLikes} />
+        <SenderColorPicker senderName="Estragon" chooseFontColor={changeFontColor} />
+      </section>
+    </header>
+  );
+};
+
+export default Header;

src/components/HeartCounter.css

@@ -0,0 +1,18 @@
+#App .widget {
+  display: inline-block;
+  line-height: 0.5em;
+  border-radius: 10px;
+  color: black;
+  font-size: 0.8em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+#App #heartWidget {
+  font-size: 1.5em;
+  margin: 1em;
+}
+
+#App span {
+  display: inline-block;
+}

src/components/HeartCounter.jsx

@@ -0,0 +1,11 @@
+import './HeartCounter.css';
+
+const HeartCounter = ({ totalLikes }) => {
+  return (
+    <div className="widget" id="heartWidget">
+      {totalLikes} ❤️s
+    </div>
+  );
+};
+
+export default HeartCounter;

src/components/SenderColorPicker.css

@@ -0,0 +1,35 @@
+span {
+  display: inline-block
+}
+
+.red {
+  color: #b22222
+}
+
+.orange {
+  color: #e6ac00
+}
+
+.yellow {
+  color: #e6e600
+}
+
+.green {
+  color: green
+}
+
+.blue {
+  color: blue
+}
+
+.purple {
+  color: purple
+}
+
+.black {
+  color: black
+}
+
+.senderColorPicker span {
+  margin: 0 0.15em;
+}