Merged in AD-931-allow-to-reset-form-after-submit (pull request #55)

Ad 931 allow to reset form after submit

js/components/ascribe_detail/edition_container.js

@@ -50,7 +50,7 @@ let EditionContainer = React.createClass({
     },
 
     render() {
-        if('title' in this.state.edition) {
+        if(this.state.edition && this.state.edition.title) {
             return (
                 <Edition
                     edition={this.state.edition}

js/components/ascribe_detail/further_details_fileuploader.js

@@ -39,7 +39,7 @@ let FurtherDetailsFileuploader = React.createClass({
             return null;
         }
 
-        let otherDataIds = this.props.otherData ? this.props.otherData.map((data)=>{return data.id; }).join() : null;
+        let otherDataIds = this.props.otherData ? this.props.otherData.map((data) => data.id).join() : null;
 
         return (
             <Property

js/components/ascribe_detail/piece_container.js

@@ -206,7 +206,7 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if('title' in this.state.piece) {
+        if(this.state.piece && this.state.piece.title) {
             return (
                 <Piece
                     piece={this.state.piece}

js/components/ascribe_forms/form.js

@@ -41,7 +41,9 @@ let Form = React.createClass({
         // It will make use of the GlobalNotification
         isInline: React.PropTypes.bool,
 
-        autoComplete: React.PropTypes.string
+        autoComplete: React.PropTypes.string,
+
+        onReset: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -60,9 +62,15 @@ let Form = React.createClass({
         };
     },
 
-    reset(){
+    reset() {
-        for (let ref in this.refs){
+        // If onReset prop is defined from outside,
-            if (typeof this.refs[ref].reset === 'function'){
+        // notify component that a form reset is happening.
+        if(this.props.onReset && typeof this.props.onReset === 'function') {
+            this.props.onReset();
+        }
+
+        for(let ref in this.refs) {
+            if (this.refs[ref].reset && typeof this.refs[ref].reset === 'function'){
                 this.refs[ref].reset();
             }
         }
@@ -70,7 +78,6 @@ let Form = React.createClass({
     },
 
     submit(event){
-        
         if(event) {
             event.preventDefault();
         }
@@ -79,7 +86,7 @@ let Form = React.createClass({
         this.clearErrors();
 
         // selecting http method based on props
-        if(this[this.props.method]) {
+        if(this[this.props.method] && typeof this[this.props.method] === 'function') {
             window.setTimeout(() => this[this.props.method](), 100);
         } else {
             throw new Error('This HTTP method is not supported by form.js (' + this.props.method + ')');
@@ -100,13 +107,13 @@ let Form = React.createClass({
             .catch(this.handleError);
     },
 
-    getFormData(){
+    getFormData() {
         let data = {};
-        for (let ref in this.refs){
+        for(let ref in this.refs){
             data[this.refs[ref].props.name] = this.refs[ref].state.value;
         }
 
-        if ('getFormData' in this.props){
+        if (this.props.getFormData && typeof this.props.getFormData === 'function'){
             data = mergeOptionsWithDuplicates(data, this.props.getFormData());
         }
 
@@ -118,11 +125,12 @@ let Form = React.createClass({
     },
 
     handleSuccess(response){
-        if ('handleSuccess' in this.props){
+        if(this.props.handleSuccess && typeof this.props.handleSuccess === 'function') {
             this.props.handleSuccess(response);
         }
-        for (var ref in this.refs){
+
-            if ('handleSuccess' in this.refs[ref]){
+        for(let ref in this.refs) {
+            if(this.refs[ref] && this.refs[ref].handleSuccess && typeof this.refs[ref].handleSuccess === 'function'){
                 this.refs[ref].handleSuccess();
             }
         }
@@ -134,9 +142,9 @@ let Form = React.createClass({
 
     handleError(err){
         if (err.json) {
-            for (var input in err.json.errors){
+            for (let input in err.json.errors){
                 if (this.refs && this.refs[input] && this.refs[input].state) {
-                    this.refs[input].setErrors( err.json.errors[input]);
+                    this.refs[input].setErrors(err.json.errors[input]);
                 } else {
                     this.setState({errors: this.state.errors.concat(err.json.errors[input])});
                 }
@@ -164,8 +172,8 @@ let Form = React.createClass({
     },
 
     clearErrors(){
-        for (var ref in this.refs){
+        for(let ref in this.refs){
-            if ('clearErrors' in this.refs[ref]){
+            if (this.refs[ref] && this.refs[ref].clearErrors && typeof this.refs[ref].clearErrors === 'function'){
                 this.refs[ref].clearErrors();
             }
         }
@@ -185,8 +193,16 @@ let Form = React.createClass({
             buttons = (
                 <div className="row" style={{margin: 0}}>
                     <p className="pull-right">
-                        <Button className="btn btn-default btn-sm ascribe-margin-1px" type="submit">{this.props.buttonSubmitText}</Button>
+                        <Button
-                        <Button className="btn btn-danger btn-delete btn-sm ascribe-margin-1px" onClick={this.reset}>CANCEL</Button>
+                            className="btn btn-default btn-sm ascribe-margin-1px"
+                            type="submit">
+                            {this.props.buttonSubmitText}
+                        </Button>
+                        <Button
+                            className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                            type="reset">
+                            CANCEL
+                        </Button>
                     </p>
                 </div>
             );
@@ -251,6 +267,7 @@ let Form = React.createClass({
                 role="form"
                 className={className}
                 onSubmit={this.submit}
+                onReset={this.reset}
                 autoComplete={this.props.autoComplete}>
                 {this.getFakeAutocompletableInputs()}
                 {this.getErrors()}

js/components/ascribe_forms/form_loan.js

@@ -69,10 +69,11 @@ let LoanForm = React.createClass({
     },
 
     handleOnChange(event) {
-        let potentialEmail = event.target.value;
+        // event.target.value is the submitted email of the loanee
-
+        if(event && event.target && event.target.value && event.target.value.match(/.*@.*/)) {
-        if(potentialEmail.match(/.*@.*/)) {
+            LoanContractActions.fetchLoanContract(event.target.value);
-            LoanContractActions.fetchLoanContract(potentialEmail);
+        } else {
+            LoanContractActions.flushLoanContract();
         }
     },
 
@@ -143,6 +144,7 @@ let LoanForm = React.createClass({
                 ref='form'
                 url={this.props.url}
                 getFormData={this.getFormData}
+                onReset={this.handleOnChange}
                 handleSuccess={this.props.handleSuccess}
                 buttons={this.getButtons()}
                 spinner={

js/components/ascribe_forms/form_register_piece.js

@@ -7,13 +7,10 @@ import UserActions from '../../actions/user_actions';
 
 import Form from './form';
 import Property from './property';
+import InputFineUploader from './input_fineuploader';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-
-import AppConstants from '../../constants/application_constants';
 import ApiUrls from '../../constants/api_urls';
 
-import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
@@ -45,7 +42,6 @@ let RegisterPieceForm = React.createClass({
     getInitialState(){
         return mergeOptions(
             {
-                digitalWorkKey: null,
                 isUploadReady: false
             },
             UserStore.getState()
@@ -65,18 +61,6 @@ let RegisterPieceForm = React.createClass({
         this.setState(state);
     },
 
-    getFormData(){
-        return {
-            digital_work_key: this.state.digitalWorkKey
-        };
-    },
-
-    submitKey(key){
-        this.setState({
-            digitalWorkKey: key
-        });
-    },
-
     setIsUploadReady(isReady) {
         this.setState({
             isUploadReady: isReady
@@ -94,14 +78,15 @@ let RegisterPieceForm = React.createClass({
                 className="ascribe-form-bordered"
                 ref='form'
                 url={ApiUrls.pieces_list}
-                getFormData={this.getFormData}
                 handleSuccess={this.props.handleSuccess}
-                buttons={<button
+                buttons={
+                    <button
                         type="submit"
                         className="btn ascribe-btn ascribe-btn-login"
                         disabled={!this.state.isUploadReady || this.props.disabled}>
                         {this.props.submitMessage}
-                        </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
@@ -111,9 +96,9 @@ let RegisterPieceForm = React.createClass({
                     <h3>{this.props.headerMessage}</h3>
                 </div>
                 <Property
+                    name="digital_work_key"
                     ignoreFocus={true}>
-                    <FileUploader
+                    <InputFineUploader
-                        submitKey={this.submitKey}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={isReadyForFormSubmission}
                         isFineUploaderActive={this.props.isFineUploaderActive}
@@ -152,73 +137,4 @@ let RegisterPieceForm = React.createClass({
     }
 });
 
-let FileUploader = React.createClass({
-    propTypes: {
-        setIsUploadReady: React.PropTypes.func,
-        submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-
-        // isFineUploaderActive is used to lock react fine uploader in case
-        // a user is actually not logged in already to prevent him from droping files
-        // before login in
-        isFineUploaderActive: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        enableLocalHashing: React.PropTypes.bool,
-
-        // provided by Property
-        disabled: React.PropTypes.bool
-    },
-
-    render() {
-
-        let editable = this.props.isFineUploaderActive;
-
-        // if disabled is actually set by property, we want to override
-        // isFineUploaderActive
-        if(typeof this.props.disabled !== 'undefined') {
-            editable = !this.props.disabled;
-        }
-
-
-        return (
-            <ReactS3FineUploader
-                onClick={this.props.onClick}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'digitalwork'
-                }}
-                createBlobRoutine={{
-                    url: ApiUrls.blob_digitalworks
-                }}
-                submitKey={this.props.submitKey}
-                validation={{
-                    itemLimit: 100000,
-                    sizeLimit: '25000000000'
-                }}
-                setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}
-                areAssetsEditable={editable}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                onInactive={this.props.onLoggedOut}
-                enableLocalHashing={this.props.enableLocalHashing} />
-        );
-    }
-});
-
 export default RegisterPieceForm;

js/components/ascribe_forms/input_date.js

@@ -18,7 +18,8 @@ let InputDate = React.createClass({
 
     getInitialState() {
         return {
-            value: null
+            value: null,
+            value_moment: null
         };
     },
 
@@ -45,6 +46,10 @@ let InputDate = React.createClass({
         });
     },
 
+    reset() {
+        this.setState(this.getInitialState());
+    },
+
     render() {
         return (
             <div>

js/components/ascribe_forms/input_fineuploader.js

@@ -0,0 +1,95 @@
+'use strict';
+
+import React from 'react';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+
+import AppConstants from '../../constants/application_constants';
+import ApiUrls from '../../constants/api_urls';
+
+import { getCookie } from '../../utils/fetch_api_utils';
+
+let InputFileUploader = React.createClass({
+    propTypes: {
+        setIsUploadReady: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func,
+        onClick: React.PropTypes.func,
+
+        // isFineUploaderActive is used to lock react fine uploader in case
+        // a user is actually not logged in already to prevent him from droping files
+        // before login in
+        isFineUploaderActive: React.PropTypes.bool,
+        onLoggedOut: React.PropTypes.func,
+        editable: React.PropTypes.bool,
+        enableLocalHashing: React.PropTypes.bool,
+
+        // provided by Property
+        disabled: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            value: null
+        };
+    },
+
+    submitKey(key){
+        this.setState({
+            value: key
+        });
+    },
+
+    reset() {
+        this.refs.fineuploader.reset();
+    },
+
+    render() {
+        let editable = this.props.isFineUploaderActive;
+
+        // if disabled is actually set by property, we want to override
+        // isFineUploaderActive
+        if(typeof this.props.disabled !== 'undefined') {
+            editable = !this.props.disabled;
+        }
+
+        return (
+            <ReactS3FineUploader
+                ref="fineuploader"
+                onClick={this.props.onClick}
+                keyRoutine={{
+                    url: AppConstants.serverUrl + 's3/key/',
+                    fileClass: 'digitalwork'
+                }}
+                createBlobRoutine={{
+                    url: ApiUrls.blob_digitalworks
+                }}
+                submitKey={this.submitKey}
+                validation={{
+                    itemLimit: 100000,
+                    sizeLimit: '25000000000'
+                }}
+                setIsUploadReady={this.props.setIsUploadReady}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                areAssetsDownloadable={false}
+                areAssetsEditable={editable}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                    }
+                }}
+                onInactive={this.props.onLoggedOut}
+                enableLocalHashing={this.props.enableLocalHashing} />
+        );
+    }
+});
+
+export default InputFileUploader;

js/components/ascribe_forms/input_textarea_toggable.js

@@ -4,6 +4,7 @@ import React from 'react';
 
 import TextareaAutosize from 'react-textarea-autosize';
 
+
 let InputTextAreaToggable = React.createClass({
     propTypes: {
         editable: React.PropTypes.bool.isRequired,
@@ -17,14 +18,17 @@ let InputTextAreaToggable = React.createClass({
             value: this.props.defaultValue
         };
     },
+
     handleChange(event) {
         this.setState({value: event.target.value});
         this.props.onChange(event);
     },
+
     render() {
         let className = 'form-control ascribe-textarea';
         let textarea = null;
-        if (this.props.editable){
+
+        if(this.props.editable) {
             className = className + ' ascribe-textarea-editable';
             textarea = (
                 <TextareaAutosize
@@ -37,10 +41,10 @@ let InputTextAreaToggable = React.createClass({
                     onBlur={this.props.onBlur}
                     placeholder={this.props.placeholder} />
             );
-        }
+        } else {
-        else{
             textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
         }
+
         return textarea;
     }
 });

js/components/ascribe_forms/property.js

@@ -29,8 +29,11 @@ let Property = React.createClass({
         handleChange: React.PropTypes.func,
         ignoreFocus: React.PropTypes.bool,
         className: React.PropTypes.string,
+
         onClick: React.PropTypes.func,
         onChange: React.PropTypes.func,
+        onBlur: React.PropTypes.func,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -96,12 +99,20 @@ let Property = React.createClass({
         // resets the value of a plain HTML5 input
         this.refs.input.getDOMNode().value = this.state.initialValue;
 
+        // For some inputs, reseting state.value is not enough to visually reset the
+        // component.
+        //
+        // So if the input actually needs a visual reset, it needs to implement
+        // a dedicated reset method.
+        if(this.refs.input.reset && typeof this.refs.input.reset === 'function') {
+            this.refs.input.reset();
+        }
     },
 
     handleChange(event) {
 
         this.props.handleChange(event);
-        if ('onChange' in this.props) {
+        if (this.props.onChange && typeof this.props.onChange === 'function') {
             this.props.onChange(event);
         }
 
@@ -117,7 +128,7 @@ let Property = React.createClass({
 
         // if onClick is defined from the outside,
         // just call it
-        if(this.props.onClick) {
+        if(this.props.onClick && typeof this.props.onClick === 'function') {
             this.props.onClick();
         }
 
@@ -132,7 +143,7 @@ let Property = React.createClass({
             isFocused: false
         });
 
-        if(this.props.onBlur) {
+        if(this.props.onBlur && typeof this.props.onBlur === 'function') {
             this.props.onBlur(event);
         }
     },
@@ -190,6 +201,7 @@ let Property = React.createClass({
     },
 
     render() {
+        let footer = null;
         let tooltip = <span/>;
         let style = this.props.style ? mergeOptions({}, this.props.style) : {};
 
@@ -199,7 +211,7 @@ let Property = React.createClass({
                     {this.props.tooltip}
                 </Tooltip>);
         }
-        let footer = null;
+        
         if(this.props.footer){
             footer = (
                 <div className="ascribe-property-footer">

js/components/ascribe_forms/property_collapsible.js

@@ -42,6 +42,13 @@ let PropertyCollapsile = React.createClass({
         }
     },
 
+    reset() {
+        // If the child input is a native HTML element, it will be reset automatically
+        // by the DOM.
+        // However, we need to collapse this component again.
+        this.setState(this.getInitialState());
+    },
+
     render() {
         let tooltip = <span/>;
         if (this.props.tooltip){

js/components/ascribe_slides_container/slides_container.js

@@ -4,13 +4,12 @@ import React from 'react';
 import Router from 'react-router';
 import ReactAddons from 'react/addons';
 
-import Col from 'react-bootstrap/lib/Col';
-
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
 
 let State = Router.State;
 let Navigation = Router.Navigation;
 
+
 let SlidesContainer = React.createClass({
     propTypes: {
         children: React.PropTypes.arrayOf(React.PropTypes.element),
@@ -30,12 +29,15 @@ let SlidesContainer = React.createClass({
         let slideNum = -1;
         let startFrom = -1;
 
-        if(queryParams && 'slide_num' in queryParams) {
+        // We can actually need to check if slide_num is present as a key in queryParams.
+        // We do not really care about its value though...
+        if(queryParams && 'slide_num' in queryParams.slide_num) {
             slideNum = parseInt(queryParams.slide_num, 10);
         }
         // if slide_num is not set, this will be done in componentDidMount
 
         // the query param 'start_from' removes all slide children before the respective number
+        // Also, we use the 'in' keyword for the same reason as above in 'slide_num'
         if(queryParams && 'start_from' in queryParams) {
             startFrom = parseInt(queryParams.start_from, 10);
         }
@@ -51,6 +53,9 @@ let SlidesContainer = React.createClass({
     componentDidMount() {
         // check if slide_num was defined, and if not then default to 0
         let queryParams = this.getQuery();
+
+        // We use 'in' to check if the key is present in the user's browser url bar,
+        // we do not really care about its value at this point
         if(!('slide_num' in queryParams)) {
 
             // we're first requiring all the other possible queryParams and then set

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -235,6 +235,21 @@ var ReactS3FineUploader = React.createClass({
         };
     },
 
+    // Resets the whole react fineuploader component to its initial state
+    reset() {
+        // Cancel all currently ongoing uploads
+        this.state.uploader.cancelAll();
+
+        // and reset component in general
+        this.state.uploader.reset();
+
+        // proclaim that upload is not ready
+        this.props.setIsUploadReady(false);
+
+        // reset internal data structures of component
+        this.setState(this.getInitialState());
+    },
+
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         let uuid = this.state.uploader.getUuid(fileId);
@@ -439,7 +454,6 @@ var ReactS3FineUploader = React.createClass({
     },
 
     onCancel(id) {
-
         // when a upload is canceled, we need to update this components file array
         this.setStatusOfFile(id, 'canceled');
 
@@ -461,7 +475,6 @@ var ReactS3FineUploader = React.createClass({
     },
 
     onProgress(id, name, uploadedBytes, totalBytes) {
-
         let newState = React.addons.update(this.state, {
             filesToUpload: { [id]: {
                 progress: { $set: (uploadedBytes / totalBytes) * 100} }

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

@@ -90,14 +90,23 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if('title' in this.state.piece) {
+        if(this.state.piece && this.state.piece.title) {
+            /*
+            
+                This really needs a refactor!
+
+                    - Tim
+
+             */
             // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
             let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
                 (this.state.currentUser.is_judge && !this.state.piece.selected )) ?
                 <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.state.piece.artist_name;
+            
             // Only show the artist email if you are a judge and the piece is shortlisted
             let artistEmail = (this.state.currentUser.is_judge && this.state.piece.selected ) ?
                 <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null;
+
             return (
                 <Piece
                     piece={this.state.piece}

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

@@ -68,7 +68,7 @@ let CylandPieceContainer = React.createClass({
     },
 
     render() {
-        if('title' in this.state.piece) {
+        if(this.state.piece && this.state.piece.title) {
             return (
                 <Piece
                     piece={this.state.piece}

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

@@ -72,6 +72,9 @@ let CylandRegisterPiece = React.createClass({
         // we may need to enter the process at step 1 or 2.
         // If this is the case, we'll need the piece number to complete submission.
         // It is encoded in the URL as a queryParam and we're checking for it here.
+        //
+        // We're using 'in' here as we want to know if 'piece_id' is present in the url,
+        // we don't care about the value.
         if(queryParams && 'piece_id' in queryParams) {
             PieceActions.fetchOne(queryParams.piece_id);
         }

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

@@ -133,7 +133,7 @@ let IkonotvPieceContainer = React.createClass({
     },
 
     render() {
-        if('title' in this.state.piece) {
+        if(this.state.piece && this.state.piece.title) {
             return (
                 <Piece
                     piece={this.state.piece}