Permalink
Browse files

Adding TodoBackend API proxy example

  • Loading branch information...
1 parent f66bd76 commit 5495a8cd657d4cf2fa4944fd6a63247ad1ddada2 @daffl daffl committed Jun 3, 2016
View
@@ -0,0 +1,29 @@
+{
+ "node": true,
+ "esnext": true,
+ "bitwise": true,
+ "camelcase": true,
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "indent": 2,
+ "latedef": "nofunc",
+ "newcap": false,
+ "noarg": true,
+ "quotmark": "single",
+ "regexp": true,
+ "undef": true,
+ "unused": false,
+ "strict": false,
+ "trailing": true,
+ "smarttabs": true,
+ "white": false,
+ "globals": {
+ "it": true,
+ "describe": true,
+ "before": true,
+ "beforeEach": true,
+ "after": true,
+ "afterEach": true
+ }
+}
@@ -0,0 +1,62 @@
+const feathers = require('feathers');
+const rest = require('feathers-rest');
+const socketio = require('feathers-socketio');
+const bodyParser = require('body-parser');
+const handler = require('feathers-errors/handler');
+const request = require('request-promise');
+
+const makeRequest = request.defaults({
+ baseUrl: 'https://todo-backend-rails.herokuapp.com',
+ json: true
+});
+
+const todoService = {
+ find(params) {
+ return makeRequest(`/`);
+ },
+
+ get(id, params) {
+ return makeRequest(`/${id}`);
+ },
+
+ create(data, params) {
+ return makeRequest({
+ uri: `/`,
+ method: 'POST',
+ body: data
+ });
+ },
+
+ update(id, data, params) {
+ // PATCH and update work the same here
+ return this.update(id, data, params);
+ },
+
+ patch(id, data, params) {
+ return makeRequest({
+ uri: `/${id}`,
+ method: 'PATCH',
+ body: data
+ });
+ },
+
+ remove(id, params) {
+ // Retrieve the original Todo first so we can return it
+ // The API only sends an empty body
+ return this.get(id, params).then(todo => makeRequest({
+ method: 'DELETE',
+ uri: `/${id}`
+ }).then(() => todo));
+ }
+};
+
+const app = feathers()
+ .use(bodyParser.json())
+ .use(bodyParser.urlencoded({ extended: true }))
+ .configure(rest())
+ .configure(socketio())
+ .use('/todos', todoService)
+ .use('/', feathers.static(__dirname))
+ .use(handler());
+
+app.listen(3030);
@@ -0,0 +1,84 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import feathers from 'feathers/client';
+import socketio from 'feathers-socketio/client';
+import rx from 'feathers-reactive';
+import RxJS from 'rxjs';
+
+const socket = io();
+const app = feathers()
+ .configure(socketio(socket))
+ .configure(rx(RxJS));
+const todos = app.service('todos');
+
+const TodoApp = React.createClass({
+ getInitialState() {
+ return {
+ todos: [],
+ title: ''
+ };
+ },
+
+ componentDidMount() {
+ this.todos = todos.find().subscribe(todos => this.setState({ todos }));
+ },
+
+ componentWillUnmount() {
+ this.todos.unsubscribe();
+ },
+
+ updatetitle(ev) {
+ this.setState({ title: ev.target.value });
+ },
+
+ createTodo(ev) {
+ todos.create({
+ title: this.state.title,
+ completedd: false
+ });
+ this.setState({ title: '' });
+ ev.preventDefault();
+ },
+
+ updateTodo(todo, ev) {
+ todo.completed = ev.target.checked;
+ todos.patch(todo.id, todo);
+ },
+
+ deleteTodo(todo) {
+ todos.remove(todo.id);
+ },
+
+ render() {
+ const renderTodo = todo =>
+ <li className={`page-header checkbox ${todo.completed ? 'done' : ''}`}>
+ <label>
+ <input type="checkbox" onChange={this.updateTodo.bind(this, todo)}
+ checked={todo.completed} />
+ {todo.title}
+ </label>
+ <a href="javascript://" className="pull-right delete"
+ onClick={this.deleteTodo.bind(this, todo)}>
+ <span className="glyphicon glyphicon-remove"></span>
+ </a>
+ </li>;
+
+ return <div className="container" id="todos">
+ <h1>Feathers real-time Todos</h1>
+
+ <ul className="todos list-unstyled">{this.state.todos.map(renderTodo)}</ul>
+ <form role="form" className="create-todo" onSubmit={this.createTodo}>
+ <div className="form-group">
+ <input type="text" className="form-control" name="description"
+ placeholder="Add a new Todo" onChange={this.updatetitle}
+ value={this.state.title} />
+ </div>
+ <button type="submit" className="btn btn-info col-md-12">
+ Add Todo
+ </button>
+ </form>
+ </div>;
+ }
+});
+
+ReactDOM.render(<TodoApp />, document.getElementById('app'));
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Feathers Rx</title>
+ <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+ <style type="text/css">
+ .done {
+ text-decoration: line-through;
+ }
+ </style>
+ <div class="container" id="app"></div>
+
+ <script src="../socket.io/socket.io.js"></script>
+ <script src="node_modules/steal/steal.js" main="client"></script>
+</body>
+</html>
@@ -0,0 +1,28 @@
+{
+ "name": "feathers-react-todos",
+ "version": "0.1.0",
+ "description": "",
+ "main": "app.js",
+ "scripts": {
+ "start": "node app"
+ },
+ "author": "",
+ "license": "MIT",
+ "system": {
+ "npmAlgorithm": "flat"
+ },
+ "dependencies": {
+ "body-parser": "^1.15.1",
+ "feathers": "^2.0.1",
+ "feathers-reactive": "^0.2.0",
+ "feathers-rest": "^1.3.0",
+ "feathers-socketio": "^1.4.0",
+ "react": "^15.0.2",
+ "react-dom": "^15.0.2",
+ "request-promise": "^3.0.0",
+ "rxjs": "^5.0.0-beta.8",
+ "socket.io-client": "^1.4.6",
+ "steal": "^0.16.12",
+ "steal-jsx": "0.0.2"
+ }
+}
@@ -0,0 +1,10 @@
+# Feathers as a real-time API proxy
+
+This folder contains an example for a real-time Todo list using the [TodoBackend](http://www.todobackend.com/) implementation for [Rails](https://github.com/hammerdr/todo-backend-rails) running at [todo-backend-rails.herokuapp.com](https://todo-backend-rails.herokuapp.com). The example frontend is built with Bootstrap, ReactJS and [feathers-reactive](https://github.com/feathersjs/feathers-reactive/). In this folder run:
+
+```
+npm install
+npm start
+```
+
+Then go to [localhost:3030](http://localhost:3030).

0 comments on commit 5495a8c

Please sign in to comment.