Merge pull request #65 from Gather307/friendslist-scrolling

friendslist scrolling
Gather307 · May 23, 2024 · a0f2987 · a0f2987
2 parents 529292e + ceccb28
commit a0f2987
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/frontend/src/components/Friends_List_Component.tsx b/frontend/src/components/Friends_List_Component.tsx
@@ -96,21 +96,18 @@ const Friends_List: React.FC<Props> = ({
     try {
       console.log(friendId);
       // Assuming you have the userId available in your state or props
-
-      // Send a DELETE request to the backend API
       const response = await fetch(
         `http://localhost:3001/users/${LoggedInUser}/remove-friend`,
         {
           method: "DELETE",
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify({ friendId: friendId }), // Send the friend's ID in the request body
+          body: JSON.stringify({ friendId: friendId }),
         },
       );
 
       if (response.ok) {
-        // If the backend request was successful, update the frontend state
         setFriends(friends.filter((friend) => friend.id !== friendId));
       } else {
         console.error("Failed to remove friend from backend");
@@ -226,7 +223,6 @@ const Friends_List: React.FC<Props> = ({
   };
 
   const handleGroupClick = async (groupId: string, friendId: string) => {
-    // Handle the logic to add a friend to the group
     try {
       console.log(`Group ID: ${groupId} clicked`);
       console.log(`USER ID: ${friendId} clicked`);
@@ -238,7 +234,14 @@ const Friends_List: React.FC<Props> = ({
 
   return (
     <Box width="100%">
-      <Box padding="4" bg="gray.100" borderRadius="md">
+      <Box
+        padding="4"
+        bg="gray.100"
+        borderRadius="md"
+        position="sticky"
+        top="0"
+        zIndex="1"
+      >
         <FormControl>
           <Stack direction="row" spacing={4}>
             <Input
@@ -252,7 +255,7 @@ const Friends_List: React.FC<Props> = ({
           </Stack>
         </FormControl>
       </Box>
-      <TableContainer maxHeight="calc(50vh - 80px)" overflowY="auto">
+      <TableContainer>
         <Table variant="simple">
           <Thead>
             <Tr>

diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
@@ -31,11 +31,15 @@ const ProfilePage: React.FC<ProfilePageProps> = ({
             mb={4}
             p={4}
             height="50%"
+            display="flex"
+            flexDirection="column"
           >
             <Heading size="md" mb={4}>
               Friends List
             </Heading>
-            <Friends_List LoggedInUser={LoggedInUser} />
+            <Box flex="1" overflowY="auto">
+              <Friends_List LoggedInUser={LoggedInUser} />
+            </Box>
           </Box>
           <Box bg="white" borderRadius="md" boxShadow="md" p={4} height="48%">
             <Heading size="md" mb={4}>