Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7065 | Rev 7067 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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