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 fetch('/api/pdf/generate/brief', options)
-        }
+      .then(checkStatus)
-        return res.json();
+      .then(res => res.json());
-    });
 }
 
 export function getLatest() {
-    return fetch('/api/pdf/latest').then(function(res) {
+    return fetch('/api/pdf/latest')
-        if (res.status !== 200) {
+      .then(checkStatus)
-            throw new Error(`Something went wrong (Status ${res.status}) - Cannot get latest`);
+      .then(res => res.json());
-        }
+}
-        return res.json();
+
-    });
+export function removeLatest(item) {
+    return fetch(`/api/pdf/latest/${item.id}`, {method: 'DELETE'})
+      .then(checkStatus);
 }

server/index.js

@@ -25,27 +25,50 @@ app.post('/api/pdf/generate/:template', (req, res) => {
                 .then(() => id);
         })
         .then(id => {
-            res.send({id: id});
+            res
-            res.end();
+                .status(200)
+                .json({id: id});
         })
         .catch((err) => {
             console.error('Error:', err, 'for', req.url);
-            res.sendStatus(500).end(err);
+            res
+                .status(500)
+                .json({error: err.toString()});
         });
 });
 
 app.get('/api/pdf/latest', (req, res) => {
     store
         .list()
-        .then(results => res.json(results))
+        .then(results => res
-        .catch(err => res.sendStatus(500).end(err));
+            .status(200)
+            .json(results)
+        )
+        .catch(err => res
+            .status(500)
+            .json({error: err.toString()})
+        );
+});
+
+app.delete('/api/pdf/latest/:id', (req, res) => {
+    const { id } = req.params;
+    console.log(`Deleting ${id}...`);
+    store
+        .remove(id)
+        .then(() => res.sendStatus(202))
+        .catch(err => res
+            .status(500)
+            .json({error: err.toString()})
+        );
 });
 
 
 app.options('/api/pdf/:id');
 app.get('/api/pdf/:id', (req, res) => {
     const {id} = req.params;
-    res.sendFile(getPdfPath(id));
+    res
+        .status(200)
+        .sendFile(getPdfPath(id));
 });
 
 app.use(express.static('../client/build'));

server/store.js

@@ -9,12 +9,14 @@ const sortBy = require('lodash.sortby');
 const list = promisify(store.list);
 const load = promisify(store.load);
 const add = promisify(store.add);
+const remove = promisify(store.remove);
 
 module.exports = {
     list: () => list()
         .then(result => sortBy(result, 'created').reverse()),
     load: id => load(id),
     add: item => add(item),
+    remove: id => remove(id),
 }