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'

      />

    </>

  );

}