Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

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

import { useSelector } from 'react-redux'

import { Typography } from '@mui/material'

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

import EmptySection from 'components/UI/EmptySection'

const Topics = () => {

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

    microlearning.topicsAllIds.map(

      (topicId) => microlearning.topicById[topicId]

    )

  )

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

  return (

    <TopicsGrid>

      {topics.length ? (

        topics.map((topic) => <Topic key={topic.uuid} topic={topic} />)

      ) : (

        <EmptySection message={labels.datatable_szerorecords} />

      )}

    </TopicsGrid>

  )

}

const Topic = ({ topic }) => {

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

  return (

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

      <TopicContainer>

        <div className='c-header'>

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

        </div>

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

        <div className='c-footer'>

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

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

        </div>

      </TopicContainer>

    </Link>

  )

}

export default Topics