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