Make ReviewBox collapsible

Author: ankith26

frontend/src/components/ReviewBox.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Card,
   CardContent,
@@ -15,6 +15,8 @@ import {
   Button,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 
 import theme from '../theme';
 import ReviewInput from './ReviewInput';
@@ -73,7 +75,7 @@ const Review = ({ review, endpoint, onUpdate }) => {
                 color="text.secondary"
                 sx={{ fontStyle: 'italic' }}
               >
-                Your review (this is only visible to you)
+                Your review (this line is only visible to you)
               </Typography>
               <IconButton onClick={handleDialogOpen} color="error" size="small">
                 <DeleteIcon />
@@ -115,22 +117,40 @@ const Review = ({ review, endpoint, onUpdate }) => {
   );
 };
 
-const ReviewBox = ({ children, endpoint }) => {
+const ReviewBox = ({ children, title, endpoint, initExpanded }) => {
   const [reviewsList, setReviewsList] = useState(null);
+  const [isExpanded, setIsExpanded] = useState(initExpanded);
+  const cache = useRef({}); // Cache for reviews data
+
   const fetchReviews = async () => {
     setReviewsList(null);
     try {
       const response = await api.get(endpoint);
+      cache.current[endpoint] = response.data;
       setReviewsList(response.data);
     } catch (error) {
       // TODO: report error in frontend
       console.error('Error during search:', error);
     }
   };
 
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   useEffect(() => {
-    fetchReviews();
-  }, [endpoint]);
+    if (isExpanded) {
+      if (cache.current[endpoint]) {
+        setReviewsList(cache.current[endpoint]);
+      }
+      else {
+        fetchReviews();
+      }
+    }
+    else {
+      setReviewsList(null);
+    }
+  }, [endpoint, isExpanded]);
 
   return (
     <Card
@@ -143,35 +163,47 @@ const ReviewBox = ({ children, endpoint }) => {
       }}
     >
       <CardContent>
-        {children}
-        <Typography variant="h6" gutterBottom color="secondary" sx={{ mt: 1 }}>
-          Reviews
-        </Typography>
-        {reviewsList === null ? (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '150px',
-            }}
-          >
-            <CircularProgress />
-          </Box>
-        ) : !reviewsList || reviewsList.length === 0 ? (
-          <Typography variant="body1" color="text.secondary">
-            No reviews available.
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h5" color="primary">
+            {title}
           </Typography>
-        ) : (
-          reviewsList.map((review, index) => (
-            <Review
-              review={review}
-              endpoint={endpoint}
-              onUpdate={fetchReviews}
-            />
-          ))
+          <IconButton onClick={toggleExpand} size="small">
+            {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          </IconButton>
+        </Box>
+        {isExpanded && (
+          <>
+            {children}
+            <Typography variant="h6" gutterBottom color="secondary" sx={{ mt: 1 }}>
+              Reviews
+            </Typography>
+            {reviewsList === null ? (
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '150px',
+                }}
+              >
+                <CircularProgress />
+              </Box>
+            ) : !reviewsList || reviewsList.length === 0 ? (
+              <Typography variant="body1" color="text.secondary">
+                No reviews available.
+              </Typography>
+            ) : (
+              reviewsList.map((review, index) => (
+                <Review
+                  review={review}
+                  endpoint={endpoint}
+                  onUpdate={fetchReviews}
+                />
+              ))
+            )}
+            <ReviewInput endpoint={endpoint} onUpdate={fetchReviews} />
+          </>
         )}
-        <ReviewInput endpoint={endpoint} onUpdate={fetchReviews} />
       </CardContent>
     </Card>
   );

frontend/src/pages/Courses.jsx

@@ -164,22 +164,13 @@ const Courses = ({ courseList, profMap }) => {
           >
             No match found for given filters.
           </Typography>
-        ) : filteredCourses.length > 50 ? (
-          <Typography
-            variant="body2"
-            color="text.primary"
-            sx={{ fontStyle: 'italic' }}
-          >
-            Too many matches for given filters, please narrow them down.
-          </Typography>
         ) : (
           filteredCourses.map((course, index) => (
             <ReviewBox
+              title={`[${course.code}] ${course.name} (${course.sem})`}
               endpoint={`/courses/reviews/${course.sem}/${course.code}`}
+              initExpanded={filteredCourses.length < 10}
             >
-              <Typography variant="h5" gutterBottom color="primary">
-                [{course.code}] {course.name} ({course.sem})
-              </Typography>
               {course.profs.map((email) => {
                 const prof = profMap.get(email);
                 return prof ? (

frontend/src/pages/Profs.jsx

@@ -62,11 +62,11 @@ const Profs = ({ profList }) => {
         </Tooltip>
       </Box>
       {reviewProf ? (
-        <ReviewBox endpoint={`/members/reviews/${reviewProf.email}`}>
-          <Typography variant="h5" gutterBottom color="primary">
-            {reviewProf.name} &lt;{reviewProf.email}&gt;
-          </Typography>
-        </ReviewBox>
+        <ReviewBox
+          title={`${reviewProf.name} <${reviewProf.email}>`}
+          endpoint={`/members/reviews/${reviewProf.email}`}
+          initExpanded={true}
+        />
       ) : (
         <Typography
           variant="body2"