Update #97, create complete CRUD demo with React.

hdsdi3g · Apr 9, 2015 · 459ecd1 · 459ecd1
1 parent 18d8119
commit 459ecd1
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 19 deletions.
diff --git a/app/controllers/asyncjs/DemoAsyncReact.java b/app/controllers/asyncjs/DemoAsyncReact.java
@@ -26,6 +26,7 @@
 
 import controllers.asyncjs.demoreact.VerbAddComment;
 import controllers.asyncjs.demoreact.VerbDelComment;
+import controllers.asyncjs.demoreact.VerbEditComment;
 import controllers.asyncjs.demoreact.VerbGetCommentList;
 
 public class DemoAsyncReact extends AsyncJSController {
@@ -36,7 +37,7 @@ public String getRequestName() {
 
 	@SuppressWarnings("unchecked")
 	public <V extends AsyncJSControllerVerb<Rq, Rp>, Rq extends AsyncJSRequestObject, Rp extends AsyncJSResponseObject> List<V> getManagedVerbs() {
-		return (List<V>) Arrays.asList(new VerbGetCommentList(), new VerbAddComment(), new VerbDelComment());
+		return (List<V>) Arrays.asList(new VerbGetCommentList(), new VerbAddComment(), new VerbDelComment(), new VerbEditComment());
 	}
 
 }
diff --git a/app/controllers/asyncjs/demoreact/Comment.java b/app/controllers/asyncjs/demoreact/Comment.java
@@ -16,8 +16,9 @@
 */
 package controllers.asyncjs.demoreact;
 
+import hd3gtv.mydmam.web.AsyncJSRequestObject;
 
-public class Comment {
+public class Comment implements AsyncJSRequestObject {
 	String key;
 	String author;
 	String text;

diff --git a/app/controllers/asyncjs/demoreact/FakeDB.java b/app/controllers/asyncjs/demoreact/FakeDB.java
@@ -59,6 +59,15 @@ static void delete(String key) {
 		}
 	}
 
+	static void update(Comment comment) {
+		for (int pos = 0; pos < comments.size(); pos++) {
+			if (comments.get(pos).key.equals(comment.key)) {
+				comments.set(pos, comment);
+				return;
+			}
+		}
+	}
+
 	static List<Comment> getAll() {
 		return Collections.unmodifiableList(comments);
 	}

diff --git a/app/controllers/asyncjs/demoreact/VerbEditComment.java b/app/controllers/asyncjs/demoreact/VerbEditComment.java
@@ -0,0 +1,43 @@
+/*
+ * This file is part of MyDMAM.
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ * 
+ * Copyright (C) hdsdi3g for hd3g.tv 2015
+ * 
+*/
+package controllers.asyncjs.demoreact;
+
+import hd3gtv.mydmam.web.AsyncJSControllerVerb;
+
+public class VerbEditComment extends AsyncJSControllerVerb<Comment, CommentList> {
+
+	public String getVerbName() {
+		return "edit";
+	}
+
+	public Class<Comment> getRequestClass() {
+		return Comment.class;
+	}
+
+	public Class<CommentList> getResponseClass() {
+		return CommentList.class;
+	}
+
+	public CommentList onRequest(Comment request) throws Exception {
+		FakeDB.update(request);
+
+		CommentList result = new CommentList();
+		result.commentlist = FakeDB.getAll();
+		return result;
+	}
+
+}
diff --git a/app/react/helloworld.jsx b/app/react/helloworld.jsx
@@ -22,14 +22,20 @@ $(document).ready(function() {
 	var Comment = React.createClass({
 		handleDelete: function(e) {
 			e.preventDefault();
-			//this.props.doaction.onCommentDelete(this.props.id);
-			this.props.doaction.hw(this.props.id);
+			this.props.doaction.onCommentDelete(this.props.id);
+			//this.props.doaction.hw(this.props.id);
+			return;
+		},
+		handleEdit: function(e) {
+			e.preventDefault();
+			this.props.doaction.onCommentEdit(this.props.id);
 			return;
 		},
 		render: function() {
 			return (
 				<div className="comment">
 					<a href="" className="btn" onClick={this.handleDelete}>Delete</a>&nbsp;
+					<a href="" className="btn" onClick={this.handleEdit}>Edit</a>&nbsp;
 					<strong>{this.props.author}</strong> &bull;
 					{this.props.children}
 				</div>
@@ -59,6 +65,13 @@ $(document).ready(function() {
 	});
 
 	var CommentForm = React.createClass({
+		handleChange: function(event) {
+			var author = React.findDOMNode(this.refs.author).value;
+		    var text = React.findDOMNode(this.refs.text).value;
+		    var key = this.props.edit.key;
+		    var edit = {key: key, author: author, text: text};
+			this.props.onChangeComment(edit);
+		},
 		handleSubmit: function(e) {
 			e.preventDefault();
 			var author = React.findDOMNode(this.refs.author).value.trim();
@@ -67,18 +80,19 @@ $(document).ready(function() {
 				return;
 			}
 
-			this.props.onCommentSubmit({text: text, author: author});
-
+			this.props.onCommentSubmit({text: text, author: author, key: this.props.edit.key});
 			React.findDOMNode(this.refs.author).value = '';
 		    React.findDOMNode(this.refs.text).value = '';
+
 		    return;
 		},
 		render: function() {
+			//console.log(this.props);
 			return (
-				<form className="commentForm" onSubmit={this.handleSubmit}>
-					<input type="text" placeholder="Your name" ref="author" />
-					<input type="text" placeholder="Say something..." ref="text" />
-					<input type="submit" value="Post" />
+				<form className="commentForm" onSubmit={this.handleSubmit} editkey={this.props.edit.key}>
+					<input type="text" placeholder="Your name" ref="author" value={this.props.edit.author} onChange={this.handleChange} />
+					<input type="text" placeholder="Say something..." ref="text" value={this.props.edit.text} onChange={this.handleChange} />
+					<input type="submit" value="Post" className="btn" />
 				</form>
 			);
 		}
@@ -91,13 +105,29 @@ $(document).ready(function() {
 			}.bind(this));
 		},
 		handleCommentSubmit: function(comment) {
-			var comments = this.state.data;
-			var newComments = comments.concat([comment]);
-			/** Sans key, mais c'est pas grave, car il dégagera/recyclera au prochain async.request */
-			this.setState({data: newComments});
-			mydmam.async.request("demosasync", "add", comment, function(data) {
-				this.setState({data: data.commentlist});
-			}.bind(this));
+			var actual_comments = this.state.data;
+			var cleared_edit = {key: null, author: null, text: null};
+			if (comment.key) {
+				/** edit comment */
+				for (var i = 0; i < actual_comments.length; i++) {
+					if (comment.key === actual_comments[i].key) {
+						actual_comments[i] = comment;
+						break;
+					}
+				}
+				this.setState({data: actual_comments, edit: cleared_edit});
+				mydmam.async.request("demosasync", "edit", comment, function(data) {
+					this.setState({data: data.commentlist});
+				}.bind(this));
+			} else {
+				/** add comment */
+				var new_comments = actual_comments.concat([comment]);
+				/** Sans key, mais c'est pas grave, car il dégagera/recyclera au prochain async.request */
+				this.setState({data: new_comments, edit: cleared_edit});
+				mydmam.async.request("demosasync", "add", comment, function(data) {
+					this.setState({data: data.commentlist});
+				}.bind(this));
+			}
 		},
 		handleCommentDelete: function(comment_key) {
 			var comment;
@@ -113,8 +143,29 @@ $(document).ready(function() {
 				this.setState({data: data.commentlist});
 			}.bind(this));
 		},
+		handleCommentEdit: function(comment_key) {
+			var comment;
+			for (var i = 0; i < this.state.data.length; i++) {
+				if (comment_key === this.state.data[i].key) {
+					comment = this.state.data[i];
+					break;
+				}
+			};
+			this.setState({edit: comment})
+		},
+		handleChangeComment: function(comment) {
+			var new_comment_list = this.state.data;
+			for (var i = 0; i < new_comment_list.length; i++) {
+				if (comment.key === new_comment_list[i].key) {
+					new_comment_list[i] = comment;
+					break;
+				}
+			};
+
+			this.setState({data: new_comment_list, edit: comment});
+		},
 		getInitialState: function() {
-			return {data: []};
+			return {data: [], edit: {key: null, author: null, text: null}};
 		},
 		componentDidMount: function() {
 			this.loadCommentsFromServer();
@@ -127,14 +178,15 @@ $(document).ready(function() {
 					hw: function(key) {
 						console.log("HELLO!", key);
 					},
+					onCommentEdit: this.handleCommentEdit,
 				},
 			};
 
 		    return (
 				<div className="commentBox">
 			        <h1>Comments</h1>
 			        <CommentList data={this.state.data} {...action_comment_list} />
-					<CommentForm onCommentSubmit={this.handleCommentSubmit} />
+					<CommentForm onCommentSubmit={this.handleCommentSubmit} edit={this.state.edit} onChangeComment={this.handleChangeComment} />
 				</div>
 			);
 		}