AutorÃa | Ultima modificación | Ver Log |
import React from 'react'
import { axios } from '../../utils'
import { useSelector } from 'react-redux'
const CapsuleItem = ({ capsule = {}, onComplete = () => null }) => {
const { name, image, status, link_enroll, link_claim } = capsule
const labels = useSelector(({ intl }) => intl.labels)
const enroll = async (url) => {
try {
await axios.post(url)
onComplete()
} catch (error) {
console.log('>>: error > ', error)
}
}
const claim = async (url) => {
try {
await axios.post(url)
onComplete()
} catch (error) {
console.log('>>: error > ', error)
}
}
return (
<div className="marketplace_card">
<img src={image} alt={name} />
<div className="microlearning-up-info">
<h3>{name}</h3>
{status && (
<h4>
{labels.status}: {status}
</h4>
)}
<ul>
{link_claim && (
<li>
<button
onClick={() => claim(link_claim)}
title={'Seleccionar: ' + name}
className="btn btn-primary cursor-pointer"
>
{labels.claim}
</button>
</li>
)}
{link_enroll && (
<li>
<button
onClick={() => enroll(link_enroll)}
title={'Seleccionar: ' + name}
className="btn btn-primary"
>
{labels.enroll}
</button>
</li>
)}
</ul>
</div>
</div>
)
}
export default CapsuleItem