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',

          padding: 0.5

        }}

      >

        <CommentForm onSubmit={addComment} />

        <CommentsList comments={comments} />

      </Box>

    </>

  )

}