Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';

import { useMicrolearning } from '@microlearning/hooks';

import { List, SearchBar, Spinner, Tabs } from '@shared/components';
import { LastCapsuleProgressCard, CapsuleDetails } from '@microlearning/components';

export function CapsulesPage() {
  const {
    capsules,
    capsulesLoading,
    currentCapsule,
    currentCapsuleLoading,
    categories,
    category,
    searchTerm,
    changeCategory,
    searchCapsules
  } = useMicrolearning();

  return (
    <>
      {currentCapsuleLoading && <Spinner />}
      {currentCapsule && <LastCapsuleProgressCard capsule={currentCapsule} />}

      <Tabs value={category} onChange={(_, cat) => changeCategory(cat)}>
        {categories.map(({ label, value }) => (
          <Tabs.Item key={value} label={label} value={value} />
        ))}
      </Tabs>

      <SearchBar onChange={searchCapsules} value={searchTerm} />

      {capsulesLoading ? (
        <Spinner />
      ) : (
        <List
          items={capsules}
          renderItem={(capsule) => (
            <Link to={`/microlearning/capsules/${capsule.uuid}/details`}>
              <CapsuleDetails capsule={capsule} readOnly />
            </Link>
          )}
          emptyMessage='No hay cápsulas para mostrar'
          keyExtractor={(capsule) => capsule.uuid}
        />
      )}
    </>
  );
}