Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7067 | Rev 7080 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7065 stevensc 1 
import React, { useEffect, useState } from 'react'
7066 stevensc 2 
import { axios } from '../../utils'
7062 stevensc 3 
import { useParams } from 'react-router-dom'
7066 stevensc 4 
import { Col, Container, Row } from 'react-bootstrap'
5 
import { addNotification } from '../../redux/notification/notification.actions'
6 
import { useDispatch, useSelector } from 'react-redux'
7 
import {
8 
  Card,
9 
  CardActions,
10 
  CardContent,
11 
  CardMedia,
12 
  Typography,
13 
} from '@mui/material'
14 
import parse from 'html-react-parser'
7065 stevensc 15 
import styled from 'styled-components'
7066 stevensc 16 
import FileDownloadIcon from '@mui/icons-material/FileDownload'
7062 stevensc 17 
 
7066 stevensc 18 
import ReactionsButton from '../../components/UI/buttons/ReactionsButton'
19 
 
7065 stevensc 20 
const KnowledgeCard = styled(Card)`
21 
  background-color: var(--bg-color);
22 
  border-radius: var(--border-radius);
7068 stevensc 23 
  overflow: visible;
7065 stevensc 24 
  height: fit-content;
7068 stevensc 25 
 
26 
  & > img {
27 
    border-top-right-radius: var(--border-radius);
28 
    border-top-left-radius: var(--border-radius);
29 
  }
7065 stevensc 30 
`
31 
 
7066 stevensc 32 
const KnowledgeActions = styled(CardActions)`
7067 stevensc 33 
  & > * {
7066 stevensc 34 
    flex: 1;
35 
    max-width: calc(100% / 3);
36 
  }
37 
`
38 
 
7062 stevensc 39 
const KnowledgeViewPage = () => {
7065 stevensc 40 
  const [knowledge, setKnowledge] = useState({
41 
    category: '',
42 
    title: '',
43 
    description: '',
44 
    link: null,
45 
    image: '',
46 
    attachment: '',
47 
    reaction: '',
48 
    routeComments: '',
49 
    routeCommentAdd: '',
50 
    routeSaveReaction: '',
51 
    routeDeleteReaction: '',
52 
  })
53 
  const labels = useSelector(({ intl }) => intl.labels)
54 
  const dispatch = useDispatch()
7062 stevensc 55 
  const { uuid } = useParams()
56 
 
7066 stevensc 57 
  const changeReaction = (reaction) => {
58 
    setKnowledge((prevKnowledge) => ({ ...prevKnowledge, reaction }))
59 
  }
60 
 
7062 stevensc 61 
  useEffect(() => {
62 
    axios
63 
      .get(`/knowledge-area/view/${uuid}`, {
64 
        headers: {
65 
          'Content-Type': 'application/json',
66 
        },
67 
      })
7065 stevensc 68 
      .then((response) => {
69 
        const { data, success } = response.data
70 
        if (!success) {
71 
          const errorMessage =
72 
            typeof data === 'string' ? data : labels.error_there_was_an_error
73 
 
74 
          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
75 
          return
76 
        }
77 
 
78 
        setKnowledge(data)
79 
      })
80 
      .catch((err) => {
81 
        dispatch(
82 
          addNotification({
83 
            style: 'danger',
84 
            msg: labels.error_there_was_an_error,
85 
          })
86 
        )
87 
        throw new Error(err)
88 
      })
7062 stevensc 89 
  }, [uuid])
90 
 
7065 stevensc 91 
  return (
92 
    <Container as="section">
7066 stevensc 93 
      <Row>
94 
        <Col className="mx-auto" md="8">
95 
          <KnowledgeCard>
96 
            <CardMedia
97 
              component="img"
7067 stevensc 98 
              height="250"
7066 stevensc 99 
              image={knowledge.image}
100 
              alt={`${knowledge.title} image`}
101 
            />
102 
            <CardContent>
103 
              <Typography variant="h5">{knowledge.title}</Typography>
104 
              <Typography variant="subtitle1" color="text.secondary">
105 
                {knowledge.category}
106 
              </Typography>
107 
              {knowledge.description && parse(knowledge.description)}
108 
            </CardContent>
7067 stevensc 109 
            <KnowledgeActions>
7068 stevensc 110 
              <ReactionsButton
111 
                onChange={changeReaction}
112 
                currentReaction={knowledge.reaction}
113 
                withLabel
114 
                deleteUrl={knowledge.routeDeleteReaction}
115 
                reactionTypesUrl={{
116 
                  r: knowledge.routeSaveReaction,
117 
                  s: knowledge.routeSaveReaction,
118 
                  l: knowledge.routeSaveReaction,
119 
                  i: knowledge.routeSaveReaction,
120 
                  f: knowledge.routeSaveReaction,
121 
                }}
122 
              />
123 
 
7066 stevensc 124 
              {knowledge.attachment && (
7068 stevensc 125 
                <a
126 
                  href={knowledge.attachment}
127 
                  download
128 
                  className="btn reaction-btn"
129 
                >
130 
                  <FileDownloadIcon />
131 
                  {labels.knowledge_area_download_attachment}
132 
                </a>
7066 stevensc 133 
              )}
134 
              {knowledge.link && (
7068 stevensc 135 
                <a
136 
                  href={knowledge.link}
137 
                  className="btn reaction-btn"
138 
                  target="_blank"
139 
                  rel="noreferrer"
140 
                >
141 
                  {labels.knowledge_area_go_to_link}
142 
                </a>
7066 stevensc 143 
              )}
144 
            </KnowledgeActions>
145 
          </KnowledgeCard>
146 
        </Col>
147 
      </Row>
7065 stevensc 148 
    </Container>
149 
  )
7062 stevensc 150 
}
151 
 
152 
export default KnowledgeViewPage