58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import { Box, Typography, useTheme } from "@mui/material";
|
|
import Friend from "components/Friend";
|
|
import WidgetWrapper from "components/WidgetWrapper";
|
|
import { useEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { setFriends } from "state";
|
|
|
|
const FriendList = ({ userId }) => {
|
|
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/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" }}
|
|
>
|
|
Great minds you know
|
|
</Typography>
|
|
<Box display="flex" flexDirection="column" gap="1.5rem">
|
|
{friends.map((friend) => (
|
|
<Friend
|
|
key={friend._id}
|
|
friendId={friend._id}
|
|
userName={`${friend.firstName} ${friend.lastName}`}
|
|
subtitle={friend.location}
|
|
profilePicturePath={friend.profilePicturePath}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</WidgetWrapper>
|
|
);
|
|
};
|
|
|
|
export default FriendList;
|