Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3505 | Rev 3513 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3494 stevensc 1 
import React from 'react';
3491 stevensc 2 
import { Link } from 'react-router-dom';
3481 stevensc 3 
 
3494 stevensc 4 
import { useMicrolearning } from '@microlearning/hooks';
3481 stevensc 5 
 
3494 stevensc 6 
import { List, SearchBar, Spinner, Tabs } from '@shared/components';
3491 stevensc 7 
import { CapsuleCard, CapsuleItem } from '@microlearning/components';
3481 stevensc 8 
 
3505 stevensc 9 
export function CapsulesPage() {
3498 stevensc 10 
  const {
11 
    capsules,
12 
    currentCapsule,
13 
    categories,
14 
    category,
3500 stevensc 15 
    capsulesLoading,
16 
    currentCapsuleLoading,
3498 stevensc 17 
    changeCategory,
18 
    searchCapsules
19 
  } = useMicrolearning();
3491 stevensc 20 
 
3481 stevensc 21 
  return (
22 
    <>
3501 stevensc 23 
      {currentCapsuleLoading && <Spinner />}
3493 stevensc 24 
      {currentCapsule && <CapsuleCard capsule={currentCapsule} />}
3481 stevensc 25 
 
3499 stevensc 26 
      <Tabs value={category} onChange={(_, cat) => changeCategory(cat)}>
3494 stevensc 27 
        {categories.map(({ label, value }) => (
28 
          <Tabs.Item key={value} label={label} value={value} />
29 
        ))}
30 
      </Tabs>
3481 stevensc 31 
 
3512 stevensc 32 
      <SearchBar onChange={searchCapsules} />
3481 stevensc 33 
 
3501 stevensc 34 
      {capsulesLoading && <Spinner />}
35 
      {capsules && (
3500 stevensc 36 
        <List
37 
          items={capsules}
38 
          renderItem={(capsule) => (
39 
            <Link to={`/microlearning/capsules/${capsule.uuid}`}>
40 
              <CapsuleItem capsule={capsule} readOnly />
41 
            </Link>
42 
          )}
43 
          emptyMessage='No hay cápsulas para mostrar'
44 
          keyExtractor='uuid'
45 
        />
46 
      )}
3481 stevensc 47 
    </>
48 
  );
49 
}