refactor: Fix multiple major bugs, refactor ProfileCard, add useCopyT…

…oClipboard hook fix: 1. GroupsPage.jsx: Resolved issue with current matches not displaying. 2. matches.js: Add error handling for fetchMatchDocument by match ID. 3. userProfile.js: Corrected new user profile creation logic. 4. HomePage.jsx: Prevented rendering of StudentFilter and StudentList when the user's profile is incomplete. refactor: 1. ProfileCard.jsx: Replaced HTML tags with MUI components and added renderProfileDetail helper function for rendering profiles. feat: 1. useCopyToClipboard.jsx: Implemented a new hook for clipboard copy functionality with Snackbar. BREAKING CHANGE: Major bugs fixed.
392-f24 · Oct 11, 2024 · 840bbc4 · 840bbc4
1 parent f3faa83
commit 840bbc4
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 180 deletions.
diff --git a/src/components/GroupsPage.jsx b/src/components/GroupsPage.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 
 import { Box, Stack, Typography } from '@mui/material';
 
+import ProfileCard from './ProfileCard';
 import StudentCard from './UserCard';
 import { useAuthState } from '../hooks/useAuthState';
 import useUserProfile from '../hooks/useUserProfile';
@@ -15,6 +16,7 @@ function GroupsPage() {
   const [outgoingRequestProfiles, setOutgoingRequestProfiles] = useState([]);
   const [matchProfiles, setMatchProfiles] = useState([]);
   const [selectedProfile, setSelectedProfile] = useState(null); // State for selected user profile
+  const [openProfileModal, setOpenProfileModal] = useState(false); // State for modal visibility
 
   // Combined useEffect for fetching incoming, outgoing, and current matches
   useEffect(() => {
@@ -51,10 +53,6 @@ function GroupsPage() {
         setIncomingRequestProfiles(incomingProfiles);
         setOutgoingRequestProfiles(outgoingProfiles);
         setMatchProfiles(matches);
-
-        // Update match profiles and set selected profile to null when closing modal
-        const updatedMatches = matches.filter((m) => m.uid !== selectedProfile?.uid);
-        setMatchProfiles(updatedMatches);
       } catch (error) {
         console.error('Error fetching request profiles:', error);
       }
@@ -67,95 +65,119 @@ function GroupsPage() {
     try {
       await resolveMatchRequest(userProfile.uid, requestingUserUid, matchId, accept);
       // Update the UI after resolving the request
-      setUserProfile((prevProfile) => ({
-        ...prevProfile,
-        incomingMatches: prevProfile.incomingMatches.filter((req) => req.matchId !== matchId),
-      }));
+      setIncomingRequestProfiles((prevProfiles) =>
+        prevProfiles.filter((profile) => profile.matchId !== matchId),
+      );
+      setMatchProfiles((prevProfiles) =>
+        prevProfiles.filter((profile) => profile.uid !== requestingUserUid),
+      );
     } catch (error) {
       console.error(`Error ${accept ? 'accepting' : 'denying'} request:`, error);
     }
   };
 
+  const handleOpenProfileModal = (profile) => {
+    setSelectedProfile(profile);
+    setOpenProfileModal(true);
+  };
+
+  const handleCloseProfileModal = () => {
+    setOpenProfileModal(false);
+  };
+
   if (loading) {
     return <Typography variant="h6">Loading...</Typography>;
   }
 
-  return (
-    <>
-      {userProfile ? (
-        <Box>
-          <h1>Matches</h1>
-          <Stack spacing={2}>
-            {matchProfiles.length > 0 ? (
-              matchProfiles.map((profile, index) => {
-                const actions = [
-                  {
-                    label: 'View Profile',
-                    // Allow users to see profile of matches
-                    onClick: () => setSelectedProfile(profile),
-                  },
-                ];
-                return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
-              })
-            ) : (
-              <Typography variant="body1" color="textSecondary">
-                You don't currently have any matches.
-              </Typography>
-            )}
-          </Stack>
-
-          <h1>Incoming Requests</h1>
-          <Stack spacing={2}>
-            {incomingRequestProfiles.length > 0 ? (
-              incomingRequestProfiles.map((profile, index) => {
-                const actions = [
-                  {
-                    label: 'Accept',
-                    onClick: () => handleRequestResolution(profile.uid, profile.matchId, true),
-                  },
-                  {
-                    label: 'Deny',
-                    onClick: () => handleRequestResolution(profile.uid, profile.matchId, false),
-                    variant: 'outlined',
-                    color: 'secondary',
-                  },
-                ];
-                return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
-              })
-            ) : (
-              <Typography variant="body1" color="textSecondary">
-                You don't have any incoming requests.
-              </Typography>
-            )}
-          </Stack>
-
-          <h1>Outgoing Requests</h1>
-          <Stack spacing={2}>
-            {outgoingRequestProfiles.length > 0 ? (
-              outgoingRequestProfiles.map((profile, index) => {
-                const actions = [
-                  {
-                    label: 'Requested',
-                    variant: 'outlined',
-                    color: 'default',
-                    onClick: () => {}, // No functionality
-                  },
-                ];
-                return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
-              })
-            ) : (
-              <Typography variant="body1" color="textSecondary">
-                You don't have any outgoing requests.
-              </Typography>
-            )}
-          </Stack>
-        </Box>
-      ) : (
-        <Typography variant="h6" color="textSecondary" align="center">
+  if (!user) {
+    return (
+      <Box sx={{ textAlign: 'center', mt: 4 }}>
+        <Typography variant="h6" gutterBottom>
           Please log in to view your groups.
         </Typography>
-      )}
-    </>
+      </Box>
+    );
+  }
+
+  // Render the StudentFilter and StudentList only if the userProfile is complete
+  if (!userProfile || !userProfile.major || !userProfile.year || !userProfile.phoneNumber) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <h1>Matches</h1>
+      <Stack spacing={2}>
+        {matchProfiles.length > 0 ? (
+          matchProfiles.map((profile, index) => {
+            const actions = [
+              {
+                label: 'View Profile',
+                onClick: () => handleOpenProfileModal(profile),
+              },
+            ];
+            return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
+          })
+        ) : (
+          <Typography variant="body1" color="textSecondary">
+            You don't currently have any matches.
+          </Typography>
+        )}
+      </Stack>
+
+      <h1>Incoming Requests</h1>
+      <Stack spacing={2}>
+        {incomingRequestProfiles.length > 0 ? (
+          incomingRequestProfiles.map((profile, index) => {
+            const actions = [
+              {
+                label: 'Accept',
+                onClick: () => handleRequestResolution(profile.uid, profile.matchId, true),
+              },
+              {
+                label: 'Deny',
+                onClick: () => handleRequestResolution(profile.uid, profile.matchId, false),
+                variant: 'outlined',
+                color: 'secondary',
+              },
+            ];
+            return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
+          })
+        ) : (
+          <Typography variant="body1" color="textSecondary">
+            You don't have any incoming requests.
+          </Typography>
+        )}
+      </Stack>
+
+      <h1>Outgoing Requests</h1>
+      <Stack spacing={2}>
+        {outgoingRequestProfiles.length > 0 ? (
+          outgoingRequestProfiles.map((profile, index) => {
+            const actions = [
+              {
+                label: 'Requested',
+                variant: 'outlined',
+                color: 'default',
+                onClick: () => {}, // No functionality
+              },
+            ];
+            return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
+          })
+        ) : (
+          <Typography variant="body1" color="textSecondary">
+            You don't have any outgoing requests.
+          </Typography>
+        )}
+      </Stack>
+
+      {/* Modal for displaying the selected profile */}
+      <ProfileCard
+        profileData={selectedProfile}
+        open={openProfileModal}
+        onClose={handleCloseProfileModal}
+      />
+    </Box>
   );
 }
 

diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Box, CircularProgress, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
 
 import StudentFilter from './Home/StudentFilter';
 import StudentList from './Home/StudentList';
@@ -13,6 +14,14 @@ export default function HomePage() {
     useUserProfile(user);
   const [selectedMajors, setSelectedMajors] = useState([]);
   const [selectedYears, setSelectedYears] = useState([]);
+  const navigate = useNavigate();
+
+  // Redirect user to edit-profile if the profile is incomplete
+  useEffect(() => {
+    if (userProfile && (!userProfile.major || !userProfile.year || !userProfile.phoneNumber)) {
+      navigate('/edit-profile');
+    }
+  }, [userProfile, navigate]);
 
   if (loading) {
     return (
@@ -32,6 +41,11 @@ export default function HomePage() {
     );
   }
 
+  // Render the StudentFilter and StudentList only if the userProfile is complete
+  if (!userProfile || !userProfile.major || !userProfile.year || !userProfile.phoneNumber) {
+    return null;
+  }
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
       <Box