Proyectos de Subversion LeadersLinked - SPA

Rev

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

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