Add ids to data server-side so that keys can be used client-side

Author: zpao

comments.json

@@ -1,9 +1,11 @@
 [
     {
+        "id": 1388534400000,
         "author": "Pete Hunt",
         "text": "Hey there!"
     },
     {
+        "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
     }

public/scripts/example.js

@@ -44,6 +44,10 @@ var CommentBox = React.createClass({
   },
   handleCommentSubmit: function(comment) {
     var comments = this.state.data;
+    // Optimistically set an id on the new comment. It will be replaced by an
+    // id generated by the server. In a production application you would likely
+    // not use Date.now() for this and would have a more robust system in place.
+    comment.id = Date.now();
     var newComments = comments.concat([comment]);
     this.setState({data: newComments});
     $.ajax({
@@ -80,12 +84,9 @@ var CommentBox = React.createClass({
 
 var CommentList = React.createClass({
   render: function() {
-    var commentNodes = this.props.data.map(function(comment, index) {
+    var commentNodes = this.props.data.map(function(comment) {
       return (
-        // `key` is a React-specific concept and is not mandatory for the
-        // purpose of this tutorial. if you're curious, see more here:
-        // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-        <Comment author={comment.author} key={index}>
+        <Comment author={comment.author} key={comment.id}>
           {comment.text}
         </Comment>
       );

server.go

@@ -22,9 +22,11 @@ import (
 	"net/http"
 	"os"
 	"sync"
+	"time"
 )
 
 type comment struct {
+	ID     int64  `json:"id"`
 	Author string `json:"author"`
 	Text   string `json:"text"`
 }
@@ -64,7 +66,7 @@ func handleComments(w http.ResponseWriter, r *http.Request) {
 		}
 
 		// Add a new comment to the in memory slice of comments
-		comments = append(comments, comment{Author: r.FormValue("author"), Text: r.FormValue("text")})
+		comments = append(comments, comment{ID: time.Now().UnixNano() / 1000000, Author: r.FormValue("author"), Text: r.FormValue("text")})
 
 		// Marshal the comments to indented json.
 		commentData, err = json.MarshalIndent(comments, "", "    ")

server.js

@@ -42,7 +42,15 @@ app.post('/api/comments', function(req, res) {
       process.exit(1);
     }
     var comments = JSON.parse(data);
-    comments.push(req.body);
+    // NOTE: In a real implementation, we would likely rely on a database or
+    // some other approach (e.g. UUIDs) to ensure a globally unique id. We'll
+    // treat Date.now() as unique-enough for our purposes.
+    var newComment = {
+      id: Date.now(),
+      author: req.body.author,
+      text: req.body.text,
+    };
+    comments.push(newComment);
     fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {
       if (err) {
         console.error(err);

server.php

@@ -34,8 +34,11 @@ function routeRequest()
     } elseif (preg_match('/\/api\/comments(\?.*)?/', $uri)) {
         if($_SERVER['REQUEST_METHOD'] === 'POST') {
             $commentsDecoded = json_decode($comments, true);
-            $commentsDecoded[] = ['author'  => $_POST['author'],
-                                  'text'    => $_POST['text']];
+            $commentsDecoded[] = [
+                'id'      => round(microtime(true) * 1000),
+                'author'  => $_POST['author'],
+                'text'    => $_POST['text']
+            ];
 
             $comments = json_encode($commentsDecoded, JSON_PRETTY_PRINT);
             file_put_contents('comments.json', $comments);

server.pl

@@ -8,6 +8,7 @@
 # ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+use Time::HiRes qw(gettimeofday);
 use Mojolicious::Lite;
 use Mojo::JSON qw(encode_json decode_json);
 
@@ -22,6 +23,7 @@
   if ($self->req->method eq 'POST')
   {
     push @$comments, {
+      id     => int(gettimeofday * 1000),
       author => $self->param('author'),
       text   => $self->param('text'),
     };

server.py

@@ -10,6 +10,7 @@
 
 import json
 import os
+import time
 from flask import Flask, Response, request
 
 app = Flask(__name__, static_url_path='', static_folder='public')
@@ -22,7 +23,9 @@ def comments_handler():
         comments = json.loads(file.read())
 
     if request.method == 'POST':
-        comments.append(request.form.to_dict())
+        newComment = request.form.to_dict()
+        newComment['id'] = int(time.time() * 1000)
+        comments.append(newComment)
 
         with open('comments.json', 'w') as file:
             file.write(json.dumps(comments, indent=4, separators=(',', ': ')))

server.rb

@@ -23,7 +23,7 @@
 
   if req.request_method == 'POST'
     # Assume it's well formed
-    comment = {}
+    comment = { id: (Time.now.to_f * 1000).to_i }
     req.query.each do |key, value|
       comment[key] = value.force_encoding('UTF-8')
     end