initial react integration

Author: jsavell

.gitignore

@@ -15,4 +15,6 @@ hs_err_pid*
 .project
 .settings/
 target/
-src/main/resources/config/application.properties
+src/main/resources/config/application.properties
+node/
+src/main/resources/static/node_modules/

pom.xml

@@ -43,12 +43,49 @@
 
 
     <build>
-        <plugins>
-            <plugin>
-                <groupId>org.springframework.boot</groupId>
-                <artifactId>spring-boot-maven-plugin</artifactId>
-            </plugin>
-        </plugins>
+        <pluginManagement>
+	        <plugins>
+	            <plugin>
+	                <groupId>org.springframework.boot</groupId>
+	                <artifactId>spring-boot-maven-plugin</artifactId>
+	            </plugin>
+				<plugin>
+					<groupId>com.github.eirslett</groupId>
+					<artifactId>frontend-maven-plugin</artifactId>
+					<version>0.0.24</version>
+					<configuration>
+						<workingDirectory>src/main/resources/static</workingDirectory>
+					</configuration>
+					<executions>
+						<execution>
+							<id>install node and npm</id>
+							<goals>
+								<goal>install-node-and-npm</goal>
+							</goals>
+							<configuration>
+								<nodeVersion>v0.10.33</nodeVersion>
+								<npmVersion>1.3.8</npmVersion>
+							</configuration>
+						</execution>
+						<execution>
+							<id>npm install</id>
+							<goals>
+								<goal>npm</goal>
+							</goals>
+							<configuration>
+								<arguments>install</arguments>
+							</configuration>
+						</execution>
+						<execution>
+							<id>webpack build</id>
+							<goals>
+								<goal>webpack</goal>
+							</goals>
+						</execution>
+					</executions>
+				</plugin>            
+	        </plugins>
+		</pluginManagement>
     </build>
 
 </project>

src/main/java/com/shadowaterservices/thehub/controllers/AppController.java

@@ -14,7 +14,7 @@ public class AppController {
 
     @RequestMapping("/")
     public ModelAndView index() {
-        ModelAndView mav = new ModelAndView("users");
+        ModelAndView mav = new ModelAndView("index");
         mav.addObject("users", userRepository.findAll());
         return mav;
     }

src/main/resources/static/api/uriListConverter.js

@@ -0,0 +1,21 @@
+define(function() {
+	'use strict';
+
+	/* Convert a single or array of resources into "URI1\nURI2\nURI3..." */
+	return {
+		read: function(str /*, opts */) {
+			return str.split('\n');
+		},
+		write: function(obj /*, opts */) {
+			// If this is an Array, extract the self URI and then join using a newline
+			if (obj instanceof Array) {
+				return obj.map(function(resource) {
+					return resource._links.self.href;
+				}).join('\n');
+			} else { // otherwise, just return the self URI
+				return obj._links.self.href;
+			}
+		}
+	};
+
+});

src/main/resources/static/api/uriTemplateInterceptor.js

@@ -0,0 +1,18 @@
+define(function(require) {
+	'use strict';
+
+	var interceptor = require('rest/interceptor');
+
+	return interceptor({
+		request: function (request /*, config, meta */) {
+			/* If the URI is a URI Template per RFC 6570 (http://tools.ietf.org/html/rfc6570), trim out the template part */
+			if (request.path.indexOf('{') === -1) {
+				return request;
+			} else {
+				request.path = request.path.split('{')[0];
+				return request;
+			}
+		}
+	});
+
+});

src/main/resources/static/app.js

@@ -0,0 +1,58 @@
+'use strict';
+
+const React = require('react');
+const client = require('./client');
+
+class App extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {users: []};
+	}
+
+	componentDidMount() {
+		client({method: 'GET', path: '/api/users'}).done(response => {
+			this.setState({users: response.entity._embedded.users});
+		});
+	}
+
+	render() {
+		return (
+			<UserList users={this.state.users}/>
+		)
+	}
+}
+
+class UserList extends React.Component{
+	render() {
+		var users = this.props.users.map(user =>
+			<User key={user._links.self.href} user={user}/>
+		);
+		return (
+			<table>
+				<tr>
+					<th>First Name</th>
+					<th>Last Name</th>
+				</tr>
+				{users}
+			</table>
+		)
+	}
+}
+
+class User extends React.Component{
+	render() {
+		return (
+			<tr>
+				<td>{this.props.user.firstName}</td>
+				<td>{this.props.user.lastName}</td>
+			</tr>
+		)
+	}
+}
+
+React.render(
+	<App />,
+	document.getElementById('react')
+)
+