add location preference to profile page & edit profile form

392-f24 · Oct 13, 2024 · 399b714 · 399b714
1 parent dace2a2
commit 399b714
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/src/components/Profile/EditProfile.jsx b/src/components/Profile/EditProfile.jsx
@@ -10,6 +10,10 @@ import {
   Autocomplete,
   IconButton,
   MenuItem,
+  Checkbox,
+  FormLabel,
+  FormGroup,
+  FormControlLabel,
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
@@ -119,7 +123,7 @@ const EditProfile = () => {
               // 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%' }}
+            sx={{ flex: 1, minWidth: 200, maxWidth: '100%' }}
             freeSolo
           />
 
@@ -129,6 +133,13 @@ const EditProfile = () => {
           {/* Description Field */}
           {renderTextField('Description', 'description', formData.description, handleInputChange)}
 
+          {/* Location Preference */}
+          <FormLabel component="legend">Location Preference</FormLabel>
+          <FormGroup row sx={{ mb: 2 }}>
+            {renderCheckbox('In Person', 'inPerson', !!formData.inPerson, handleInputChange)}
+            {renderCheckbox('Online', 'online', !!formData.online, handleInputChange)}
+          </FormGroup>
+
           <Button variant="contained" color="primary" type="submit" disabled={!isFormValid}>
             Save Profile
           </Button>
@@ -172,4 +183,13 @@ const renderSelectField = (label, name, options, value, onChange, error = false)
   </TextField>
 );
 
+const renderCheckbox = (label, name, value, onChange) => (
+  <FormControlLabel
+    control={
+      <Checkbox name={name} checked={value} onChange={(e) => onChange(name, e.target.checked)} />
+    }
+    label={label}
+  />
+);
+
 export default EditProfile;
diff --git a/src/components/Profile/ProfilePage.jsx b/src/components/Profile/ProfilePage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import useUserProfile from '@data/useUserProfile';
-import { Email, Phone, School, CalendarToday, ListAlt } from '@mui/icons-material';
+import { Email, Phone, Place, School, CalendarToday, ListAlt } from '@mui/icons-material';
 import {
   Avatar,
   Typography,
@@ -11,7 +11,9 @@ import {
   Card,
   CardContent,
   CircularProgress,
+  Checkbox,
   Chip,
+  FormControlLabel,
   useTheme,
 } from '@mui/material';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -60,8 +62,26 @@ export default function ProfilePage() {
         </Typography>
       </InfoSection>
 
-      <ActionButtons onEditClick={handleEditClick} onSignOutClick={handleSignOutDialogOpen} />
+      <InfoSection title="Preferences">
+        <ContentBox
+          icon={Place}
+          title="Location"
+          content={
+            <>
+              <FormControlLabel
+                control={<Checkbox disabled checked={profileData?.locationPreference.inPerson} />}
+                label="In Person"
+              />
+              <FormControlLabel
+                control={<Checkbox disabled checked={profileData?.locationPreference.online} />}
+                label="Online"
+              />
+            </>
+          }
+        />
+      </InfoSection>
 
+      <ActionButtons onEditClick={handleEditClick} onSignOutClick={handleSignOutDialogOpen} />
       <SignOutDialog open={signOutDialogOpen} onClose={() => setSignOutDialogOpen(false)} />
     </Box>
   );

diff --git a/src/hooks/useEditProfileForm.js b/src/hooks/useEditProfileForm.js
@@ -18,6 +18,8 @@ const useEditProfileForm = (user) => {
     year: '',
     description: '',
     listOfCourses: '',
+    inPerson: false,
+    online: false,
   });
 
   const [errors, setErrors] = useState({});
@@ -44,6 +46,8 @@ const useEditProfileForm = (user) => {
               major: data.major || '',
               year: data.year || '',
               description: data.description || '',
+              inPerson: data.locationPreference.inPerson,
+              online: data.locationPreference.online,
             });
             setSelectedMajors(data.major ? data.major.split(',') : []);
             setSelectedCourses(data.listOfCourses || []);
@@ -100,7 +104,7 @@ const useEditProfileForm = (user) => {
           ...formData,
           major: selectedMajors.join(', '),
           listOfCourses: selectedCourses,
-          //listOfCourses: formData.listOfCourses.split(',').map((course) => course.trim()),
+          locationPreference: { inPerson: formData.inPerson, online: formData.online },
         };
         await updateUserProfile(userId, updatedProfileData);
         return true; // Indicate success

diff --git a/src/utils/firestore/userProfile.js b/src/utils/firestore/userProfile.js
@@ -34,6 +34,7 @@ export const checkUserProfile = async (user) => {
       major: '',
       year: '',
       open: true,
+      locationPreference: { inPerson: true, online: true },
       listOfCourses: [],
       description: '',
       incomingMatches: [],