Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3694 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
 - 
 
3 
import { useParams } from 'react-router-dom';
 2 
import { useParams } from 'react-router-dom';
4 
import { Box, Button, Typography } from '@mui/material';
 3 
import { Box, Button, Typography } from '@mui/material';
5 
import FileDownload from '@mui/icons-material/FileDownload';
 4 
import FileDownload from '@mui/icons-material/FileDownload';
6 
 
 5 
 
7 
import { parse } from '@shared/utils';
 6 
import { parse } from '@shared/utils';
8 
import { useKnowledge } from '@knowledges/hooks';
 7 
import { useKnowledge } from '@knowledges/hooks';
9 
 
 8 
 
10 
import { withReactions } from '@hocs';
 9 
import { withReactions } from '@hocs';
11 
 
 10 
 
12 
import {
 11 
import {
13 
  Card,
 12 
  Card,
14 
  CardActions,
 13 
  CardActions,
15 
  CardContent,
 14 
  CardContent,
16 
  CardMedia,
 15 
  CardMedia,
17 
  CommentForm,
 16 
  CommentForm,
18 
  CommentList,
 17 
  CommentList,
19 
  PageHeader,
 18 
  PageHeader,
20 
  Spinner
 19 
  Spinner
21 
} from '@shared/components';
 20 
} from '@shared/components';
22 
 
 21 
 
23 
export default function KnowledgePage() {
 22 
export default function KnowledgePage() {
24 
  const labels = useSelector(({ intl }) => intl.labels);
 - 
 
25 
  const { uuid } = useParams();
 23 
  const { uuid } = useParams();
26 
 
 24 
 
27 
  const { knowledge, comments, loading, addComment, deleteComment } = useKnowledge(uuid);
 25 
  const { knowledge, comments, loading, addComment, deleteComment } = useKnowledge(uuid);
28 
 
 26 
 
29 
  const ReactionsButton = withReactions(Button);
 27 
  const ReactionsButton = withReactions(Button);
30 
 
 28 
 
31 
  if (loading) return <Spinner />;
 29 
  if (loading) return <Spinner />;
32 
 
 30 
 
33 
  return (
 31 
  return (
34 
    <>
 32 
    <>
35 
      <PageHeader title={knowledge.title} goBack />
 33 
      <PageHeader title='Area de conocimiento' goBack />
36 
 
 34 
 
37 
      <Card>
 35 
      <Card>
38 
        <CardMedia
 36 
        <CardMedia
39 
          src={knowledge.image}
 37 
          src={knowledge.image}
40 
          alt={`${knowledge.title} image`}
 38 
          alt={`${knowledge.title} image`}
41 
          styles={{ width: '100%', maxHeight: '400px' }}
 39 
          styles={{ width: '100%', maxHeight: '400px' }}
42 
        />
 40 
        />
43 
        <CardContent>
 41 
        <CardContent>
44 
          <Typography variant='h2'>{knowledge.title}</Typography>
 42 
          <Typography variant='h2'>{knowledge.title}</Typography>
45 
          <Typography variant='caption'>{knowledge.category}</Typography>
 43 
          <Typography variant='caption'>{knowledge.category}</Typography>
46 
          <Typography>{parse(knowledge.description)}</Typography>
 44 
          <Typography>{parse(knowledge.description)}</Typography>
47 
        </CardContent>
 45 
        </CardContent>
48 
 
 46 
 
49 
        <CardActions>
 47 
        <CardActions>
50 
          <ReactionsButton
 48 
          <ReactionsButton
51 
            currentReactionType={knowledge.reaction}
 49 
            currentReactionType={knowledge.reaction}
52 
            deleteUrl={knowledge.routeDeleteReaction}
 50 
            deleteUrl={knowledge.routeDeleteReaction}
53 
            saveUrl={knowledge.routeSaveReaction}
 51 
            saveUrl={knowledge.routeSaveReaction}
54 
            onReaction={() => {}}
 52 
            onReaction={() => {}}
55 
          />
 53 
          />
56 
 
 54 
 
57 
          {knowledge.attachment && (
 55 
          {knowledge.attachment && (
58 
            <Button component='a' href={knowledge.attachment} download>
 56 
            <Button component='a' href={knowledge.attachment} download>
59 
              <FileDownload />
 57 
              <FileDownload />
60 
              {labels.knowledge_area_download_attachment}
 58 
              Descargar archivo
61 
            </Button>
 59 
            </Button>
62 
          )}
 60 
          )}
63 
          {knowledge.link && (
 61 
          {knowledge.link && (
64 
            <Button component='a' href={knowledge.link} target='_blank' rel='noreferrer'>
 62 
            <Button component='a' href={knowledge.link} target='_blank' rel='noreferrer'>
65 
              {labels.knowledge_area_go_to_link}
 63 
              Ir al enlace
66 
            </Button>
 64 
            </Button>
67 
          )}
 65 
          )}
68 
        </CardActions>
 66 
        </CardActions>
69 
 
 67 
 
70 
        <CardActions>
 68 
        <CardActions>
71 
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
 69 
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
72 
            <CommentForm onSubmit={addComment} />
 70 
            <CommentForm onSubmit={addComment} />
73 
            <CommentList comments={comments} onDelete={deleteComment} />
 71 
            <CommentList comments={comments} onDelete={deleteComment} />
74 
          </Box>
 72 
          </Box>
75 
        </CardActions>
 73 
        </CardActions>
76 
      </Card>
 74 
      </Card>
77 
    </>
 75 
    </>
78 
  );
 76 
  );
79 
}
 77 
}