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 } 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: 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 (

    <>

      {capsuleInProgess && <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 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'

      />

    </>

  );

}