add removing feature

client/src/App.js

@@ -3,7 +3,7 @@ import LetterOptions from './LetterOptions';
 import Button from './Button';
 import Preview from './Preview';
 import LatestList from './LatestList';
-import {generatePdf, getLatest} from './apiHelper';
+import {generatePdf, getLatest, removeLatest} from './apiHelper';
 
 import './App.css';
 
@@ -19,7 +19,9 @@ class App extends Component {
       <div className="home">
         <div>
           <LetterOptions onChange={this._onChange.bind(this)} {...state.options}/>
-          <LatestList latest={state.latest} clickHandler={this._onClickLatest.bind(this)} />
+          <LatestList latest={state.latest} onSelect={this._onSelectLatest.bind(this)}
+            onRemove={this._onRemoveLatest.bind(this)}
+          />
         </div>
         <div>
           <div>
@@ -36,10 +38,20 @@ class App extends Component {
     );
   }
 
-  _onClickLatest(selectedOptions) {
+  _onSelectLatest(selectedOptions) {
     this.setState({options: Object.assign({}, selectedOptions)});
   }
 
+  _onRemoveLatest(item) {
+    removeLatest(item)
+      .then(() => {
+        const latest = this.state.latest
+          .filter(curr => curr.id !== item.id);
+
+        this.setState({ latest });
+      });
+  }
+
   _onClear() {
     window.location.reload();
   }

client/src/LatestList.js

@@ -6,14 +6,16 @@ export default function(props) {
     const created = new Date(item.created);
     return (
       <li key={item.id}>
-        <a href="#" onClick={() => props.clickHandler(item)}>Brief vom {created.toLocaleString()}</a>
+        <a href="#" onClick={() => props.onSelect(item)}>{created.toLocaleString()}</a>
+        <span>    </span>
+        <a href="#" onClick={() => props.onRemove(item)}><small>(Remove)</small></a>
       </li>
     );
   });
 
   return (
     <div>
-      <h4>Vergangene:</h4>
+      <h4>Vergangene Briefe:</h4>
       <ul>{latestElements}</ul>
     </div>
   );

client/src/apiHelper.js

@@ -1,23 +1,32 @@
+function checkStatus(res) {
+    if (res.status < 200 || res.status >= 400) {
+        throw new Error(`Something went wrong (Status ${res.status}) - I do feel very sorry!`);
+    }
+
+    return res;
+}
+
 export function generatePdf(state){
-    return fetch('/api/pdf/generate/brief', {
+    const options = {
         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', options)
+      .then(checkStatus)
+      .then(res => 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();
-    });
+    return fetch('/api/pdf/latest')
+      .then(checkStatus)
+      .then(res => res.json());
+}
+
+export function removeLatest(item) {
+    return fetch(`/api/pdf/latest/${item.id}`, {method: 'DELETE'})
+      .then(checkStatus);
 }