Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

import { useKnowledges } from '../hooks';

import { Grid, PageHeader, Pagination, SearchBar, Spinner } from '@shared/components';
import { KnowledgeCard } from '@knowledges/components';

export default function KnowledgesPage() {
  const navigate = useNavigate();
  const labels = useSelector(({ intl }) => intl.labels);

  const {
    loading,
    knowledges,
    // categories,
    linkAdd,
    page,
    pages,
    setPage,
    addKnowledge,
    searchKnowledge,
    editKnowledge,
    deleteKnowledge
  } = useKnowledges();

  return (
    <>
      <PageHeader
        title={labels.knowledge_area_title}
        onAdd={linkAdd ? () => addKnowledge(linkAdd) : null}
        labelAdd={labels.knowledge_area_add}
      />

      <SearchBar onChange={searchKnowledge} />

      {loading ? (
        <Spinner />
      ) : (
        <Grid
          items={knowledges}
          emptyMessage={labels.error_no_record_matched_your_query}
          renderItem={(knowledge) => (
            <KnowledgeCard
              key={knowledge.link_view}
              knowledge={knowledge}
              onClick={() => navigate(knowledge.link_view)}
              onEdit={() => editKnowledge(knowledge.link_edit)}
              onDelete={() => deleteKnowledge(knowledge.link_delete)}
            />
          )}
        />
      )}

      <Pagination page={page} pages={pages} onChange={setPage} />
    </>
  );
}