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'

const KnowledgeCard = styled(Card)`

  background-color: var(--bg-color);

  border-radius: var(--border-radius);

  overflow: hidden;

  height: fit-content;

`

const KnowledgeActions = styled(CardActions)`

  & > * {

    flex: 1;

    max-width: calc(100% / 3);

  }

`

const KnowledgeViewPage = () => {

  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 = (reaction) => {

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

  }

  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 : labels.error_there_was_an_error

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

          return

        }

        setKnowledge(data)

      })

      .catch((err) => {

        dispatch(

          addNotification({

            style: 'danger',

            msg: labels.error_there_was_an_error,

          })

        )

        throw new Error(err)

      })

  }, [uuid])

  return (

    <Container as="section">

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

              <li>

                <ReactionsButton

                  onChange={changeReaction}

                  currentReaction={knowledge.reaction}

                  withLabel

                  deleteUrl={knowledge.routeDeleteReaction}

                  reactionTypesUrl={{

                    r: knowledge.routeSaveReaction,

                    s: knowledge.routeSaveReaction,

                    l: knowledge.routeSaveReaction,

                    i: knowledge.routeSaveReaction,

                    f: knowledge.routeSaveReaction,

                  }}

                />

              </li>

              {knowledge.attachment && (

                <li>

                  <a

                    href={knowledge.attachment}

                    download

                    className="btn reaction-btn"

                  >

                    <FileDownloadIcon />

                    {labels.knowledge_area_download_attachment}

                  </a>

                </li>

              )}

              {knowledge.link && (

                <li>

                  <a

                    href={knowledge.link}

                    className="btn reaction-btn"

                    target="_blank"

                    rel="noreferrer"

                  >

                    {labels.knowledge_area_go_to_link}

                  </a>

                </li>

              )}

            </KnowledgeActions>

          </KnowledgeCard>

        </Col>

      </Row>

    </Container>

  )

}

export default KnowledgeViewPage