React.js and MobileFirst Platform Foundation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
var TaskRow = React.createClass({
	render: function(){
		return (
				<ul className="taskRow">
				<li>
					<TextTag item={this.props.children}/>
					<MarkCompleteButton item={this.props.children}/>
					<DeleteButton item={this.props.children}/>
				</li>
				</ul>
		);
	}
});
var TextTag = React.createClass({
	  render: function() {
		  var pStyle = {
				  display:'inline',
				};
				  return (
						  <p style={pStyle} className={this.props.item.completed}>{this.props.item.task}</p>
				  );
			  }
});
var DeleteButton = React.createClass({
	getInitialState: function(){
		React.initializeTouchEvents(true);
		return {};
	},
	  handleClick: function(event) {
		  var resourceRequest = new WLResourceRequest(
					"http://<ip-address>:10080/ToDoReact/adapters/ToDoAdapter/toListMethods/deleteTask/"+this.props.item.id,
					WLResourceRequest.POST);
			resourceRequest.send().then();
	  },
	  render: function() {
		  var pStyle = {
				  display:'inline',
				};
	    return (
	      <a style={pStyle} onClick={this.handleClick} className="redLink">
	      	<span className="glyphicon glyphicon-remove"/>
	      </a>
	    );
	  }
});
var MarkCompleteButton = React.createClass({
	getInitialState: function() {
		React.initializeTouchEvents(true);
	    	if(this.props.item.completed == "false"){
	    		return { active : false };
	    	}else{
	    		return { active: true };
	    	};
	  },
	  handleClick: function(event) {
		  this.setState({active: !this.state.active});
		  var resourceRequest = new WLResourceRequest(
					"http://<ip-address>:10080/ToDoReact/adapters/ToDoAdapter/toListMethods/tagDone/"+this.props.item.id,
					WLResourceRequest.POST);
			resourceRequest.addHeader("Content-Type", "application/x-www-form-urlencoded");
			resourceRequest.send().then();
	  },
	  render: function() {
		  var pStyle = {
				  display:'inline',
				};
	    return (
	      <a style={pStyle} onClick={this.handleClick} className="greenLink">
	      <span className="glyphicon glyphicon-ok"></span>
	      </a>
	    );
	  }
});
var InputBox = React.createClass({
	handleSubmit: function(e){
		e.preventDefault();
		var text = this.refs.text.getDOMNode().value.trim();
		if (!text) {
		      return;
		}
		this.props.onTaskSubmit({task: text });
		this.refs.text.getDOMNode().value = '';
	    return;
	},
	render: function() {
		return (
				<form className="inputBox" onSubmit={this.handleSubmit}>
		        <input name="taskName" type="text" placeholder="Task..." ref="text"/>
		        <input type="submit" value="Add Item" />
				</form>
		);
	}
});
var ToDoListStaticName = React.createClass({
	render: function(){
		return (
				<h4>ToDo List!</h4>
		);
	}
});
var TaskList = React.createClass({
	render: function() {
		var toDoNodes = this.props.data.map(function (taskRow){
			return (
					<TaskRow>{taskRow}</TaskRow>
			);
		});
		return (
				<div className="taskList">
					{toDoNodes}
				</div>
		);
	}
});
var other;
var ToDoListContainer = React.createClass({
	loadTasksFromServer: function() {
		other = this;
		var resourceRequest = new WLResourceRequest(this.props.url, WLResourceRequest.GET);
		resourceRequest.send().then(
				function(response){
					 other.updateState(JSON.parse(response.responseText));
				},
				function(error){
				}
		).then(
				function(){
					other.setState
				}
		);
	},
	updateState : function(state) {
		this.setState(state);
	},
	handleTaskSubmit: function(taskRow){
		var taskRows = this.state.data;
		var newTaskRows = taskRows.concat([taskRow]);
		var resourceRequest = new WLResourceRequest(
				"http://<ip-address>:10080/ToDoReact/adapters/ToDoAdapter/toListMethods/addTask/",
				WLResourceRequest.POST);
		resourceRequest.addHeader("Content-Type", "application/x-www-form-urlencoded");
		resourceRequest.send("taskName=" + taskRow.task).then();
	},
	getInitialState: function(){
		return {
			data: []
		};
	},
	getCurrentState: function(){
		return this.state.data;
	},
	addToCurrentState: function(taskRow){
		var taskRows = this.state.data;
		var newTaskRows = taskRows.concat([taskRow]);
		this.setState({data: newTaskRows});
	},
	componentDidMount: function() {
	    this.loadTasksFromServer();
	    setInterval(this.loadTasksFromServer, this.props.pollInterval);
	  },
	render: function(){
		return (
				<div className="toDoListContainer">
					<ToDoListStaticName />
					<InputBox onTaskSubmit={this.handleTaskSubmit}/>
					<TaskList data={this.state.data} />
				</div>
		);
	}
});
function createNewState(oldState, newState){
	oldState.value = newState.value;
}
React.render(
	<ToDoListContainer url="http://<ip-address>:10080/ToDoReact/adapters/ToDoAdapter/toListMethods/getToDoList" pollInterval={1000}/>,
	document.getElementById('content')
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@Path("/toListMethods")
@OAuthSecurity(enabled=false)
public class ToDoAdapterResource {
	//Define logger (Standard java.util.Logger)
	static Logger logger = Logger.getLogger(ToDoAdapterResource.class.getName());
    //Define the server api to be able to perform server operations
    WLServerAPI api = WLServerAPIProvider.getWLServerAPI();
    private static ArrayList<TaskItem> taskList = new ArrayList<TaskItem>();
    public static Integer id = 0;
    @GET
    @Path("/getToDoList")
    public String getTasks(){
    	String taskString = "{\"data\": [";
    	for(int i = 0; i<taskList.size(); i++){
    		if(taskList.size()-1 != i){
    			taskString+=taskList.get(i).returnJSON()+",";
    		}else{
    			taskString+=taskList.get(i).returnJSON();
    		}
    	}
    	taskString += "]}";
		return taskString;
    }
    @POST
    @Path("/addTask/")
    public void addTask(@FormParam("taskName") String task){
    	TaskItem newTaskItem = new TaskItem(task, id);
    	taskList.add(newTaskItem);
    	id++;
    }
    @POST
    @Path("/deleteTask/{id}")
    public void deleteTask(@PathParam("id") Integer id){
    	TaskItem newItem = new TaskItem(null, id);
    	Integer index = taskList.indexOf(newItem);
    	if(index != -1){
    		taskList.remove(newItem);
    	}
    }
    @POST
    @Path("/tagDone/{id}")
    public void tagDone(@PathParam("id") Integer id){
    	TaskItem newItem = new TaskItem(null, id);
    	Integer index = taskList.indexOf(newItem);
    	if(index != -1){
    		taskList.get(index).toggleComplete();
    	}
    }
}