From 6de35a391265306237d56e9edf0af5a5f5e5128e Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 24 May 2018 15:10:14 +0300
Subject: [PATCH] Adjust to simpler result mapping, add some initial result
data
---
src/components/ResultMarker.js | 12 +-
src/components/ResultTable.js | 75 ++++--------
src/components/SimpleTable.js | 20 ++--
src/containers/MapApp.js | 8 +-
src/reducers/search.js | 208 ++++++++++++++++++++++++++++++++-
5 files changed, 246 insertions(+), 77 deletions(-)
diff --git a/src/components/ResultMarker.js b/src/components/ResultMarker.js
index 827e80e7..9951d531 100644
--- a/src/components/ResultMarker.js
+++ b/src/components/ResultMarker.js
@@ -6,21 +6,21 @@ const ResultMarker = ({ label, lat, long }) => {
if (typeof lat === 'undefined' || typeof long === 'undefined') {
return(null);
} else {
- const pos = [+lat[0].value, +long[0].value];
+ const pos = [+lat, +long];
return (
<Marker position={pos}>
<Popup>
- <p>{label[0].value}</p>
+ <p>{label}</p>
</Popup>
</Marker>
);
- }
+ }
};
ResultMarker.propTypes = {
- label: PropTypes.array.isRequired,
- lat: PropTypes.array.isRequired,
- long: PropTypes.array.isRequired,
+ label: PropTypes.string.isRequired,
+ lat: PropTypes.string.isRequired,
+ long: PropTypes.string.isRequired,
};
export default ResultMarker;
diff --git a/src/components/ResultTable.js b/src/components/ResultTable.js
index dc5b63d6..7db559cd 100644
--- a/src/components/ResultTable.js
+++ b/src/components/ResultTable.js
@@ -6,6 +6,7 @@ import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
+import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Toolbar from '@material-ui/core/Toolbar';
@@ -18,18 +19,11 @@ import DeleteIcon from '@material-ui/icons/Delete';
import FilterListIcon from '@material-ui/icons/FilterList';
import { lighten } from '@material-ui/core/styles/colorManipulator';
-let counter = 0;
-function createData(name, calories, fat, carbs, protein) {
- counter += 1;
- return { id: counter, name, calories, fat, carbs, protein };
-}
-
const columnData = [
- { id: 'name', numeric: false, disablePadding: true, label: 'Name' },
- { id: 'calories', numeric: true, disablePadding: false, label: 'Type' },
- { id: 'fat', numeric: true, disablePadding: false, label: 'Area' },
- { id: 'carbs', numeric: true, disablePadding: false, label: 'Carbs (g)' },
- { id: 'protein', numeric: true, disablePadding: false, label: 'Protein (g)' },
+ { id: 'name', numeric: false, disablePadding: false, label: 'Name' },
+ { id: 'type', numeric: false, disablePadding: false, label: 'Type' },
+ { id: 'area', numeric: false, disablePadding: false, label: 'Area' },
+ { id: 'source', numeric: false, disablePadding: false, label: 'Source' },
];
class EnhancedTableHead extends React.Component {
@@ -130,7 +124,7 @@ let EnhancedTableToolbar = props => {
</Typography>
) : (
<Typography variant="title" id="tableTitle">
- Search results
+ Nutrition
</Typography>
)}
</div>
@@ -164,8 +158,7 @@ EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);
const styles = theme => ({
root: {
width: '100%',
- height: '100%',
- marginTop: theme.spacing.unit * 2,
+ marginTop: theme.spacing.unit * 3,
},
table: {
minWidth: 700,
@@ -183,21 +176,7 @@ class EnhancedTable extends React.Component {
order: 'asc',
orderBy: 'calories',
selected: [],
- data: [
- createData('Cupcake', 305, 3.7, 67, 4.3),
- createData('Donut', 452, 25.0, 51, 4.9),
- createData('Eclair', 262, 16.0, 24, 6.0),
- createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
- createData('Gingerbread', 356, 16.0, 49, 3.9),
- createData('Honeycomb', 408, 3.2, 87, 6.5),
- createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
- createData('Jelly Bean', 375, 0.0, 94, 0.0),
- createData('KitKat', 518, 26.0, 65, 7.0),
- createData('Lollipop', 392, 0.2, 98, 0.0),
- createData('Marshmallow', 318, 0, 81, 2.0),
- createData('Nougat', 360, 19.0, 9, 37.0),
- createData('Oreo', 437, 18.0, 63, 4.0),
- ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ data: this.props.data,
page: 0,
rowsPerPage: 5,
};
@@ -221,7 +200,7 @@ class EnhancedTable extends React.Component {
handleSelectAllClick = (event, checked) => {
if (checked) {
- this.setState({ selected: this.state.data.map(n => n.id) });
+ this.setState({ selected: this.state.data.map(n => n.s) });
return;
}
this.setState({ selected: [] });
@@ -248,20 +227,11 @@ class EnhancedTable extends React.Component {
this.setState({ selected: newSelected });
};
- handleChangePage = (event, page) => {
- this.setState({ page });
- };
-
- handleChangeRowsPerPage = event => {
- this.setState({ rowsPerPage: event.target.value });
- };
-
isSelected = id => this.state.selected.indexOf(id) !== -1;
render() {
const { classes } = this.props;
- const { data, order, orderBy, selected, rowsPerPage, page } = this.state;
- const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
+ const { data, order, orderBy, selected } = this.state;
return (
<Paper className={classes.root}>
@@ -277,36 +247,30 @@ class EnhancedTable extends React.Component {
rowCount={data.length}
/>
<TableBody>
- {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
- const isSelected = this.isSelected(n.id);
+ {data.map(n => {
+ const isSelected = this.isSelected(n.s);
return (
<TableRow
hover
- onClick={event => this.handleClick(event, n.id)}
+ onClick={event => this.handleClick(event, n.s)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
- key={n.id}
+ key={n.s}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
- <TableCell component="th" scope="row" padding="none">
- {n.name}
+ <TableCell component="th" scope="row">
+ {n.label}
</TableCell>
- <TableCell numeric>{n.calories}</TableCell>
- <TableCell numeric>{n.fat}</TableCell>
- <TableCell numeric>{n.carbs}</TableCell>
- <TableCell numeric>{n.protein}</TableCell>
+ <TableCell>{n.typeLabel}</TableCell>
+ <TableCell>{n.broaderAreaLabel}</TableCell>
+ <TableCell>{n.source}</TableCell>
</TableRow>
);
})}
- {emptyRows > 0 && (
- <TableRow style={{ height: 49 * emptyRows }}>
- <TableCell colSpan={6} />
- </TableRow>
- )}
</TableBody>
</Table>
</div>
@@ -317,6 +281,7 @@ class EnhancedTable extends React.Component {
EnhancedTable.propTypes = {
classes: PropTypes.object.isRequired,
+ data: PropTypes.array
};
export default withStyles(styles)(EnhancedTable);
diff --git a/src/components/SimpleTable.js b/src/components/SimpleTable.js
index 52d7c604..5e2f49a4 100644
--- a/src/components/SimpleTable.js
+++ b/src/components/SimpleTable.js
@@ -15,16 +15,16 @@ const styles = theme => ({
overflowX: 'auto',
},
table: {
- minWidth: 700,
+ minWidth: 750,
},
});
const SimpleTable = (props) => {
- const { classes, search } = props;
-
+ const { classes, data } = props;
+
return (
<Paper className={classes.root}>
- {search.results.length > 0 &&
+ {data.length > 0 &&
<Table className={classes.table}>
<TableHead>
<TableRow>
@@ -35,15 +35,15 @@ const SimpleTable = (props) => {
</TableRow>
</TableHead>
<TableBody>
- {search.results.map(result => {
+ {data.map(result => {
return (
<TableRow key={result.s}>
<TableCell component="th" scope="row">
- {result.label[0].value}
+ {result.label}
</TableCell>
- <TableCell>{result.typeLabel[0].value}</TableCell>
- <TableCell>{result.broaderAreaLabel[0].value}</TableCell>
- <TableCell>{result.source[0].value}</TableCell>
+ <TableCell>{result.typeLabel}</TableCell>
+ <TableCell>{result.broaderAreaLabel}</TableCell>
+ <TableCell>{result.source}</TableCell>
</TableRow>
);
})}
@@ -56,7 +56,7 @@ const SimpleTable = (props) => {
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
- search: PropTypes.object.isRequired,
+ data: PropTypes.array.isRequired,
};
export default withStyles(styles)(SimpleTable);
diff --git a/src/containers/MapApp.js b/src/containers/MapApp.js
index f2a1ee97..cbfcfb6f 100644
--- a/src/containers/MapApp.js
+++ b/src/containers/MapApp.js
@@ -15,7 +15,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import IntegrationAutosuggest from '../components/IntegrationAutosuggest';
import LeafletMap from '../components/LeafletMap';
import Message from '../components/Message';
-// import ResultTable from '../components/ResultTable';
+//import ResultTable from '../components/ResultTable';
import SimpleTable from '../components/SimpleTable';
import {
@@ -28,7 +28,7 @@ import {
closeDrawer
} from '../actions';
-const drawerWidth = 700;
+const drawerWidth = 800;
const styles = theme => ({
root: {
@@ -141,7 +141,9 @@ let MapApp = (props) => {
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</div>
- <SimpleTable search={props.search} />
+ {props.search.results.length > 0 &&
+ <SimpleTable data={props.search.results} />
+ }
</Drawer>
);
diff --git a/src/reducers/search.js b/src/reducers/search.js
index 9f5fa078..5424102e 100644
--- a/src/reducers/search.js
+++ b/src/reducers/search.js
@@ -10,10 +10,212 @@ import suggestions from './suggestions';
import results from './results';
export const INITIAL_STATE = {
- query: '',
+ query: 'kive',
datasets: ['warsa_karelian_places', 'warsa_municipalities'],
suggestions: [],
- results: []
+ results: [ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_20949',
+ label: 'Kiveksienkennäs',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Lumivaara',
+ lat: '61.470031',
+ long: '30.12829',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_19450',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Jääski',
+ lat: '60.998066',
+ long: '28.795745',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_26729',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Uukuniemi',
+ lat: '61.703397',
+ long: '30.03475',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_31110',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Uukuniemi',
+ lat: '61.784059',
+ long: '30.167493',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_15730',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Hiitola',
+ lat: '61.182671',
+ long: '29.736767',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_22715',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Kanneljärvi',
+ lat: '60.401013',
+ long: '29.452854',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_14516',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Kurkijoki',
+ lat: '61.478766',
+ long: '29.715502',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_21873',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Käkisalmen mlk',
+ lat: '60.958474',
+ long: '30.163148',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_26423',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Käkisalmen mlk',
+ lat: '61.048316',
+ long: '29.99702',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_26573',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Rautu',
+ lat: '60.527514',
+ long: '30.270254',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_27354',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Räisälä',
+ lat: '60.940371',
+ long: '29.738772',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_18419',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Suojärvi',
+ lat: '62.113113',
+ long: '32.410906',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_25949',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Valkjärvi',
+ lat: '60.518527',
+ long: '29.723975',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_29974',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Viipurin mlk',
+ lat: '60.594928',
+ long: '28.883801',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_30290',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Viipurin mlk',
+ lat: '60.708614',
+ long: '28.568478',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_19637',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Viipurin mlk',
+ lat: '60.863643',
+ long: '28.819216',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_19068',
+ label: 'Kivelä',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Vuoksenranta',
+ lat: '60.796359',
+ long: '29.574668',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_38361',
+ label: 'Kivenjoki',
+ typeLabel: 'Vesimuodostuma',
+ broaderAreaLabel: 'Sortavalan mlk',
+ lat: '61.69327',
+ long: '30.563798',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_13448',
+ label: 'Kivenjuuri',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Kurkijoki',
+ lat: '61.407188',
+ long: '29.847207',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_28671',
+ label: 'Kivenkaivanto',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Lumivaara',
+ lat: '61.416124',
+ long: '30.184251',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_30183',
+ label: 'Kivenkolkka',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Metsäpirtti',
+ lat: '60.589715',
+ long: '30.489737',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_26220',
+ label: 'Kivenkorva',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Kesälahti',
+ lat: '61.829013',
+ long: '29.939999',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_14191',
+ label: 'Kivenkorva',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Antrea',
+ lat: '60.875455',
+ long: '29.205412',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_30481',
+ label: 'Kivenkulma',
+ typeLabel: 'Rakennettu kohde',
+ broaderAreaLabel: 'Sortavalan mlk',
+ lat: '61.710203',
+ long: '30.772071',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_38957',
+ label: 'Kivenkulmankoski',
+ typeLabel: 'Vesimuodostuma',
+ broaderAreaLabel: 'Salmi',
+ lat: '61.550062',
+ long: '31.633363',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_14',
+ label: 'Kivennapa',
+ typeLabel: 'Kirkonkylä , kaupunki',
+ broaderAreaLabel: 'Kivennapa',
+ lat: '60.348002',
+ long: '29.72542',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_9242',
+ label: 'Kivennavanmäki',
+ typeLabel: 'Maastokohde',
+ broaderAreaLabel: 'Impilahti',
+ lat: '61.623947',
+ long: '31.448691',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/karelian_places/k_place_10136',
+ label: 'Kivennavansaari',
+ typeLabel: 'Maastokohde',
+ broaderAreaLabel: 'Äyräpää',
+ lat: '60.741968',
+ long: '29.428721',
+ source: 'KMN' },
+ { s: 'http://ldf.fi/warsa/places/municipalities/m_place_568',
+ label: 'Kivennapa',
+ typeLabel: 'Kunta',
+ broaderAreaLabel: 'Viipurin lääni',
+ lat: '60.365334',
+ long: '29.820196',
+ source: 'FWM' } ]
};
const search = (state = INITIAL_STATE, action) => {
@@ -29,7 +231,7 @@ const search = (state = INITIAL_STATE, action) => {
case UPDATE_RESULTS:
return {
...state,
- suggestions: [],
+ suggestions: [],
results: results(state.results, action)
};
--
GitLab