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'

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

}) => {

  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}

      />

      <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_like_url : feed_unlike_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

}) => {

  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

export default Feed