/
index.tsx
104 lines (99 loc) · 3.63 KB
/
index.tsx
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import * as React from 'react';
import { Div, Img} from 'glamorous';
import { Container } from 'semantic-ui-react';
import { red, white } from '../../theme/semantic';
import { SectionHeader } from '../../atoms/Header';
import { DarkBg } from '../../atoms/Container';
import ProfileDataSourceTable from '../../molecules/ProfileDataSourceTable';
import CountryProfileTopTabs from '../../organisms/CountryProfileTabs';
import ProfileHeader from '../../molecules/ProfileHeader';
import {getCountry} from '../../../utils';
import { GOVERNMENT_FINANCE_LOWER } from '../../../utils/constants';
import {StateToShare} from '../../molecules/ChartShare';
import dynamic, {DynamicOptions} from 'next/dynamic';
import methodologyData from '../../MethodologyData/country-profile';
import {Country} from '../../types';
import Router from 'next/router';
import Link from 'next/link';
import Generic from '../Generic';
// TODO: the dynamic types are a pain to work with, need to get improved submit PR
const dynamicOpts: DynamicOptions<any, any> = {
ssr: true,
loading: () => <p>Loading...</p>,
modules: props => ({
CountryProfileLowerTabs: import('../../organisms/CountryProfileLowerTabs') as Promise<any>
}),
render: (props, {CountryProfileLowerTabs}) =>
<CountryProfileLowerTabs {...props} />
};
const DynamicCountryProfileLowerTabs = dynamic(dynamicOpts as any);
interface Props {
id: string;
rehydrated?: boolean;
state?: StateToShare;
}
export default class Profile extends React.Component<Props> {
public static init(props) {
const country = getCountry(props.id);
const selectedTab = props.state && props.state.chartId &&
props.state.chartId !== GOVERNMENT_FINANCE_LOWER ? 1 : 0;
return {selectedTab, country};
}
public state: {
selectedTab: number,
country: Country
};
public lowerTabs: HTMLElement;
constructor(props: Props) {
super(props);
this.state = Profile.init(props);
}
public componentWillReceiveProps(nextProps: Props) {
if (nextProps !== this.props) this.setState(Profile.init(nextProps));
}
public jumpToSection = (sectionId: string) => {
const selectedTab = sectionId === GOVERNMENT_FINANCE_LOWER ? 0 : 1;
this.setState({selectedTab});
if (this.lowerTabs) this.lowerTabs.scrollIntoView();
}
public setLowerTabs = (node) => {
this.lowerTabs = node;
}
public render() {
return (
<Generic pathname="/country" query={this.props.id}>
{process.env.NODE_ENV !== 'test' ?
<ProfileHeader
entity={this.state.country}
router={Router}
nextLink={Link}
jumpToSection={this.jumpToSection}
/> : ''
}
<CountryProfileTopTabs id={this.props.id} />
<Div paddingTop={'4em'} paddingBottom={'4em'}>
<Container textAlign="center">
<SectionHeader innerRef={this.setLowerTabs}>
<Img
width="32px"
verticalAlign="middle"
src={`/flags/svg/${this.state.country.id}.svg`}
/> EXPLORE <span>DOMESTIC AND INTERNATIONAL RESOURCES</span>
</SectionHeader>
</Container>
</Div>
{process.env.NODE_ENV !== 'test' ?
<DynamicCountryProfileLowerTabs
id={this.props.id}
selectedTab={this.state.selectedTab}
{...this.props.state}
/> : ''}
<DarkBg>
<SectionHeader color={red} fontColor={white}>
MORE FROM DI ON {this.state.country.name && this.state.country.name.toUpperCase()}
</SectionHeader>
</DarkBg>
<ProfileDataSourceTable data={methodologyData.methodology} />
</Generic>);
}
}