Ads and friend list

README.md

@@ -22,3 +22,4 @@ Table:
 | 18.07.2023 | Home page and navigate to login/register page if not logged in | 20 |
 | 19.07.2023 | Post widget | 10 |
 | 21.07.2023 | Each post on home page | 20 |
+| 22.07.2023 | Ads and friend list | 10 |

client/src/scenes/homePage/index.jsx

@@ -4,6 +4,8 @@ import Navbar from "scenes/navbar";
 import UserWidget from "scenes/widgets/UserWidget";
 import PostWidget from "scenes/widgets/PostWidget";
 import FeedWidget from "scenes/widgets/FeedWidget";
+import AdsWidget from "scenes/widgets/AdsWidget";
+import FriendList from "scenes/widgets/FriendList";
 
 const HomePage = () => {
   const isNotMobile = useMediaQuery("(min-width: 1000px)");
@@ -29,7 +31,13 @@ const HomePage = () => {
           <PostWidget profilePicturePath={profilePicturePath} />
           <FeedWidget userId={_id} />
         </Box>
-        {isNotMobile && <Box flexBasis="26%"></Box>}
+        {isNotMobile && (
+          <Box flexBasis="26%">
+            <AdsWidget />
+            <Box mt="2rem 0" />
+            <FriendList userId={_id} />
+          </Box>
+        )}
       </Box>
     </Box>
   );

client/src/scenes/widgets/AdsWidget.jsx

@@ -0,0 +1,37 @@
+import { Typography, useTheme } from "@mui/material";
+import FlexBetween from "components/FlexBetween";
+import WidgetWrapper from "components/WidgetWrapper";
+
+const AdsWidget = () => {
+  const { palette } = useTheme();
+  const dark = palette.neutral.dark;
+  const main = palette.neutral.main;
+  const medium = palette.neutral.medium;
+
+  return (
+    <WidgetWrapper>
+      <FlexBetween>
+        <Typography color={dark} variant="h5" fontWeight="500">
+          Sponsored
+        </Typography>
+        <Typography color={medium}>Create Ad</Typography>
+      </FlexBetween>
+      <img
+        width="100%"
+        height="auto"
+        alt="ads"
+        src="https://localhpst:3001/assets/ads.jpeg"
+        style={{ borderRadius: "0.75rem", margin: "0.75rem 0" }}
+      ></img>
+      <FlexBetween>
+        <Typography color={main}>Helsinki, Finland</Typography>
+        <Typography color={medium}>Daughter of the Baltic</Typography>
+      </FlexBetween>
+      <Typography color={medium} m="0.5rem 0">
+        Nobody in their right mind would come to Helsinki in November!
+      </Typography>
+    </WidgetWrapper>
+  );
+};
+
+export default AdsWidget;

client/src/scenes/widgets/ContentWidget.jsx

@@ -6,7 +6,7 @@ import {
 } from "@mui/icons-material";
 import { Box, Divider, Typography, IconButton, useTheme } from "@mui/material";
 import FlexBetween from "components/FlexBetween";
-import Friend from "components/FriendList";
+import Friend from "components/Friend";
 import WidgetWrapper from "components/WidgetWrapper";
 import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

client/src/scenes/widgets/FriendList.jsx

@@ -0,0 +1,57 @@
+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;

client/src/scenes/widgets/PostWidget.jsx

@@ -53,8 +53,8 @@ const PostWidget = ({ profilePicturePath }) => {
       },
       body: formData,
     });
-    const posts = await response.json();
-    dispatch(setPosts({ posts }));
+    const data = await response.json();
+    dispatch(setPosts({ posts: data }));
     setImage(null);
     setPost("");
   };