Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useSelector } from 'react-redux';

import { useParams } from 'react-router-dom';

import { Box, Button, Typography } from '@mui/material';

import { FileDownload } from '@mui/icons-material';

import { parse } from '@shared/utils';

import { useKnowledge } from '@knowledges/hooks';

import { withReactions } from '@hocs';

import {

  Card,

  CardActions,

  CardContent,

  CardMedia,

  CommentForm,

  CommentList,

  PageHeader,

  Spinner

} from '@shared/components';

export default function KnowledgePage() {

  const labels = useSelector(({ intl }) => intl.labels);

  const { uuid } = useParams();

  const { knowledge, comments, loading, addComment, deleteComment } = useKnowledge(uuid);

  const ReactionsButton = withReactions(Button);

  if (loading) return <Spinner />;

  return (

    <>

      <PageHeader title={knowledge.title} goBack />

      <Card>

        <CardMedia

          src={knowledge.image}

          alt={`${knowledge.title} image`}

          styles={{ width: '100%', maxHeight: '400px' }}

        />

        <CardContent>

          <Typography variant='h2'>{knowledge.title}</Typography>

          <Typography variant='caption'>{knowledge.category}</Typography>

          <Typography>{parse(knowledge.description)}</Typography>

        </CardContent>

        <CardActions>

          <ReactionsButton

            currentReactionType={knowledge.reaction}

            deleteUrl={knowledge.routeDeleteReaction}

            saveUrl={knowledge.routeSaveReaction}

            onReaction={() => {}}

          />

          {knowledge.attachment && (

            <Button component='a' href={knowledge.attachment} download>

              <FileDownload />

              {labels.knowledge_area_download_attachment}

            </Button>

          )}

          {knowledge.link && (

            <Button component='a' href={knowledge.link} target='_blank' rel='noreferrer'>

              {labels.knowledge_area_go_to_link}

            </Button>

          )}

        </CardActions>

        <CardActions>

          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>

            <CommentForm onSubmit={addComment} />

            <CommentList comments={comments} onDelete={deleteComment} />

          </Box>

        </CardActions>

      </Card>

    </>

  );

}