make client own package (using create-react-app)

client/src/App.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import LetterOptions from './LetterOptions';
+import Button from './Button';
+import Preview from './Preview';
+import {generatePdf} from './apiHelper';
+
+import './App.css';
+
+class App extends Component {
+  render() {
+    const state = this.state || {};
+
+    return (
+      <div className="home">
+        <div>
+          <LetterOptions onChange={this._onChange.bind(this)} />
+        </div>
+        <div>
+          <Button onClick={this._onGenerate.bind(this)} text="Backe PDF"/>
+          <Preview
+            pdfUrl={state.pdfUrl}
+            pdfIsLoading={state.pdfIsLoading}
+            pdfError={state.pdfError}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  _onGenerate() {
+    const state = this.state || {};
+    this.setState({
+      pdfIsLoading: true,
+      pdfError: null
+    })
+
+    generatePdf(state)
+      .then((data) => {
+        const {id} = data;
+        this.setState({
+          pdfIsLoading: false,
+          pdfUrl: `/api/pdf/${id}`
+        });
+      })
+      .catch((error) => {
+        this.setState({
+          pdfIsLoading: false,
+          pdfError: error,
+          pdfUrl: null
+        });
+      });
+  }
+
+  _onChange(name, event) {
+    if (!name) {
+      return;
+    }
+    const value = event && event.target && event.target.value;
+    this.setState({[name]: value || undefined})
+  }
+}
+
+export default App;