Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { axios } from '../../utils'
import { Card, CardContent, CardMedia, Typography } from '@mui/material'
import styled from 'styled-components'
import { Container } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

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

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

  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">
      <KnowledgeCard>
        <CardMedia
          component="img"
          height="194"
          image={knowledge.image}
          alt={`${knowledge.title} image`}
        />
        <CardContent>
          <Typography variant="h5">{knowledge.title}</Typography>
          <Typography variant="subtitle1" color="text.secondary">
            {knowledge.category}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {knowledge.description}
          </Typography>
        </CardContent>
      </KnowledgeCard>
    </Container>
  )
}

export default KnowledgeViewPage