Like.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { Avatar, Col, Row } from 'antd'
  2. import { ConstructorModal } from '../helpers'
  3. import { Link } from 'react-router-dom'
  4. import user from '../materials/user.png'
  5. import { HeartOutlined, HeartFilled } from '@ant-design/icons'
  6. import React, { useState } from 'react'
  7. import { LinkToUser } from './LinkToUser'
  8. import {
  9. actionChangeLike
  10. } from '../redux/saga'
  11. import { connect } from 'react-redux'
  12. export const Likes = ({ likes }) => {
  13. return (
  14. <>
  15. <div className="Modal">
  16. {likes &&
  17. likes?.map(({owner:{_id,login, avatar}}) => (
  18. <LinkToUser _id={_id} login={login} avatar={avatar} size={50} padding={'0px'} />
  19. ))}
  20. </div>
  21. </>
  22. )
  23. }
  24. export const Like = ({
  25. my_Id,
  26. postId,
  27. addLike,
  28. deleteLike,
  29. likes = [],
  30. changeLike,
  31. children,
  32. }) => {
  33. const likeId = likes.find((like) => like?.owner?._id === my_Id)?._id
  34. // const changeLike = () =>
  35. // likeId ? deleteLike(likeId, postId) : addLike(postId)
  36. console.log('like id in component', likeId)
  37. const [isModalVisible, setIsModalVisible] = useState(false)
  38. const showModal = () => {
  39. setIsModalVisible(true)
  40. }
  41. return (
  42. <>
  43. <div style={{ display: 'flex' }}>
  44. <h3 onClick={() => changeLike(likeId, postId)}>
  45. {likeId ? (
  46. <HeartFilled
  47. style={{color:'red'}}
  48. className='Like'
  49. />
  50. ) : (
  51. <HeartOutlined className='UnLike' />
  52. )}
  53. </h3>
  54. {likes.length ? (
  55. <h3 style={{ cursor: 'pointer', paddingLeft: 8 }} onClick={showModal}>
  56. {' '}
  57. {likes.length} likes
  58. </h3>
  59. ) : (
  60. <h3 style={{ cursor: 'pointer', paddingLeft: 8 }}> 0 likes</h3>
  61. )}
  62. </div>
  63. <ConstructorModal
  64. title={'Likes'}
  65. isModalVisible={isModalVisible}
  66. setIsModalVisible={setIsModalVisible}
  67. >
  68. <Likes likes={likes} />
  69. </ConstructorModal>
  70. </>
  71. )
  72. }
  73. const AllLikeComponent = ({ my_Id, likes,changeLike, postId }) => (
  74. <Like
  75. my_Id={my_Id}
  76. likes={likes}
  77. postId={postId}
  78. changeLike={changeLike}
  79. >
  80. <Likes likes={likes} />
  81. </Like>
  82. )
  83. export const CLike = connect(
  84. (state) => ({
  85. my_Id: state.auth?.payload?.sub?.id || '',
  86. }),
  87. {
  88. changeLike: actionChangeLike
  89. },
  90. )(AllLikeComponent)