65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Row, Col } from "react-bootstrap";
|
|
import CreatePost from "./CreatePost";
|
|
import MiniPhotos from "./MiniPhotos";
|
|
import MiniFriends from "./MiniFriends";
|
|
import DisplayUserPost from "./DisplayUserPost";
|
|
import { handleClickLink } from "./helper";
|
|
import { useSelector } from "react-redux";
|
|
import "./Posts.css";
|
|
|
|
const Posts = (props) => {
|
|
const { userID, linkHandling } = props;
|
|
|
|
const { linkRefs, linkState } = linkHandling;
|
|
const [activeLink, setActiveLink] = linkState;
|
|
const { posts: postsLinkRef } = linkRefs;
|
|
|
|
const users = useSelector((state) => state.users);
|
|
const currentUserID = useSelector((state) => state.user.id);
|
|
|
|
const isCurrentUser = userID === currentUserID;
|
|
|
|
const user = users.find((user) => user.userID === userID);
|
|
|
|
useEffect(() => {
|
|
handleClickLink(
|
|
{ currentTarget: postsLinkRef.current },
|
|
activeLink,
|
|
setActiveLink
|
|
);
|
|
}, [activeLink, postsLinkRef, setActiveLink]);
|
|
|
|
return (
|
|
<Row className="w-100 posts">
|
|
<Col sm={5} className="mh-100 overflow-hidden">
|
|
<MiniPhotos
|
|
user={user}
|
|
userID={userID}
|
|
linkHandling={linkHandling}
|
|
className="my-2"
|
|
/>
|
|
<MiniFriends user={user} linkHandling={linkHandling} className="my-2" />
|
|
</Col>
|
|
<Col sm={7} className="mh-100 overflow-auto hide-scrollbar bg-200">
|
|
<CreatePost
|
|
firstname={user.firstname}
|
|
isCurrentUser={isCurrentUser}
|
|
className="mt-2"
|
|
/>
|
|
{user.posts.map((postID, index) => {
|
|
return (
|
|
<DisplayUserPost
|
|
key={index}
|
|
postID={postID}
|
|
className="mx-auto my-2"
|
|
/>
|
|
);
|
|
})}
|
|
</Col>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Posts;
|