Better robustness for slides container and register form for cyland

js/components/ascribe_slides_container/slides_container.js

@@ -29,8 +29,6 @@ const SlidesContainer = React.createClass({
     },
 
     componentDidMount() {
-        this.handleContainerResize();
-
         // we're using an event listener on window here,
         // as it was not possible to listen to the resize events of a dom node
         window.addEventListener('resize', this.handleContainerResize);
@@ -51,16 +49,15 @@ const SlidesContainer = React.createClass({
     },
 
     // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
-    nextSlide() {
+    nextSlide(additionalQueryParams) {
-        const slideNum = parseInt(this.props.location.query.slide_num, 10);
+        const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
         let nextSlide = slideNum + 1;
-        this.setSlideNum(nextSlide);
+        this.setSlideNum(nextSlide, additionalQueryParams);
     },
 
-    setSlideNum(nextSlideNum) {
+    setSlideNum(nextSlideNum, additionalQueryParams = {}) {
-        let queryParams = this.props.location.query;
+        let queryParams = Object.assign(this.props.location.query, additionalQueryParams);
         queryParams.slide_num = nextSlideNum;
-
         this.history.pushState(null, this.props.location.pathname, queryParams);
     },
 
@@ -107,7 +104,7 @@ const SlidesContainer = React.createClass({
             return (
                 <SlidesContainerBreadcrumbs
                     breadcrumbs={breadcrumbs}
-                    slideNum={parseInt(this.props.location.query.slide_num, 10)}
+                    slideNum={parseInt(this.props.location.query.slide_num, 10) || 0}
                     numOfSlides={breadcrumbs.length}
                     containerWidth={this.state.containerWidth}
                     glyphiconClassNames={this.props.glyphiconClassNames}/>
@@ -142,7 +139,7 @@ const SlidesContainer = React.createClass({
     },
 
     render() {
-        let spacing = this.state.containerWidth * parseInt(this.props.location.query.slide_num, 10);
+        let spacing = this.state.containerWidth * parseInt(this.props.location.query.slide_num, 10) || 0;
         let translateXValue = 'translateX(' + (-1) * spacing + 'px)';
 
         /*

js/components/whitelabel/wallet/components/cyland/ascribe_buttons/cyland_submit_button.js

@@ -38,28 +38,18 @@ let CylandSubmitButton = React.createClass({
     },
 
     render() {
-        let piece = this.props.piece;
+        const { piece, className } = this.props;
-        let startFrom = 1;
-
-        // In the Cyland register page a user has to complete three steps.
-        // Since every one of those steps is atomic a user should always be able to continue
-        // where he left of.
-        // This is why we start the process form slide 1/2 if the user has already finished
-        // it in another session.
-        if(piece && piece.extra_data && Object.keys(piece.extra_data).length > 0) {
-            startFrom = 2;
-        }
 
         return (
             <LinkContainer
                 to="/register_piece"
                 query={{
                     'slide_num': 0,
-                    'start_from': startFrom,
+                    'start_from': 1,
-                    'piece_id': this.props.piece.id
+                    'piece_id': piece.id
                 }}>
                 <Button
-                    className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
+                    className={classNames('btn', 'btn-default', 'btn-xs', className)}>
                     {getLangText('Submit to Cyland')}
                 </Button>
             </LinkContainer>

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -36,17 +36,17 @@ let CylandAdditionalDataForm = React.createClass({
         };
     },
 
-    handleSuccess() {
-        let notification = new GlobalNotificationModel('Further details successfully updated', 'success', 10000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
     getInitialState() {
         return {
             isUploadReady: true
         };
     },
 
+    handleSuccess() {
+        let notification = new GlobalNotificationModel('Further details successfully updated', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
     getFormData() {
         let extradata = {};
         let formRefs = this.refs.form.refs;

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

@@ -104,12 +104,13 @@ let CylandRegisterPiece = React.createClass({
 
         // also start loading the piece for the next step
         if(response && response.piece) {
+            PieceActions.updatePiece({});
             PieceActions.updatePiece(response.piece);
         }
 
         this.incrementStep();
 
-        this.refs.slidesContainer.nextSlide();
+        this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id });
     },
 
     handleAdditionalDataSuccess() {