Fixed the FriendListWidget

alexkiriungi · Jan 17, 2024 · dc89672 · dc89672
1 parent d1cb8c6
commit dc89672
Showing 1 changed file with 43 additions and 42 deletions.
diff --git a/client/src/scenes/widgets/FriendListWidget.jsx b/client/src/scenes/widgets/FriendListWidget.jsx
@@ -6,49 +6,50 @@ import { useDispatch, useSelector } from "react-redux";
 import { setFriends } from "state";
 
 const FriendListWidget = ({ userId }) => {
-    const dispatch = useDispatch();
-    const { palette } = useTheme();
-    const token = useSelector((state) => state.token);
-    const friends = useSelector((state) => state.user.friends);
+  const dispatch = useDispatch();
+  const { palette } = useTheme();
+  const token = useSelector((state) => state.token);
+  const friends = useSelector((state) => state.user.friends);
 
-    const getFriends = async () => {
-        const response = await fetch(
-            `http://localhost:3001/user/${userId}/friends`,
-            {
-                method: "GET",
-                headers: { Authorization: `Bearer ${token}`},
-            }
-        );
-        const data = await response.json();
-        dispatch(setFriends({ friends: data }))
-    };
-
-    useEffect(() => {
-        getFriends();
-    });
-    return (
-        <WidgetWrapper>
-            <Typography
-                color={palette.neutral.dark}
-                variant="h5"
-                fontWeight="500"
-                sx={{ marginBottom: "1.5rem" }}
-            >
-                Friend List
-            </Typography>
-            <Box display="flex" flexDirection="column" gap="1.5rem">
-                {friends.map((friend) => {
-                    <Friend 
-                        key={friend._id}
-                        friendId={friend._id}
-                        name={`${friend.firstName} ${friend.lastName}`}
-                        subtitle={friend.occupation}
-                        userPicturePath={friend.picturePath}
-                    />
-                })}
-            </Box>
-        </WidgetWrapper>
+  const getFriends = async () => {
+    const response = await fetch(
+      `http://localhost:3001/users/${userId}/friends`,
+      {
+        method: "GET",
+        headers: { Authorization: `Bearer ${token}` },
+      }
     );
+    const data = await response.json();
+    dispatch(setFriends({ friends: data }));
+  };
+
+  useEffect(() => {
+    getFriends();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <WidgetWrapper>
+      <Typography
+        color={palette.neutral.dark}
+        variant="h5"
+        fontWeight="500"
+        sx={{ mb: "1.5rem" }}
+      >
+        Friend List
+      </Typography>
+      <Box display="flex" flexDirection="column" gap="1.5rem">
+        {friends.map((friend) => (
+          <Friend
+            key={friend._id}
+            friendId={friend._id}
+            name={`${friend.firstName} ${friend.lastName}`}
+            subtitle={friend.occupation}
+            userPicturePath={friend.picturePath}
+          />
+        ))}
+      </Box>
+    </WidgetWrapper>
+  );
 };
 
-export default FriendListWidget;
+export default FriendListWidget;