-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
해시태그 검색하기 강의에서
23.04.18 18:27 작성 조회수 354
0
import { Card, Button, Avatar, Popover, List, Comment } from "antd";
import {
RetweetOutlined,
HeartOutlined,
MessageOutlined,
HeartTwoTone,
EllipsisOutlined,
} from "@ant-design/icons";
import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types";
import PostImages from "./PostImages";
import { useCallback, useEffect, useState } from "react";
import CommentForm from "./CommentForm";
import PostCardContent from "./PostCardContent";
import FollowButton from "./FollowButton";
import {
REMOVE_POST_REQUEST,
LIKE_POST_REQUEST,
UNLIKE_POST_REQUEST,
RETWEET_REQUEST,
} from "../reducers/post";
import Link from "next/link";
const PostCard = ({ post }) => {
const dispatch = useDispatch();
const { removePostLoading } = useSelector((state) => state.post);
const [commentFormOpened, setCommentFormOpened] = useState(false);
const id = useSelector((state) => state.user.me?.id);
const onLike = useCallback(() => {
if (!id) {
return alert("로그인이 필요합니다.");
}
return dispatch({
type: LIKE_POST_REQUEST,
data: post.id,
});
}, [id]);
const onUnLike = useCallback(() => {
if (!id) {
return alert("로그인이 필요합니다.");
}
return dispatch({
type: UNLIKE_POST_REQUEST,
data: post.id,
});
}, [id]);
const onToggleComment = useCallback(() => {
setCommentFormOpened((prev) => !prev);
}, []);
const onRemovePost = useCallback(() => {
if (!id) {
return alert("로그인이 필요합니다.");
}
return dispatch({
type: REMOVE_POST_REQUEST,
data: post.id,
});
}, [id]);
const onRetweet = useCallback(() => {
if (!id) {
return alert("로그인이 필요합니다.");
}
return dispatch({
type: RETWEET_REQUEST,
data: post.id,
});
}, []);
const liked = post.Likers?.find((v) => v.id === id);
return (
<div style={{ marginBottom: 10 }}>
<Card
cover={post.Images[0] && <PostImages images={post.Images} />}
actions={[
<RetweetOutlined key="retweet" onClick={onRetweet} />,
liked ? (
<HeartTwoTone
twoToneColor="#eb2f96"
key="heart"
onClick={onUnLike}
/>
) : (
<HeartOutlined key="heart" onClick={onLike} />
),
<MessageOutlined key="message" onClick={onToggleComment} />,
<Popover
key="more"
content={
<Button.Group>
{id && post.user?.id === id ? (
<>
<Button>수정</Button>
<Button
type="danger"
onClick={onRemovePost}
loading={removePostLoading}
>
삭제
</Button>
</>
) : (
<Button>신고</Button>
)}
</Button.Group>
}
>
<EllipsisOutlined />
</Popover>,
]}
title={
post.RetweetId ? `${post.user.nickname}님이 공유하셨습니다` : null
}
extra={id && <FollowButton post={post} />}
>
{post.RetweetId && post.Retweet ? (
<Card
cover={
post.Retweet.Images[0] && (
<PostImages images={post.Retweet.Images} />
)
}
>
<Card.Meta
avatar={
<Link href={`/user/${post.Retweet.user.id}`}>
<a>
<Avatar>{post.Retweet.user.nickname[0]}</Avatar>
</a>
</Link>
}
title={post.Retweet.user.nickname}
description={<PostCardContent postData={post.Retweet.content} />}
/>
</Card>
) : (
<Card.Meta
avatar={
<Link href={`/user/${post.user.id}`}>
<a>
<Avatar>{post.user.nickname[0]}</Avatar>
</a>
</Link>
}
title={post.user.nickname}
description={<PostCardContent postData={post.content} />}
/>
)}
</Card>
{commentFormOpened && (
<div>
<CommentForm post={post} />
<List
header={`${post.Comments.length}개의 댓글`}
itemLayout="horizontal"
dataSource={post.Comments}
renderItem={(item) => (
<li>
<Comment
author={item.user?.nickname}
avatar={
<Link href={`/user/${post.user?.id}`}>
<a>
<Avatar>{post.user?.nickname[0]}</Avatar>
</a>
</Link>
}
content={item.content}
/>
</li>
)}
/>
</div>
)}
</div>
);
};
PostCard.propTypes = {
post: PropTypes.shape({
id: PropTypes.number,
user: PropTypes.object,
content: PropTypes.string,
createdAt: PropTypes.string,
Comment: PropTypes.arrayOf(PropTypes.object),
Images: PropTypes.arrayOf(PropTypes.object),
Likers: PropTypes.arrayOf(PropTypes.object),
RetweetId: PropTypes.number,
Retweet: PropTypes.objectOf(PropTypes.any),
}).isRequired,
};
export default PostCard;
아바타를 클릭하면 해당 아이디 정보하고 그 아이디 게시물만 떠야하는데 해당 아이디 프로필은 잘뜨는데 게시물이 다른사람 게시글까지 같이 뜹니다.
참고로 저는 post.User를 u로 바꿔야지만 뜹니다
답변을 작성해보세요.
1
답변 1