4 files changed, 36 insertions, 3 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index f636921d..03c5126c 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -10,16 +10,21 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Divider from '@material-ui/core/Divider';
+import { selectDevice } from './actions';
 
 const mapStateToProps = state => ({
   devices: Array.from(state.devices.values())
 });
 
 class DeviceList extends Component {
+  handleClick(device) {
+    this.props.dispatch(selectDevice(device));
+  }
+
   render() {
     const devices = this.props.devices.map((device, index, list) =>
       <Fragment key={device.id.toString()}>
-        <ListItem button>
+        <ListItem button onClick={(e) => this.handleClick(device)}>
           <ListItemAvatar>
             <Avatar>
               <LocationOnIcon />
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index f0305602..35b933b4 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -3,6 +3,16 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 
+const calculateMapCenter = (state) => {
+  if (state.selectedDevice) {
+    const position = state.positions.get(state.selectedDevice);
+    if (position) {
+      return [position.longitude, position.latitude];
+    }
+  }
+  return null;
+}
+
 const mapFeatureProperties = (state, position) => {
   return {
     name: state.devices.get(position.deviceId).name
@@ -10,6 +20,7 @@ const mapFeatureProperties = (state, position) => {
 }
 
 const mapStateToProps = state => ({
+  mapCenter: calculateMapCenter(state),
   data: {
     type: 'FeatureCollection',
     features: Array.from(state.positions.values()).map(position => ({
@@ -135,8 +146,15 @@ class MainMap extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.map && prevProps.data !== this.props.data) {
-      this.map.getSource('positions').setData(this.props.data);
+    if (this.map) {
+      if (prevProps.mapCenter !== this.props.mapCenter) {
+        this.map.easeTo({
+          center: this.props.mapCenter
+        });
+      }
+      if (prevProps.data.features !== this.props.data.features) {
+        this.map.getSource('positions').setData(this.props.data);
+      }
     }
   }
 
diff --git a/modern/src/actions/index.js b/modern/src/actions/index.js
index 8ef49fa8..55278108 100644
--- a/modern/src/actions/index.js
+++ b/modern/src/actions/index.js
@@ -12,3 +12,8 @@ export const updateEvents = events => ({
   type: 'UPDATE_EVENTS',
   events
 })
+
+export const selectDevice = device => ({
+  type: 'SELECT_DEVICE',
+  device
+})
diff --git a/modern/src/reducers/index.js b/modern/src/reducers/index.js
index 4593d1f3..752a4c3f 100644
--- a/modern/src/reducers/index.js
+++ b/modern/src/reducers/index.js
@@ -22,6 +22,11 @@ function rootReducer(state = initialState, action) {
         ...state,
         positions: updateMap(state.positions, action.positions, 'deviceId')
       });
+    case 'SELECT_DEVICE':
+      return Object.assign({}, {
+        ...state,
+        selectedDevice: action.device.id
+      });
     default:
       return state;
   }