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>

    </>

  );

}