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, SendOutlined, ShareOutlined } from '@mui/icons-material'

import { axios } from '@app/utils'
import { feedTypes } from '@app/redux/feed/feed.types'
import { addNotification } from '@app/redux/notification/notification.actions'
import { openShareModal } from '@app/redux/share-modal/shareModal.actions'
import { shareModalTypes } from '@app/redux/share-modal/shareModal.types'
import withReactions from '@app/hocs/withReaction'
import withExternalShare from '../linkedin/withExternalShare'

import Widget from '@components/UI/Widget'
import CommentForm from '../linkedin/comments/comment-form'
import CommentsList from '../linkedin/comments/comment-list'
import FeedReactions from '../linkedin/feed/FeedReactions'

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,
    owner_comments: totalComments,
    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 [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 addComment = (comment, comment_add_url) => {
    const formData = new FormData()
    formData.append('comment', comment)

    axios.post(comment_add_url, formData).then((response) => {
      const { success, data, total_comments } = response.data

      if (!success) {
        dispatch(
          addNotification({
            style: 'danger',
            msg:
              typeof data === 'string'
                ? data
                : 'Error interno. Intente más tarde.'
          })
        )
        return
      }

      dispatch(
        addComment({
          feedId: feedUnique,
          comment: data,
          totalComments: total_comments
        })
      )
    })
  }

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

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

        <Row>
          <Typography
            variant='body2'
            sx={{ display: totalComments ? 'inline-flex' : 'none' }}
          >
            {`${totalComments} ${labels.comments?.toLowerCase()}`}
          </Typography>

          <Typography
            variant='body2'
            sx={{ display: totalShared ? 'inline-flex' : 'none' }}
          >
            {`${totalShared} ${labels.shared?.toLowerCase()}`}
          </Typography>

          <Typography
            variant='body2'
            sx={{ display: externalShare ? 'inline-flex' : 'none' }}
          >
            {`${externalShare} ${labels.sends?.toLowerCase()}`}
          </Typography>
        </Row>
      </Row>
      <Widget.Actions
        styles={{ display: contentType === 'fast-survey' ? 'none' : 'flex' }}
      >
        <ReactionButton
          currentReactionType={reaction}
          saveUrl={saveReactionUrl}
          deleteUrl={deleteReactionUrl}
          onReaction={updateReactions}
        />
        <Button onClick={toggleComments}>
          <ChatOutlined />
          {labels.comment}
        </Button>
        <Button onClick={shareFeed}>
          <ShareOutlined />
          {labels.share}
        </Button>
        <ExternalShareButton
          shorterUrl={incrementExternalCounterUrl}
          setValue={setTotalShares}
        >
          <SendOutlined />
          {labels.send}
        </ExternalShareButton>
      </Widget.Actions>
      <Box
        sx={{
          display: showComments ? 'block' : 'none'
        }}
      >
        <CommentForm onSubmit={addComment} />
        <CommentsList comments={comments} />
      </Box>
    </>
  )
}