Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { useSelector } from 'react-redux'

import { SendOutlined, ChatOutlined } from '@mui/icons-material'

import parse from 'html-react-parser'

import useMobile from '@app/hooks/useMobile'

import withExternalShare from '../dashboard/linkedin/withExternalShare'

import withReactions from '@app/hocs/withReaction'

import Button from '../UI/buttons/Buttons'

import WidgetWrapper from '../widgets/WidgetLayout'

import Paraphrase from '../UI/Paraphrase'

import PostFile from './PostFile'

import FeedReactions from '../dashboard/linkedin/feed/FeedReactions'

import MobileShare from '../dashboard/linkedin/mobile-share/MobileShare'

import CommentForm from '../dashboard/linkedin/comments/comment-form'

import CommentsList from '../dashboard/linkedin/comments/comment-list'

function PostCard({

  post,

  addComment,

  updateReactions,

  updateMyReaction,

  updateTotalShare

}) {

  const {

    reactions,

    my_reaction,

    reactions_url,

    save_reaction_url,

    delete_reaction_url,

    total_share_external,

    image,

    title,

    description,

    file,

    type,

    comments,

    share_external_url,

    share_increment_external_counter_url

  } = post

  const [showComments, setShowComments] = useState(false)

  const labels = useSelector(({ intl }) => intl.labels)

  const isMobile = useMobile()

  const displayCommentSection = () => {

    setShowComments(!showComments)

  }

  const ExternalShareButton = withExternalShare(Button, post.share_external_url)

  const ReactionButton = withReactions(Button)

  return (

    <WidgetWrapper>

      <img

        src={image}

        style={{

          width: '100%',

          maxHeight: '450px',

          objectFit: 'contain'

        }}

      />

      <WidgetWrapper.Body>

        <h2>{title}</h2>

        <Paraphrase>{description}</Paraphrase>

        <PostFile file={file} type={type} />

      </WidgetWrapper.Body>

      <div className='d-flex justify-content-between align-items-center px-3'>

        <FeedReactions reactions={reactions} reactionsUrl={reactions_url} />

        {!!total_share_external && (

          <span>{`${total_share_external} ${labels.sends?.toLowerCase()}`}</span>

        )}

      </div>

      <WidgetWrapper.Actions>

        <ReactionButton

          currentReactionType={my_reaction}

          saveUrl={save_reaction_url}

          deleteUrl={delete_reaction_url}

          onReaction={({ reactions }, currentReaction) => {

            updateReactions(reactions)

            updateMyReaction(currentReaction)

          }}

        />

        <Button onClick={displayCommentSection}>

          <ChatOutlined style={{ color: 'gray' }} />

          {labels.comment}

        </Button>

        {!isMobile ? (

          <ExternalShareButton

            shorterUrl={share_increment_external_counter_url}

            setValue={updateTotalShare}

          >

            <SendOutlined style={{ color: 'gray' }} />

            {labels.send}

          </ExternalShareButton>

        ) : (

          <MobileShare

            shareData={{

              title: 'Leaders Linked',

              text: parse(description ?? ''),

              url: share_external_url

            }}

          >

            <SendOutlined />

            {labels.send}

          </MobileShare>

        )}

      </WidgetWrapper.Actions>

      {showComments && (

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

          <CommentForm onSubmit={addComment} />

          <CommentsList comments={comments} />

        </div>

      )}

    </WidgetWrapper>

  )

}

export default PostCard