Proyectos de Subversion LeadersLinked - SPA

import React, { useState } 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/FileDownload';

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>
    </>
  );
}