#223 Table should update map

IBM-Cloud · Dec 14, 2016 · 25da02a · 25da02a
1 parent 5291607
commit 25da02a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git a/src/routes/Dashboard/components/Map/PopUpCard/PopUpCard.scss b/src/routes/Dashboard/components/Map/PopUpCard/PopUpCard.scss
@@ -70,7 +70,8 @@
   color: $primary1Color;
   font-weight: bold;
   font-size: 14px;
-  margin-bottom: .5rem;
+  margin-top: 1rem;
+  margin-bottom: 0.05rem;
 }
 
 h2 {

diff --git a/src/routes/Dashboard/components/Map/PopUpCard/ShipmentCard/ShipmentCard.jsx b/src/routes/Dashboard/components/Map/PopUpCard/ShipmentCard/ShipmentCard.jsx
@@ -20,14 +20,17 @@ const ShipmentCard = (props) => {
         Status
       </div>
       <div>{status}</div>
-
-      <div className={classes.subtitle}>
-        Current Location
-      </div>
-      <div>{`
-        ${currentLocation.city},
-        ${currentLocation.state}
-      `}</div>
+      {currentLocation &&
+        <div>
+          <div className={classes.subtitle}>
+            Current Location
+          </div>
+          <div>{`
+            ${currentLocation.city},
+            ${currentLocation.state}
+          `}</div>
+        </div>
+        }
 
       <div className={classes.subtitle}>
         Estimated Time of Arrival

diff --git a/src/routes/Dashboard/components/Map/PopUpCard/StormCard/StormCard.jsx b/src/routes/Dashboard/components/Map/PopUpCard/StormCard/StormCard.jsx
@@ -11,7 +11,7 @@ const StormCard = ({ storm }) => {
   return (
     <div className={classes.contentContainer}>
       <div className={classes.iconTitleContainer}>
-        <div className={classes.subtitle}>
+        <div>
           <img className={classes.weatherIcon} role="presentation" src="../storm.png" />
         </div>
         <div>

diff --git a/src/routes/Dashboard/components/ShipmentsTable/ShipmentsTable.jsx b/src/routes/Dashboard/components/ShipmentsTable/ShipmentsTable.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { palette } from 'styles/muiTheme';
+import { selectMarker } from 'routes/Dashboard/modules/Dashboard';
+
 import {
   Table,
   TableBody,
@@ -33,48 +35,68 @@ const styles = {
   },
 };
 
-export const ShipmentsTable = (props) => (
-  <Table wrapperStyle={styles.wrapper}>
-    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
-      <TableRow>
-        <TableHeaderColumn style={styles.meta} colSpan="5">
+
+export class ShipmentsTable extends React.PureComponent {
+
+  handleClick = (rowNumber) => this.props.selectMarker('shipment', this.props.shipments[rowNumber]);
+
+  render() {
+    const props = this.props;
+    return (
+      <Table
+        wrapperStyle={styles.wrapper} onCellClick={(rowNumber) => this.handleClick(rowNumber)}
+      >
+        <TableHeader displaySelectAll={false} adjustForrowNumberCheckbox={false}>
+          <TableRow>
+            <TableHeaderColumn style={styles.meta} colSpan="5">
           Active Shipments ({props.shipments.length})
         </TableHeaderColumn>
-      </TableRow>
-      <TableRow>
-        <TableHeaderColumn style={styles.header}>Shipment #</TableHeaderColumn>
-        <TableHeaderColumn style={styles.header}>Status</TableHeaderColumn>
-        <TableHeaderColumn style={styles.header}>Destination</TableHeaderColumn>
-        <TableHeaderColumn style={styles.header}>Date Placed</TableHeaderColumn>
-        <TableHeaderColumn style={styles.header}>Estimated Time of Arrival</TableHeaderColumn>
-      </TableRow>
-    </TableHeader>
-    <TableBody displayRowCheckbox={false}>
-      {props.shipments.map(shipment =>
-        <TableRow key={shipment.id}>
-          <TableRowColumn>{shipment.id}</TableRowColumn>
-          <TableRowColumn>{shipment.status}</TableRowColumn>
-          <TableRowColumn>{shipment.toId}</TableRowColumn>
-          <TableRowColumn>{moment(shipment.createdAt).format(timeFormat)}</TableRowColumn>
-          <TableRowColumn>
-            {moment(shipment.estimatedTimeOfArrival).format(timeFormat)}
-          </TableRowColumn>
-        </TableRow>
+          </TableRow>
+          <TableRow>
+            <TableHeaderColumn style={styles.header}>Shipment #</TableHeaderColumn>
+            <TableHeaderColumn style={styles.header}>Status</TableHeaderColumn>
+            <TableHeaderColumn style={styles.header}>Destination</TableHeaderColumn>
+            <TableHeaderColumn style={styles.header}>Date Placed</TableHeaderColumn>
+            <TableHeaderColumn style={styles.header}>Estimated Time of Arrival</TableHeaderColumn>
+          </TableRow>
+        </TableHeader>
+        <TableBody displayRowCheckbox={false}>
+          {props.shipments.map(shipment =>
+            <TableRow
+              key={shipment.id}
+            >
+              <TableRowColumn>{shipment.id}</TableRowColumn>
+              <TableRowColumn>{shipment.status}</TableRowColumn>
+              <TableRowColumn>{shipment.toId}</TableRowColumn>
+              <TableRowColumn>{moment(shipment.createdAt).format(timeFormat)}</TableRowColumn>
+              <TableRowColumn>
+                {moment(shipment.estimatedTimeOfArrival).format(timeFormat)}
+              </TableRowColumn>
+            </TableRow>
       )}
-    </TableBody>
-  </Table>
-);
+        </TableBody>
+      </Table>
+    );
+  }
+
+}
 
 ShipmentsTable.propTypes = {
+  selectMarker: React.PropTypes.func.isRequired,
   shipments: React.PropTypes.array,
 };
 
 // ------------------------------------
 // Connect Component to Redux
 // ------------------------------------
 
+const mapActionCreators = {
+  selectMarker,
+};
+
 const mapStateToProps = (state) => ({
   shipments: state.dashboard.shipments,
 });
 
-export default connect(mapStateToProps, {})(ShipmentsTable);
+
+export default connect(mapStateToProps, mapActionCreators)(ShipmentsTable);