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}

        />

      )}

    </>

  );

}