Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

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

import { useModal } from '@shared/hooks';

import { useCapsule } from '@microlearning/hooks';

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

import {

  Card,

  CardActions,

  CardContent,

  CardMedia,

  CommentList,

  Spinner

} from '@shared/components';

import { CapsuleCommentForm, SlideForm } from '@microlearning/components';

export function CapsuleDetailsPage() {

  const { uuid } = useParams();

  const navigate = useNavigate();

  const { capsule, loading, addComment, removeComment } = useCapsule(uuid);

  const { showModal } = useModal();

  const showContent = () => {

    if (!capsule?.slides?.length) return;

    if (capsule?.slides?.length > 1 || capsule?.slides[0]?.type !== 'video') {

      return navigate(`/microlearning/capsules/${uuid}`);

    }

    const firstSlide = capsule.slides[0];

    showModal(firstSlide.name, <SlideForm uuid={firstSlide.uuid} autoPlay />);

  };

  if (loading || !capsule) return <Spinner />;

  return (

    <Card>

      <CardMedia

        src={capsule.image}

        alt={`${capsule.name} capsule`}

        sx={{

          aspectRatio: 1 / 0.5,

          objectFit: 'contain',

          objectPosition: 'center'

        }}

      />

      <CardContent>

        <Typography variant='h1'>{capsule.name}</Typography>

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

        {capsule?.slides?.length > 0 && (

          <Button

            variant='contained'

            color='primary'

            onClick={showContent}

            style={{ marginTop: 1, width: '100%' }}

          >

            Ver contenido

          </Button>

        )}

      </CardContent>

      <CardActions>

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

          <CapsuleCommentForm onSubmit={addComment} />

          <CommentList comments={capsule.comments} onDelete={removeComment} />

        </Box>

      </CardActions>

    </Card>

  );

}