homework/js/Project/project/src/components/post/comments.js

import { url } from "../../App";
import { useHistory, useParams } from "react-router-dom";
import { createContext, useState } from "react";

import './style.scss'

import {
    Card,
    CardHeader,
    CardContent,
    CardActions,
    Avatar,
    IconButton,
    Typography,
    Box,
    Divider,
    Popover,
    Tooltip
} from '@mui/material'

import {
    FavoriteBorderRounded,
    SendRounded,
    ChatBubbleOutline,
    TurnedInNot,
} from '@mui/icons-material/'

import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';

import Grid from '@mui/material/Unstable_Grid2';

import CCommentsFeed from "./comments_feed";
import CommentField from "./comment_field";

// контекст для управления состоянием данных для отправки комментов
export const CommentContext = createContext()


export function CardPost({ postData }) {
    // console.log('postData: ', postData)

    const history = useHistory()
    const { postId } = useParams()

    // отслеживаем состояние поля ввода комментария для поста
    const [comment, setComment] = useState({ text: '', post: { _id: postId } })

    // дата поста
    const dateofPost = new Date(+postData.createdAt)
    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} 
    ${months[dateofPost.getMonth()]} 
    ${dateofPost.getFullYear()}
    ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`

    // Переход на профиль пользователя
    function toAccount() {
        history.push(`/user/${postData?.owner?._id}`)
    }

    // перевод фокуса на строку добавления комментария при клике на иконку комментария
    function addCommentFocus() {
        document.getElementById('addCommentField').focus()
    }



    // отслеживание состояния текста для ToolTips
    // const [toolTipText, setToolTipText] = useState('Нажмите для копирования')
    const [toolTipText, setToolTipText] = useState(true)
    let text = toolTipText ? 'Нажмите для копирования' : 'Ссылка скопирована в буфер обмена'

    // функция копирования ссылки на пост
    function copyShareLink(text) {
        // получаем урл текущей страницы
        const postUrl = window.location.href
        navigator.clipboard.writeText(postUrl)

        // setToolTipText('Ссылка скопирована в буфер обмена')
        // setTimeout(() => setToolTipText('Нажмите для копирования'), 1500)
        setToolTipText(!toolTipText)
        setTimeout(() => setToolTipText(toolTipText), 1500)
    }





    return (
        <CommentContext.Provider value={[comment, setComment]}>
            <Card
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    minHeight: '80vh',
                    borderRadius: 0
                }}
            >
                <CardHeader
                    avatar={
                        <Avatar
                            alt={postData?.owner?.login}
                            src={(url + postData?.owner?.avatar?.url)}
                            sx={{
                                width: 50,
                                height: 50
                            }}
                        />
                    }

                    title={
                        <Typography
                            sx={{
                                cursor: 'pointer'
                            }}
                            onClick={toAccount}
                        >
                            {postData?.owner?.login}
                        </Typography>
                    }

                    subheader={dateofPostParse}
                />

                <Divider />

                <CardContent
                    className='post-comments'

                    sx={{
                        flex: '0 0 450px',
                        overflowY: 'auto',
                    }}
                >
                    <Grid
                        container
                        spacing={2}
                        sx={{
                            marginBottom: 3
                        }}
                    >
                        <Grid
                            xs={2}
                            sx={{
                                flex: '0 0 45px'
                            }}
                        >
                            <Avatar
                                alt={postData?.owner?.login}
                                src={(url + postData?.owner?.avatar?.url)}
                                sx={{
                                    width: 40,
                                    height: 40
                                }}
                            />
                        </Grid>

                        <Grid
                            xs={10}
                        >
                            <Typography
                                variant="subtitle2"
                                color="text.secondary"
                                sx={{
                                    cursor: 'pointer',
                                    width: 'fit-content'
                                }}
                                onClick={toAccount}
                            >
                                {postData?.owner?.login}
                            </Typography>

                            <Typography
                                variant="subtitle2"
                                color="text.primary"
                            >
                                {postData?.title}
                            </Typography>

                            <Typography
                                variant="body2"
                                color="text.secondary"
                            >
                                {postData?.text}
                            </Typography>
                        </Grid>
                    </Grid>

                    <Grid>
                        <CCommentsFeed />
                    </Grid>
                </CardContent>

                <Divider />

                <CardActions disableSpacing>
                    <Box
                        sx={{
                            flexGrow: 1
                        }}>
                        <Grid
                            xs={12}
                            container
                            justifyContent="space-between"
                            alignItems="center"
                            sx={{
                                fontSize: '12px'
                            }}
                        >
                            <Grid container>
                                <Grid>
                                    <IconButton
                                        aria-label="add to favorites"
                                        onClick={() => (console.log('click like main post'))}
                                    >
                                        <FavoriteBorderRounded />
                                    </IconButton>
                                </Grid>

                                <Grid>
                                    <IconButton
                                        onClick={addCommentFocus}
                                    >
                                        <ChatBubbleOutline />
                                    </IconButton>
                                </Grid>

                                <Grid>
                                    <PopupState variant="popover" popupId="demo-popup-popover">
                                        {(popupState) => (
                                            <div>
                                                <IconButton
                                                    aria-label="share"
                                                    {...bindTrigger(popupState)}
                                                >
                                                    <SendRounded
                                                        style={{ transform: 'translate(3px, -4px) rotate(-30deg)' }}
                                                    />
                                                </IconButton>
                                                <Popover
                                                    {...bindPopover(popupState)}
                                                    anchorOrigin={{
                                                        vertical: 'center',
                                                        horizontal: 'right',
                                                    }}
                                                    transformOrigin={{
                                                        vertical: 'center',
                                                        horizontal: 'left',
                                                    }}
                                                >
                                                    {/* <Tooltip title={toolTipText} placement='bottom-start'> */}
                                                    <Tooltip title={text} placement='bottom-start'>
                                                        <Typography
                                                            sx={{ p: 2 }}
                                                            onClick={copyShareLink}
                                                        >
                                                            {window.location.href}
                                                        </Typography>
                                                    </Tooltip>
                                                </Popover>
                                            </div>
                                        )}
                                    </PopupState>
                                </Grid>
                            </Grid>

                            <Grid>
                                <IconButton>
                                    <TurnedInNot />
                                </IconButton>
                            </Grid>
                        </Grid>

                        <Grid container>
                            <Typography
                                variant="subtitle1"
                                color="text.secondary"
                                sx={{
                                    padding: 1
                                }}
                            >
                                Нравится: {postData.likesCount ? postData.likesCount : '0'}
                            </Typography>
                        </Grid>
                    </Box>
                </CardActions>

                <Divider />

                <CardActions>
                    <CommentField />
                </CardActions>
            </Card>
        </CommentContext.Provider >
    )
}