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

        />

      )}

    </>

  );

}