working prototype

webapp/index.html

@@ -10,6 +10,7 @@
             <div id="app">Loading</div>
         </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.7.300/pdf.min.js"></script>
+        <script src="/libs/pdf.js"></script>
+        <script src="/libs/pdf.worker.js"></script>
     </body>
 </html>

webapp/views/components/Preview.js

@@ -3,11 +3,15 @@ import PDF from 'react-pdf';
 
 class Preview extends Component {
     render(props) {
+        if (!props.pdfUrl) {
+            return '';
+        }
+
         return (
             <PDF
-                content={props.pdf}
-                onDocumentComplete={this._onDocumentComplete}
-                onPageComplete={this._onPageComplete}
+                file={props.pdfUrl}
+                onDocumentComplete={this._onDocumentComplete.bind(this)}
+                onPageComplete={this._onPageComplete.bind(this)}
             />
         );
     }

webapp/views/pages/Home.js

@@ -5,7 +5,7 @@ import Input from '../components/Input';
 import Button from '../components/Button';
 import Preview from '../components/Preview';
 
-function arrayBufferToBase64(arrayBuffer) {
+function toBase64(arrayBuffer) {
     return btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
 }
 
@@ -20,7 +20,7 @@ class Home extends Component {
                     value={props.subject}
                 />
                 <Button onClick={this._onGenerate.bind(this)} text="Generiere"/>
-                <Preview pdf={this.state.pdf} />
+                <Preview pdfUrl={this.state.pdfUrl} />
             </div>
         );
     }
@@ -36,7 +36,7 @@ class Home extends Component {
     _onGenerate(name, event){
         var component = this;
 
-        fetch('http://localhost:5000/generate/pdf/brief', {
+        fetch('//localhost:5000/pdf/generate/brief', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -47,14 +47,15 @@ class Home extends Component {
                 console.log('request failed');
                 return;
             }
-            return res.arrayBuffer();
-        }).then(function(arrayBuffer) {
+            return res.json();
+        }).then(function(data) {
+            const {id} = data;
             component.setState({
-                pdf: arrayBufferToBase64(arrayBuffer)
+                pdfUrl: `//localhost:5000/pdf/${id}`
             });
         }).catch(function(error) {
             component.setState({
-                pdf: null
+                pdfUrl: null
             })
         });
     }