Migrate service layer from AngularJS to React

src/components/CommentList/presenter.js

@@ -1,20 +1,24 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import Comment from '../Comment';
-import { getAngularService } from '../../services/AngularReactHelper';
 
-const CommentList = (props) => {
-    const AuthorService = getAngularService(document, 'AuthorService');
-    const toComment = (c, i) =>
-        <Comment key={ i } comment={ c } author={ AuthorService.getAuthor(c.authorId) } />;
-    return (
-        <div>
-            { props.comments.map(toComment) }
-        </div>
-    );
-};
+export default class CommentList extends Component {
+    render() {
+        const { authorService } = this.context;
+        const toComment = (c, i) =>
+            <Comment key={ i } comment={ c } author={ authorService.getAuthor(c.authorId) } />;
+
+        return (
+            <div>
+                { this.props.comments.map(toComment) }
+            </div>
+        );
+    }
+}
 
 CommentList.propTypes = {
     comments: PropTypes.array.isRequired,
 };
 
-export default CommentList;
+CommentList.contextTypes = {
+    authorService: PropTypes.object,
+};

src/services/AngularReactHelper/index.js

@@ -2,13 +2,7 @@ import angular from 'angular';
 import ReactDOM from 'react-dom';
 import React from 'react';
 import { mapValues } from 'lodash';
-
-function render(element, Component, props) {
-    ReactDOM.render(
-        <Component { ...props } />,
-        element,
-    );
-}
+import ServiceProvider from '../ServiceProvider';
 
 function toBindings(propTypes) {
     return mapValues(propTypes, () => '<');
@@ -30,7 +24,14 @@ export function reactToAngularComponent(Component) {
     return {
         bindings: toBindings(propTypes),
         controller: /*@ngInject*/ function controller($scope, $element) {
-            this.$onChanges = () => render($element[0], Component, toProps(propTypes, this));
+            this.$onChanges = () => {
+                const WrappedComponent = (
+                    <ServiceProvider>
+                        <Component { ...toProps(propTypes, this) } />
+                    </ServiceProvider>
+                );
+                ReactDOM.render(WrappedComponent, $element[0]);
+            };
             this.$onDestroy = () => ReactDOM.unmountComponentAtNode($element[0]);
         },
     };

src/services/AuthorService/reactService.js

@@ -0,0 +1,25 @@
+const AUTHOR_URI = 'http://localhost:3004/authors';
+
+export default class AuthorService {
+    constructor() {
+        this.authors = {};
+    }
+
+    queryAuthors() {
+        return fetch(AUTHOR_URI)
+            .then(resp => resp.json())
+            .then(data => this.setAuthors(data));
+    }
+
+    setAuthors(authors) {
+        this.authors = authors.reduce((authorMap, author) => {
+            authorMap[author.id] = author;
+            return authorMap;
+        }, this.authors);
+        return authors;
+    }
+
+    getAuthor(id) {
+        return this.authors[id];
+    }
+}

src/services/CommentService/reactService.js

@@ -0,0 +1,22 @@
+const COMMENTS_URI = 'http://localhost:3004/comments';
+
+export default class CommentService {
+    constructor() {
+        this.comments = [];
+    }
+
+    queryComments() {
+        return fetch(COMMENTS_URI)
+            .then(resp => resp.json())
+            .then(data => this.setComments(data));
+    }
+
+    getComments() {
+        return this.comments;
+    }
+
+    setComments(comments) {
+        this.comments = comments;
+        return comments;
+    }
+}

src/services/ServiceProvider.js

@@ -0,0 +1,39 @@
+import { Component, PropTypes } from 'react';
+import CommentService from './CommentService/reactService';
+import AuthorService from './AuthorService/reactService';
+
+export default class ServiceProvider extends Component {
+    constructor(props) {
+        super(props);
+        this.commentService = new CommentService();
+        this.authorService = new AuthorService();
+        this.state = {
+            authorsLoaded: false,
+        };
+    }
+
+    getChildContext() {
+        return {
+            commentService: this.commentService,
+            authorService: this.authorService,
+        };
+    }
+
+    componentDidMount() {
+        this.authorService.queryAuthors().then(() => {
+            this.setState({ authorsLoaded: true });
+        });
+    }
+
+    render() {
+        if (!this.state.authorsLoaded) {
+            return null;
+        }
+        return this.props.children;
+    }
+}
+
+ServiceProvider.childContextTypes = {
+    commentService: PropTypes.object,
+    authorService: PropTypes.object,
+};