Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

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

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

export default function CapsulesPage() {
  const {
    link_capsules_completed: linkCapsulesCompleted,
    link_capsules_in_progress: linkCapsulesInProgress,
    link_capsules_pending: linkCapsulesPending,
    link_last_capsule_in_progress: linkLastCapsuleInProgress
  } = useMicroLearning();

  const [activeLink, setActiveLink] = useState('');

  const { data: capsuleInProgess } = useFetch(linkLastCapsuleInProgress, null);
  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]);

  return (
    <>
      <CapsuleCard capsule={capsuleInProgess || capsules[0]} />

      <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 />

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