render fake data and add collapse feature

Author: minhngo3818

package-lock.json

@@ -25,6 +25,7 @@
 		"react-dom": "^18.1.0",
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "5.0.1",
+		"react-spinners": "^0.13.4",
 		"styled-components": "^5.3.5",
 		"web-vitals": "^2.1.4"
 	},

package.json

@@ -1,4 +1,6 @@
 import { useState, useEffect } from "react";
+import { PacmanLoader } from "react-spinners";
+import { eventsMap as eventsList } from "../fakeData";
 import "./events.css";
 
 function EventsList() {
@@ -10,46 +12,59 @@ function EventsList() {
 }
 export default EventsList;
 
-// TODO: Remove eventsList when using fakeData.js
-const eventsList = [
-	{
-		id: 1,
-		title: "Event #1",
-		month: "Jul",
-		day: "01",
-		location: "Room101",
-		time: "3:00pm",
-	},
-	{
-		id: 2,
-		title:
-			"Event #2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
-		month: "Aug",
-		day: "08",
-		location: "Room202",
-		time: "4:00pm",
-	},
-];
-
 function ListEvents() {
-	return eventsList.map(singleEvent => {
-		const click = () => {
-			console.log("Clicked");
-		};
+	const [isCollapse, setCollapse] = useState(false);
+	const [index, setIndex] = useState(null);
+
+	function handleClick(id) {
+		setCollapse(!isCollapse);
+		setIndex(id);
+		console.log("Clicked", isCollapse);
+		console.log(id);
+	}
 
+	const [isLoading, setLoading] = useState(false);
+	useEffect(() => {
+		setLoading(true);
+		setTimeout(() => {
+			setLoading(false);
+		}, 2000);
+	}, []);
+
+	return eventsList.map(singleEvent => {
 		return (
 			<button
-				className="event"
 				key={singleEvent.id}
+				className="event"
 				type="button"
-				onClick={click}
+				onClick={() => handleClick(singleEvent.id)}
 			>
 				<div className="event-date">
 					<p id="month">{singleEvent.month}</p>
 					<p id="day">{singleEvent.day}</p>
 				</div>
 				<div className="event-info">
 					<h3 id="title">{singleEvent.title}</h3>
+
+					{isCollapse &&
+						singleEvent.id === index &&
+						(isLoading ? (
+							<PacmanLoader
+								cssOverride={{
+									margin: 10,
+								}}
+								size={30}
+								color="orange"
+								loadding={isLoading}
+							/>
+						) : (
+							<div className="event-expand">
+								<img src={singleEvent.image} alt="event" />
+								<p>Details: </p>
+								<p>{singleEvent.description}</p>
+							</div>
+						))}
+
 					<p id="important">Time: {singleEvent.time}</p>
 					<p id="important">Location: {singleEvent.location}</p>
 				</div>

src/activity/events/EventsList.js

@@ -89,14 +89,14 @@
 
 .event-date {
 	display: inline-block;
-	padding: 0 0.75rem 0 0.25rem;
+	padding: 0 0.5rem 0 0.25rem;
 	vertical-align: top;
 	color: white;
 	font-weight: normal;
 }
 
 .event-date p {
-	margin: 0;
+	margin: 0 0.5rem 0 0;
 	padding: inherit;
 }
 
@@ -128,10 +128,30 @@
 
 .event-info #important {
 	display: inline-block;
-	margin: 0px 20px 5px 0;
+	margin: 0px 20px 10px 0;
 	padding: 3px 10px;
 	font-size: 16px;
 	color: black;
 	border-radius: 5px;
 	background-color: white;
 }
+
+.event-expand {
+	margin-top: 20px;
+	margin-right: 20px;
+	color: white;
+	font-size: 18px;
+}
+
+.event-expand p {
+	margin: 2rem 2rem 2rem 0;
+}
+
+.event-expand img {
+	max-width: 640px;
+	max-height: 300px;
+}
+
+.loading {
+	margin: auto;
+}

src/activity/events/events.css

@@ -5,18 +5,23 @@ const eventsMap = [];
 for (let i = 1; i <= 20; i += 1) {
 	const title = faker.company.catchPhrase();
 	const description = faker.lorem.paragraph(3);
-	const location = faker.address.buildingNumber();
-	const image = faker.image.nature(640, 480, true);
-
-	const dateTime = faker.date.recent(30);
-	const date = dateTime.toLocaleDateString();
+	const location = `Room ${faker.address.buildingNumber()}`;
+	const image = faker.image.nature(640, 360, true);
+
+	const dateTime = faker.date.future(60);
+	const day =
+		dateTime.getDate() < 10
+			? `0${dateTime.getDate().toLocaleString()}`
+			: dateTime.getDate().toLocaleString();
+	const month = dateTime.toLocaleString("en-US", { month: "short" });
 	const time = dateTime.toLocaleTimeString();
 
 	eventsMap.push({
 		id: i,
 		title,
 		description,
-		date,
+		day,
+		month,
 		time,
 		location,
 		image,