CountryDisplayPage.tsx 8.69 KB
Newer Older
Maxym Borodenko's avatar
Maxym Borodenko committed
1
import * as React from 'react';
2
3
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
Maxym Borodenko's avatar
Maxym Borodenko committed
4
5
6
import { translate } from 'react-i18next';

// Actions
7
8
import { loadCountryDetails } from 'geo/actions/public';
import { applyFilters } from 'accessions/actions/public';
Maxym Borodenko's avatar
Maxym Borodenko committed
9
10
11
12

// Model
import CountryDetails from 'model/geo/CountryDetails';
import FaoInstitute from 'model/genesys/FaoInstitute';
Oleksii Savran's avatar
Oleksii Savran committed
13
import MapLayer from 'model/genesys/MapTileLayer';
Maxym Borodenko's avatar
Maxym Borodenko committed
14
15

// UI
16
17
18
19
import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import { InstituteLink } from 'ui/genesys/Links';
import { ExternalLink } from 'ui/common/Links';
Maxym Borodenko's avatar
Maxym Borodenko committed
20
21
22
23
import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
24
import PageTitle from 'ui/common/PageTitle';
Matija Obreza's avatar
Matija Obreza committed
25
26
27
import PropertiesCard from 'ui/common/PropertiesCard';
import PieChart from 'ui/common/pie-chart';
import GridContainer from 'ui/layout/GridContainer';
Maxym Borodenko's avatar
Maxym Borodenko committed
28
29
30
31
32
33
34

interface ICountryDisplayPageProps extends React.ClassAttributes<any> {
  details: CountryDetails;
  isoCode: string;
  t: any;
  loadCountryDetails: (isoCode: string) => void;
  applyFilters: any;
Oleksii Savran's avatar
Oleksii Savran committed
35
  mapLayers: MapLayer[];
Maxym Borodenko's avatar
Maxym Borodenko committed
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
}

class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {

  protected static needs = [
    ({ params: { isoCode } }) => {
      return isoCode ? loadCountryDetails(isoCode) : null;
    },
  ];

  constructor(props) {
    super(props);
  }

  public componentWillMount() {
Maxym Borodenko's avatar
Maxym Borodenko committed
51
52
    const { loadCountryDetails, isoCode, details } = this.props;
    if (isoCode && (! details || isoCode !== details.code3)) {
Maxym Borodenko's avatar
Maxym Borodenko committed
53
54
55
56
      loadCountryDetails(isoCode);
    }
  }

57
58
59
60
61
62
63
  public componentWillReceiveProps(nextProps) {
    const { loadCountryDetails, details, isoCode } = nextProps;
    if (isoCode && (! details || details.code3 !== isoCode)) {
      loadCountryDetails(isoCode);
    }
  }

Maxym Borodenko's avatar
Maxym Borodenko committed
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
  private getLocations = (institutes: FaoInstitute[]) => {
    const instLocations = [];
    institutes.forEach((inst) => {
      if (inst.longitude != null && inst.longitude != null) {
        instLocations.push({ id: inst.id, lat: inst.latitude, lng: inst.longitude });
      }
    });
    return instLocations;
  }

  private applyCountryOfOriginFilter = (iso3Code: string) => {
    const filter = {
      origin: {iso3: [ iso3Code ]},
    };
    this.props.applyFilters(filter);
  }

