1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- import { Avatar, Col, Row } from 'antd'
- import { ConstructorModal } from '../helpers'
- import { Link } from 'react-router-dom'
- import user from '../materials/user.png'
- import { HeartOutlined, HeartFilled } from '@ant-design/icons'
- import React, { useState } from 'react'
- import { LinkToUser } from './LinkToUser'
- import {
- actionChangeLike
- } from '../redux/saga'
- import { connect } from 'react-redux'
- export const Likes = ({ likes }) => {
- return (
- <>
- <div className="Modal">
- {likes &&
- likes?.map(({owner:{_id,login, avatar}}) => (
- <LinkToUser _id={_id} login={login} avatar={avatar} size={50} padding={'0px'} />
- ))}
- </div>
- </>
- )
- }
- export const Like = ({
- my_Id,
- postId,
- addLike,
- deleteLike,
- likes = [],
- changeLike,
- children,
- }) => {
- const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
- // const changeLike = () =>
- // likeId ? deleteLike(likeId, postId) : addLike(postId)
- console.log('like id in component', likeId)
- const [isModalVisible, setIsModalVisible] = useState(false)
- const showModal = () => {
- setIsModalVisible(true)
- }
- return (
- <>
- <div style={{ display: 'flex' }}>
- <h3 onClick={() => changeLike(likeId, postId)}>
-
- {likeId ? (
- <HeartFilled
- style={{ cursor: 'pointer', fontSize: 'xx-large', color: 'red' }}
- />
- ) : (
- <HeartOutlined
- style={{ cursor: 'pointer', fontSize: 'xx-large' }}
- />
- )}
- </h3>
- {likes.length ? (
- <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
- {' '}
- {likes.length} likes
- </h3>
- ) : (
- <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}> 0 likes</h3>
- )}
- </div>
- <ConstructorModal
- title={'Likes'}
- isModalVisible={isModalVisible}
- setIsModalVisible={setIsModalVisible}
- >
- <Likes likes={likes} />
- </ConstructorModal>
- </>
- )
- }
- const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
- <Like
- my_Id={my_Id}
- likes={likes}
- postId={postId}
- changeLike={changeLike}
- >
- <Likes likes={likes} />
- </Like>
- )
- export const CLike = connect(
- (state) => ({
- my_Id: state.auth?.payload?.sub?.id || '',
- }),
- {
- changeLike: actionChangeLike
- },
- )(AllLikeComponent)
|