Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3563 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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