  public render() {
Oleksii Savran's avatar
Oleksii Savran committed
82
    const {details, isoCode, mapLayers, t} = this.props;
83
    const stillLoading: boolean = (! details || details.code3 !== isoCode);
Maxym Borodenko's avatar
Maxym Borodenko committed
84

Matija Obreza's avatar
Matija Obreza committed
85
86
87
88
89
90
91
92
93
    let mlsStatusOverview;
    let taxonomyGenusSpeciesOverview;
    if (!stillLoading) {
      const mlsStatusKey = 'mlsStatus';
      mlsStatusOverview = details.overview[mlsStatusKey];
      const taxonomyGenusSpeciesKey = 'taxonomy.genusSpecies';
      taxonomyGenusSpeciesOverview = details.overview[taxonomyGenusSpeciesKey];
    }

Maxym Borodenko's avatar
Maxym Borodenko committed
94
95
    return (
      <PageLayout>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
96
        <PageTitle title={ `${t('geo.public.p.countryList.countryProfile', { code: isoCode }) }` } />
97
        <ContentHeader title={ `${t('geo.public.p.countryList.countryProfile', { code: isoCode }) }` }/>
Maxym Borodenko's avatar
Maxym Borodenko committed
98
99
        <div>
          { stillLoading ? <Loading /> :
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
100
            <PageContents className="pt-1rem">
Maxym Borodenko's avatar
Maxym Borodenko committed
101
102
              <MainSection title={ `${details.name}` }>
                <Properties>
103
                  <PropertiesItem title={ t('geo.public.p.countryList.moreInformation') }>
Maxym Borodenko's avatar
Maxym Borodenko committed
104
105
                    <ExternalLink link={ details.wikiLink }>{ details.wikiLink }</ExternalLink>
                  </PropertiesItem>
106
                  <PropertiesItem title={ `${t('geo.public.p.countryList.isoCodes')}` }>
Maxym Borodenko's avatar
Maxym Borodenko committed
107
108
                    <span>{ `ISO-3166 3-alpha: ${details.code3}, ISO-3166 2-alpha: ${details.code2}` }</span>
                  </PropertiesItem>
109
                  <PropertiesItem title={ t('geo.public.p.countryList.accessionsInGenesys') }>
Maxym Borodenko's avatar
Maxym Borodenko committed
110
111
112
113
114
                    <a onClick={ () => this.applyCountryOfOriginFilter(details.code3) }><Number value={ details.accessionCount || 0 } /></a>
                  </PropertiesItem>
                </Properties>
              </MainSection>

Matija Obreza's avatar
Matija Obreza committed
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
              <GridContainer className="mb-15">
                { taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
                  <PropertiesCard
                    title={ t('institutes.public.p.display.representedSpecies') }
                    propertiesList={  taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                    small propertyItemProps={ { numeric: true } }
                  >
                    <PieChart
                      data={
                        taxonomyGenusSpeciesOverview.terms.slice(0, 5).map(
                          (term) => ({
                            value: term.count,
                            label: term.term,
                          }),
                        )
                      }
                    />
                  </PropertiesCard>
                }
                { mlsStatusOverview && mlsStatusOverview.terms && mlsStatusOverview.terms.length > 0 &&
                  ''
                  // <PropertiesCard
                  //   title={ t('institutes.public.p.display.mlsStatus') }
                  //   propertiesList={ mlsStatusOverview.terms.map((term) => ({title: term.term, value: term.count})) }
                  //   small propertyItemProps={ { numeric: true } }
                  //   >
                  //   <PieChart
                  //     data={
                  //       mlsStatusOverview.terms.map(
                  //         (term) => ({
                  //           value: term.count,
                  //           label: term.term,
                  //         }),
                  //       )
                  //     }
                  //   />
                  // </PropertiesCard>
                }
              </GridContainer>


Maxym Borodenko's avatar
Maxym Borodenko committed
156
              { details.genesysInstitutes && details.genesysInstitutes.length > 0 &&
157
                <PageSection title={ t('geo.public.p.countryList.instituteLocations') }>
Oleksii Savran's avatar
Oleksii Savran committed
158
159
160
161
                  <LocationMap
                    locations={ this.getLocations(details.genesysInstitutes) }
                    mapLayers={ mapLayers }
                  />
162
163
164
165
166
                </PageSection>
              }

              { details.genesysInstitutes && details.genesysInstitutes.length > 0 &&
                <PageSection title={ `${t('geo.public.p.countryList.acceCountAtInstitutes', {count: details.countByLocation, institutes: details.genesysInstitutes.length }) }` }>
Maxym Borodenko's avatar
Maxym Borodenko committed
167
168
                  <Properties>
                    { details.genesysInstitutes.map((institute, index) => (
169
                      <PropertiesItem key={ `${institute.id}-genesys` } numeric
Maxym Borodenko's avatar
Maxym Borodenko committed
170
171
                        title={
                          <span>
172
                            { /* { `${index + 1}` } */ }
Maxym Borodenko's avatar
Maxym Borodenko committed
173
174
175
176
                            <InstituteLink to={ institute }>
                              { `${institute.code}${institute.fullName}` }
                            </InstituteLink>
                          </span>
177
                        }>{ `${t('geo.public.p.countryList.acceCount', {count: institute.accessionCount}) }` }</PropertiesItem>
Maxym Borodenko's avatar
Maxym Borodenko committed
178
179
180
181
182
183
                    )) }
                  </Properties>
                </PageSection>
              }

              { details.faoInstitutes && details.faoInstitutes.length > 0 &&
184
                <PageSection title={ `${t('geo.public.p.countryList.institutesCountInWIEWS', {count: details.faoInstitutes.length}) }` }>
Maxym Borodenko's avatar
Maxym Borodenko committed
185
186
                  <Properties>
                    { details.faoInstitutes.map((fao, index) => (
187
                      <PropertiesItem key={ `${fao.id}-fao` } numeric keepEmpty
Maxym Borodenko's avatar
Maxym Borodenko committed
188
189
                        title={
                          <span>
190
                            { /* `${index + 1}` */ }
Maxym Borodenko's avatar
Maxym Borodenko committed
191
192
193
194
                            <InstituteLink to={ fao }>
                              { `${fao.code}${fao.fullName}` }
                            </InstituteLink>
                          </span>
195
                        } />
Maxym Borodenko's avatar
Maxym Borodenko committed
196
197
198
199
200
201
202
203
204
205
206
207
208
209
                    )) }
                  </Properties>
                </PageSection>
              }

            </PageContents>
          }
        </div>
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
210
  details: state.geo.public.countryDetails ? state.geo.public.countryDetails.data : undefined,
Maxym Borodenko's avatar
Maxym Borodenko committed
211
  isoCode: ownProps.match.params.isoCode,
Oleksii Savran's avatar
Oleksii Savran committed
212
  mapLayers: state.accessions.public.mapLayers,
Maxym Borodenko's avatar
Maxym Borodenko committed
213
214
215
216
217
218
219
220
221
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadCountryDetails,
  applyFilters,
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)(translate()(CountryDisplayPage));