QkoSad
56 lines
1.4 KiB
TypeScript
Executable File
56 lines
1.4 KiB
TypeScript
Executable File
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import formatDate from "../../utils/formatDate";
|
|
import { deleteComment } from "../../actions/post";
|
|
import { useAppDispatch, useAppSelector } from "../../utils/hooks";
|
|
import { Comment } from "../../types";
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
Container,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
interface CommentItemProps {
|
|
postId: string;
|
|
comment: Comment;
|
|
}
|
|
|
|
const CommentItem = ({
|
|
postId,
|
|
comment: { _id, text, name, avatar, user, date },
|
|
}: CommentItemProps) => {
|
|
const dispatch = useAppDispatch();
|
|
const auth = useAppSelector((state) => state.auth);
|
|
return (
|
|
<Container maxWidth="sm">
|
|
<Card variant="outlined">
|
|
<CardHeader
|
|
avatar={<Avatar src={avatar}>R</Avatar>}
|
|
title={<Link to={`/profile/${user}`}>{name}</Link>}
|
|
subheader={formatDate(date)}
|
|
/>
|
|
{!auth.loading && auth.user !== null && user === auth.user._id && (
|
|
<Button onClick={() => dispatch(deleteComment(postId, _id))}>
|
|
<DeleteIcon />
|
|
</Button>
|
|
)}
|
|
<CardContent>
|
|
<Typography
|
|
variant="subtitle1"
|
|
sx={{ textWrap: "wrap", wordBreak: "break-word" }}
|
|
>
|
|
{text}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default CommentItem;
|