SuggestionsPage.tsx 3.88 KB
Newer Older
1
2
3
4
5
6
7
8
9
import * as React from 'react';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { connect } from 'react-redux';
import { withStyles } from 'material-ui/styles';

import { parse } from 'query-string';
import { navigateTo } from 'actions/navigation';
import { datasetSuggestions } from 'actions/search';
10
import { promiselistDatasets } from 'actions/dataset';
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { IDatasetFilter } from 'model/dataset.model';
// import {Page} from 'model/common.model';
// import {Descriptor, DescriptorList, IDescriptorFilter, IDescriptorListFilter} from 'model/descriptor.model';

import Grid from 'material-ui/Grid';
import TextField from 'material-ui/TextField';

import Loading from 'ui/common/Loading';
import SuggestionsForm from './c/SuggestionsForm';

interface ISuggestionsPageProps extends React.ClassAttributes<any> {
	t: any;
	classes: any;
	search: string;
	filters: any;
	filterCode: string;
	loading: boolean;
	navigateTo: (page, query?) => any;
	datasetSuggestions: (searchQuery, filter?: IDatasetFilter) => any;
31
	promiselistDatasets: any;
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
	suggestions: any;
}

const styles = (theme) => ({
	alignCenter: {
		textAlign: 'center',
	},
	paper: {
		margin: 20,
		height: 500,
		overflow: 'auto' as 'auto',
	},
});

class SuggestionsPage extends React.Component<ISuggestionsPageProps, any> {

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

		this.state = {
			search: props.search || '',
			filterCode: props.filter,
		};
	}

	public componentWillMount() {
		const { datasetSuggestions, search } = this.props;
		console.log(`On mount query for ${search}`);
		datasetSuggestions(search);
	}

	public componentWillReceiveProps(nextProps) {
64
		const { datasetSuggestions, filterCode, filters } = this.props;
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
		console.log(`Should I be querying for ${nextProps.search} when I have ${this.props.search}?`);
		console.log(nextProps, this.props);

		if (nextProps.search !== this.props.search) {
			console.log(`Querying for ${nextProps.search}`, filters);
			datasetSuggestions(nextProps.search, filters[filterCode]);
		}
	}

	protected search = (e) => {
		e.preventDefault();
		const { navigateTo } = this.props;
		const { search } = this.state;

		console.log(`Searching for ${search}`);
		if (!search) {
			console.log('Search is blank... No go.');
			return;
		}
		navigateTo(``, { q: search });
	}

	protected onSearchChange = (e) => {
		const search = e.target.value;
		this.setState({ ...this.state, search });
	}

	protected applyFilters = (newFilters) => {
		console.log(`Applying filters`, newFilters);
94
95
96
97
98
		const { promiselistDatasets, navigateTo } = this.props;
		promiselistDatasets(undefined, undefined, undefined, newFilters)
			.then((data) => {
				navigateTo(`/datasets`, { filter: data.filterCode });
			});
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
128
129
130
131
132
133
134
135
136
137
138
	}

	public render() {
		const { classes, loading, suggestions, t } = this.props;
		const { search } = this.state;

		return (
			<Grid container spacing={ 0 }>
				<Grid item xs={ 12 } className={ classes.alignCenter }>
					<form onSubmit={ this.search }>
						<TextField
							label={ t('common:action.search') }
							value={ search }
							onChange={ this.onSearchChange }
							margin="normal"
						/>
					</form>
				</Grid>
				<Grid item xs={ 12 }>
					{ loading && <Loading /> }
					{ suggestions && <SuggestionsForm suggestions={ suggestions } onSubmit={ this.applyFilters } /> }
				</Grid>
			</Grid>
		);
	}
}

const styled = translate()(withStyles(styles)(SuggestionsPage));

const mapStateToProps = (state, ownProps) => ({
	search: parse(ownProps.location.search).q || '',
	filterCode: parse(ownProps.location.search).filter || null,
	filters: state.filterCode.filters,
	loading: state.search.loading,
	suggestions: state.search.datasetSuggestions,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
	navigateTo,
	datasetSuggestions,
139
	promiselistDatasets,
140
141
142
143
144
145
}, dispatch);

export default connect(
	mapStateToProps,
	mapDispatchToProps,
)(styled);