Step 8 - Optimistic updating

Author: benmvp

07-submit-email-form/README.md

@@ -11,7 +11,7 @@ None
 
 ## Next
 
-Coming soon...
+Go to [Step 8 - Optimistic updating](https://github.com/benmvp/react-workshop/tree/master/08-optimistic-updating).
 
 ## Resources
 

07-submit-email-form/src/containers/App.js

@@ -76,6 +76,11 @@ export default class EmailApp extends React.Component {
             body: JSON.stringify(newEmail)
         })
             .then((res) => res.json())
+            .then(({success}) => {
+                if (!success) {
+                    throw new Error('Unable to send email!');
+                }
+            })
             .then(() => this._getUpdateEmails())
             .catch((ex) => console.error(ex));
     }

08-optimistic-updating/.eslintignore

@@ -0,0 +1,2 @@
+# Ignore built files
+src/dist/

08-optimistic-updating/README.md

@@ -0,0 +1,17 @@
+# Step 8 - Optimistic updating
+
+## Setup
+
+None
+
+## Tasks
+
+- After `POST`ing new email, optimistically update the `emails` state prior to `GET`ting the actual server data
+
+## Next
+
+Coming soon...
+
+## Resources
+
+None

08-optimistic-updating/api-server.js

@@ -0,0 +1,154 @@
+var fs = require('fs'),
+    path = require('path'),
+    express = require('express'),
+    bodyParser = require('body-parser'),
+
+    assign = require('lodash/assign'),
+    find = require('lodash/find'),
+    findIndex = require('lodash/findIndex'),
+
+    app = express(),
+    router = express.Router(),
+
+    // Using a JSON file as our "database"
+    EMAILS_FILE = path.join(__dirname, 'data/emails.json'),
+
+    port = process.env.PORT || 9090;
+
+function getEmails(callback) {
+    fs.readFile(EMAILS_FILE, function(err, fileContents) {
+        if (err) {
+            console.log(err);
+            process.exit(1);
+        }
+
+        callback(JSON.parse(fileContents));
+    });
+}
+
+function saveEmails(emails, callback) {
+    fs.writeFile(EMAILS_FILE, JSON.stringify(emails, null, 4), function(err) {
+        if (err) {
+            console.log(err);
+            process.exit(1);
+        }
+
+        callback();
+    });
+}
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({extended: true}));
+
+// allow for cross-origin API requests
+app.use(function(req, res, next) {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
+    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS');
+    next();
+});
+
+// routes that end in /emails
+router.route('/emails')
+
+    // create an email (accessed via POST to http://localhost:9090/emails)
+    .post(function(req, res) {
+        getEmails(function(emails) {
+            var newEmail = assign({
+                    id: Date.now(),
+                    date: new Date() + '',
+                    unread: true
+                }, req.body),
+                newEmails = emails.concat(newEmail);
+
+            // write out file back to disk
+            saveEmails(newEmails, function() {
+                res.json({success: true});
+            });
+        });
+    })
+
+    // get all the emails (access via GET from http://localhost:9090/emails)
+    .get(function(req, res) {
+        getEmails(function(emails) {
+            // Return back the full list of emails
+            res.setHeader('Cache-Control', 'no-cache');
+            res.json(
+                emails
+                    .filter(function(email) { return !email.deleted; })
+                    .sort(function(emailA, emailB) { return new Date(emailB.date) - new Date(emailA.date); })
+            );
+        });
+    });
+
+// routes that end in emails/:emailId
+router.route('/emails/:emailId')
+
+    // get the email with this id (accessed via GET from http://localhost:9090/emails/:emailId)
+    .get(function(req, res) {
+        getEmails(function(emails) {
+            var emailIdToGet = +req.params.emailId,
+                emailToGet = find(emails, function(email) {
+                    return email.id === emailIdToGet;
+                });
+
+            res.json(emailToGet);
+        });
+    })
+
+    // update the email this id (accessed via PUT on http://localhost:9090/emails/:emailId)
+    .put(function(req, res) {
+        getEmails(function(emails) {
+            var emailIdToUpdate = +req.params.emailId,
+
+                // make a new copy of the emails list, updating the appropriate email
+                updatedEmails = emails.map(function(email) {
+                    if (email.id === emailIdToUpdate) {
+                        // make a copy of the email to update before updating
+                        return assign({}, email, {
+                            unread: !!req.body.unread
+                        });
+                    }
+
+                    return email;
+                });
+
+            saveEmails(updatedEmails, function() {
+                res.json({success: true});
+            });
+        });
+    })
+
+    // delete the email this id (accessed via PUT on http://localhost:9090/emails/:emailId)
+    .delete(function(req, res) {
+        getEmails(function(emails) {
+            var emailIdToDelete = +req.params.emailId,
+
+                // make a new copy of the emails list, marking the appropriate email as deleted
+                updatedEmails = emails.map(function(email) {
+                    if (email.id === emailIdToDelete) {
+                        // make a copy of the email to update before updating
+                        return assign({}, email, {
+                            deleted: true
+                        });
+                    }
+
+                    return email;
+                });
+
+            saveEmails(updatedEmails, function() {
+                res.json({success: true});
+            });
+        });
+    });
+
+// Register the routes
+app.use('/', router);
+
+app.get('/ping', function(req, res) {
+    res.json({success: true});
+});
+
+app.listen(port, function() {
+  console.log('Server started: http://localhost:' + port + '/');
+});