Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, Button } from '@mui/material';

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,
    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>

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