Proyectos de Subversion LeadersLinked - SPA

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

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

import WidgetWrapper from 'components/widgets/WidgetLayout';
import CommentForm from '@app/components/dashboard/linkedin/comments/comment-form';
import CommentsList from '@app/components/dashboard/linkedin/comments/comment-list';
import Button from '@app/components/UI/buttons/Buttons';
import { PageHeader } from '@app/modules/shared/components';

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

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

  const ReactionsButton = withReactions(Button);

  return (
    <>
      <PageHeader title={labels.knowledge_area_title} />

      <Grid container mt={1}>
        <Grid xs={12} md={8} mx='auto'>
          <WidgetWrapper>
            <img
              src={knowledge.image}
              alt={`${knowledge.title} image`}
              style={{ width: '100%', maxHeight: '400px' }}
            />

            <WidgetWrapper.Body>
              <h2>{knowledge.title}</h2>
              <span>{knowledge.category}</span>
              <Typography>{parse(knowledge.description)}</Typography>
            </WidgetWrapper.Body>

            <WidgetWrapper.Actions>
              <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>
              )}
            </WidgetWrapper.Actions>

            <div className='px-3 pb-2'>
              <CommentForm onSubmit={addComment} />
              <CommentsList comments={comments} onDelete={deleteComment} />
            </div>
          </WidgetWrapper>
        </Grid>
      </Grid>
    </>
  );
}