feature(unmatch): Create unmatch button for matched profiles

src/components/GroupsPage.jsx

@@ -4,7 +4,12 @@ import { useAuthState } from '@auth/useAuthState';
 import ProfileCard from '@components/Profile/ProfileCard';
 import StudentCard from '@components/Profile/UserCard';
 import useUserProfile from '@data/useUserProfile';
-import { resolveMatchRequest, getUserMatches } from '@firestore/matches';
+import {
+  resolveMatchRequest,
+  getUserMatches,
+  removeMatch,
+  getMatchedUserUids,
+} from '@firestore/matches';
 import { fetchUserProfile } from '@firestore/userProfile';
 import { Box, Stack, Typography } from '@mui/material';
 
@@ -75,6 +80,32 @@ function GroupsPage() {
     }
   };
 
+  const handleRemoveMatch = async (profile) => {
+    try {
+      // Get the matched user IDs for the current user
+      const matchedUserUids = await getMatchedUserUids(userProfile.uid);
+
+      // Check if this profile is one of the matches
+      const sharedMatchId = profile.currentMatches.find((matchId) =>
+        matchedUserUids.includes(profile.uid),
+      );
+
+      if (!sharedMatchId) {
+        console.error('Match not found for the given profile');
+        return;
+      }
+
+      await removeMatch(sharedMatchId);
+
+      // Update the matchProfiles state by filtering out the removed match
+      setMatchProfiles((prevProfiles) =>
+        prevProfiles.filter((matchProfile) => matchProfile.uid !== profile.uid),
+      );
+    } catch (error) {
+      console.error('Error handling match removal:', error);
+    }
+  };
+
   const handleOpenProfileModal = (profile) => {
     setSelectedProfile(profile);
     setOpenProfileModal(true);
@@ -114,6 +145,12 @@ function GroupsPage() {
                 label: 'View Profile',
                 onClick: () => handleOpenProfileModal(profile),
               },
+              {
+                label: 'Unmatch',
+                onClick: () => handleRemoveMatch(profile),
+                variant: 'outlined',
+                color: 'secondary',
+              },
             ];
             return <StudentCard key={index} studentUserProfile={profile} actions={actions} />;
           })

src/utils/firestore/matches.js

@@ -79,6 +79,49 @@ export const createMatch = async (users, location, description = '') => {
   }
 };
 
+// Remove an existing match
+export const removeMatch = async (matchId) => {
+  if (!matchId) {
+    throw new Error('Missing match ID');
+  }
+
+  const matchRef = doc(db, 'matches', matchId);
+
+  try {
+    await runTransaction(db, async (transaction) => {
+      const matchDoc = await transaction.get(matchRef);
+
+      if (!matchDoc.exists()) {
+        throw new Error('Match not found');
+      }
+
+      const matchData = matchDoc.data();
+      const user0 = matchData.users[0];
+      const user1 = matchData.users[1];
+
+      // Fetch the user profiles from Firestore
+      const user0Ref = doc(db, 'users', user0.uid);
+      const user1Ref = doc(db, 'users', user1.uid);
+
+      // Remove the match reference from both users
+      transaction.update(user0Ref, {
+        currentMatches: arrayRemove(matchId),
+      });
+
+      transaction.update(user1Ref, {
+        currentMatches: arrayRemove(matchId),
+      });
+
+      // Finally, delete the match document
+      transaction.delete(matchRef);
+    });
+
+    console.log('Match removed with ID: ', matchId);
+  } catch (error) {
+    console.error('Error removing match:', error);
+  }
+};
+
 // Get all user matches
 export const getUserMatches = async (uid) => {
   try {