Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useSelector } from 'react-redux';

import { Box, Typography } from '@mui/material';

import SendOutlined from '@mui/icons-material/SendOutlined';

import ChatOutlined from '@mui/icons-material/ChatOutlined';

import { parse } from '@utils';

import { withReactions } from '@hocs';

import withExternalShare from '@components/dashboard/linkedin/withExternalShare';

import Button from '@components/UI/buttons/Buttons';

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

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

import Widget from '../UI/Widget';

import PostFile from './PostFile';

import Reactions from '@components/dashboard/reactions/reactions';

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 displayCommentSection = () => {

    setShowComments(!showComments);

  };

  const ExternalShareButton = withExternalShare(Button, share_external_url);

  const ReactionButton = withReactions(Button);

  return (

    <Widget>

      <Widget.Media src={image} alt={title} height={450} />

      <Widget.Body>

        <h2>{title}</h2>

        <Typography>{parse(description)}</Typography>

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

      </Widget.Body>

      <Box

        sx={{

          display: 'flex',

          justifyContent: 'space-between',

          alignItems: 'center',

          padding: '0 0.5rem'

        }}

      >

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

        {total_share_external ? (

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

        ) : null}

      </Box>

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

        <ExternalShareButton

          shorterUrl={share_increment_external_counter_url}

          setValue={updateTotalShare}

        >

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

          {labels.send}

        </ExternalShareButton>

      </Widget.Actions>

      {showComments ? (

        <Box

          sx={{

            padding: '0.5rem'

          }}

        >

          <CommentForm onSubmit={addComment} />

          <CommentsList comments={comments} />

        </Box>

      ) : null}

    </Widget>

  );

}

export default PostCard;