From ddadcda68d6f33063e59e47cd5c5888367a4a121 Mon Sep 17 00:00:00 2001 From: Chris Repka Date: Thu, 24 Sep 2020 08:03:26 -0500 Subject: [PATCH 1/5] Refactored BackButton to navigate properly, refactored navbar DataHub bar now global across site with search rendering conditionally. Backbutton navigation solved with simpler nvigation logic. Resolves #280 --- src/App.jsx | 20 ++++++--- .../DialogTemplateListItems/BackButton.jsx | 26 ++++++------ src/components/Header.jsx | 41 +++++-------------- src/components/OrderTnrisDataForm.jsx | 14 ++++++- .../TnrisDownloadTemplate.jsx | 2 +- src/containers/BackButtonContainer.jsx | 13 ++++-- .../OrderTnrisDataFormContainer.jsx | 8 +++- src/sass/_catalog.scss | 4 +- 8 files changed, 70 insertions(+), 58 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index ee0b376..92f042e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ import ReactGA from 'react-ga'; import rootReducer from './reducers/rootReducer'; import CatalogContainer from './containers/CatalogContainer'; +import TimedModal from './components/TimedModal'; export const history = createBrowserHistory(); export const store = createStore(rootReducer(history), compose(applyMiddleware(thunk, routerMiddleware(history)))); @@ -22,11 +23,20 @@ class App extends Component { render() { return ( - - - - - + + + + n + 3 === 7} + count={10} + > +

I have passed children to this component via props

+ + + + + + ); } } diff --git a/src/components/DialogTemplateListItems/BackButton.jsx b/src/components/DialogTemplateListItems/BackButton.jsx index d931e4f..d66d27b 100644 --- a/src/components/DialogTemplateListItems/BackButton.jsx +++ b/src/components/DialogTemplateListItems/BackButton.jsx @@ -8,26 +8,24 @@ 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. + // 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); + console.log(this.props.selectedCollection, this.props.previousUrl) + } else { this.props.setViewCatalog(); - this.props.setUrl(this.props.previousUrl); + this.props.setUrl(this.props.catalogFilterUrl); } } render() { - + console.log(this.props) return ( ) : window.innerWidth >= tablet && this.props.view !== 'catalog' ? ( to finalize your order.

); @@ -636,7 +646,7 @@ class OrderTnrisDataForm extends Component { This dataset has been added to the shopping cart.

- Please visit the shopping cart to finalize your order. + Please visit the to finalize your order.

); diff --git a/src/components/TnrisDownloadTemplate/TnrisDownloadTemplate.jsx b/src/components/TnrisDownloadTemplate/TnrisDownloadTemplate.jsx index d143e3d..b9c7665 100644 --- a/src/components/TnrisDownloadTemplate/TnrisDownloadTemplate.jsx +++ b/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) { diff --git a/src/containers/BackButtonContainer.jsx b/src/containers/BackButtonContainer.jsx index 1c48aeb..8169159 100644 --- a/src/containers/BackButtonContainer.jsx +++ b/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) => ({ diff --git a/src/containers/OrderTnrisDataFormContainer.jsx b/src/containers/OrderTnrisDataFormContainer.jsx index a250b65..dcb9f69 100644 --- a/src/containers/OrderTnrisDataFormContainer.jsx +++ b/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)); }, diff --git a/src/sass/_catalog.scss b/src/sass/_catalog.scss index 78695ec..bd53372 100644 --- a/src/sass/_catalog.scss +++ b/src/sass/_catalog.scss @@ -4,14 +4,14 @@ styles for component: Catalog */ .catalog-component { - margin-bottom: 75px; + margin-bottom: 106px; .catalog-view-container { padding-top: 106px; } .other-view-container { - padding-top: 35px; + padding-top: 106px; width: 100%; height: auto; } From 867bf0898da61ade6d1be9bb50d76570f0291423 Mon Sep 17 00:00:00 2001 From: Chris Repka Date: Thu, 24 Sep 2020 08:15:16 -0500 Subject: [PATCH 2/5] Fixed BackButton for Historical Imagery OnComponentWillUnmount still clear selectedCollection from store in Historical Imagery Component. Removed this lifecycle to keep selectedCollection so that backButton can use this prop to navigate back from cart. --- .../HistoricalAerialTemplate/HistoricalAerialTemplate.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HistoricalAerialTemplate/HistoricalAerialTemplate.jsx b/src/components/HistoricalAerialTemplate/HistoricalAerialTemplate.jsx index e3e7915..a537ee8 100644 --- a/src/components/HistoricalAerialTemplate/HistoricalAerialTemplate.jsx +++ b/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) { From ec70cc100925c4903225c7b08c1d83f30d705876 Mon Sep 17 00:00:00 2001 From: Chris Repka Date: Fri, 25 Sep 2020 08:18:48 -0500 Subject: [PATCH 3/5] Rolled back changes to Header, removed console logs, removed altered css Roll back to change only back button and cart link --- .../DialogTemplateListItems/BackButton.jsx | 7 +-- src/components/Header.jsx | 43 +++++++++++++------ src/sass/_catalog.scss | 2 +- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/DialogTemplateListItems/BackButton.jsx b/src/components/DialogTemplateListItems/BackButton.jsx index d66d27b..dbbfe31 100644 --- a/src/components/DialogTemplateListItems/BackButton.jsx +++ b/src/components/DialogTemplateListItems/BackButton.jsx @@ -8,16 +8,14 @@ export default class BackButton extends React.Component { } handleBack() { - // check if in cart. + // 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); - console.log(this.props.selectedCollection, this.props.previousUrl) - + this.props.selectCollection(this.props.selectedCollection); } else { this.props.setViewCatalog(); this.props.setUrl(this.props.catalogFilterUrl); @@ -25,7 +23,6 @@ export default class BackButton extends React.Component { } render() { - console.log(this.props) return ( ) : window.innerWidth >= tablet && this.props.view !== 'catalog' ? ( +

) : window.innerWidth >= tablet && this.props.view !== 'catalog' ? ( to finalize your order. + Please visit the to finalize your order.

); @@ -646,7 +646,7 @@ class OrderTnrisDataForm extends Component { This dataset has been added to the shopping cart.

- Please visit the to finalize your order. + Please visit the to finalize your order.

);