+
{props.favouriteCourses.length > 0 ? (
-
- props.favouriteCourses.map(course => (
-
-
- {course.name}
-
-
-
- ))
-
-
- ) : (
+ props.favouriteCourses.map(course => (
+
{
+ console.log('Clicked:', course); // check browser console
+ props.setSelectedCourse(course);
+ props.setIsPopupOpen(true); // Ensure popup state is updated
+ }}
+ key={course.code}
+ className="p-2 flex justify-between items-center w-full border border-solid border-black">
+
{course.name}
+
+
+ ))
+ ) : (
No favourites
)}
- {props.favouriteCourses.length > 0 ?
: ""}
+ {/* Ensure popup is conditionally rendered */}
+
+ {props.isPopupOpen && props.popup}
+
+ {props.favouriteCourses.length > 0 && (
+
+ )}
);
}
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index de90c051..289bcef2 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -1,15 +1,20 @@
-import React, { useState } from 'react';
-import { Quantum } from 'ldrs/react';
+import React, { useState, useEffect, useCallback } from 'react';
+import { DotPulse, Quantum } from 'ldrs/react';
import 'ldrs/react/Quantum.css';
+import InfiniteScroll from 'react-infinite-scroll-component';
function ListView(props) {
const coursesToDisplay = props.searchResults.length > 0 ? props.searchResults : props.courses;
- const [readMoreState, setReadMoreState] = useState({});
+ const [displayedCourses, setDisplayedCourses] = useState([]);
+ const [hasMore, setHasMore] = useState(true);
+ const [readMore, setReadMore] = useState({});
+ const [isLoading, setIsLoading] = useState(true);
const toggleReadMore = (courseCode) => {
- setReadMoreState(prevState => (
- { ...prevState, [courseCode]: !prevState[courseCode] }
- ));
+ setReadMore(prevState => ({
+ ...prevState,
+ [courseCode]: !prevState[courseCode]
+ }));
};
const handleFavouriteClick = (course) => {
@@ -19,76 +24,98 @@ function ListView(props) {
props.addFavourite(course);
}
};
-
+
+ useEffect(() => {
+ setIsLoading(true);
+ const initialCourses = coursesToDisplay.slice(0, 10);
+ setDisplayedCourses(initialCourses);
+ setHasMore(coursesToDisplay.length > 10);
+ setIsLoading(false);
+ }, [props.courses, props.searchResults]);
+
+ const fetchMoreCourses = useCallback(() => {
+ if (!hasMore) return;
+
+ const nextItems = coursesToDisplay.slice(displayedCourses.length, displayedCourses.length + 10);
+
+ setDisplayedCourses(prevCourses => [...prevCourses, ...nextItems]);
+ setHasMore(displayedCourses.length + nextItems.length < coursesToDisplay.length);
+ }, [displayedCourses.length, coursesToDisplay, hasMore]);
return (
- {coursesToDisplay.length > 0 ? (
- coursesToDisplay.map((course) => (
-
{
- console.log('Clicked:', course); // check browser console
- props.setSelectedCourse(course);
- props.setIsPopupOpen(true);
- }}
- key={course.code}
- className="p-5 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
- >
-
-
{course.code}
-
{course.name}
-
- {course.description.length > 150 && (
-
{
- e.stopPropagation(); // Prevent the event from bubbling up.
- toggleReadMore(course.code);
- }}
- >
- {readMoreState[course.code]
- ?
- ' show less'
- :
- ' read more'}
-
- )}
+ {isLoading ? (
+
+
+
+ ) : (
+
+
+
+ }
+ endMessage={
No more courses
}
+ scrollThreshold="200px"
+ >
+ {displayedCourses.map(course => (
+
{
+ props.setSelectedCourse(course);
+ props.setIsPopupOpen(true);
+ }}
+ key={course.code}
+ className="p-5 mb-3 hover:bg-blue-100 flex items-center border border-b-black border-solid w-full rounded-lg cursor-pointer"
+ >
-
+ />
+ {course.description.length > 150 && (
+
{
+ e.stopPropagation();
+ toggleReadMore(course.code);
+ }}
+ >
+ {readMore[course.code] ? ' show less' : ' read more'}
+
+ )}
+
+
+
-
- ))
- ) : (
-
+ ))}
+
)}
- {props.popUp}
+ {props.popup}
);
}
-export default ListView;
+export default ListView;
\ No newline at end of file
diff --git a/my-app/src/views/SearchbarView.jsx b/my-app/src/views/SearchbarView.jsx
index c888c902..1a349154 100644
--- a/my-app/src/views/SearchbarView.jsx
+++ b/my-app/src/views/SearchbarView.jsx
@@ -72,6 +72,13 @@ function SearchbarView(props) {
favouriteCourses={props.favouriteCourses}
removeFavourite={props.removeFavourite}
removeAllFavourites={props.removeAllFavourites}
+ popup={props.popup}
+ addFavourite={props.addFavourite}
+ isPopupOpen={props.isPopupOpen}
+ setIsPopupOpen={props.setIsPopupOpen}
+ setSelectedCourse={props.setSelectedCourse}
+
+ handleFavouriteClick={props.handleFavouriteClick}
/>
)}