Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import ThumbUpAltOutlinedIcon from '@mui/icons-material/ThumbUpAltOutlined'
import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt'
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
import InputOption from './InputOption'
import parse from 'html-react-parser'
import Avatar from '../../../../shared/Avatar/Avatar'
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import { axios } from '../../../../utils'
import { addNotification } from '../../../../redux/notification/notification.actions'
import { openShareModal } from '../../../../redux/share-modal/shareModal.actions'
import { shareModalTypes } from '../../../../redux/share-modal/shareModal.types'
import { feedTypes } from '../../../../redux/feed/feed.types'
import FeedCommentSection from '../../../components/feed/feed-comment/FeedCommentSection'
import { connect } from 'react-redux'

const Feed = ({
  feed_unique,
  feed_is_liked,
  feed_like_url,
  feed_unlike_url,
  feed_share_url,
  feed_share_external_url,
  feed_delete_url,
  feed_likes,
  owner_url,
  owner_image,
  owner_name,
  owner_description,
  owner_shared,
  owner_comments,
  owner_time_elapse,
  owner_file_image_preview,
  owner_file_video,
  owner_file_image,
  owner_file_document,
  comment_add_url,
  comments,
  addNotification, // REDUX ACTION
  openShareModal, // REDUX ACTION
}) => {

  const [feedIsLiked, setFeedIsLiked] = useState(feed_is_liked);
  const [likesState, setLikesState] = useState(feed_likes);
  const [totalComments, setTotalComments] = useState(owner_comments);
  const [sharedState, setSharedState] = useState(owner_shared);
  const [showComments, setShowComments] = useState(false);

  const handleLike = (url) => {
    axios.post(url)
      .then(({ data: response }) => {
        if (!response.success) {
          addNotification({ style: "danger", msg: response.data })
          return
        }
        setLikesState(response.data.likes)
        setFeedIsLiked(!feedIsLiked);
      });
  };

  const handleShare = () => openShareModal(feed_share_url, shareModalTypes.SHARE, feedTypes.DASHBOARD, feed_unique)

  const displayCommentSection = () => setShowComments(!showComments)

  return (
    <div className='feed'>

      <Feed.Header
        image={owner_image}
        name={owner_name}
        timeElapsed={owner_time_elapse}
        deleteUrl={feed_delete_url}
      />

      <div className='feed__body'>
        <Feed.Content
          ownerDescription={owner_description}
          ownerFileImage={owner_file_image}
          ownerFileImagepreview={owner_file_image_preview}
          ownerFileVideo={owner_file_video}
          ownerFileDocument={owner_file_document}
        />
      </div>

      <div className='feed__buttons'>
        <InputOption
          Icon={feedIsLiked ? ThumbUpAltIcon : ThumbUpAltOutlinedIcon}
          title='Like'
          color={feedIsLiked ? '#7405f9' : 'gray'}
          onClick={() => handleLike(feedIsLiked ? feed_unlike_url : feed_like_url)}
        />
        <InputOption
          Icon={ChatOutlinedIcon}
          title='Comment'
          color='gray'
          onClick={displayCommentSection}
        />
        <InputOption
          Icon={ShareOutlinedIcon}
          title='Share'
          color='gray'
          onClick={handleShare}
        />
        <InputOption Icon={SendOutlinedIcon} title='Send' color='gray' />
      </div>

      <FeedCommentSection
        feedId={feed_unique}
        image={owner_image}
        addUrl={comment_add_url}
        updateTotalComments={(total) => setTotalComments(total)}
        comments={comments}
        isShow={showComments}
      />

    </div>
  )
}

const Content = ({
  ownerDescription,
  ownerFileImage,
  ownerFileImagepreview,
  ownerFileVideo,
  ownerFileDocument
}) => {
  return (
    <>
      <p>{parse(ownerDescription)}</p>
      {ownerFileImage &&
        <img src={ownerFileImage} className="Entradas" loading='lazy' />
      }
      {ownerFileVideo &&
        <video
          src={ownerFileVideo}
          controls
          poster={ownerFileImagepreview}
          preload="none"
        />
      }
      {ownerFileDocument &&
        <a href={ownerFileDocument} target="_blank" rel="noreferrer">
          Descargar
        </a>
      }
    </>
  )
}

const Header = ({
  image = '',
  name = '',
  timeElapsed = '',
  deleteUrl = ''
}) => {
  return (
    <div className='feed__header'>
      <Avatar
        imageUrl={image}
        name={name}
        size='xl'
      />
      <div className='feed__info'>
        <h2>{name}</h2>
        <div className='time__elapse'>
          <p>
            {timeElapsed}
          </p>
          <AccessTimeIcon className='time__elapse-icon' />
        </div>
      </div>
    </div>
  )
}

Feed.Content = Content
Feed.Header = Header

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
  openShareModal: (postUrl, modalType, feedType) => openShareModal(postUrl, modalType, feedType),
};

export default connect(null, mapDispatchToProps)(Feed)