store json after every generate

client/src/App.js

@@ -2,18 +2,25 @@ import React, { Component } from 'react';
 import LetterOptions from './LetterOptions';
 import Button from './Button';
 import Preview from './Preview';
-import {generatePdf} from './apiHelper';
+import LatestList from './LatestList';
+import {generatePdf, getLatest} from './apiHelper';
 
 import './App.css';
 
 class App extends Component {
+  componentDidMount() {
+    getLatest()
+      .then(latest => this.setState({latest}));
+  }
+
   render() {
     const state = this.state || {};
 
     return (
       <div className="home">
         <div>
-          <LetterOptions onChange={this._onChange.bind(this)} />
+          <LetterOptions onChange={this._onChange.bind(this)} {...state.options}/>
+          <LatestList latest={state.latest} clickHandler={this._onClickLatest.bind(this)} />
         </div>
         <div>
           <Button onClick={this._onGenerate.bind(this)} text="Backe PDF"/>
@@ -27,6 +34,10 @@ class App extends Component {
     );
   }
 
+  _onClickLatest(selectedOptions) {
+    this.setState({options: Object.assign({}, selectedOptions)});
+  }
+
   _onGenerate() {
     const state = this.state || {};
     this.setState({
@@ -34,7 +45,7 @@ class App extends Component {
       pdfError: null
     })
 
-    generatePdf(state)
+    generatePdf(state.options)
       .then((data) => {
         const {id} = data;
         this.setState({
@@ -56,7 +67,8 @@ class App extends Component {
       return;
     }
     const value = event && event.target && event.target.value;
-    this.setState({[name]: value || undefined})
+    const options = Object.assign({}, this.state.options, {[name]: value || undefined});
+    this.setState({options});
   }
 }
 

client/src/Input.js

@@ -9,6 +9,7 @@ export default function(props) {
         type="text"
         placeholder={props.placeholder}
         onChange={props.onchange.bind(null, props.name)}
+        value={props.value}
       />
     </label>
   );

client/src/LatestList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function(props) {
+  const latest = props.latest || [];
+  const latestElements = latest.map(item => {
+    const created = new Date(item.created);
+    return (
+      <li key={item.id}>
+        <a href="#" onClick={() => props.clickHandler(item)}>Brief vom {created.toLocaleString()}</a>
+      </li>
+    );
+  });
+
+  return (
+    <div>
+      <h4>Vergangene:</h4>
+      <ul>{latestElements}</ul>
+    </div>
+  );
+}

client/src/apiHelper.js

@@ -1,14 +1,23 @@
 export function generatePdf(state){
-  return fetch('/api/pdf/generate/brief', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(state)
-  }).then(function(res) {
-    if (res.status !== 200) {
-      throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`);
-    }
-    return res.json();
-  });
+    return fetch('/api/pdf/generate/brief', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(state)
+    }).then(function(res) {
+        if (res.status !== 200) {
+            throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`);
+        }
+        return res.json();
+    });
+}
+
+export function getLatest() {
+    return fetch('/api/pdf/latest').then(function(res) {
+        if (res.status !== 200) {
+            throw new Error(`Something went wrong (Status ${res.status}) - Cannot get latest`);
+        }
+        return res.json();
+    });
 }