Proyectos de Subversion LeadersLinked - SPA

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

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

import { FilterSelect, FiltersRow, Grid, PageHeader, SearchBar, 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'
      />

      <FiltersRow>
        <FilterSelect
          options={categoriesWithEdition}
          value={searchCategory}
          onChange={changeCategory}
          placeholder='Filtrar por categoría'
        />
        <SearchBar onChange={searchKnowledge} value={searchTerm} />
      </FiltersRow>

      {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} />}
        />
      )}
    </>
  );
}