Add pagination, infinite scroll and dept filter

Backend: add department_filter and register it in the CourseSearchFilterBackend; introduce CoursePagination (page_size 100, max 500) and enable pagination on CourseList. CourseList now snaps to the current semester when certain semester-specific filters (days, time, instructor_quality) are present and the requested semester is "all".

Frontend: extend apiCourseSearch to accept departments and page parameters. Implement fetchCourses with paginated requests, infinite scroll (IntersectionObserver + sentinel), loading-more spinner, and display of total result count. Show a semester banner when semester-specific filters are active. Update CourseResultsTable to render data from either nested review objects or flat course fields, add a scroll container and sentinel, and include CSS to make the table header sticky. Misc: layout/flex fixes in BrowsePage and container sizing adjustments to ensure proper scrolling behavior.

Author: el-agua

backend/courses/filters.py

@@ -314,6 +314,20 @@ def filter_choices(queryset, choices):
     return filter_choices
 
 
+def department_filter(queryset, departments):
+    """
+    Filters courses by department code(s) with OR logic.
+    :param queryset: Course queryset
+    :param departments: Pipe-separated department codes (e.g. "CIS|NETS|ESE")
+    """
+    if not departments:
+        return queryset
+    codes = [code.strip().upper() for code in departments.split("|") if code.strip()]
+    if not codes:
+        return queryset
+    return queryset.filter(department__code__in=codes)
+
+
 def degree_rules_filter(queryset, rule_ids):
     """
     :param queryset: initial Course object queryset
@@ -347,6 +361,7 @@ def filter_queryset(self, request, queryset, view):
             "difficulty": bound_filter("difficulty"),
             "is_open": is_open_filter,
             "rule_ids": degree_rules_filter,
+            "departments": department_filter,
         }
         for field, filter_func in filters.items():
             param = request.query_params.get(field)

backend/courses/views.py

@@ -7,6 +7,7 @@
 from django_auto_prefetching import AutoPrefetchViewSetMixin
 from rest_framework import generics, status
 from rest_framework.exceptions import ValidationError
+from rest_framework.pagination import PageNumberPagination
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
@@ -139,6 +140,12 @@ def get_semester_field(self):
         return "course__semester"
 
 
+class CoursePagination(PageNumberPagination):
+    page_size = 100
+    page_size_query_param = "page_size"
+    max_page_size = 500
+
+
 class CourseList(generics.ListAPIView, BaseCourseMixin):
     """
     Retrieve a list of (all) courses for the provided semester.
@@ -154,8 +161,24 @@ class CourseList(generics.ListAPIView, BaseCourseMixin):
     )
 
     serializer_class = CourseListSerializer
+    pagination_class = CoursePagination
+    filter_backends = [CourseSearchFilterBackend]
     queryset = Course.with_reviews.filter(sections__isnull=False)  # included redundantly for docs
 
