Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useNavigate } from 'react-router-dom';

import { useAlert, useApi } from '@shared/hooks';

import { getTopics } from '@microlearning/services';

import { Grid, PageHeader, Spinner } from '@shared/components';

import { TopicCard } from '@microlearning/components';

export function TopicsPage() {

  const navigate = useNavigate();

  const { showError } = useAlert();

  const { data: topics, loading } = useApi(getTopics, {

    autoFetch: true,

    onError: (error) => {

      showError(error.message);

    }

  });

  if (loading || !topics) return <Spinner />;

  return (

    <>

      <PageHeader title='Tópicos' />

      <Grid

        items={topics}

        emptyMessage='No hay tópicos para mostrar'

        renderItem={(topic) => (

          <TopicCard

            topic={topic}

            onClick={() => navigate(`/microlearning/topics/${topic.uuid}`)}

          />

        )}

        keyExtractor={(topic) => topic.uuid}

      />

    </>

  );

}