Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'

import { useSelector } from 'react-redux'

import { Link } from 'react-router-dom'

import { Typography } from '@mui/material'

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

import EmptySection from 'components/UI/EmptySection'

const Capsules = ({ topicId = '' }) => {

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

    microlearning.capsulesAllIds.map((uuid) => microlearning.capsuleById[uuid])

  )

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

  const filteredCapsules = useMemo(() => {

    if (!topicId) {

      return capsules

    }

    return capsules.filter((capsule) => capsule.topicId === topicId)

  }, [topicId, capsules])

  return (

    <TopicsGrid>

      {filteredCapsules.length ? (

        filteredCapsules.map((capsule) => (

          <Capsule key={capsule.uuid} capsule={capsule} />

        ))

      ) : (

        <EmptySection message={labels.datatable_szerorecords} />

      )}

    </TopicsGrid>

  )

}

const Capsule = ({ capsule }) => {

  const { name, image, progress, uuid } = capsule

  return (

    <Link to={`/microlearning/capsules/${uuid}/slides`}>

      <TopicContainer>

        <div className='c-header'>

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

        </div>

        <img src={image} alt='' />

        <div className='c-footer'>

          <TopicProgress variant='determinate' value={progress} />

          <span>{`${progress}%`}</span>

        </div>

      </TopicContainer>

    </Link>

  )

}

export default Capsules