123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- import {
- actionAddFullComment,
- actionFindSubComment,
- actionAddSubFullComment,
- } from '../actions'
- import { Tooltip } from 'antd'
- import { connect } from 'react-redux'
- import { Link } from 'react-router-dom'
- import { Input, Button } from 'antd'
- import { SmileOutlined,SmileFilled } from '@ant-design/icons'
- import moment from 'moment'
- import React, { useState } from 'react'
- import 'emoji-mart/css/emoji-mart.css'
- import { Picker } from 'emoji-mart'
- import { Comment,Avatar } from 'antd';
- import user from '../materials/user.png'
- export const AddComment = ({ addComment, postId }) => {
- const [text, setComment] = useState('')
- const [showEmojiPicker, setShowEmojiPicker] = useState(false)
- console.log('show stickers', showEmojiPicker)
- const handleOK = () =>
- setShowEmojiPicker(!showEmojiPicker)
- const addEmoji = ({ native }) =>
- setComment((text + ' ' + native).trim())
- return (
- <>
- {showEmojiPicker && (
-
- <Picker
- style={{
- color: '#108ee9',
- position: 'absolute',
- bottom: '160px',
- right: '30px',
- }}
- theme="light"
- native={true}
- showPreview={false}
- showSkinTones={false}
- onSelect={(native) =>
- addEmoji(native)}
- />
- )}
- <Input
- style={{
- display: 'flex',
- width: '40%',
- marginLeft: '10px',
- marginRight: '10px',
- }}
- size="large"
- placeholder="Add a comment..."
- value={text}
- onChange={(e) => {
- setComment(e.target.value)
- }}
- onPressEnter={(e) => {
- setComment(e.target.value)
- }}
- />
- {
- !showEmojiPicker ?
- <SmileOutlined
- className="smile-btn"
- style={{ fontSize: 'xx-large', marginRight: '30px' }}
-
- onClick={handleOK}
- />
- :
- <SmileFilled
- className="smile-btn"
- style={{ color:'#108ee9',fontSize: 'xx-large', marginRight: '30px' }}
-
- onClick={handleOK}
- />
- }
-
- <Button
- size="large"
- disabled={text.length < 1}
- type="primary"
- onClick={(e) => {
- addComment(postId, text)
- && setComment(e.target.value = '') &&
- setShowEmojiPicker(false)
- }}
- >
- {' '}
- Publish{' '}
- </Button>
- </>
- )
- }
- export const SpoilerButton = ({ text, close, children, style }) => {
- const [opened, setOpened] = useState(close)
- return (
- <>
- <Button
- onClick={() => {
- setOpened(!opened)
- }}
- style={style}
- >
- {text}
- </Button>
- {opened && children}
- </>
- )
- }
- const CommentForReply = ({ addCommentReply, commentId, postId }) => {
- const [comment, setComment] = useState('')
- return (
- <>
- <div
- style={{
- display: 'flex',
- flexDirection: 'row',
- width: '100%',
- padding: '15px',
- marginLeft: '40px',
- }}
- >
- <Input
- placeholder="Add a comment..."
- value={comment}
- onChange={(e) => {
- setComment(e.target.value)
- }}
- />
- <Button
- disabled={comment.length < 1}
- type="primary"
- onClick={() => addCommentReply(postId, commentId, comment)}
- >
- {' '}
- Publish{' '}
- </Button>
- </div>
- </>
- )
- }
- const CommentData = ({ createdAt }) => {
- return (
- <Tooltip
- color={'#108ee9'}
- style={{ paddingLeft: '10px' }}
- title={moment(new Date(+createdAt)).format('lll')}
- >
- {moment(new Date(+createdAt))
- .startOf()
- .fromNow()}
- </Tooltip>
- )
- }
- export const Comments = ({
- comments,
- postId,
- commentsFind,
- addCommentReply,
- children,
- close,
- findSubComment,
- onGetLikes,
- onGetType
- }) => {
- const [opened, setOpened] = useState(close)
- return (
- <>
- {comments
-
- ?
- comments?.map((comment) => (
- <Comment
-
- author={ <Link
- to={`/profile/${comment?.owner?._id}`}
- >
- {comment?.owner?.login || 'Anon'}
-
- </Link>}
-
- avatar=
- {comment.owner?.avatar ? (
- <Link
- to={`/profile/${comment?.owner?._id}`}
- >
- <Avatar
- size={30}
- src={'/' + comment.owner?.avatar?.url}
- style={{ marginLeft: '15px' }}
- alt={comment.owner?.login || 'Anon'}
- />
- </Link>
- ) : (
- <Link
- to={`/profile/${comment?.owner?._id}`}
- >
- <Avatar size={30}
- src={user}
- style={{ marginLeft: '15px' }}
- alt={comment.owner?.login || 'Anon'}
- />
- </Link>
- )}
-
- content=
- {
- <p>
- {comment?.text}
- </p>
- }
-
- datetime={
- <CommentData createdAt={comment?.createdAt} />
- }
- />
-
- )) : <h3> No comments </h3>}
- </>)
- }
- export const CComments = connect(
- (state) => ({
- postId: state.promise.onePost?.payload?._id,
- addComment: state.promise?.addComment?.payload,
- addSubComment: state.promise?.addSubComment,
- }),
- {
- addCommentReply: actionAddSubFullComment,
- findSubComment: actionFindSubComment,
- },
- )(Comments)
|