Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react';

import { useSelector } from 'react-redux';

import { Typography } from '@mui/material';

import { CheckCircle } from '@mui/icons-material';

import { TopicContainer, TopicsGrid } from './UI';

import EmptySection from '../../../components/UI/EmptySection';

import SlidesCarousel from './slides/slides-carousel';

const Slides = ({ capsuleId = '' }) => {

  const [showCarousel, setShowCarousel] = useState(false);

  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);

  const slides = useSelector(({ microlearning }) =>

    microlearning.slidesAllIds

      .map((uuid) => microlearning.slideById[uuid])

      .sort((a, b) => a.order - b.order)

  );

  const labels = useSelector(({ intl }) => intl.labels);

  const filteredSlides = useMemo(() => {

    if (!capsuleId) {

      return slides;

    }

    return slides.filter((capsule) => capsule.capsuleId === capsuleId);

  }, [capsuleId, slides]);

  if (!filteredSlides.length) {

    return <EmptySection message={labels.datatable_szerorecords} />;

  }

  const handleShowCarousel = (index = 0) => {

    setCurrentSlideIndex(index);

    setShowCarousel(true);

  };

  const handleHideCarousel = () => {

    setCurrentSlideIndex(0);

    setShowCarousel(false);

  };

  return (

    <TopicsGrid>

      {filteredSlides.map((slide, index) => (

        <SlidesItem key={slide.uuid} slide={slide} onClick={() => handleShowCarousel(index)} />

      ))}

      <SlidesCarousel

        onClose={handleHideCarousel}

        slides={filteredSlides}

        show={showCarousel}

        currentSlideIndex={currentSlideIndex}

      />

    </TopicsGrid>

  );

};

const SlidesItem = ({ slide, onClick }) => {

  const { name, background, file, completed } = slide;

  return (

    <TopicContainer onClick={onClick} style={{ cursor: 'pointer' }}>

      <div className='c-header'>

        <Typography variant='h3' title={name}>

          {name}

        </Typography>

      </div>

      <div className='c-body'>

        {completed ? <CheckCircle color='success' /> : null}

        <img src={background || file} alt='' />

      </div>

    </TopicContainer>

  );

};

export default Slides;