diff --git a/src/routes/Dashboard/components/Map/PopUpCard/PopUpCard.scss b/src/routes/Dashboard/components/Map/PopUpCard/PopUpCard.scss index 2f0499e..4c698b8 100644 --- 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 index 4c89f1d..d1e4489 100644 --- 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
{status}
- -
- Current Location -
-
{` - ${currentLocation.city}, - ${currentLocation.state} - `}
+ {currentLocation && +
+
+ Current Location +
+
{` + ${currentLocation.city}, + ${currentLocation.state} + `}
+
+ }
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 index b086f20..75c0d83 100644 --- 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 (
-
+
diff --git a/src/routes/Dashboard/components/ShipmentsTable/ShipmentsTable.jsx b/src/routes/Dashboard/components/ShipmentsTable/ShipmentsTable.jsx index b0b4d7a..afaf201 100644 --- 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,39 +35,54 @@ const styles = { }, }; -export const ShipmentsTable = (props) => ( - - - - + +export class ShipmentsTable extends React.PureComponent { + + handleClick = (rowNumber) => this.props.selectMarker('shipment', this.props.shipments[rowNumber]); + + render() { + const props = this.props; + return ( +
this.handleClick(rowNumber)} + > + + + Active Shipments ({props.shipments.length}) - - - Shipment # - Status - Destination - Date Placed - Estimated Time of Arrival - - - - {props.shipments.map(shipment => - - {shipment.id} - {shipment.status} - {shipment.toId} - {moment(shipment.createdAt).format(timeFormat)} - - {moment(shipment.estimatedTimeOfArrival).format(timeFormat)} - - + + + Shipment # + Status + Destination + Date Placed + Estimated Time of Arrival + + + + {props.shipments.map(shipment => + + {shipment.id} + {shipment.status} + {shipment.toId} + {moment(shipment.createdAt).format(timeFormat)} + + {moment(shipment.estimatedTimeOfArrival).format(timeFormat)} + + )} - -
-); + + + ); + } + +} ShipmentsTable.propTypes = { + selectMarker: React.PropTypes.func.isRequired, shipments: React.PropTypes.array, }; @@ -73,8 +90,13 @@ ShipmentsTable.propTypes = { // 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);