+    # These params filter on schedule/section data that only exists in a specific semester,
+    # so requesting them on the "all" semester path automatically snaps to current semester.
+    _SEMESTER_SPECIFIC_PARAMS = frozenset({"days", "time", "instructor_quality"})
+
+    def get_semester(self):
+        semester = super().get_semester()
+        if semester == "all" and self._SEMESTER_SPECIFIC_PARAMS.intersection(
+            self.request.query_params
+        ):
+            current = get_current_semester(allow_not_found=True)
+            if current:
+                return current
+        return semester
+
     def get_queryset(self):
         queryset = Course.with_reviews.filter(sections__isnull=False)
         queryset = queryset.prefetch_related(

frontend/review/public/static/css/base.css

@@ -1013,6 +1013,25 @@ hr {
   border-bottom: none !important;
 }
 
+/* Sticky header: kill overflow on all ancestors so sticky works within the outer scroll container */
+.course-results-table.ReactTable {
+    overflow: visible !important;
+}
+
+.course-results-table .rt-table {
+    overflow: visible !important;
+}
+
+.course-results-table .rt-tbody {
+    overflow: visible !important;
+}
+
+.course-results-table .rt-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
 /* Target the header cells */
 .course-results-table .rt-thead .rt-th {
     display: flex;

frontend/review/src/components/CourseResults.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import { apiAutocomplete, apiReviewData, apiCourseSearch } from '../utils/api';
 import { useHistory } from 'react-router-dom';
@@ -20,7 +20,9 @@ const Container = styled.div`
     gap: 12px;
     border-radius: 12px;
     background: #FFF;
-    height: fit-content;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
 `;
 
 const BrowsingTitle = styled.span`
@@ -127,6 +129,20 @@ const SpecialPromptContainer = styled.div`
     padding: 40px 0;
 `;
 
+const SemesterBanner = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px 14px;
+    border-radius: 8px;
+    background: #EBF5FF;
+    border: 1px solid #B3D7F5;
+    color: #1A6FAF;
+    font-size: 14px;
+    font-weight: 400;
+`;
+
 const numFiltersChanged = (filters) => {
     let count = 0;
     for(const [key, value] of Object.entries(filters)) {
@@ -144,20 +160,44 @@ const numFiltersChanged = (filters) => {
     return count;
 }
 
+const SEMESTER_SPECIFIC_FILTERS = ['instructor_quality', 'days', 'time'];
+
+const getActiveSemesterFilters = (filters) => {
+    return SEMESTER_SPECIFIC_FILTERS.filter(key => !isDefault(key, filters[key]));
+};
+
+const SEMESTER_FILTER_LABELS = {
+    instructor_quality: 'Instructor Quality',
+    days: 'Days Offered',
+    time: 'Time Offered',
+};
+
+const isDefault = (key, value) => {
+    const def = DEFAULT_FILTERS[key];
+    if (Array.isArray(value)) {
+        return value.length === def.length && value.every(v => def.includes(v));
+    }
+    return value === def;
+};
+
 const formatFiltersForAPI = (filters) => {
     const formatted = {};
     for(const [key, value] of Object.entries(filters)) {
-        if (key === 'difficulty' || key === 'course_quality' || key === 'instructor_quality') {
+        if (key === 'semester') {
+            formatted[key] = value === 'Any' ? "all" : "current";
+        } else if (isDefault(key, value)) {
+            continue;
+        } else if (key === 'difficulty' || key === 'course_quality' || key === 'instructor_quality') {
             formatted[key] = `${value[0]}-${value[1]}`;
         } else if (key === 'days') {
             formatted[key] = value.join('');
         } else if (key === 'time') {
             formatted[key] = value;
-        } else if (key === 'semester') {
-            formatted[key] = value === 'Any' ? "all" : "current";
         } else if (key === 'attributes') {
             formatted[key] = value.join('|');
-        } //ALSO ADD DEPARTMENT WHEN IT BECOMES SUPPORTED
+        } else if (key === 'departments') {
+            formatted[key] = value.join('|');
+        }
     }
     return formatted;
 }
@@ -168,7 +208,13 @@ const CourseResults = ({ filters, setFilters }) => {
     const [departments, setDepartments] = useState([]);
     const [filteredResults, setFilteredResults] = useState(numFiltersChanged(filters) > 0 ? {} : null);
     const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
     const [isAverage, setIsAverage] = useState(true);
+    const [totalCount, setTotalCount] = useState(0);
+    const [hasMore, setHasMore] = useState(false);
+    const nextPageRef = useRef(2);
+    const sentinelRef = useRef(null);
+    const isLoadingRef = useRef(false);
 
     const [recencyOption, setRecencyOption] = useState('Average Rating');
 
@@ -184,48 +230,75 @@ const CourseResults = ({ filters, setFilters }) => {
             });
     }, []);
 
-    useEffect(() => {
-        let isActivelyFiltering = false;
-        isActivelyFiltering = numFiltersChanged(filters) > 0;
-        console.log('Filters changed:', filters, 'Actively filtering:', isActivelyFiltering);
-        
-        if (isActivelyFiltering) {
-            //TEMPORARY: replace with actual backend route for filtering based on all filters, not just department
+    const fetchCourses = useCallback((filters, page, append = false) => {
+        if (isLoadingRef.current) return;
+        isLoadingRef.current = true;
+        if (append) {
+            setIsLoadingMore(true);
+        } else {
             setIsLoading(true);
-            console.log('loading true')
-            // apiReviewData('department', filters.departments[0], '')
-            //     .then(data => {
-            //         console.log("Fetched review data for filtering:", data);
-            //         setFilteredResults(data);
-            //     })
-            //     .catch(error => {
-            //         console.error("Error fetching review data:", error);
-            //         setFilteredResults({});
-            //     })
-            //     .finally(() => {
-            //         setIsLoading(false);
-            //         console.log('loading false')
-            //     });
-            const ff = formatFiltersForAPI(filters);
-            console.log('Formatted filters for API:', ff);
-            apiCourseSearch(ff.semester, ff.attributes, ff.difficulty, ff.course_quality, ff.days, ff.time)
-                .then(data => {
-                    console.log("Fetched course search data:", data);
-                    setFilteredResults(data);
-                })
-                .catch(error => {
-                    console.error("Error fetching course search data:", error);
+        }
+        const ff = formatFiltersForAPI(filters);
+        apiCourseSearch(ff.semester, ff.attributes, ff.difficulty, ff.course_quality, ff.instructor_quality, ff.days, ff.time, ff.departments, page)
+            .then(data => {
+                const newResults = (data.results || []).reduce((acc, course) => {
+                    acc[course.id] = course;
+                    return acc;
+                }, {});
+                if (append) {
+                    setFilteredResults(prev => ({ ...prev, ...newResults }));
+                } else {
+                    setFilteredResults(newResults);
+                }
+                setTotalCount(data.count || 0);
+                setHasMore(data.next !== null);
+                nextPageRef.current = page + 1;
+            })
+            .catch(error => {
+                console.error("Error fetching course search data:", error);
+                if (!append) {
                     setFilteredResults({});
-                })
-                .finally(() => {
-                    setIsLoading(false);
-                    console.log('loading false')
-                });
+                    setTotalCount(0);
+                }
+                setHasMore(false);
+            })
+            .finally(() => {
+                isLoadingRef.current = false;
+                setIsLoading(false);
+                setIsLoadingMore(false);
+            });
+    }, []);
+
+    useEffect(() => {
+        const isActivelyFiltering = numFiltersChanged(filters) > 0;
+
+        if (isActivelyFiltering) {
+            nextPageRef.current = 2;
+            fetchCourses(filters, 1);
         } else {
             setFilteredResults(null);
+            setTotalCount(0);
+            setHasMore(false);
         }
+    }, [filters, fetchCourses]);
+
+    // Infinite scroll — sentinel is inside the table's scroll area
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel || !hasMore) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && !isLoadingRef.current) {
+                    fetchCourses(filters, nextPageRef.current, true);
+                }
+            },
+            { threshold: 0.1 }
+        );
 
-    }, [filters]);
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [hasMore, filters, fetchCourses]);
 
     const history = useHistory();
 
