Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */

import React, { useEffect, useRef, 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, useDispatch } from 'react-redux'

import withExternalShare from './withExternalShare'

import ConfirmModal from '../../../../shared/confirm-modal/ConfirmModal'

import { deleteFeed } from '../../../../redux/feed/feed.actions'

const Feed = ({

  isShare = false,

  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,

  shared_name,

  shared_image,

  shared_time_elapse,

  shared_description,

  shared_file_video,

  shared_file_image_preview,

  shared_file_image,

  shared_file_document,

  shared_url,

  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)

  const ExternalShareButton = withExternalShare(InputOption, feed_share_external_url, { Icon: SendOutlinedIcon, color: 'gray', title: 'Send' })

  return (

    <div className='feed'>

      <Feed.Header

        image={owner_image}

        name={owner_name}

        timeElapsed={owner_time_elapse}

        viewUrl={owner_url}

        deleteUrl={feed_delete_url}

        feedUnique={feed_unique}

      />

      <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}

          sharedItem={{

            name: shared_name,

            image: shared_image,

            time_elapse: shared_time_elapse,

            description: shared_description,

            file_video: shared_file_video,

            file_image_preview: shared_file_image_preview,

            file_image: shared_file_image,

            file_document: shared_file_document,

            shared_url: shared_url

          }}

        />

      </div>

      {

        !isShare &&

        <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}

          />

          <ExternalShareButton />

        </div>

      }

      <div className='px-2 pb-2'>

        <FeedCommentSection

          feedId={feed_unique}

          image={owner_image}

          addUrl={comment_add_url}

          updateTotalComments={(total) => setTotalComments(total)}

          comments={comments}

          isShow={showComments}

        />

      </div>

    </div>

  )

}

const Content = ({

  ownerDescription,

  ownerFileImage,

  ownerFileImagepreview,

  ownerFileVideo,

  ownerFileDocument,

  sharedItem

}) => {

  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>

      }

      {sharedItem.name &&

        <div className="p-3">

          <Feed

            isShare={true}

            owner_name={sharedItem.name}

            owner_image={sharedItem.image}

            owner_time_elapse={sharedItem.time_elapse}

            owner_description={sharedItem.description}

            owner_file_video={sharedItem.file_video}

            owner_file_image_preview={sharedItem.file_image_preview}

            owner_file_image={sharedItem.file_image}

            owner_file_document={sharedItem.file_document}

            owner_url={sharedItem.shared_url}

          />

        </div>

      }

    </>

  )

}

const Header = ({

  image = '',

  name = '',

  timeElapsed = '',

  deleteUrl = '',

  viewUrl = '',

  feedUnique = ''

}) => {

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const [displayOption, setDisplayOption] = useState(false)

  const deleteButton = useRef();

  const dispatch = useDispatch()

  const handleShowConfirmModal = () => setShowConfirmModal(!showConfirmModal);

  const deleteFeedHandler = () => {

    axios.post(deleteUrl)

      .then((res) => {

        const { data } = res

        if (!data.success) {

          dispatch(addNotification({ style: "danger", msg: data.data }))

          return

        }

        dispatch(addNotification({ style: "success", msg: data.data }))

        handleShowConfirmModal()

        dispatch(deleteFeed(feedUnique));

      });

  };

  useEffect(() => {

    const handleClickOutside = (event) => {

      if (deleteButton.current && !deleteButton.current.contains(event.target)) {

        setDisplayOption(false)

      }

    }

    document.addEventListener("mousedown", handleClickOutside);

    return () => {

      document.removeEventListener("mousedown", handleClickOutside);

    };

  }, [deleteButton]);

  return (

    <div className='feed__header'>

      <Avatar

        imageUrl={image}

        name={name}

        size='xl'

      />

      <div className='feed__info'>

        <a href={viewUrl}>

          <h2>{name}</h2>

        </a>

        <div className='time__elapse'>

          <p>

            {timeElapsed}

          </p>

          <AccessTimeIcon className='time__elapse-icon' />

        </div>

      </div>

      {deleteUrl &&

        <div className="cursor-pointer d-flex align-items-center">

          <img

            src='/images/icons/options.png'

            className='cursor-pointer img-icon options'

            onClick={() => setDisplayOption(!displayOption)}

          />

          <div className={`feed-options ${displayOption ? 'active' : ''}`}>

            <ul>

              <li>

                <button

                  className="option-btn"

                  onClick={handleShowConfirmModal}

                  ref={deleteButton}

                >

                  <i className="fa fa-trash-o mr-1" />

                  Borrar

                </button>

              </li>

            </ul>

          </div>

          <ConfirmModal

            show={showConfirmModal}

            onClose={() => handleShowConfirmModal(false)}

            onAccept={deleteFeedHandler}

            acceptLabel="Aceptar"

          />

        </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)