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);

  }

`

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 changeReaction = ({ reactions }) => {

    setKnowledge((prevKnowledge) => ({ ...prevKnowledge }))

  }

  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

                onChange={changeReaction}

                currentReaction={knowledge.reaction}

                withLabel

                deleteUrl={knowledge.routeDeleteReaction}

                saveUrl={knowledge.routeSaveReaction}

              />

              {knowledge.attachment && (

                <a

                  href={knowledge.attachment}

                  download

                  className="btn reaction-btn"

                >

                  <FileDownloadIcon />

                  {labels.knowledge_area_download_attachment}

                </a>

              )}

              {knowledge.link && (

                <a

                  href={knowledge.link}

                  className="btn reaction-btn"

                  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