@@ -247,7 +320,7 @@ const CourseResults = ({ filters, setFilters }) => {
                         Object.entries(filteredResults).length > 0 ? (
                             <>
                                 <SearchResultsHeader>
-                                    <span>Showing <b>{Object.entries(filteredResults).length}</b> Search Results ({numFiltersChanged(filters)} filter{numFiltersChanged(filters) !== 1 ? "s" : ""})</span>
+                                    <span>Showing <b>{Object.keys(filteredResults).length}</b> of <b>{totalCount}</b> Search Results ({numFiltersChanged(filters)} filter{numFiltersChanged(filters) !== 1 ? "s" : ""})</span>
                                     <CustomDropdown
                                         style={{width: '180px', selfAlign: 'center'}}
                                         options={['Average Rating', 'Most Recent Rating']}
@@ -258,10 +331,20 @@ const CourseResults = ({ filters, setFilters }) => {
                                         }}
                                     />
                                 </SearchResultsHeader>
-                                <div style={{width: '100%', marginBottom: '16px', height: 'fit-content'}}>
+                                {getActiveSemesterFilters(filters).length > 0 && (
+                                    <SemesterBanner>
+                                        <i className="fa fa-info-circle" />
+                                        <span>
+                                            Filtering by {getActiveSemesterFilters(filters).map(k => SEMESTER_FILTER_LABELS[k]).join(', ')} — results limited to current semester offerings.
+                                        </span>
+                                    </SemesterBanner>
+                                )}
+                                <div style={{width: '100%'}}>
                                     <CourseResultsTable
                                         filteredResults={filteredResults}
                                         isAverage={isAverage}
+                                        sentinelRef={sentinelRef}
+                                        isLoadingMore={isLoadingMore}
                                     />
                                 </div>
                             </>