Merge pull request #96 from ascribe/AD-1503-email-link-param-prefills-not-working

AD-1503 Email links do not prefill fields

js/components/ascribe_detail/edition_action_panel.js

@@ -72,10 +72,10 @@ let EditionActionPanel = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     refreshCollection() {
@@ -84,7 +84,7 @@ let EditionActionPanel = React.createClass({
         EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
     },
 
-    handleSuccess(response){
+    handleSuccess(response) {
         this.refreshCollection();
         this.props.handleSuccess();
         if (response){
@@ -93,7 +93,7 @@ let EditionActionPanel = React.createClass({
         }
     },
 
-    render(){
+    render() {
         const {
             actionPanelButtonListType: ActionPanelButtonListType,
             edition,

js/components/ascribe_detail/piece_container.js

@@ -159,7 +159,7 @@ let PieceContainer = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getCreateEditionsDialog() {

js/components/ascribe_forms/form_send_contract_agreement.js

@@ -58,7 +58,7 @@ let SendContractAgreementForm = React.createClass({
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getFormData() {

js/components/ascribe_routes/proxy_handler.js

@@ -40,7 +40,7 @@ export function AuthRedirect({to, when}) {
 
         // and redirect if `true`.
         if(exprToValidate) {
-            window.setTimeout(() => history.replaceState(null, to, query));
+            window.setTimeout(() => history.replace({ query, pathname: to }));
             return true;
 
             // Otherwise there can also be the case that the backend
@@ -48,7 +48,7 @@ export function AuthRedirect({to, when}) {
         } else if(!exprToValidate && when === 'loggedIn' && redirect) {
 
             delete query.redirect;
-            window.setTimeout(() => history.replaceState(null, '/' + redirect, query));
+            window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
             return true;
 
         } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {

js/components/ascribe_slides_container/slides_container.js

@@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
     // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
     nextSlide(additionalQueryParams) {
         const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
-        let nextSlide = slideNum + 1;
+        this.setSlideNum(slideNum + 1, additionalQueryParams);
-        this.setSlideNum(nextSlide, additionalQueryParams);
     },
 
     setSlideNum(nextSlideNum, additionalQueryParams = {}) {
-        let queryParams = Object.assign(this.props.location.query, additionalQueryParams);
+        const { location: { pathname } } = this.props;
-        queryParams.slide_num = nextSlideNum;
+        const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
-        this.history.pushState(null, this.props.location.pathname, queryParams);
+
+        this.history.push({ pathname, query });
     },
 
     // breadcrumbs are defined as attributes of the slides.
     // To extract them we have to read the DOM element's attributes
     extractBreadcrumbs() {
         const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
-        let breadcrumbs = [];
+        const breadcrumbs = [];
 
         React.Children.map(this.props.children, (child, i) => {
             if(child && i >= startFrom && child.props['data-slide-title']) {

js/components/password_reset_container.js

@@ -130,8 +130,9 @@ let PasswordResetForm = React.createClass({
     },
 
     handleSuccess() {
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
-        let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
+
+        const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 

js/components/piece_list.js

@@ -115,13 +115,13 @@ let PieceList = React.createClass({
     },
 
     componentDidUpdate() {
-        const { redirectTo, shouldRedirect } = this.props;
+        const { location: { query }, redirectTo, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
         if (redirectTo && unfilteredPieceListCount === 0 &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0);
+            window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
         }
     },
 
@@ -174,15 +174,16 @@ let PieceList = React.createClass({
         }
     },
 
-    searchFor(searchTerm) {
+    searchFor(search) {
-        this.loadPieceList({
+        const { location: { pathname } } = this.props;
-            page: 1,
+
-            search: searchTerm
+        this.loadPieceList({ search, page: 1 });
-        });
+        this.history.push({ pathname, query: { page: 1 } });
-        this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
-    applyFilterBy(filterBy){
+    applyFilterBy(filterBy) {
+        const { location: { pathname } } = this.props;
+
         this.setState({
             isFilterDirty: true
         });
@@ -207,7 +208,7 @@ let PieceList = React.createClass({
 
         // we have to redirect the user always to page one as it could be that there is no page two
         // for filtered pieces
-        this.history.pushState(null, this.props.location.pathname, {page: 1});
+        this.history.push({ pathname, query: { page: 1 } });
     },
 
     applyOrderBy(orderBy) {

js/components/register_piece.js

@@ -66,7 +66,7 @@ let RegisterPiece = React.createClass( {
     },
 
     handleSuccess(response){
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // once the user was able to register a piece successfully, we need to make sure to keep
@@ -80,7 +80,7 @@ let RegisterPiece = React.createClass( {
             this.state.filterBy
         );
 
-        this.history.pushState(null, `/pieces/${response.piece.id}`);
+        this.history.push(`/pieces/${response.piece.id}`);
     },
 
     getSpecifyEditions() {

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -106,7 +106,7 @@ const PRRegisterPieceForm = React.createClass({
                         GlobalNotificationActions.appendGlobalNotification(notificationMessage);
                     });
             })
-            .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`))
+            .then(() => this.history.push(`/pieces/${this.state.piece.id}`))
             .catch((err) => {
                 const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
                                         getLangText(' Please contact support@ascribe.io');

js/components/whitelabel/prize/portfolioreview/components/pr_landing.js

@@ -14,7 +14,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 import UserStore from '../../../../../stores/user_store';
 import UserActions from '../../../../../actions/user_actions';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
+import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
@@ -34,15 +34,18 @@ const PRLanding = React.createClass({
 
     componentDidMount() {
         const { location } = this.props;
+
         UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
         PrizeActions.fetchPrize();
 
-        if(location && location.query && location.query.redirect) {
+        if (location && location.query && location.query.redirect) {
-            let queryCopy = JSON.parse(JSON.stringify(location.query));
+            window.setTimeout(() => this.history.replace({
-            delete queryCopy.redirect;
+                pathname: `/${location.query.redirect}`,
-            window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy));
+                query: omitFromObject(location.query, ['redirect'])
+            }));
         }
     },
 

js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js

@@ -39,7 +39,7 @@ const PRRegisterPiece = React.createClass({
         if(currentUser && currentUser.email) {
             const submittedPieceId = getCookie(currentUser.email);
             if(submittedPieceId) {
-                this.history.pushState(null, `/pieces/${submittedPieceId}`);
+                this.history.push(`/pieces/${submittedPieceId}`);
             }
         }
     },

js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js

@@ -17,7 +17,7 @@ export function AuthPrizeRoleRedirect({ to, when }) {
             .reduce((a, b) => a || b);
 
         if (exprToValidate) {
-            window.setTimeout(() => history.replaceState(null, to, query));
+            window.setTimeout(() => history.replace({ query, pathname: to }));
             return true;
         } else {
             return false;

js/components/whitelabel/prize/simple_prize/components/prize_landing.js

@@ -46,7 +46,7 @@ let Landing = React.createClass({
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
+            window.setTimeout(() => this.history.replace('/collection'), 0);
         }
     },
 

js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js

@@ -85,7 +85,7 @@ let CylandPieceContainer = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     render() {

js/components/whitelabel/wallet/components/cyland/cyland_landing.js

@@ -49,7 +49,7 @@ let CylandLanding = React.createClass({
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
+            window.setTimeout(() => this.history.replace('/collection'), 0);
         }
     },
 

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -129,7 +129,7 @@ let CylandRegisterPiece = React.createClass({
 
         PieceActions.fetchOne(this.state.piece.id);
 
-        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
+        this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out

js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js

@@ -119,7 +119,7 @@ let IkonotvContractNotifications = React.createClass({
         NotificationActions.flushContractAgreementListNotifications();
         NotificationActions.fetchContractAgreementListNotifications();
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     handleDeny() {
@@ -132,7 +132,7 @@ let IkonotvContractNotifications = React.createClass({
     handleDenySuccess() {
         let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getCopyrightAssociationForm(){

js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js

@@ -94,7 +94,7 @@ let IkonotvPieceContainer = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     render() {

js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js

@@ -103,7 +103,7 @@ let IkonotvRegisterPiece = React.createClass({
             PieceActions.updatePiece(response.piece);
         }
         if (!this.canSubmit()) {
-            this.history.pushState(null, '/collection');
+            this.history.push('/collection');
         }
         else {
             this.incrementStep();
@@ -134,7 +134,7 @@ let IkonotvRegisterPiece = React.createClass({
         this.refreshPieceList();
 
         PieceActions.fetchOne(this.state.piece.id);
-        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
+        this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out

js/components/whitelabel/wallet/components/market/market_register_piece.js

@@ -82,7 +82,7 @@ let MarketRegisterPiece = React.createClass({
     handleAdditionalDataSuccess() {
         this.refreshPieceList();
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     // We need to increase the step to lock the forms that are already filled out

js/history.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import useBasename from 'history/lib/useBasename';
+import useQueries from 'history/lib/useQueries';
 import createBrowserHistory from 'history/lib/createBrowserHistory';
 import AppConstants from './constants/application_constants';
 
@@ -8,6 +9,6 @@ import AppConstants from './constants/application_constants';
 // Remove the trailing slash if present
 let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
 
-export default useBasename(createBrowserHistory)({
+export default useBasename(useQueries(createBrowserHistory))({
     basename: baseUrl
 });

js/third_party/notifications.js

@@ -22,14 +22,14 @@ class NotificationsHandler {
             return;
         }
 
-        let subdomain = getSubdomain();
+        const subdomain = getSubdomain();
         if (subdomain === 'ikonotv') {
             NotificationActions.fetchContractAgreementListNotifications().then(
                 (res) => {
                     if (res.notifications && res.notifications.length > 0) {
                         this.loaded = true;
                         console.log('Contractagreement notifications loaded');
-                        history.pushState(null, '/contract_notifications');
+                        history.push('/contract_notifications');
                     }
                 }
             );

js/utils/url_utils.js

@@ -2,7 +2,7 @@
 
 import camelCase from 'camelcase';
 import decamelize from 'decamelize';
-import qs from 'qs';
+import queryString from 'query-string';
 
 import { sanitize } from './general_utils';
 
@@ -36,8 +36,7 @@ export function argsToQueryParams(obj) {
             queryParamObj[decamelize(key)] = sanitizedObj[key];
         });
 
-    // Use bracket arrayFormat as history.js and react-router use it
+    return '?' + queryString.stringify(queryParamObj);
-    return '?' + qs.stringify(queryParamObj, { arrayFormat: 'brackets' });
 }
 
 /**
@@ -56,13 +55,13 @@ export function getCurrentQueryParams() {
  * @return {object}                  Query params dictionary
  */
 export function queryParamsToArgs(queryParamString) {
-    const qsQueryParamObj = qs.parse(queryParamString);
+    const queryParamObj = queryString.parse(queryParamString);
     const camelCaseParamObj = {};
 
     Object
-        .keys(qsQueryParamObj)
+        .keys(queryParamObj)
         .forEach((key) => {
-            camelCaseParamObj[camelCase(key)] = qsQueryParamObj[key];
+            camelCaseParamObj[camelCase(key)] = queryParamObj[key];
         });
 
     return camelCaseParamObj;

package.json

@@ -67,7 +67,7 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.4",
     "harmonize": "^1.4.2",
-    "history": "^1.13.1",
+    "history": "1.17.0",
     "invariant": "^2.1.1",
     "isomorphic-fetch": "^2.0.2",
     "jest-cli": "^0.4.0",
@@ -76,12 +76,12 @@
     "object-assign": "^2.0.0",
     "opn": "^3.0.2",
     "q": "^1.4.1",
-    "qs": "^4.0.0",
+    "query-string": "^3.0.0",
     "raven-js": "^1.1.19",
     "react": "0.13.2",
     "react-bootstrap": "0.25.1",
     "react-datepicker": "^0.12.0",
-    "react-router": "1.0.0",
+    "react-router": "1.0.3",
     "react-router-bootstrap": "^0.19.0",
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",