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>

    </>

  );

}