Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { Button, Typography } from '@mui/material';
import { FileDownload } from '@mui/icons-material';

import { withReactions } from '@hocs';
import { useKnowledge } from '@knowledges/hooks';
import { parse } from '@shared/utils';

import {
  Card,
  CardActions,
  CardContent,
  CardMedia,
  CommentForm,
  CommentsList,
  PageHeader
} from '@shared/components';

export default function KnowledgePage() {
  const labels = useSelector(({ intl }) => intl.labels);
  const { uuid } = useParams();

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

  const ReactionsButton = withReactions(Button);

  return (
    <>
      <PageHeader title={labels.knowledge_area_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 && (
            <a href={knowledge.attachment} download>
              <FileDownload />
              {labels.knowledge_area_download_attachment}
            </a>
          )}
          {knowledge.link && (
            <a href={knowledge.link} target='_blank' rel='noreferrer'>
              {labels.knowledge_area_go_to_link}
            </a>
          )}
        </CardActions>

        <CardContent>
          <CommentForm onSubmit={addComment} />
          <CommentsList comments={comments} onDelete={deleteComment} />
        </CardContent>
      </Card>
    </>
  );
}