Dragonfly - Lina Martinez

src/App.css

@@ -1,11 +1,10 @@
 #App {
-  background-color: #87cefa;
+  background-color: #3d4852;
 }
 
 #App header {
-  background-color: #222;
-  color: #fff;
-  padding-bottom: 0.5rem;
+  background-color: #f7f8fa;
+  color: #3d4852;
   position: fixed;
   width: 100%;
   z-index: 100;
@@ -27,7 +26,12 @@
 }
 
 #App header section {
-  background-color: #e0ffff;
+  color: #3d4852;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  border: 3px solid #3d4852;
 }
 
 #App .widget {
@@ -49,6 +53,10 @@
   display: inline-block
 }
 
+.black {
+  color:#222
+}
+
 .red {
   color: #b22222
 }
@@ -57,8 +65,8 @@
   color: #e6ac00
 }
 
-.yellow {
-  color: #e6e600
+.brown {
+  color: #735711
 }
 
 .green {

src/App.jsx

@@ -1,14 +1,65 @@
 import './App.css';
+import ChatLog from './components/ChatLog';
+import ColorChoice from './components/ColorChoice';
+import DATA from './data/messages.json';
+import { useState } from 'react';
 
 const App = () => {
+  const [entryData, setEntryData] = useState(DATA);
+  const [localColor, setLocalColor] = useState('green');
+  const [remoteColor, setRemoteColor] = useState('blue');
+
+  const LOCAL_SENDER = entryData[0].sender;
+  const REMOTE_SENDER = entryData[1].sender;
+
+  const handleColorChange = (sender, color) => {
+    if (sender === LOCAL_SENDER){
+      setLocalColor(color);
+    } else if (sender === REMOTE_SENDER) {
+      setRemoteColor(color);
+    }
+  };
+
+  const updateEntryLikedState = (entryId) => {
+    setEntryData(entries => {
+      return entries.map(entry => {
+        if (entry.id === entryId) {
+          return { ...entry, liked: !entry.liked };
+        } else {
+          return entry;
+        }
+      });
+    });
+  };
+
+  const totalLikes = entryData.reduce((sum, entry) => {
+    return entry.liked ? sum + 1 : sum;
+  }, 0);
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Between{' '}
+          <span className={localColor}>{LOCAL_SENDER}</span>{' '}
+          and{' '}
+          <span className={remoteColor}>{REMOTE_SENDER}</span>
+        </h1>
+
+        <section>
+          <ColorChoice sender={LOCAL_SENDER} chatColor={localColor} setColorCallback={handleColorChange} />
+          <span id='heartWidget' className='widget'>{totalLikes} ❤️s</span>
+          <ColorChoice sender={REMOTE_SENDER} chatColor={remoteColor} setColorCallback={handleColorChange} />
+        </section>
       </header>
+
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={entryData}
+          onToggleHeart={updateEntryLikedState}
+          chatLocalColor={localColor}
+          chatRemoteColor={remoteColor}
+          localSender={LOCAL_SENDER}
+        />
       </main>
     </div>
   );

src/components/ChatEntry.css

@@ -10,6 +10,7 @@ button {
 
 .chat-entry {
   margin: 1rem;
+  font-size: 1.1rem;
 }
 
 .chat-entry:last-child {
@@ -31,13 +32,14 @@ button {
 }
 
 .chat-entry .entry-name {
-  font-size: medium;
+  font-size: 1.1rem;
   margin-bottom: 0.5rem;
+  color: whitesmoke;
 }
 
 .chat-entry .entry-time {
   color: #bbb;
-  font-size: x-small;
+  font-size: small;
   margin-bottom: 0.1rem;
   margin-right: 0.5rem;
 }

src/components/ChatEntry.jsx

@@ -1,20 +1,36 @@
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp';
+import PropTypes from 'prop-types';
+
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike, isLocal, chatColor }) => {
+  const entryClass = `chat-entry ${isLocal ? 'local' : 'remote'}`;
 
-const ChatEntry = () => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={entryClass}>
+      <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={chatColor}>{body}</p>
+        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+        <button
+          className="like"
+          onClick={() => { onToggleLike(id); }}
+        >
+          {liked ? '❤️' : '🤍'}
+        </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,
+  onToggleLike: PropTypes.func.isRequired,
+  isLocal: PropTypes.bool.isRequired,
+  chatColor: PropTypes.string.isRequired
 };
 
 export default ChatEntry;

src/components/ChatLog.jsx

@@ -0,0 +1,47 @@
+import ChatEntry from './ChatEntry';
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({ entries, onToggleHeart, chatLocalColor, chatRemoteColor, localSender}) => {
+  const chatEntryComponents = entries.map((entry) => {
+    const isLocal = entry.sender === localSender;
+    const chatColor = isLocal ? chatLocalColor : chatRemoteColor;
+    return (
+      <ChatEntry
+        key={entry.id}
+        id={entry.id}
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+        liked={entry.liked}
+        onToggleLike={onToggleHeart}
+        isLocal={isLocal}
+        chatColor={chatColor}
+      ></ChatEntry>
+    );
+  });
+
+  return (
+    <div className='chat-log'>
+      {chatEntryComponents}
+    </div>
+  );
+};
+
+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,
+    })
+  ),
+  onToggleHeart: PropTypes.func.isRequired,
+  chatLocalColor: PropTypes.string.isRequired,
+  chatRemoteColor: PropTypes.string.isRequired,
+  localSender: PropTypes.string.isRequired
+};
+
+export default ChatLog;

src/components/ColorChoice.css

@@ -0,0 +1,11 @@
+label {
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+select {
+    margin-left: 1rem;
+    cursor: pointer;
+    border-radius: 10px;
+    font-size: 1rem;
+    padding: 0.5rem;
+}

src/components/ColorChoice.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import './ColorChoice.css';
+
+const ColorChoice = ({sender, chatColor, setColorCallback}) => {
+  const handleColorChange = (event) => {
+    setColorCallback(sender, event.target.value);
+  };
+
+  return (
+    <label className={chatColor}>
+      {sender}&apos;s color:
+      <select name="colorSelect" defaultValue="chooseColor" onChange={handleColorChange}>
+        <option value="">Choose a color</option>
+        <option value="red" >🔴 Red</option>
+        <option value="orange">🟠 Orange</option>
+        <option value="brown">🟤 Brown</option>
+        <option value="green">🟢 Green</option>
+        <option value="blue">🔵 Blue</option>
+        <option value="purple">🟣 Purple</option>
+      </select>
+    </label>
+  );
+};
+
+ColorChoice.propTypes = {
+  sender: PropTypes.string.isRequired,
+  chatColor: PropTypes.string.isRequired,
+  setColorCallback: PropTypes.func.isRequired
+};
+export default ColorChoice;