From b20f0b8004413b0e238d2dd6b04fabbfb375e151 Mon Sep 17 00:00:00 2001
From: Fabian Eichhorner <fabian.eichhorner@gmail.com>
Date: Sun, 20 Jan 2019 20:03:15 +0100
Subject: [PATCH] added spinner and waiting on camunda

---
 service-website/src/components/PdfReport.js   | 12 ++++-
 .../src/components/SentimentAnalysis.js       |  7 ++-
 service-website/src/index.scss                | 53 +++++++++++++++++++
 .../src/services/CamundaService.js            | 29 ++++++++--
 4 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/service-website/src/components/PdfReport.js b/service-website/src/components/PdfReport.js
index 691ec2a..71d9c46 100644
--- a/service-website/src/components/PdfReport.js
+++ b/service-website/src/components/PdfReport.js
@@ -1,13 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const PdfReport = ({pdfLink}) => {
+const PdfReport = ({pdfLink, loading}) => {
     if (pdfLink) {
         return (
             <div className="pdf-report">
                 <a href={pdfLink} target="_blank" rel="noopener noreferrer">Download PDF report</a>
             </div>
         );
+    } else if (loading){
+        return (
+            <div class="spinner">
+                <div class="rect1 has-background-info"></div>
+                <div class="rect2 has-background-info"></div>
+                <div class="rect3 has-background-info"></div>
+                <div class="rect4 has-background-info"></div>
+                <div class="rect5 has-background-info"></div>
+            </div>
+        );
     } else {
         return null;
     }
diff --git a/service-website/src/components/SentimentAnalysis.js b/service-website/src/components/SentimentAnalysis.js
index ec6b675..aed2f01 100644
--- a/service-website/src/components/SentimentAnalysis.js
+++ b/service-website/src/components/SentimentAnalysis.js
@@ -12,6 +12,7 @@ class SentimentAnalysis extends Component {
             terms: new Map().set(0, ''),
             nextTermId: 1,
             pdfLink: null,
+            isLoading: false,
         };
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleTermChange = this.handleTermChange.bind(this);
@@ -33,8 +34,12 @@ class SentimentAnalysis extends Component {
         terms.forEach((term) => {
             console.log(term);
         });
+        this.setState({
+            isLoading: true,
+        });
         this.createPdf();
         this.emptyTerms();
+        
     }
 
     handleTermChange(id, value) {
@@ -107,7 +112,7 @@ class SentimentAnalysis extends Component {
                         </p>
                     </Form.Field>
                 </form>
-                <PdfReport pdfLink={this.state.pdfLink}/>
+                <PdfReport pdfLink={this.state.pdfLink} loading={this.state.isLoading}/>
             </div>
         );
     }
diff --git a/service-website/src/index.scss b/service-website/src/index.scss
index 4c6b2d4..f4933fd 100755
--- a/service-website/src/index.scss
+++ b/service-website/src/index.scss
@@ -28,4 +28,57 @@ footer {
 
 #headerMargin {
   margin-top: 1em;
+}
+
+.spinner {
+  margin: 100px auto;
+  height: 3em;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: #333;
+  height: 100%;
+  width: 6px;
+  margin-left:0.25em;
+  display: inline-block;
+  
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }
\ No newline at end of file
diff --git a/service-website/src/services/CamundaService.js b/service-website/src/services/CamundaService.js
index ee15bba..1720332 100644
--- a/service-website/src/services/CamundaService.js
+++ b/service-website/src/services/CamundaService.js
@@ -40,10 +40,33 @@ class CamundaService {
             })
     }
 
+    delay(ms) {
+        return new Promise(function (resolve, reject) {
+            setTimeout(resolve, ms);
+        });
+    }
+
     getPdfDownloadLink(id) {
-        const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
-        console.log('download: ' + downloadUrl);
-        this.callback(downloadUrl);
+            const downloadUrl = this.baseUrl + 'process-instance/' + id + '/variables/reportPDF/data';
+            console.log('download: ' + downloadUrl);
+
+            this.axiosInstance
+                .get(downloadUrl)
+                .then(response => {
+                    const data = response.data;
+                    console.log(data);
+                    this.callback(downloadUrl);
+
+                })
+                .catch(error => {                
+                    console.log(error);
+                    this.delay(3000)
+                    .then(() => {
+                        this.getPdfDownloadLink(id);
+                    });   
+                    
+                })
+            
     }
 
     completeTask(id) {
-- 
2.43.0