Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3472 | Rev 3475 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3452 stevensc 1
import React from 'react';
3473 stevensc 2
import { Link } from 'react-router-dom';
3452 stevensc 3
import { useSelector } from 'react-redux';
4
 
5
import { useKnowledges } from '../hooks';
6
 
3469 stevensc 7
import { Grid, PageHeader, Pagination, SearchBar, Spinner } from '@shared/components';
3462 stevensc 8
import { KnowledgeCard } from '@knowledges/components';
3452 stevensc 9
 
10
export default function KnowledgesPage() {
11
  const labels = useSelector(({ intl }) => intl.labels);
12
 
13
  const {
14
    loading,
15
    knowledges,
16
    // categories,
3473 stevensc 17
    linkAdd,
3452 stevensc 18
    page,
19
    pages,
20
    setPage,
21
    addKnowledge,
22
    searchKnowledge,
23
    editKnowledge,
24
    deleteKnowledge
25
  } = useKnowledges();
26
 
27
  return (
28
    <>
29
      <PageHeader
30
        title={labels.knowledge_area_title}
3473 stevensc 31
        onAdd={linkAdd ? () => addKnowledge(linkAdd) : null}
3452 stevensc 32
        labelAdd={labels.knowledge_area_add}
33
      />
34
 
3459 stevensc 35
      <SearchBar onChange={searchKnowledge} />
3452 stevensc 36
 
3459 stevensc 37
      {loading ? (
38
        <Spinner />
39
      ) : (
3462 stevensc 40
        <Grid
41
          items={knowledges}
42
          emptyMessage={labels.error_no_record_matched_your_query}
43
          renderItem={(knowledge) => (
3473 stevensc 44
            <Link to={knowledge.link_view} key={knowledge.link_view}>
45
              <KnowledgeCard
46
                knowledge={knowledge}
47
                onEdit={() => editKnowledge(knowledge.link_edit)}
48
                onDelete={() => deleteKnowledge(knowledge.link_delete)}
49
              />
50
            </Link>
3462 stevensc 51
          )}
52
        />
3459 stevensc 53
      )}
3452 stevensc 54
 
55
      <Pagination page={page} pages={pages} onChange={setPage} />
56
    </>
57
  );
58
}