From 0b0d9e8a79081d48d5554dac93d6c1eee91eceb2 Mon Sep 17 00:00:00 2001
From: WeiViv <100058931+WeiViv@users.noreply.github.com>
Date: Sat, 12 Oct 2024 15:44:14 -0500
Subject: [PATCH] build(edit course, style courses on the profile card, course
 filter):

1. write the util functions to use the courses data stored in firestore
2. build the course selection section on the edit profile page
3. style the profile page
4. build the course filter on home page
---
 src/components/Home/StudentFilter.jsx  | 29 ++++++++++++++++--
 src/components/Home/StudentList.jsx    | 11 +++++--
 src/components/HomePage.jsx            |  4 +++
 src/components/Profile/EditProfile.jsx | 41 ++++++++++++++++++++++----
 src/components/Profile/ProfilePage.jsx | 17 ++++++-----
 src/hooks/data/useCourses.js           | 21 +++++++++++++
 src/hooks/useEditProfileForm.js        | 29 +++++++++++++-----
 src/utils/firestore/general.js         | 24 +++++++++++++++
 8 files changed, 149 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/data/useCourses.js

diff --git a/src/components/Home/StudentFilter.jsx b/src/components/Home/StudentFilter.jsx
index ab2fb9e..46a0fdc 100644
--- a/src/components/Home/StudentFilter.jsx
+++ b/src/components/Home/StudentFilter.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import useCourses from '@data/useCourses';
 import useMajors from '@data/useMajors';
 import {
   Box,
@@ -16,10 +17,13 @@ import {
 export default function StudentFilter({
   selectedMajors,
   setSelectedMajors,
+  selectedCourses,
+  setSelectedCourses,
   selectedYears,
   setSelectedYears,
 }) {
   const majorsList = useMajors();
+  const coursesList = useCourses();
 
   return (
     <Box sx={{ display: { xs: 'block', md: 'flex' }, gap: 2, mb: 2 }}>
@@ -36,7 +40,28 @@ export default function StudentFilter({
         sx={{ flex: 1, mb: 2, minWidth: 200, maxWidth: '100%' }}
       />
 
-      {/* 2. Year filter */}
+      {/* 2. Course filter */}
+      <Autocomplete
+        multiple
+        options={coursesList}
+        getOptionLabel={(option) => option}
+        value={selectedCourses}
+        onChange={(event, newValue) => setSelectedCourses(newValue)}
+        renderInput={(params) => (
+          <TextField {...params} label="Filter by Course(s)" variant="outlined" />
+        )}
+        filterOptions={(options, { inputValue }) => {
+          // Convert inputValue to lowercase for case-insensitive matching
+          const lowercasedInput = inputValue.toLowerCase();
+
+          // Only include options that start with the input
+          return options.filter((option) => option.toLowerCase().startsWith(lowercasedInput));
+        }}
+        sx={{ flex: 1, mb: 2, minWidth: 200, maxWidth: '100%' }}
+        freeSolo
+      />
+
+      {/* 3. Year filter */}
       <FormControl sx={{ flex: 1, mb: 2, minWidth: 200, maxWidth: '100%' }}>
         <InputLabel>Filter by Year(s)</InputLabel>
         <Select
@@ -59,8 +84,6 @@ export default function StudentFilter({
           ))}
         </Select>
       </FormControl>
-
-      {/* 3. Course filter */}
     </Box>
   );
 }
diff --git a/src/components/Home/StudentList.jsx b/src/components/Home/StudentList.jsx
index c2e6b52..10355dc 100644
--- a/src/components/Home/StudentList.jsx
+++ b/src/components/Home/StudentList.jsx
@@ -13,6 +13,7 @@ export default function StudentList({
   setRequestedUsers,
   matchedUserUids,
   selectedMajors,
+  selectedCourses,
   selectedYears,
 }) {
   const studentData = useStudentData();
@@ -22,6 +23,8 @@ export default function StudentList({
       profile.uid !== userProfile.uid &&
       !matchedUserUids.has(profile.uid) &&
       (selectedMajors.length === 0 || selectedMajors.includes(profile.major)) &&
+      (selectedCourses.length === 0 ||
+        profile.courses?.some((course) => selectedCourses.includes(course))) &&
       (selectedYears.length === 0 || selectedYears.includes(profile.year)),
   );
 
@@ -30,12 +33,16 @@ export default function StudentList({
     currentPage,
     totalPages,
     handlePageChange,
-  } = usePagination(filteredStudentData, 10);
+  } = usePagination(filteredStudentData || [], 10);
 
   const handleMatch = async (studentUserProfile) => {
     try {
       await createMatch([studentUserProfile.uid, userProfile.uid], 'University Library');
-      setRequestedUsers((prev) => new Set(prev).add(studentUserProfile.uid));
+      setRequestedUsers((prev) => {
+        const newSet = new Set(prev);
+        newSet.add(studentUserProfile.uid);
+        return newSet;
+      });
     } catch (error) {
       console.error('Error creating match:', error);
     }
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
index 65de340..6c00c45 100644
--- a/src/components/HomePage.jsx
+++ b/src/components/HomePage.jsx
@@ -12,6 +12,7 @@ export default function HomePage() {
   const { userProfile, requestedUsers, setRequestedUsers, matchedUserUids, loading } =
     useUserProfile(user);
   const [selectedMajors, setSelectedMajors] = useState([]);
+  const [selectedCourses, setSelectedCourses] = useState([]);
   const [selectedYears, setSelectedYears] = useState([]);
   const navigate = useNavigate();
 
@@ -61,6 +62,8 @@ export default function HomePage() {
         <StudentFilter
           selectedMajors={selectedMajors}
           setSelectedMajors={setSelectedMajors}
+          selectedCourses={selectedCourses}
+          setSelectedCourses={setSelectedCourses}
           selectedYears={selectedYears}
           setSelectedYears={setSelectedYears}
         />
@@ -71,6 +74,7 @@ export default function HomePage() {
         setRequestedUsers={setRequestedUsers}
         matchedUserUids={matchedUserUids}
         selectedMajors={selectedMajors}
+        selectedCourses={selectedCourses}
         selectedYears={selectedYears}
       />
     </Box>
diff --git a/src/components/Profile/EditProfile.jsx b/src/components/Profile/EditProfile.jsx
index 0fd57a0..8c8893d 100644
--- a/src/components/Profile/EditProfile.jsx
+++ b/src/components/Profile/EditProfile.jsx
@@ -20,6 +20,9 @@ const EditProfile = () => {
     majorsList,
     selectedMajors,
     setSelectedMajors,
+    coursesList,
+    selectedCourses,
+    setSelectedCourses,
     handleInputChange,
     errors,
     isFormValid,
@@ -71,6 +74,7 @@ const EditProfile = () => {
             'tel',
           )}
 
+          {/* Major Selection */}
           <Autocomplete
             multiple
             options={majorsList}
@@ -91,14 +95,39 @@ const EditProfile = () => {
             )}
           />
 
+          {/* Course Selection */}
+          <Autocomplete
+            multiple
+            options={coursesList}
+            getOptionLabel={(option) => option}
+            value={selectedCourses}
+            onChange={(event, newValue) => setSelectedCourses(newValue)}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label="Courses"
+                error={!!errors.courses}
+                helperText={errors.courses && 'Please select your course(s)'}
+                margin="normal"
+                fullWidth
+              />
+            )}
+            filterOptions={(options, { inputValue }) => {
+              // Convert inputValue to lowercase for case-insensitive matching
+              const lowercasedInput = inputValue.toLowerCase();
+
+              // Only include options that start with the input
+              return options.filter((option) => option.toLowerCase().startsWith(lowercasedInput));
+            }}
+            sx={{ flex: 1, mb: 2, minWidth: 200, maxWidth: '100%' }}
+            freeSolo
+          />
+
+          {/* Year Selection */}
           {renderSelectField('Year', 'year', years, formData.year, handleInputChange, errors.year)}
+
+          {/* Description Field */}
           {renderTextField('Description', 'description', formData.description, handleInputChange)}
-          {renderTextField(
-            'List of Courses (comma-separated)',
-            'listOfCourses',
-            formData.listOfCourses,
-            handleInputChange,
-          )}
 
           <Button variant="contained" color="primary" type="submit" disabled={!isFormValid}>
             Save Profile
diff --git a/src/components/Profile/ProfilePage.jsx b/src/components/Profile/ProfilePage.jsx
index 4989d64..1a97d9c 100755
--- a/src/components/Profile/ProfilePage.jsx
+++ b/src/components/Profile/ProfilePage.jsx
@@ -46,12 +46,6 @@ export default function ProfilePage() {
         <ContentBox icon={Phone} title="Phone" content={profileData?.phoneNumber} />
       </InfoSection>
 
-      <InfoSection title="Bio">
-        <Typography variant="body2" color="textSecondary">
-          {profileData?.description}
-        </Typography>
-      </InfoSection>
-
       <InfoSection title="Study Info">
         <ContentBox icon={CalendarToday} title="Year" content={profileData?.year} />
         <CustomDivider />
@@ -60,6 +54,12 @@ export default function ProfilePage() {
         <ContentBox icon={ListAlt} title="Courses" content={profileData?.listOfCourses} isCourses />
       </InfoSection>
 
+      <InfoSection title="Bio">
+        <Typography variant="body2" color="textSecondary">
+          {profileData?.description}
+        </Typography>
+      </InfoSection>
+
       <ActionButtons onEditClick={handleEditClick} onSignOutClick={handleSignOutDialogOpen} />
 
       <SignOutDialog open={signOutDialogOpen} onClose={() => setSignOutDialogOpen(false)} />
@@ -95,7 +95,6 @@ const InfoSection = ({ title, children }) => (
     </Card>
   </>
 );
-
 const ContentBox = ({ icon: IconComponent, title, content, isCourses = false }) => (
   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -105,7 +104,9 @@ const ContentBox = ({ icon: IconComponent, title, content, isCourses = false })
       </Typography>
     </Box>
     {isCourses && Array.isArray(content) ? (
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+      <Box
+        sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, ml: 'auto', justifyContent: 'flex-end' }}
+      >
         {content.map((course, index) => (
           <Chip key={index} label={course} />
         ))}
diff --git a/src/hooks/data/useCourses.js b/src/hooks/data/useCourses.js
new file mode 100644
index 0000000..98fbdee
--- /dev/null
+++ b/src/hooks/data/useCourses.js
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+import { getCourses } from '@firestore/general';
+
+export default function useCourses() {
+  const [CoursesList, setCoursesList] = useState([]);
+
+  useEffect(() => {
+    const fetchCourses = async () => {
+      try {
+        const Courses = await getCourses();
+        setCoursesList(Courses);
+      } catch (error) {
+        console.error('Error fetching Courses:', error);
+      }
+    };
+    fetchCourses();
+  }, []);
+
+  return CoursesList;
+}
diff --git a/src/hooks/useEditProfileForm.js b/src/hooks/useEditProfileForm.js
index 0e1d42a..bfd36ac 100644
--- a/src/hooks/useEditProfileForm.js
+++ b/src/hooks/useEditProfileForm.js
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 
-import { getMajors } from '@firestore/general';
+import { getMajors, getCourses } from '@firestore/general';
 import { getUserProfile, updateUserProfile } from '@firestore/userProfile';
 
 const useEditProfileForm = (user) => {
   const [loading, setLoading] = useState(true);
   const [majorsList, setMajorsList] = useState([]);
   const [selectedMajors, setSelectedMajors] = useState([]);
+  const [coursesList, setCoursesList] = useState([]);
+  const [selectedCourses, setSelectedCourses] = useState([]);
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
@@ -22,11 +25,16 @@ const useEditProfileForm = (user) => {
   const [firstTimeUser, setFirstTimeUser] = useState(false);
 
   useEffect(() => {
-    const fetchProfileAndMajors = async () => {
+    const fetchProfileMajorsAndCourses = async () => {
       if (user && user.uid) {
         try {
-          const [data, majorsFromDb] = await Promise.all([getUserProfile(user.uid), getMajors()]);
+          const [data, majorsFromDb, coursesFromDb] = await Promise.all([
+            getUserProfile(user.uid),
+            getMajors(),
+            getCourses(),
+          ]);
           setMajorsList(majorsFromDb);
+          setCoursesList(coursesFromDb); // Set available courses
 
           if (data) {
             setFormData({
@@ -36,24 +44,24 @@ const useEditProfileForm = (user) => {
               major: data.major || '',
               year: data.year || '',
               description: data.description || '',
-              listOfCourses: data.listOfCourses.join(', ') || '',
             });
             setSelectedMajors(data.major ? data.major.split(',') : []);
+            setSelectedCourses(data.listOfCourses || []);
             setFirstTimeUser(Boolean(data.major && data.year));
           }
         } catch (error) {
-          console.error('Error fetching profile and majors:', error);
+          console.error('Error fetching profile, majors, and courses:', error);
         } finally {
           setLoading(false);
         }
       }
     };
-    fetchProfileAndMajors();
+    fetchProfileMajorsAndCourses();
   }, [user]);
 
   useEffect(() => {
     validateForm();
-  }, [formData, selectedMajors]);
+  }, [formData, selectedMajors, selectedCourses]);
 
   const handleInputChange = (name, value) => {
     if (name === 'phoneNumber') {
@@ -78,6 +86,7 @@ const useEditProfileForm = (user) => {
       email: !/^\S+@\S+\.\S+$/.test(formData.email),
       phoneNumber: formData.phoneNumber.replace(/\D/g, '').length !== 10,
       major: selectedMajors.length === 0,
+      listClasses: selectedCourses.length === 0,
       year: !formData.year,
     };
     setErrors(newErrors);
@@ -90,7 +99,8 @@ const useEditProfileForm = (user) => {
         const updatedProfileData = {
           ...formData,
           major: selectedMajors.join(', '),
-          listOfCourses: formData.listOfCourses.split(',').map((course) => course.trim()),
+          listOfCourses: selectedCourses,
+          //listOfCourses: formData.listOfCourses.split(',').map((course) => course.trim()),
         };
         await updateUserProfile(userId, updatedProfileData);
         return true; // Indicate success
@@ -108,6 +118,9 @@ const useEditProfileForm = (user) => {
     majorsList,
     selectedMajors,
     setSelectedMajors,
+    coursesList,
+    selectedCourses,
+    setSelectedCourses,
     handleInputChange,
     errors,
     isFormValid,
diff --git a/src/utils/firestore/general.js b/src/utils/firestore/general.js
index 2815838..8b4e889 100644
--- a/src/utils/firestore/general.js
+++ b/src/utils/firestore/general.js
@@ -25,3 +25,27 @@ export const getMajors = async () => {
     return [];
   }
 };
+
+// Get list of courses from Firestore and store them as an set
+export const getCourses = async () => {
+  try {
+    const coursesCollectionRef = collection(db, 'courseData');
+    const coursesSnapshot = await getDocs(coursesCollectionRef);
+
+    const coursesSet = new Set();
+    coursesSnapshot.docs.forEach((doc) => {
+      const subject = doc.id;
+      const numbers = doc.data().numbers || [];
+
+      numbers.forEach((courseNumber) => {
+        coursesSet.add(`${subject} ${courseNumber}`); // Add unique combination to Set
+      });
+    });
+
+    // Convert Set to Array to eliminate duplicates
+    return Array.from(coursesSet);
+  } catch (error) {
+    console.error('Error fetching courses:', error);
+    return [];
+  }
+};