Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

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

import { Grid, PageHeader, SearchBar, Select, 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'

      />

      <Select

        options={categoriesWithEdition}

        value={searchCategory}

        onChange={changeCategory}

        placeholder='Filtrar por categoría'

      />

      <SearchBar onChange={searchKnowledge} value={searchTerm} />

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

        />

      )}

    </>

  );

}