Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useParams } from 'react-router-dom'
import { Col, Container, Row } from 'react-bootstrap'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch, useSelector } from 'react-redux'
import {
  Card,
  CardActions,
  CardContent,
  CardMedia,
  Typography,
} from '@mui/material'
import parse from 'html-react-parser'
import styled from 'styled-components'
import FileDownloadIcon from '@mui/icons-material/FileDownload'

import ReactionsButton from '../../components/UI/buttons/ReactionsButton'
import { CommentForm, CommentsList } from '../../components/feed/CommentSection'

const KnowledgeCard = styled(Card)`
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  overflow: visible;
  height: fit-content;

  & > img {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
  }
`

const KnowledgeActions = styled(CardActions)`
  & > * {
    flex: 1;
    max-width: calc(100% / 3);
    position: relative;
  }
`

const KnowledgeViewPage = () => {
  const [comments, setComments] = useState([])
  const [knowledge, setKnowledge] = useState({
    category: '',
    title: '',
    description: '',
    link: null,
    image: '',
    attachment: '',
    reaction: '',
    routeComments: '',
    routeCommentAdd: '',
    routeSaveReaction: '',
    routeDeleteReaction: '',
  })
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()
  const { uuid } = useParams()

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

    axios.post(knowledge.routeCommentAdd, 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(() => {
    axios
      .get(`/knowledge-area/view/${uuid}`, {
        headers: {
          'Content-Type': 'application/json',
        },
      })
      .then((response) => {
        const { data, success } = response.data
        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

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

        setKnowledge(data)
      })
      .catch((err) => {
        dispatch(
          addNotification({
            style: 'danger',
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
          })
        )
        throw new Error(err)
      })
  }, [uuid])

  useEffect(() => {
    if (!knowledge.routeComments) return

    axios
      .get(knowledge.routeComments)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

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

        setComments(data)
      })
      .catch((err) => {
        dispatch(
          addNotification({
            style: 'danger',
            msg: 'Error interno. Por favor, inténtelo de nuevo más tarde.',
          })
        )
        throw new Error(err)
      })
  }, [knowledge])

  return (
    <Container as="section">
      <h2 className="text-center mb-3">{labels.knowledge_area_title}</h2>
      <Row>
        <Col className="mx-auto" md="8">
          <KnowledgeCard>
            <CardMedia
              component="img"
              height="250"
              image={knowledge.image}
              alt={`${knowledge.title} image`}
            />
            <CardContent>
              <Typography variant="h5">{knowledge.title}</Typography>
              <Typography variant="subtitle1" color="text.secondary">
                {knowledge.category}
              </Typography>
              {knowledge.description && parse(knowledge.description)}
            </CardContent>
            <KnowledgeActions>
              <ReactionsButton
                className="btn feed__share-option"
                currentReaction={knowledge.reaction}
                withLabel
                deleteUrl={knowledge.routeDeleteReaction}
                saveUrl={knowledge.routeSaveReaction}
              />

              {knowledge.attachment && (
                <a
                  href={knowledge.attachment}
                  download
                  className="btn feed__share-option"
                >
                  <FileDownloadIcon />
                  {labels.knowledge_area_download_attachment}
                </a>
              )}
              {knowledge.link && (
                <a
                  href={knowledge.link}
                  className="btn feed__share-option"
                  target="_blank"
                  rel="noreferrer"
                >
                  {labels.knowledge_area_go_to_link}
                </a>
              )}
            </KnowledgeActions>
            <div className="px-3">
              <CommentForm onSubmit={addComment} />
              <CommentsList comments={comments} onDelete={deleteComment} />
            </div>
          </KnowledgeCard>
        </Col>
      </Row>
    </Container>
  )
}

export default KnowledgeViewPage