From e6d839f6a0329a1e3aa87721bbc0a7508d70fabc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 12 Nov 2015 10:46:08 +0100
Subject: [PATCH] Add proper validation for multiple uploaders in submission
 form

---
 .../react_s3_fine_uploader.js                 |  6 +--
 .../pr_forms/pr_register_piece_form.js        | 40 +++++++++++++------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 87934f42..bd2da199 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -421,7 +421,7 @@ let ReactS3FineUploader = React.createClass({
                     if(this.props.submitFile) {
                         this.props.submitFile(files[id]);
                     } else {
-                        console.warn('You didn\'t define submitFile in as a prop in react-s3-fine-uploader');
+                        console.warn('You didn\'t define submitFile as a prop in react-s3-fine-uploader');
                     }
                     // for explanation, check comment of if statement above
                     if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
@@ -443,10 +443,10 @@ let ReactS3FineUploader = React.createClass({
 
     /**
      * We want to channel all errors in this component through one single method.
-     * As fineuploader's onError method cannot handle the callback parameters of
+     * As fineuploader's `onError` method cannot handle the callback parameters of
      * a promise we define this proxy method to crunch them into the correct form.
      *
-     * @param  {error} err plain Javascript error
+     * @param  {error} err a plain Javascript error
      */
     onErrorPromiseProxy(err) {
         this.onError(null, null, err.message);
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index ec7b4747..f0902e3a 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -36,7 +36,12 @@ const PRRegisterPieceForm = React.createClass({
 
     getInitialState(){
         return {
-            isUploadReady: true,
+            digitalWorkKeyReady: false,
+            thumbnailKeyReady: false,
+
+            // we set this to true, as it is not required
+            supportingMaterialsReady: true,
+            proofOfPaymentReady: false,
             piece: null
         };
     },
@@ -124,15 +129,25 @@ const PRRegisterPieceForm = React.createClass({
         }
     },
 
-    setIsUploadReady(isUploadReady) {
-        this.setState({
-            isUploadReady
-        });
+    /**
+     * This method is overloaded so that we can track the ready-state
+     * of each uploader in the component
+     * @param {string} uploaderKey Name of the uploader's key to track
+     */
+    setIsUploadReady(uploaderKey) {
+        return (isUploadReady) => {
+            this.setState({
+                [uploaderKey]: isUploadReady
+            });
+        };
     },
 
     render() {
         const { location } = this.props;
-        const { isUploadReady } = this.state;
+        const { digitalWorkKeyReady,
+                thumbnailKeyReady,
+                supportingMaterialsReady,
+                proofOfPaymentReady } = this.state;
 
         return (
             <div className="register-piece--form">
@@ -203,7 +218,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={this.setIsUploadReady}
+                            setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                             createBlobRoutine={{
                                 url: ApiUrls.blob_digitalworks
                             }}
@@ -233,7 +248,7 @@ const PRRegisterPieceForm = React.createClass({
                                 url: ApiUrls.blob_thumbnails
                             }}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={this.setIsUploadReady}
+                            setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
                                 fileClass: 'thumbnail'
@@ -247,7 +262,8 @@ const PRRegisterPieceForm = React.createClass({
                             fileClassToUpload={{
                                 singular: getLangText('Upload cover photo'),
                                 plural: getLangText('Upload cover photos')
-                            }}/>
+                            }}
+                            required/>
                     </Property>
                     <Property
                         name="supportingMaterials"
@@ -256,7 +272,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={this.setIsUploadReady}
+                            setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
@@ -279,7 +295,7 @@ const PRRegisterPieceForm = React.createClass({
                         <InputFineuploader
                             fileInputElement={UploadButton}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            setIsUploadReady={this.setIsUploadReady}
+                            setIsUploadReady={this.setIsUploadReady('proofOfPaymentReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
@@ -314,7 +330,7 @@ const PRRegisterPieceForm = React.createClass({
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
-                    disabled={!isUploadReady}
+                    disabled={!(digitalWorkKeyReady && thumbnailKeyReady && proofOfPaymentReady && supportingMaterialsReady)}
                     onClick={this.submit}>
                     {getLangText('Submit to Portfolio Review')}
                 </button>