Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Box, Button, styled, Typography } from '@mui/material';
import ChatOutlined from '@mui/icons-material/ChatOutlined';
import SendOutlined from '@mui/icons-material/SendOutlined';
import ShareOutlined from '@mui/icons-material/ShareOutlined';

import { withReactions } from '@hocs';
import { feedTypes } from '@store/feed/feed.types';
import { shareModalTypes } from '@store/share-modal/shareModal.types';
import { openShareModal } from '@store/share-modal/shareModal.actions';

import Widget from '@components/UI/Widget';
import Comments from '../linkedin/comments/comments';
import Reactions from '../reactions/reactions';
import withExternalShare from '../linkedin/withExternalShare';

const Row = styled(Box)(({ theme }) => ({
  display: 'flex',
  padding: theme.spacing(0.5),
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: theme.spacing(0.5)
}));

export default function FeedActions({ id }) {
  const {
    comments,
    comment_add_url: commentAddUrl,
    owner_comments: ownerComments,
    feed_reactions_url: reactionsUrl,
    feed_content_type: contentType,
    owner_shared: totalShared,
    feed_share_external_url: shareExternalUrl,
    feed_save_reaction_url: saveReactionUrl,
    feed_delete_reaction_url: deleteReactionUrl,
    feed_increment_external_counter_url: incrementExternalCounterUrl,
    feed_my_reaction: feedMyReaction,
    feed_reactions: feedReactions,
    owner_external_shared: ownerExternalShared,
    feed_share_url: feedShareUrl,
    feed_unique: feedUnique
  } = useSelector(({ feed }) => feed.feeds.byId[id]);
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();

  const [totalComments, setTotalComments] = useState(ownerComments);
  const [reaction, setReaction] = useState(feedMyReaction);
  const [ownerReactions, setOwnerReactions] = useState(feedReactions);
  const [externalShare, setExternalShare] = useState(ownerExternalShared);
  const [showComments, setShowComments] = useState(false);

  const setTotalShares = (value) => setExternalShare(value);

  const toggleComments = () => setShowComments((prev) => !prev);

  const updateReactions = ({ reactions }, currentReaction) => {
    setOwnerReactions(reactions);
    setReaction(currentReaction);
  };

  const shareFeed = () => {
    dispatch(openShareModal(feedShareUrl, shareModalTypes.SHARE, feedTypes.DASHBOARD, feedUnique));
  };

  const ExternalShareButton = withExternalShare(Button, shareExternalUrl);
  const ReactionButton = withReactions(Button);

  return (
    <>
      <Row>
        <Reactions reactions={ownerReactions} reactionsUrl={reactionsUrl} />

        <Row>
          {totalComments ? (
            <Typography variant='overline'>
              {`${totalComments} ${labels.comments?.toLowerCase()}`}
            </Typography>
          ) : null}

          {totalShared ? (
            <Typography variant='overline'>
              {`${totalShared} ${labels.shared?.toLowerCase()}`}
            </Typography>
          ) : null}

          {externalShare ? (
            <Typography variant='overline'>
              {`${externalShare} ${labels.sends?.toLowerCase()}`}
            </Typography>
          ) : null}
        </Row>
      </Row>
      <Widget.Actions styles={{ display: contentType === 'fast-survey' ? 'none' : 'flex' }}>
        <ReactionButton
          currentReactionType={reaction}
          saveUrl={saveReactionUrl}
          deleteUrl={deleteReactionUrl}
          onReaction={updateReactions}
        />
        <Button onClick={toggleComments}>
          <ChatOutlined />
          <Typography sx={{ display: { xs: 'none', md: 'inline-flex' } }} variant='overline'>
            {labels.comment}
          </Typography>
        </Button>
        <Button onClick={shareFeed}>
          <ShareOutlined />
          <Typography sx={{ display: { xs: 'none', md: 'inline-flex' } }} variant='overline'>
            {labels.share}
          </Typography>
        </Button>
        <ExternalShareButton shorterUrl={incrementExternalCounterUrl} setValue={setTotalShares}>
          <SendOutlined />
          <Typography sx={{ display: { xs: 'none', md: 'inline-flex' } }} variant='overline'>
            {labels.send}
          </Typography>
        </ExternalShareButton>
      </Widget.Actions>
      <Box
        sx={{
          display: showComments ? 'block' : 'none',
          padding: 0.5
        }}
      >
        <Comments
          comments={comments}
          addUrl={commentAddUrl}
          onAdd={({ totalComments }) => setTotalComments(totalComments)}
        />
      </Box>
    </>
  );
}