Merge pull request #281 from TNRIS/feature/header-navigation

Refactored BackButton to navigate properly, refactored navbar

README.md

@@ -83,4 +83,4 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/de
 
 ### `npm run build` fails to minify
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

src/components/DialogTemplateListItems/BackButton.jsx

@@ -8,26 +8,21 @@ export default class BackButton extends React.Component {
   }
 
   handleBack() {
-    // special handling for geoFilter due to clear filter functionality inside
-    // the geoFilter which updages the url and conflicts with previousUrl
-    if (this.props.view === 'geoFilter') {
-      this.props.setViewCatalog();
-      this.props.setUrl(this.props.catalogFilterUrl);
-      // this next condition is for when developing locally.
-      // on update to code, app refreshes and previousUrl becomes current url;
-      // override this by hard setting the url to root
-    } else if (this.props.previousUrl === window.location.pathname) {
-      this.props.setViewCatalog();
-      this.props.setUrl('/')
-      // all other conditions, setViewCatalog and use previousUrl
+    // Check if in cart view. 
+    // Cart is only route with multiple paths to it. 
+    // So if previousUrl is collection, go back to that collection
+    // Else, go home using stored filter parameters
+    if (this.props.view === 'orderCart' && this.props.previousUrl.startsWith('/collection')) {
+        this.props.setViewCollection();
+        this.props.setUrl(this.props.previousUrl);
+        this.props.selectCollection(this.props.selectedCollection);      
     } else {
       this.props.setViewCatalog();
-      this.props.setUrl(this.props.previousUrl);
+      this.props.setUrl(this.props.catalogFilterUrl);
     }
   }
 
   render() {
-
     return (
       <button
         className="mdc-icon-button material-icons close-collection"

src/components/Header.jsx

@@ -217,4 +217,4 @@ export default class Header extends React.Component {
       </div>
     )
   }
-}
+}

src/components/HistoricalAerialTemplate/HistoricalAerialTemplate.jsx

@@ -29,7 +29,7 @@ export default class HistoricalAerialTemplate extends React.Component {
   }
 
   componentWillUnmount() {
-    this.props.clearSelectedCollection();
+    //this.props.clearSelectedCollection();
   }
 
   setTemplateView(viewString) {

src/components/OrderTnrisDataForm.jsx

@@ -6,6 +6,7 @@ import {MDCRipple} from '@material/ripple'
 import {MDCSwitch} from '@material/switch'
 import {MDCTextFieldHelperText} from '@material/textfield/helper-text'
 
+
 class OrderTnrisDataForm extends Component {
 
   constructor(props) {
@@ -35,6 +36,8 @@ class OrderTnrisDataForm extends Component {
       this.submitForm = this.submitForm.bind(this);
       this.handleChange = this.handleChange.bind(this);
       this.handleSwitch = this.handleSwitch.bind(this);
+      this.handleOrderCartView = this.handleOrderCartView.bind(this);
+
       // set aside declaration of data type: Lidar, Historic Imagery, or all others
       if (this.collection.category && this.collection.category.indexOf('Lidar') !== -1) {
         this.dataForm = 'lidar';
@@ -153,6 +156,13 @@ class OrderTnrisDataForm extends Component {
     }
   }
 
+  handleOrderCartView() {
+    if (this.props.view !== 'orderCart') {
+      this.props.setViewOrderCart();
+      this.props.setUrl('/cart/');
+    }
+  }
+
   handleChange(event) {
     // on form field value change, update state
     const name = event.target.name
@@ -624,7 +634,7 @@ class OrderTnrisDataForm extends Component {
             This dataset is already in the shopping cart.
           </p>
           <p className="mdc-typography--body2">
-            Please visit the shopping cart to finalize your order.
+            Please visit the <button style={{color: '#1E8DC1'}} className="mdc-button" onClick={this.handleOrderCartView} type='button'>shopping cart</button> to finalize your order.
           </p>
         </div>
       );
@@ -636,7 +646,7 @@ class OrderTnrisDataForm extends Component {
             This dataset has been added to the shopping cart.
           </p>
           <p className="mdc-typography--body2">
-            Please visit the shopping cart to finalize your order.
+            Please visit the <button style={{color: '#1E8DC1'}} className="mdc-button" onClick={this.handleOrderCartView} type='button'>shopping cart</button> to finalize your order.
           </p>
         </div>
       );

src/components/TnrisDownloadTemplate/TnrisDownloadTemplate.jsx

@@ -40,7 +40,7 @@ export default class TnrisDownloadTemplate extends React.Component {
   }
 
   componentWillUnmount() {
-    this.props.clearSelectedCollection();
+    //this.props.clearSelectedCollection();
   }
 
   setTemplateView(viewString) {

src/containers/BackButtonContainer.jsx

@@ -3,13 +3,20 @@ import {connect} from 'react-redux'
 import BackButton from '../components/DialogTemplateListItems/BackButton'
 
 import {catalogActions,
-        collectionActions,
-        urlTrackerActions} from '../actions'
+  collectionActions,
+  urlTrackerActions,
+} from '../actions'
+
+import {
+  getAllCollections
+} from '../selectors/collectionSelectors'
 
 const mapStateToProps = state => ({
   previousUrl: state.urlTracker.previousUrl,
   catalogFilterUrl: state.urlTracker.catalogFilterUrl,
-  view: state.catalog.view
+  view: state.catalog.view,
+  selectedCollection: state.collections.selectedCollection,
+  collections: getAllCollections(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/containers/OrderTnrisDataFormContainer.jsx

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux'
 
-import {orderCartActions} from '../actions'
+import {orderCartActions, urlTrackerActions, catalogActions} from '../actions'
 import {getAllCollections} from '../selectors/collectionSelectors'
 import OrderTnrisDataForm from '../components/OrderTnrisDataForm'
 
@@ -13,6 +13,12 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+  setUrl: (newUrl, history) => {
+    dispatch(urlTrackerActions.setUrl(newUrl, history));
+  },
+  setViewOrderCart: () => {
+    dispatch(catalogActions.setViewOrderCart());
+  },
   addCollectionToCart: (collectionId, formInfo) => {
     dispatch(orderCartActions.addCollectionToCart(collectionId, formInfo));
   },

src/sass/_catalog.scss

@@ -4,7 +4,7 @@ styles for component: Catalog
 */
 
 .catalog-component {
-  margin-bottom: 75px;
+  margin-bottom: 106px;
 
   .catalog-view-container {
     padding-top: 106px;