DatasetListPage.tsx 3.35 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import * as React from "react";
import {Link} from "react-router-dom";
import {useTranslation} from "react-i18next";

// model
import {IPageRequest} from "@genesys-pgr/client/model/Page";
import FilteredPage from "@genesys-pgr/client/model/FilteredPage";
import DatasetFilter from "@genesys-pgr/client/model/catalog/DatasetFilter";
import Dataset from "@genesys-pgr/client/model/catalog/Dataset";
import {Config} from "config/config";

// service
import {DatasetService} from "@genesys-pgr/client/service";
// ui
import PageTitle from "ui/common/PageTitle";
import Pagination from "ui/common/Pagination";
import {DatasetFilters} from "dataset/DatasetFilters";
// util
import {parseLocationSearch} from "utilities/filterUtil";
import {useSelector} from "react-redux";

interface IDatasetListPageProps {
  location: any;
}

const DatasetListPage = ({location}: IDatasetListPageProps) => {

  // util
  const {t} = useTranslation();

  // redux
  const appConfig: Config = useSelector((state: any) => state?.appConfig?.config);

  // state
  const [datasets, setDatasets] = React.useState<FilteredPage<Dataset, DatasetFilter>>();
  const [filter, setFilter] = React.useState<DatasetFilter>(appConfig.filter);

  const loadData = React.useCallback((filter: string | DatasetFilter, pageR: IPageRequest): Promise<FilteredPage<Dataset, DatasetFilter>> => {
    return DatasetService
      .datasetList(filter, pageR)
      .then((data) => {
        setDatasets(data);
        setFilter(data.filter);
        return data;
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
        return null;
      });
  }, []);

  const applyFilter = React.useCallback((newFilter: DatasetFilter) => {
    loadData({...filter, ...newFilter}, {});
  }, [filter, loadData]);

  // effect
  React.useEffect(() => {
    const {current, filterCode} = parseLocationSearch(location);
    if (!datasets || datasets?.filterCode !== filterCode) {
      loadData(filterCode || filter || datasets?.filter, current ? {page: current} : {});
    }
  }, [datasets, filter, loadData, location])

  return datasets ? (
    <>
      <PageTitle title={t('pagetitle.datasetList')}/>
      <h1 className="d-flex justify-content-between align-items-center">
        {t('estimatedNumberOfItems', {
          count: datasets.totalElements,
          what: t('dataset.model', {count: datasets.totalElements})
        })}
      </h1>
      <DatasetFilters
        filter={filter}
        applyFilter={applyFilter}
        key={`filters-${datasets.filterCode}`}
      />
      <Pagination loadData={loadData} paged={datasets} prefix="/datasets">
        <table className="table table-striped">
          <thead className="thead-dark">
          <tr>
            <th>{t('dataset.title')}</th>
            <th>{t('dataset.crops')}</th>
            <th>{t('dataset.accessionCount')}</th>
Matija Obreza's avatar
Matija Obreza committed
85
            <th>{t([ 'dataset.description', '_.description' ])}</th>
86
87
88
89
90
91
92
93
          </tr>
          </thead>
          <tbody>
          {datasets.content.map((d) => (
            <tr key={d.id}>
              <td><Link to={`/datasets/${d.uuid}`}>{d.title}</Link></td>
              <td>{d.crops && d.crops.length > 0 && <p>{d.crops.join(', ')}</p>}</td>
              <td>{d.accessionCount}</td>
Matija Obreza's avatar
Matija Obreza committed
94
              <td>{d.description}</td>
95
96
97
98
99
100
101
102
103
104
            </tr>
          ))}
          </tbody>
        </table>
      </Pagination>
    </>
  ) : null;
};

export default DatasetListPage;