Ocelots - Ya-Juan Ruan

src/App.css

@@ -49,6 +49,15 @@
   display: inline-block
 }
 
+.colorchoice button{
+  border-radius: 20px;
+  margin: 5px;
+}
+
+.colorchoice button:hover{
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+}
+
 .red {
   color: #b22222
 }
@@ -58,17 +67,55 @@
 }
 
 .yellow {
-  color: #e6e600
+  color: #e6e600;
 }
 
 .green {
-  color: green
+  color: green;
 }
 
 .blue {
-  color: blue
+  color: blue;
 }
 
 .purple {
-  color: purple
+  color: purple;
+}
+
+.black{
+  color:black;
+}
+
+.ribbon{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.button-red{
+  background-color: red;
+}
+
+.button-orange {
+  background-color: #e6ac00
+}
+
+.button-yellow {
+  background-color: #e6e600;
+}
+
+.button-green {
+  background-color: green;
+}
+
+.button-blue {
+  background-color: blue;
+}
+
+.button-purple {
+  background-color: purple;
+}
+
+.sender{
+  color:black;
 }

src/App.js

@@ -1,16 +1,61 @@
-import React from 'react';
+import React, {useState} 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] = useState(chatMessages);
+  const [localColor, setLocalColor] = useState('black');
+  const [remoteColor, setRemoteColor] = useState('black');
+  const local = 'Vladimir';
+  const remote = 'Estragon';
+
+  const updateColor = (origin, updatedcolor)=>{
+    if (origin === remote){
+      setRemoteColor(updatedcolor);
+    }else{
+      setLocalColor(updatedcolor);
+    }
+  }
+
+
+  const updateLike = (updatedmessage)=>{
+    const updatedmessages = messages.map(message =>{
+      if (message.id === updatedmessage.id){
+        return updatedmessage;
+
+      }else{
+        return message;
+      }
+    })
+    setMessages(updatedmessages);
+  }
+
+  const getHeartCount = () =>{
+    let heartCount = 0;
+    for (const message of messages){
+      if (message.liked){
+        heartCount ++;
+      }
+    }
+    return heartCount;
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between <span className={localColor}>{local}</span> and <span className={remoteColor}>{remote}</span> </h1>
+        <section className='ribbon'>
+          <ColorChoice color={localColor} origin={local} colorupdate={updateColor}/>
+          <span className='widget' id='heartWidget'>{getHeartCount()} ❤️s</span>
+          <ColorChoice color={remoteColor} origin={remote} colorupdate={updateColor}/>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messages} onupdate={updateLike} 
+                local={local} colorForLocal={localColor} colorForRemote={remoteColor}>
+        </ChatLog>
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -1,22 +1,47 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import { DateTime } from 'luxon';
+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 heart = props.liked ? '❤️':'🤍';
+    let origin = 'local';
+    let fontColor = props.colorForLocal;
+    if  (props.sender != props.local){
+      origin = 'remote';
+      fontColor = props.colorForRemote;
+    }
+
+
+    const updateLike = () =>{
+    const updatedmessage = {
+      id:props.id,
+      sender:props.sender,
+      body:props.body,
+      timeStamp:props.timeStamp,
+      liked:!props.liked,
+    }
+    props.onupdate(updatedmessage)
+  };
+    return (
+      <div className={`chat-entry ${origin} ${fontColor}`}>
+        <h2 className="entry-name sender">{props.sender}</h2>
+        <section className="entry-bubble">
+          <p>{props.body}</p>
+          <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
+          <button className="like" onClick={()=>{updateLike()}}>{heart}</button>
+        </section>
+      </div>
+    );
+  };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number,
+  sender:PropTypes.string,
+  body:PropTypes.string,
+  timeStamp:PropTypes.string,
+  liked:PropTypes.bool,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({entries, onupdate, local, colorForLocal, colorForRemote})=>{
+
+
+    const chatentryComponents = entries.map((message, index)=>{
+        return <ChatEntry 
+                onupdate={onupdate} liked={message.liked} key={index} id={message.id}
+                sender={message.sender} body={message.body} timeStamp={message.timeStamp} local={local}
+                colorForLocal={colorForLocal} colorForRemote={colorForRemote}
+                />;
+        });
+
+    return <section className='chat-log'>{chatentryComponents}</section>;
+}
+
+ChatLog.propTypes= {
+    entries: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number,
+            sender: PropTypes.string,
+            body: PropTypes.string,
+            timeStamp:PropTypes.string,
+            liked:PropTypes.bool,   
+        })
+    ),
+    onupdate: PropTypes.func,
+    local: PropTypes.string,
+    colorForLocal:PropTypes.string,
+    colorForRemote:PropTypes.string,
+};
+export default ChatLog;

src/components/ColorChoice.css

@@ -0,0 +1,2 @@
+
+

src/components/ColorChoice.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import './ColorChoice.css';
+import PropTypes from 'prop-types';
+
+
+const ColorChoice = ({color, origin, colorupdate})=>{
+
+    return(
+        <section className={`colorchoice  ${origin}`}>
+            <h3 className={color}>{origin}'s color</h3>
+            <section className='colorbutton'>
+                <button className='button-red' onClick={()=>{colorupdate(origin, 'red')}}></button>
+                <button className='button-orange' onClick={()=>{colorupdate(origin, 'orange')}}></button>
+                <button className='button-yellow' onClick={()=>{colorupdate(origin, 'yellow')}}></button>
+                <button className='button-green' onClick={()=>{colorupdate(origin, 'green')}}></button>
+                <button className='button-blue' onClick={()=>{colorupdate(origin, 'blue')}}></button>
+                <button className='button-purple' onClick={()=>{colorupdate(origin, 'purple')}}></button>
+            </section>
+        </section>
+    );
+};
+
+ColorChoice.propTypes ={
+    color: PropTypes.string,
+    origin: PropTypes.string,
+    colorupdate: PropTypes.func, 
+}
+
+
+export default ColorChoice;