OverviewPage.tsx 2.19 KB
Newer Older
Maksym Tishchenko's avatar
Maksym Tishchenko committed
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
import * as React from 'react';
import { WithTranslation, withTranslation } from 'react-i18next';
import { parse } from 'query-string';

// Models
import { IPageRequest } from '@genesys/client/model/FilteredPage';
import { AccessionService } from '@genesys/client/service';

// UI
import AccessionOverviewSection from './AccessionOverviewSection';

interface IOverviewPageProps extends React.ClassAttributes<any>, WithTranslation {
  location: any;
}

class BrowsePage extends React.Component<IOverviewPageProps, any> {

  public constructor(props: IOverviewPageProps, context: any) {
    super(props, context);

    this.state = {
      overviewData: null,
    }
  }

  private loadData = (pageR: IPageRequest): Promise<any> => {
    return AccessionService
      .listOverview('', pageR)
      .then((data) => {
        console.log('overview: ', data);
        this.setState({ overviewData: data });
        return data;
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
      });
  };

  public componentDidMount() {
    if (typeof window !== 'undefined') { // Call should be started only on client side
      const current = +parse(this.props.location.search).p
      this.loadData(current ? { page: current } : {});
    }
  }

  public render() {
    const { overviewData } = this.state
    const { t } = this.props

    return (
      // Accession overview
      // Summary information about selected accessions
      <div>
        { overviewData &&
        <>
          <div className="text-white bg-info px-4 py-2">
            <h1>{t('accession.overview.title')}</h1>
            <h3>{t('accession.overview.subTitle')}</h3>
          </div>
          <div className="px-4 py-2 mb-5">
            <h4 className="d-flex justify-content-between align-items-center">
              { `${t('accession.overview.about')} ${t('estimatedNumberOfItems', { count: overviewData.accessionCount, what: t('accession.model_plural', { count: overviewData.accessionCount }) })} `}
            </h4>
          </div>
          <AccessionOverviewSection
            overview={ overviewData && overviewData.overview }
          />
        </>
        }
      </div>
    );
  }
}

export default withTranslation()(BrowsePage);