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;