Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';

import { api } from '@shared/libs';
import { useAlert } from '@shared/hooks';

export function CapsuleItem({
  capsule: { name, image, status, link_enroll, link_claim },
  onComplete = () => null
}) {
  const labels = useSelector(({ intl }) => intl.labels);

  const { showError, showSuccess } = useAlert();

  const enroll = async () => {
    try {
      const message = await api.post(link_enroll);
      showSuccess(message);
      onComplete();
    } catch (error) {
      showError(error.message);
    }
  };

  const claim = async () => {
    try {
      const message = await api.post(link_claim);
      showSuccess(message);
      onComplete();
    } catch (error) {
      showError(error.message);
    }
  };

  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}
                title={'Seleccionar: ' + name}
                className='btn btn-primary cursor-pointer'
              >
                {labels.claim}
              </button>
            </li>
          )}
          {link_enroll && (
            <li>
              <button onClick={enroll} title={'Seleccionar: ' + name} className='btn btn-primary'>
                {labels.enroll}
              </button>
            </li>
          )}
        </ul>
      </div>
    </div>
  );
}