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