Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3563 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
3 
 
4 
import { api } from '@shared/libs';
5 
import { useAlert } from '@shared/hooks';
6 
 
7 
export function CapsuleItem({
8 
  capsule: { name, image, status, link_enroll, link_claim },
9 
  onComplete = () => null
10 
}) {
11 
  const labels = useSelector(({ intl }) => intl.labels);
12 
 
13 
  const { showError, showSuccess } = useAlert();
14 
 
15 
  const enroll = async () => {
16 
    try {
17 
      const message = await api.post(link_enroll);
18 
      showSuccess(message);
19 
      onComplete();
20 
    } catch (error) {
21 
      showError(error.message);
22 
    }
23 
  };
24 
 
25 
  const claim = async () => {
26 
    try {
27 
      const message = await api.post(link_claim);
28 
      showSuccess(message);
29 
      onComplete();
30 
    } catch (error) {
31 
      showError(error.message);
32 
    }
33 
  };
34 
 
35 
  return (
36 
    <div className='marketplace_card'>
37 
      <img src={image} alt={name} />
38 
      <div className='microlearning-up-info'>
39 
        <h3>{name}</h3>
40 
        {status && (
41 
          <h4>
42 
            {labels.status}: {status}
43 
          </h4>
44 
        )}
45 
        <ul>
46 
          {link_claim && (
47 
            <li>
48 
              <button
49 
                onClick={claim}
50 
                title={'Seleccionar: ' + name}
51 
                className='btn btn-primary cursor-pointer'
52 
              >
53 
                {labels.claim}
54 
              </button>
55 
            </li>
56 
          )}
57 
          {link_enroll && (
58 
            <li>
59 
              <button onClick={enroll} title={'Seleccionar: ' + name} className='btn btn-primary'>
60 
                {labels.enroll}
61 
              </button>
62 
            </li>
63 
          )}
64 
        </ul>
65 
      </div>
66 
    </div>
67 
  );
68 
}