Proyectos de Subversion LeadersLinked - SPA

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

import { useKnowledges } from '@knowledges/hooks';

import { Grid, PageHeader, SearchBar, Select, Spinner } from '@shared/components';
import { KnowledgeCard } from '@knowledges/components';

export default function KnowledgesPage() {
  const {
    knowledges,
    loading,
    searchTerm,
    addUrl,
    categoriesWithEdition,
    searchCategory,
    searchKnowledge,
    changeCategory,
    elementRef,
    addKnowledge,
    deleteKnowledge,
    editKnowledge
  } = useKnowledges();

  return (
    <>
      <PageHeader
        title='Área de conocimiento'
        onAdd={addUrl ? () => addKnowledge(addUrl) : null}
        labelAdd='Agregar conocimiento'
      />

      <Select
        options={categoriesWithEdition}
        value={searchCategory}
        onChange={changeCategory}
        placeholder='Filtrar por categoría'
      />

      <SearchBar onChange={searchKnowledge} value={searchTerm} />

      {loading ? (
        <Spinner />
      ) : (
        <Grid
          items={knowledges}
          emptyMessage='No hay conocimientos para mostrar'
          renderItem={(knowledge) => (
            <Link to={knowledge.link_view}>
              <KnowledgeCard
                key={knowledge.link_view}
                knowledge={knowledge}
                onEdit={editKnowledge}
                onDelete={deleteKnowledge}
              />
            </Link>
          )}
          renderFooter={() => <div ref={elementRef} />}
        />
      )}
    </>
  );
}