Ruby- Mikayla H

src/App.js

@@ -1,19 +1,49 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
+
+
+
+//use state
+// create func to update likes
+//creat func to count likes 
+
 
 const App = () => {
+
+ const [entries, setEntries] = useState(chatMessages);
+
+ const updateLike = (entryId) => {
+ const updatedEntries = entries.map((entry) => {
+ if (entry.id === entryId) {
+ return { ...entry, liked: !entry.liked };
+ }
+ return entry;
+ });
+
+ setEntries(updatedEntries);
+ }
+ const newLikedCount = entries.filter(
+ (entry) => entry.liked === true).length;
+
+
  return (
  <div id="App">
  <header>
- <h1>Application title</h1>
+ <h1> Mikayla's Application</h1>
+ <h2>{newLikedCount} ❤️s</h2>
  </header>
  <main>
- {/* Wave 01: Render one ChatEntry component
- Wave 02: Render ChatLog component */}
+ <ChatLog entries={entries}
+ updateLike={updateLike} />
  </main>
  </div>
  );
 };
 
 export default App;
+
+

src/components/ChatEntry.js

@@ -1,22 +1,34 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp'
+
 
 const ChatEntry = (props) => {
+ const changeLike = props.liked ? '❤️' : '🤍'; 
  return (
  <div className="chat-entry local">
- <h2 className="entry-name">Replace with name of sender</h2>
+ <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>{props.body}</p>
+ <p className="entry-time">
+ <TimeStamp time = {props.timeStamp}/></p>
+ <button className="like" onClick={() => {
+ props.updateLike(props.id)}
+ }>{changeLike}</button>
  </section>
  </div>
  );
 };
 
+
 ChatEntry.propTypes = {
- //Fill with correct proptypes
+ sender: PropTypes.string.isRequired,
+ body: PropTypes.string.isRequired,
+ timeStamp: PropTypes.string.isRequired,
+ liked: PropTypes.bool.isRequired,
+ updateLike: PropTypes.func.isRequired,
 };
 
+
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types'
+
+
+
+const ChatLog = (props) => {
+ const {entries, updateLike} = props;
+ return (
+ <div className='chat-log'>
+ {entries.map((entry) => (
+ <ChatEntry 
+ id={entry.id}
+ key={entry.id}
+ sender={entry.sender}
+ body={entry.body}
+ timeStamp={entry.timeStamp}
+ liked={entry.liked}
+ updateLike={updateLike}
+ />
+ ))}
+ </div>
+ );
+ };
+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,
+ liked: PropTypes.bool.isRequired,
+ })
+ ),
+ updateLike: PropTypes.func.isRequired
+};