DisplayPage.tsx 8.82 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
5
6
7
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { translate } from 'react-i18next';

// Actions
import {loadInstitute} from 'actions/institutes';
8
import {applyFilters} from 'actions/accessions';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
9
10

// Models
11
import FaoInstituteDetails from 'model/FaoInstituteDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
12
13
14

// UI
import PageLayout, {MainSection, PageContents, PageSection} from 'ui/layout/PageLayout';
15
16
import GridLayout from 'ui/layout/GridLayout';
import PropertiesCard from 'ui/common/PropertiesCard.tsx';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
17
import ContentHeader from 'ui/common/heading/ContentHeader';
18
import LocationMap from 'ui/common/LocationMap';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
19
20
21
import Loading from 'ui/common/Loading';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import {Properties, PropertiesItem} from 'ui/common/Properties';
22
23
24
25
import PieChart from 'ui/common/pie-chart';
import PrettyDate from 'ui/common/time/PrettyDate';
import withWidth from '@material-ui/core/withWidth';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
26

27
interface IDisplayPageProps extends React.ClassAttributes<any> {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
28
  t: any;
29
  width: Breakpoint;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
31
  code: string;
  doi: string; // DOI comes from the route without the '10.'
32
  institute: FaoInstituteDetails;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
33
34
  error: any;
  loadInstitute: any;
35
  applyFilters: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
36
}
37
const mobile = ['sm', 'xs'] as Breakpoint[];
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
38

39
class DisplayPage extends React.Component<IDisplayPageProps, any> {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
40

41
  constructor(props: IDisplayPageProps, context: any) {
42
    super(props, context);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
43
44
  }

45
46
47
48
49
50
  private applyInstituteCodeFilter = () => {
    const { institute, applyFilters} = this.props;
    const filter = {holder: {code: [ institute.details.code ]}};
    applyFilters(filter);
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
51
52
  public componentWillMount() {
    const { institute, code, loadInstitute } = this.props;
53
    if (code && (! institute || code !== institute.details.code)) {
54
      loadInstitute({ code });
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
55
56
57
58
    }
  }

  public render() {
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
    const { error, institute, code, width } = this.props;
    const stillLoading: boolean = ! error && (! institute || (code && institute && institute.details.code !== code));

    const isMobile = mobile.indexOf(width) !== -1;

    let cropShortNameOverview;
    let cropNameOverview;
    let taxonomyGenusOverview;
    let taxonomyGenusSpeciesOverview;
    if (!stillLoading) {
      const cropShortNameKey = 'crop.shortName';
      cropShortNameOverview = institute.overview[cropShortNameKey];
      const cropNameKey = 'cropName';
      cropNameOverview = institute.overview[cropNameKey];
      const taxonomyGenusKey = 'taxonomy.genus';
      taxonomyGenusOverview = institute.overview[taxonomyGenusKey];
      const taxonomyGenusSpeciesKey = 'taxonomy.genusSpecies';
      taxonomyGenusSpeciesOverview = institute.overview[taxonomyGenusSpeciesKey];
    }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
78
79
80
81
82
83

    return (
      <PageLayout>
        <ScrollToTopOnMount />
        <ContentHeader title="Institute details" subtitle="smt" />

84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
        { stillLoading ? <Loading /> :
          <div>
            { error && <div>{ JSON.stringify(error) }</div> }

            { institute &&
              <PageContents>
                <MainSection title={ `${institute.details.fullName}` }>
                  <Properties>
                    <PropertiesItem title="Institute code">{ institute.details.code }</PropertiesItem>
                    <PropertiesItem title="Type">{ institute.details.type }</PropertiesItem>
                    <PropertiesItem title="Country">{ institute.details.country.name }</PropertiesItem>
                    { institute.details.url &&
                      <PropertiesItem title="Web link">
                        <a href={ institute.details.url }> { institute.details.url }</a>
                      </PropertiesItem>
99
                    }
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
                    <PropertiesItem title="Accessions in Genesys">{ <a onClick={ this.applyInstituteCodeFilter }> { institute.details.accessionCount } </a> }</PropertiesItem>
                  </Properties>
                </MainSection>
                { institute.details.latitude !== null && institute.details.longitude !== null &&
                  <PageSection title="Location">
                    <Properties>
                      <PropertiesItem title="latitude">{ institute.details.latitude }</PropertiesItem>
                      <PropertiesItem title="longitude">{ institute.details.longitude }</PropertiesItem>
                    </Properties>
                    <LocationMap
                      location={
                        {
                          id: institute.details.id,
                          lat: institute.details.latitude,
                          lng: institute.details.longitude,
                        }
                      }
                    />
                  </PageSection>
                }

                <GridLayout>
                  { cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
                    <PropertiesCard
                      title="Most represented Crops"
                      propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
                      small
                    />
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
                  { cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
                    <PropertiesCard
                      title="Most represented Crop names"
                      propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small
                    >
                      <PieChart
                        data={
                          cropNameOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                  { taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
                    <PropertiesCard
                      title="Most represented Genera"
                      propertiesList={  taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small
                    >
                      <PieChart
                        data={
                          taxonomyGenusOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                  { taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
                    <PropertiesCard
                      title="Most represented Species"
                      propertiesList={  taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
                      small
                    >
                      <PieChart
                        data={
                          taxonomyGenusSpeciesOverview.terms.map(
                            (term) => ({
                              value: term.count,
                              label: term.term,
                            }),
                          )
                        }
                      />
                    </PropertiesCard>
                  }

                  { institute.lastUpdates && institute.lastUpdates.length > 0 &&
                    <PropertiesCard
                      title="Last updates of passport data"
                      propertiesList={  institute.lastUpdates.map((lastUpdate) => ({title: PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1], lastUpdate[2])}) , value: lastUpdate[3]})) }
                      small
                    />
                  }
                </GridLayout>

                { institute.blurb && institute.blurb.body &&
                  <PageSection title="About">
                    <Properties>
                      <div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
                    </Properties>
                  </PageSection>
                }
              </PageContents>
204
            }
205
          </div>
206
        }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
207
208
209
210
211
212
213
214
215
216
217
218
219
      </PageLayout>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  institute: state.institutes.institute,
  error: state.institutes.instituteError,
  code: ownProps.match.params.wiewsCode,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  loadInstitute,
220
  applyFilters,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
221
222
223
}, dispatch);


224
export default connect(mapStateToProps, mapDispatchToProps)(withWidth()(translate()(DisplayPage)));