Commit 2b7b92ac authored by Matija Obreza's avatar Matija Obreza
Browse files

Updated CropChips and navigateTo()

parent 301a678a
import {push} from 'react-router-redux';
import { stringify } from 'query-string';
export function navigateTo(path: string) {
export function navigateTo(path: string, query?: object) {
return (dispatch) => {
dispatch(push(path));
if (! query) {
dispatch(push(path));
} else {
dispatch(push(`${path}?` + stringify(query)));
}
};
}
......@@ -4,8 +4,6 @@ import { withStyles } from 'material-ui/styles';
import {Crop} from 'model/crop.model';
import Grid from 'material-ui/Grid';
interface ICropChipsProps extends React.ClassAttributes<any> {
crops: string[];
availableCrops: Crop[];
......@@ -13,28 +11,37 @@ interface ICropChipsProps extends React.ClassAttributes<any> {
}
const styles = (theme) => ({
wrap: {
display: 'flex' as 'flex',
flexWrap: 'wrap' as 'wrap',
padding: theme.spacing.unit / 2,
chipHolder: {
display: 'inline-block',
position: 'relative' as 'relative',
height: '1em',
},
chip: {
display: 'inline-block',
marginRight: theme.spacing.unit,
padding: '.2em .5em',
position: 'relative' as 'relative',
top: '-.2em',
border: 'solid 1px Gray',
borderRadius: '.2em',
backgroundColor: '#e2e2e2',
color: 'Black',
},
});
const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && (
<Grid container>
<Grid item xs={ 12 } className={ classes.wrap }>
{ crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
if (typeof crop === 'string') {
return <div key={ crop } className={ classes.chip }>{ crop }</div>;
} else {
return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
}
}) }
</Grid>
</Grid>
const CropChips = ({crops, availableCrops, classes}: ICropChipsProps) => crops && crops.length > 0 && crops.filter((c) => c !== null).length > 0 && (
<div className={ classes.chipHolder }>
{ crops.map((c) => availableCrops ? availableCrops.find((crop) => crop.code === c) || c : c).map((crop) => {
if (! crop) {
console.log('Null crop in', crops);
return null;
} else if (typeof crop === 'string') {
return <div key={ crop } className={ classes.chip }>{ crop }</div>;
} else {
return <div key={ crop.code } className={ classes.chip }>{ crop.title }</div>;
}
}) }
</div>
);
const mapStateToProps = (state) => ({
......
......@@ -234,8 +234,7 @@ class WelcomePage extends React.Component<any, any> {
const { navigateTo, t } = this.props;
e.preventDefault();
if (query && query.length > 0) {
// TODO is this safe??
navigateTo(`/search?q=${query}`);
navigateTo(`/search`, { q: query });
} else {
this.setState({
...this.state,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment