Kate Marantidi, C23, Bumblebees

eslint.config.mjs

@@ -65,7 +65,7 @@ export default [{
         "comma-dangle": ["warn", "only-multiline"],
         "dot-notation": "warn",
         "space-before-function-paren": "off",
-        "indent": ["warn", 2],
+        "indent": ["warn", 'tab'],
         "padded-blocks": "warn",
         "no-trailing-spaces": "warn",
         "array-bracket-spacing": "warn",

package.json

@@ -11,6 +11,7 @@
     "test": "vitest --run"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "luxon": "^2.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/App.css

@@ -31,18 +31,24 @@
 }
 
 #App .widget {
-  display: inline-block;
-  line-height: 0.5em;
-  border-radius: 10px;
+  position: fixed;
+  top: 9.6vh; 
+  width: 100%;
+  height: 9vh;
+  background-color: #e0ffff;
   color: black;
-  font-size:0.8em;
-  padding-left: 1em;
-  padding-right: 1em;
-}
+  font-size: 1.5em;
+  text-align: center;
+  display: flex; /* enables centering */
+  align-items: center; /* vertical centering */
+  justify-content: center; /* horizontal centering */
+  box-sizing: border-box;
+  z-index: 90;
+
 
 #App #heartWidget {
   font-size: 1.5em;
-  margin: 1em
+  margin: 0em
 }
 
 #App span {

src/App.jsx

@@ -1,17 +1,33 @@
 import './App.css';
+import entriesData from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
-  return (
-    <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
-      <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-      </main>
-    </div>
-  );
+	const [entries, setEntries] = useState(entriesData);
+	const toggleLike = (id) => {
+		const updatedEntries = entries.map(entry => {
+			if (entry.id === id) {
+				return { ...entry, liked: !entry.liked } ;
+			} else{
+				return entry;
+			}
+		});
+		setEntries(updatedEntries);
+	};
+	const totalLikes = entries.filter((entry) => entry.liked).length;
+
+	return (
+		<div id="App">
+			<header>
+				<h1>Chat between {entries[0].sender} and {entries[1].sender}</h1>
+			</header>
+			<section id="heartWidget"className="widget">{totalLikes}&nbsp;❤️{totalLikes !== 1 ? 's' : ''}</section>
+			<main>
+				<ChatLog entries={entries} onToggleLike={toggleLike} />
+			</main>
+		</div>
+	);
 };
 
 export default App;

src/components/ChatEntry.jsx

@@ -1,20 +1,39 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = () => {
-  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 = (props) => {
+	const localSender = props.sender === 'Vladimir';
+	const entryClass = `chat-entry ${localSender ? 'local' : 'remote'}`;
+	// const likedStatus = () => {
+	// 	props.liked ? 'liked' : 'not-liked';
+
+	return (
+		<div className={entryClass} key={props.id}>
+			<h2 className="entry-name">{props.sender}</h2>
+			<section className="entry-bubble">
+				<p>{props.body}</p>
+				<p className="entry-time"><TimeStamp time={props.timeStamp} /></p>
+				<button className="like" onClick={() => props.onToggleLike(props.id)}>
+					{props.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, //had to remove isRequired to pass the test from Waves 1 and 2
+};
+
+ChatEntry.defaultProps = { // added dafault props so it stays always defined
+	onToggleLike: () => {},
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.jsx

@@ -0,0 +1,27 @@
+// import entries from './data/messages.json';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ entries, onToggleLike }) => {
+	return (
+		<div id="ChatLog">
+			{entries.map((entry) => (
+				<ChatEntry key={entry.id} {...entry} onToggleLike={onToggleLike} />
+			))}
+		</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
+		})
+	).isRequired,
+	onToggleLike: PropTypes.func.isRequired,
+};
+
+export default ChatLog;

src/components/ChatLog.test.jsx

@@ -3,70 +3,70 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 const LOG = [
-  {
-    id: 1,
-    sender: 'Vladimir',
-    body: 'why are you arguing with me',
-    timeStamp: '2018-05-29T22:49:06+00:00',
-    liked: false,
-  },
-  {
-    id: 2,
-    sender: 'Estragon',
-    body: 'Because you are wrong.',
-    timeStamp: '2018-05-29T22:49:33+00:00',
-    liked: false,
-  },
-  {
-    id: 3,
-    sender: 'Vladimir',
-    body: 'because I am what',
-    timeStamp: '2018-05-29T22:50:22+00:00',
-    liked: false,
-  },
-  {
-    id: 4,
-    sender: 'Estragon',
-    body: 'A robot.',
-    timeStamp: '2018-05-29T22:52:21+00:00',
-    liked: false,
-  },
-  {
-    id: 5,
-    sender: 'Vladimir',
-    body: 'Notabot',
-    timeStamp: '2019-07-23T22:52:21+00:00',
-    liked: false,
-  },
+	{
+		id: 1,
+		sender: 'Vladimir',
+		body: 'why are you arguing with me',
+		timeStamp: '2018-05-29T22:49:06+00:00',
+		liked: false,
+	},
+	{
+		id: 2,
+		sender: 'Estragon',
+		body: 'Because you are wrong.',
+		timeStamp: '2018-05-29T22:49:33+00:00',
+		liked: false,
+	},
+	{
+		id: 3,
+		sender: 'Vladimir',
+		body: 'because I am what',
+		timeStamp: '2018-05-29T22:50:22+00:00',
+		liked: false,
+	},
+	{
+		id: 4,
+		sender: 'Estragon',
+		body: 'A robot.',
+		timeStamp: '2018-05-29T22:52:21+00:00',
+		liked: false,
+	},
+	{
+		id: 5,
+		sender: 'Vladimir',
+		body: 'Notabot',
+		timeStamp: '2019-07-23T22:52:21+00:00',
+		liked: false,
+	},
 ];
 
 describe('Wave 02: ChatLog', () => {
-  beforeEach(() => {
-    render(<ChatLog entries={LOG} />);
-  });
+	beforeEach(() => {
+		render(<ChatLog entries={LOG} />);
+	});
 
-  test('renders without crashing and shows all the names', () => {
-    [
-      {
-        name: 'Vladimir',
-        numChats: 3,
-      },
-      {
-        name: 'Estragon',
-        numChats: 2,
-      },
-    ].forEach((person) => {
-      const elementList = screen.getAllByText(new RegExp(person.name));
-      expect(elementList.length).toEqual(person.numChats);
+	test('renders without crashing and shows all the names', () => {
+		[
+			{
+				name: 'Vladimir',
+				numChats: 3,
+			},
+			{
+				name: 'Estragon',
+				numChats: 2,
+			},
+		].forEach((person) => {
+			const elementList = screen.getAllByText(new RegExp(person.name));
+			expect(elementList.length).toEqual(person.numChats);
 
-      elementList.forEach((element) => {
-        expect(element).toBeInTheDocument();
-      });
-    });
-  });
+			elementList.forEach((element) => {
+				expect(element).toBeInTheDocument();
+			});
+		});
+	});
 
-  test('renders an empty list without crashing', () => {
-    const element = render(<ChatLog entries={[]} />);
-    expect(element).not.toBeNull();
-  });
+	test('renders an empty list without crashing', () => {
+		const element = render(<ChatLog entries={[]} />);
+		expect(element).not.toBeNull();
+	});
 });