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 />}

      />

    </>

  );

}