Content of home page

client/src/scenes/widgets/FeedWidget.jsx

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setPosts } from "state";
+import ContentWidget from "./ContentWidget";
+
+const FeedWidget = ({ userId, isProfile = false }) => {
+  const dispatch = useDispatch();
+  const posts = useSelector((state) => state.posts);
+  const token = useSelector((state) => state.token);
+
+  const getPosts = async () => {
+    const response = await fetch(`http://localhost:3001/posts`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    const posts = await response.json();
+    dispatch(setPosts({ posts }));
+  };
+
+  const getUserPosts = async () => {
+    const response = await fetch(`http://localhost:3001/posts/${userId}`, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    const posts = await response.json();
+    dispatch(setPosts({ posts }));
+  };
+
+  useEffect(() => {
+    isProfile ? getUserPosts() : getPosts();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <>
+      {posts.map(
+        ({
+          _id,
+          userId,
+          firstName,
+          lastName,
+          location,
+          content,
+          profilePicturePath,
+          contentPicturePath,
+          likes,
+          comments,
+        }) => (
+          <ContentWidget
+            key={_id}
+            postId={_id}
+            userId={userId}
+            userName={`${firstName} ${lastName}`}
+            location={location}
+            content={content}
+            profilePicturePath={profilePicturePath}
+            contentPicturePath={contentPicturePath}
+            likes={likes}
+            comments={comments}
+          ></ContentWidget>
+        )
+      )}
+    </>
+  );
+};
+
+export default FeedWidget;