Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useLocation } from 'react-router-dom'
import { getBackendVars } from '../../services/backendVars'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch, useSelector } from 'react-redux'
import { CommentForm, CommentsList } from '../../components/feed/CommentSection'
import { Container, Grid } from '@mui/material'
import parse from 'html-react-parser'

import TungstenIcon from '@mui/icons-material/Tungsten'
import RecommendIcon from '@mui/icons-material/Recommend'
import FavoriteIcon from '@mui/icons-material/FavoriteTwoTone'
import SendOutlinedIcon from '@mui/icons-material/SendOutlined'
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
import EmojiEmotionsIcon from '@mui/icons-material/EmojiEmotions'
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'

import HomeNews from '../../components/widgets/default/HomeNews'
import InputOption from '../../components/dashboard/linkedin/action-button/InputOption'
import withExternalShare from '../../components/dashboard/linkedin/withExternalShare'
import Paraphrase from '../../components/UI/Paraphrase'
import StyledContainer from '../../components/widgets/WidgetLayout'
import withReactions from '../../hocs/withReaction'
import MobileShare from '../../components/dashboard/linkedin/mobile-share/MobileShare'

const PostViewPage = () => {
  const [post, setPost] = useState({})
  const [totalSends, setTotalSends] = useState(0)
  const [reactions, setReactions] = useState([])
  const [myReaction, setMyReaction] = useState('')
  const [totalReactions, setTotalReactions] = useState(0)
  const [isMobile, setIsMobile] = useState(false)
  const [comments, setComments] = useState([])
  const [showComments, setShowComments] = useState(false)
  const { pathname } = useLocation()
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const reactionsOptions = [
    {
      type: 'r',
      icon: <RecommendIcon style={{ color: '#7405f9' }} />
    },
    {
      type: 's',
      icon: <VolunteerActivismIcon style={{ color: '#6495ED' }} />
    },
    {
      type: 'l',
      icon: <FavoriteIcon style={{ color: '#DF704D' }} />
    },
    {
      type: 'i',
      icon: (
        <TungstenIcon
          style={{ color: '#F5BB5C', transform: 'rotate(180deg)' }}
        />
      )
    },
    {
      type: 'f',
      icon: <EmojiEmotionsIcon style={{ color: '#FF7F50' }} />
    }
  ]

  const displayCommentSection = () => {
    setShowComments(!showComments)
  }

  const getComments = () => {
    axios.get(post.comments_url).then((response) => {
      const { data, success } = response.data

      if (!success) {
        const errorMessage =
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'

        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
        return
      }

      setComments(data)
    })
  }

  const handleExternalShare = (value) => {
    setTotalSends(value)
  }

  const ExternalShareButton = withExternalShare(
    InputOption,
    post.share_external_url
  )

  const ReactionButton = withReactions(InputOption)

  const addComment = (comment) => {
    const formData = new FormData()
    formData.append('comment', comment)

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

      if (!success) {
        const errorMessage =
          typeof data === 'string' ? data : 'Error interno. Intente más tarde.'

        dispatch(addNotification({ style: 'danger', msg: errorMessage }))
        return
      }

      setComments((prevMessages) => [...prevMessages, data])
    })
  }

  const deleteComment = (commentUnique, deleteCommentUrl) => {
    axios
      .post(deleteCommentUrl)
      .then((response) => {
        const { success, data } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Intente más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        setComments((prevComments) =>
          prevComments.filter((comment) => comment.unique !== commentUnique)
        )
        dispatch(addNotification({ style: 'success', msg: data }))
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error }))
        throw new Error(error)
      })
  }

  useEffect(() => {
    getBackendVars(pathname)
      .then((post) => {
        setMyReaction(post.my_reaction)
        setTotalSends(post.total_share_external)
        setPost(post)
      })
      .catch(() => {
        dispatch(
          addNotification({
            style: 'danger',
            message: 'Error interno. Por favor, inténtelo de nuevo más tarde.'
          })
        )
      })
  }, [pathname])

  useEffect(() => {
    if (showComments && !comments.length) {
      getComments()
    }
  }, [showComments])

  useEffect(() => {
    const feedReactions = reactions.reduce(
      (acc, reaction) => acc + Number(reaction.total),
      0
    )

    setTotalReactions(feedReactions)
  }, [reactions])

  useEffect(() => {
    const ua = navigator.userAgent.toLowerCase()
    const isAndroid = ua.includes('android')

    if (isAndroid) {
      setIsMobile(true)
    }
  }, [])

  return (
    <Container as='main' className='px-0'>
      <Grid container spacing={2}>
        <Grid item xs={12} md={8}>
          <StyledContainer>
            <img
              src={post.image}
              style={{
                width: '100%',
                maxHeight: '450px',
                objectFit: 'contain'
              }}
            />
            <StyledContainer.Body>
              <h2>{post.title}</h2>
              <Paraphrase>{post.description}</Paraphrase>
              {post.file && (
                <a href={post.file} download>
                  <img src='/images/extension/pdf.png' alt='pdf' />
                </a>
              )}
            </StyledContainer.Body>

            <div className='d-flex justify-content-between align-items-center px-3'>
              <div className='reactions-counter'>
                {reactionsOptions
                  .filter((option) =>
                    reactions.find(({ reaction }) => reaction === option.type)
                  )
                  .map((reaction) => reaction.icon)}
                <span>{totalReactions} reacciones</span>
              </div>
              {!!totalSends && (
                <span>{`${totalSends} ${labels.sends?.toLowerCase()}`}</span>
              )}
            </div>

            <StyledContainer.Actions>
              <ReactionButton
                currentReaction={myReaction}
                saveUrl={post.save_reaction_url}
                deleteUrl={post.delete_reaction_url}
                onReaction={({ reactions, currentReaction }) => {
                  setReactions(reactions)
                  setMyReaction(currentReaction)
                }}
              />
              <InputOption
                icon={ChatOutlinedIcon}
                icGridor='gray'
                label={labels.comment}
                onClick={displayCommentSection}
              />

              {!isMobile ? (
                <ExternalShareButton
                  icon={SendOutlinedIcon}
                  iconColor='gray'
                  label={labels.send}
                  shareUrl={post.share_increment_external_counter_url}
                  setValue={handleExternalShare}
                />
              ) : (
                <MobileShare
                  shareData={{
                    title: 'Leaders Linked',
                    text: parse(post.description ?? ''),
                    url: post.share_external_url
                  }}
                >
                  <SendOutlinedIcon />
                  {labels.send}
                </MobileShare>
              )}
            </StyledContainer.Actions>

            {showComments && (
              <div className='px-3 pb-2'>
                <CommentForm onSubmit={addComment} />
                <CommentsList comments={comments} onDelete={deleteComment} />
              </div>
            )}
          </StyledContainer>
        </Grid>

        <Grid item xs={12} md={4}>
          <HomeNews currentPost={post.uuid} />
        </Grid>
      </Grid>
    </Container>
  )
}

export default PostViewPage