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 RecommendIcon from '@mui/icons-material/Recommend';

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,

  owner_external_shared,

  shared_file_document,

  shared_url,

  feed_increment_external_counter_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 [externalShare, setExternalShare] = useState(owner_external_shared);

  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 handleExternalShare = (value) => setExternalShare(value)

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

  const ExternalShareButton = withExternalShare(InputOption, feed_share_external_url, {

    Icon: SendOutlinedIcon,

     color: 'gray',

     title: 'Send',

     shareUrl: feed_increment_external_counter_url,

     setValue: handleExternalShare

     })

  useEffect(() => setSharedState(owner_shared), [owner_shared]);

  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="px-3 d-flex align-items-center justify-content-between">

          {!!likesState &&

            <div className="d-inline-flex align-items-center" style={{ gap: '.5rem' }}>

              <RecommendIcon style={{ color: '#7405f9' }} />

              <span>{likesState}</span>

            </div>}

          <div className="d-inline-flex align-items-center" style={{ gap: '5px' }}>

            {!!totalComments && <span>{`${totalComments} comentarios`}</span>}

            {!!sharedState && <span>{`${sharedState} compartidos`}</span>}

            {!!externalShare && <span>{`${externalShare} enviados`}</span>}

          </div>

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

}) => {

  const [isReadMoreActive, setIsReadMoreActive] = useState(false);

  const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)

  const htmlParsedText = (fullStringText) => {

    const fullText = parse(fullStringText)

    if (fullStringText.length > 500) {

      const shortenedString = fullStringText.substr(0, 500);

      const shortenedText = parse(`${shortenedString}... `);

      return (

        <>

          {isReadMoreActive ? fullText : shortenedText}

          <span className='cursor-pointer' onClick={readMoreHandler}>

            {isReadMoreActive ? " Leer menos" : " Leer más"}

          </span>

        </>

      );

    }

    return <p>{fullText}</p>

  }

  return (

    <>

      {ownerDescription && htmlParsedText(ownerDescription)}

      {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'>

      <div className="d-inline-flex" style={{ gap: '.5rem' }}>

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

      </div>

      {deleteUrl &&

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

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