Added InfinScroll and ExploreEvents

- Added InfinScroll and Pagination to ProfilePosts - Got the backend of ExploreEvents working, just needs CSS #70 #62 #63 #64 #76
MQ3120-2023 · Nov 1, 2023 · cf0ac0f · cf0ac0f
1 parent cabd515
commit cf0ac0f
Show file tree

Hide file tree

Showing 10 changed files with 374 additions and 187 deletions.
diff --git a/onlycars/server/server.js b/onlycars/server/server.js
@@ -131,7 +131,7 @@ app.get("/getAllCars", async (req, res) => {
 });
 
 // Endpoint to get all posts along with their cars and users
-app.get("/getPostData", async (req, res) => {
+app.get("/getHomePosts", async (req, res) => {
     const page = req.query.page ? parseInt(req.query.page) : 1;
     const limit = 10; // Number of posts per page
 
@@ -170,14 +170,17 @@ app.get("/getPostData", async (req, res) => {
 
 // Endpoint to get all profile posts along with their cars and users
 app.get("/getProfilePosts", async (req, res) => {
+    const page = req.query.page ? parseInt(req.query.page) : 1;
+    const limit = 10; // Number of posts per page
+
     try {
         // Assuming the currentUser's ID is stored in the session
         const currentUserId = req.session.currentUser.userId;
 
         // Fetch posts related to the currentUser
-        const profilePosts = await Post.find({ 'userId': currentUserId });
-
-        const carIds = profilePosts.map((post) => post.carId);
+        const profilePosts = await Post.find({ 'userId': currentUserId })
+            .skip((page - 1) * limit)
+            .limit(limit);
 
         // Fetch related cars and users
         const allCars = await Car.find({ 'carId': { $in: carIds } });
@@ -206,11 +209,67 @@ app.get("/getProfilePosts", async (req, res) => {
     }
 });
 
+app.get("/getExplorePosts", async (req, res) => {
+    const page = req.query.page ? parseInt(req.query.page) : 1;
+    const limit = 10; // Number of posts per page
+
+    try {
+        const allPosts = await Post.find({})
+            .skip((page - 1) * limit)
+            .limit(limit);
+
+        const carIds = allPosts.map((post) => post.carId);
+        const userIds = allPosts.map((post) => post.userId);
+
+        const allCars = await Car.find({ 'carId': { $in: carIds } });
+        const allUsers = await User.find({ 'userId': { $in: userIds } });
+
+        const carMap = {};
+        allCars.forEach((car) => {
+            carMap[car.carId] = car;
+        });
+
+        const userMap = {};
+        allUsers.forEach((user) => {
+            userMap[user.userId] = user;
+        });
+
+        const enrichedPosts = allPosts.map((post) => ({
+            ...post._doc,
+            car: carMap[post.carId],
+            user: userMap[post.userId],
+        }));
+
+        res.status(200).json(enrichedPosts);
+    } catch (error) {
+        res.status(500).json({ message: "Error fetching data" });
+    }
+});
+
+// Endpoint to get all users
+app.get("/getExploreUsers", async (req, res) => {
+    const page = req.query.page ? parseInt(req.query.page) : 1;
+    const limit = 10; // Number of users per page
+
+    try {
+        const allUsers = await User.find({})
+            .skip((page - 1) * limit)
+            .limit(limit);
+        res.status(200).json(allUsers);
+    } catch (error) {
+        res.status(500).json({ message: "Error fetching users" });
+    }
+});
 
 // Endpoint to get all cars along with their users
-app.get("/getCarData", async (req, res) => {
+app.get("/getExploreCars", async (req, res) => {
+    const page = req.query.page ? parseInt(req.query.page) : 1;
+    const limit = 10; // Number of cars per page
+
     try {
-        const allCars = await Car.find({});
+        const allCars = await Car.find({})
+            .skip((page - 1) * limit)
+            .limit(limit);
         const ownerIds = allCars.map((car) => car.owner);
 
         const allUsers = await User.find({ 'userId': { $in: ownerIds } });
@@ -231,6 +290,42 @@ app.get("/getCarData", async (req, res) => {
     }
 });
 
+// Endpoint to get all events along with their users
+app.get("/getExploreEvents", async (req, res) => {
+    const page = req.query.page ? parseInt(req.query.page) : 1;
+    const limit = 10; // Number of events per page
+
+    try {
+        // Fetch all events with pagination
+        const allEvents = await Event.find({})
+            .skip((page - 1) * limit)
+            .limit(limit);
+
+        // Extract userIds from the events
+        const userIds = allEvents.map((event) => event.userId);
+
+        // Fetch all related users
+        const allUsers = await User.find({ 'userId': { $in: userIds } });
+
+        // Create a map for quick lookup of user data
+        const userMap = {};
+        allUsers.forEach((user) => {
+            userMap[user.userId] = user;
+        });
+
+        // Enrich events with user data
+        const enrichedEvents = allEvents.map((event) => ({
+            ...event._doc,
+            user: userMap[event.userId],
+        }));
+
+        res.status(200).json(enrichedEvents);
+    } catch (error) {
+        res.status(500).json({ message: "Error fetching events" });
+    }
+});
+
+
 //
 // User Authentication
 //

diff --git a/onlycars/src/components/ExploreCars.js b/onlycars/src/components/ExploreCars.js
@@ -3,21 +3,31 @@ import axios from "axios";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const ExploreCars = () => {
     const [cars, setCars] = useState([]);
+    const [hasMore, setHasMore] = useState(true);
+    const [page, setPage] = useState(1);
 
-    useEffect(() => {
-        const fetchCarData = async () => {
-            try {
-                const response = await axios.get("http://localhost:3001/getCarData");
-                setCars(response.data);
-            } catch (error) {
-                console.error("Error fetching data:", error);
+    const fetchMoreData = async () => {
+        try {
+            const response = await axios.get(
+                `http://localhost:3001/getExploreCars?page=${page}`
+            );
+            if (response.data.length > 0) {
+                setCars([...cars, ...response.data]);
+                setPage(page + 1);
+            } else {
+                setHasMore(false);
             }
-        };
-
-        fetchCarData();
+        } catch (error) {
+            console.error("Error fetching more data:", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchMoreData(); // Initial fetch
     }, []);
 
     const settings = {
@@ -30,6 +40,14 @@ const ExploreCars = () => {
 
     return (
         <section id="posts-container">
+        <InfiniteScroll
+                dataLength={cars.length}
+                next={fetchMoreData}
+                hasMore={hasMore}
+                loader={<h4>Loading...</h4>}
+                scrollableTarget="posts-container"
+                id="infinite-scroll"
+            >
             {cars.map((car, index) => {
                 const user = car.user;
                 return (
@@ -54,6 +72,7 @@ const ExploreCars = () => {
                 </section>
                 );
             })}
+            </InfiniteScroll>
         </section>
     );
 };

diff --git a/onlycars/src/components/ExploreEvents.js b/onlycars/src/components/ExploreEvents.js
@@ -1,14 +1,37 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const ExploreEvents = () => {
-    const [cars, setCars] = useState([]);
+    const [events, setEvents] = useState([]);
+    const [hasMore, setHasMore] = useState(true);
+    const [page, setPage] = useState(1);
+
+    const fetchMoreData = async () => {
+        try {
+            const response = await axios.get(
+                `http://localhost:3001/getExploreEvents?page=${page}`
+            );
+            if (response.data.length > 0) {
+                setEvents([...events, ...response.data]);
+                setPage(page + 1);
+            } else {
+                setHasMore(false);
+            }
+        } catch (error) {
+            console.error("Error fetching more data:", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchMoreData(); // Initial fetch
+    }, []);
 
     useEffect(() => {
         axios
-            .get("/CarsExplore")
+            .get("/getExploreEvents")
             .then((response) => {
-                setCars(response.data);
+                setEvents(response.data);
             })
             .catch((error) => {
                 console.error("Error fetching data:", error);
@@ -17,23 +40,38 @@ const ExploreEvents = () => {
 
     return (
         <section id="posts-container">
-            {cars.map((car, index) => (
-                <section className="sub-container" key={index}>
-                    <div className="sub-left">
-                        <img
-                            className="sub-pfp"
-                            src={car.img}
-                            alt="User's Profile Picture"
-                        />
-                        <a className="sub-user">{car.username}</a>
-                    </div>
-                    <div className="sub-right">
-                        <p>Posts Made: {car.posts}</p>
-                        <p>Subscribers: {car.subscribers}</p>
-                        <p>Cars Owned: {car.cars}</p>
-                    </div>
-                </section>
-            ))}
+            <InfiniteScroll
+                dataLength={events.length}
+                next={fetchMoreData}
+                hasMore={hasMore}
+                loader={<h4>Loading...</h4>}
+                scrollableTarget="posts-container"
+                id="infinite-scroll"
+            >
+                {events.map((event, index) => {
+                    const user = event.user;
+                    return (
+                        <section className="event-container" key={index}>
+                            <img
+                                className="event-banner"
+                                src={event.banner}
+                                alt="Event Banner"
+                            />
+                            <header className="event-header">
+                                <h1 className="event-user">{user.username}</h1>
+                                <sub className="event-location">
+                                    {event.location}
+                                </sub>
+                            </header>
+                            <p>{event.description}</p>
+                            <aside id="event-info">
+                                <p>People Going: {event.attendees}</p>
+                                <p>Date and Time: {event.date}</p>
+                            </aside>
+                        </section>
+                    );
+                })}
+            </InfiniteScroll>
         </section>
     );
 };