Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useSelector } from 'react-redux'

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

import { Typography } from '@mui/material'

import { useMicroLearning, useFetch } from '@hooks'

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

import Spinner from '@components/UI/Spinner'

import EmptySection from '@components/UI/EmptySection'

const Companies = () => {

  const { link_companies: linkCompanies } = useMicroLearning()

  const { data: companies, isLoading } = useFetch(linkCompanies, [])

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

  if (isLoading) {

    return <Spinner />

  }

  return (

    <TopicsGrid>

      {companies.length ? (

        companies.map((company) => (

          <Company key={company.uuid} company={company} />

        ))

      ) : (

        <EmptySection message={labels.datatable_szerorecords} />

      )}

    </TopicsGrid>

  )

}

const Company = ({ company }) => {

  const { name, image, uuid } = company

  return (

    <Link to={uuid}>

      <TopicContainer>

        <div className='c-header'>

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

        </div>

        <div className='c-body'>

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

        </div>

      </TopicContainer>

    </Link>

  )

}

export default Companies