Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { FilterSelect, FiltersRow, Grid, PageHeader, SearchBar, Spinner } from '@shared/components';
import { KnowledgeCard } from '@knowledges/components';
import { Button } from '@mui/material';

export default function KnowledgesPage() {
  const {
    knowledges,
    loading,
    searchTerm,
    addUrl,
    categoriesWithEdition,
    searchCategory,
    searchKnowledge,
    changeCategory,
    elementRef,
    addKnowledge,
    deleteKnowledge,
    editKnowledge,
    clearFilters
  } = 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} />
        <Button onClick={clearFilters}>Limpiar filtros</Button>
      </FiltersRow>

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