Proyectos de Subversion LeadersLinked - SPA

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

import { useFetch, useMicroLearning } from '@hooks';

import { List, SearchBar, Spinner } from '@shared/components';
import { CapsuleCard, CapsuleItem } from '@microlearning/components';

export default function CapsulesPage() {
  const [activeLink, setActiveLink] = useState('');

  const {
    // link_capsules_completed: linkCapsulesCompleted,
    // link_capsules_in_progress: linkCapsulesInProgress,
    link_capsules_pending: linkCapsulesPending,
    link_last_capsule_in_progress: linkLastCapsuleInProgress
  } = useMicroLearning();

  const { data: currentCapsule } = useFetch(linkLastCapsuleInProgress);
  const { data: capsules } = useFetch(activeLink);

  const handleChange = (e, url) => setActiveLink(url);

  useEffect(() => {
    if (!linkCapsulesPending) return;
    setActiveLink(linkCapsulesPending + '?order_field=added_on&order_direction=desc');
  }, [linkCapsulesPending]);

  if (!currentCapsule || !capsules) return <Spinner />;

  return (
    <>
      {currentCapsule && <CapsuleCard capsule={currentCapsule} />}

      {/* <Tabs value={activeLink} onChange={handleChange}>
        <Tabs.Item
          label='Pendiente'
          value={
            linkCapsulesPending &&
            linkCapsulesPending + '?order_field=added_on&order_direction=desc'
          }
        />
        <Tabs.Item label='En curso' value={linkCapsulesInProgress} />
        <Tabs.Item
          label='Finalizado'
          value={
            linkCapsulesCompleted &&
            linkCapsulesCompleted + '?order_field=last_access_on&order_direction=desc'
          }
        />
      </Tabs> */}

      <SearchBar onChange={handleChange} />

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