From 46c9c633956e685ce7ffd5b9cafebb1f7ca52086 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20No=C3=ABl?= <victor.noel@linagora.com>
Date: Tue, 18 Apr 2017 15:54:30 +0200
Subject: [PATCH] use gun for todo list

---
 examples/angular/package.json               |  7 +++--
 examples/angular/server.js                  | 20 ++++++++++++++
 examples/angular/src/app/app.component.css  |  7 +++++
 examples/angular/src/app/app.component.html | 14 +++++++---
 examples/angular/src/app/app.component.ts   | 29 ++++++++++++++++++---
 examples/angular/src/app/app.module.ts      | 13 +++++++--
 examples/angular/src/main.ts                |  3 +++
 7 files changed, 83 insertions(+), 10 deletions(-)
 create mode 100644 examples/angular/server.js

diff --git a/examples/angular/package.json b/examples/angular/package.json
index e2d84b66..4d5fc12f 100644
--- a/examples/angular/package.json
+++ b/examples/angular/package.json
@@ -21,7 +21,10 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
-    "rxjs": "^5.1.0",
+    "express-http-proxy": "^0.11.0",
+    "gun": "^0.7.2",
+    "gun-edge": "^0.8.8",
+    "rxjs": "^5.3.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
@@ -35,9 +38,9 @@
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
diff --git a/examples/angular/server.js b/examples/angular/server.js
new file mode 100644
index 00000000..f1d1c55e
--- /dev/null
+++ b/examples/angular/server.js
@@ -0,0 +1,20 @@
+var port = process.env.OPENSHIFT_NODEJS_PORT || process.env.VCAP_APP_PORT || process.env.PORT || process.argv[2] || 8080;
+var host = process.env.OPENSHIFT_NODEJS_HOST || process.env.VCAP_APP_HOST || process.env.HOST || 'localhost';
+
+var express = require('express');
+var proxy = require('express-http-proxy');
+var http = require('http');
+var app = express();
+var server = http.createServer(app);
+
+var Gun = require('gun');
+var gun = Gun({
+	file: 'data.json',
+	web: server
+});
+
+app.use(Gun.serve);
+app.use(proxy(host + ':4200'));
+server.listen(port);
+
+console.log('Server started on port ' + port + ' with /gun');
diff --git a/examples/angular/src/app/app.component.css b/examples/angular/src/app/app.component.css
index e69de29b..4625ea1f 100644
--- a/examples/angular/src/app/app.component.css
+++ b/examples/angular/src/app/app.component.css
@@ -0,0 +1,7 @@
+html, body { font-size: 14pt; padding: 10px 2.5%;}
+.hide { display: none; }
+form .who { width: 10%; }
+form .what { width: 80%; }
+ul { list-style: none; padding: 0; }
+ul .when {color: #555; font-size: 12pt; float: right; display: none; }
+li:hover .when {display: inline;}
diff --git a/examples/angular/src/app/app.component.html b/examples/angular/src/app/app.component.html
index b6931b53..154e27af 100644
--- a/examples/angular/src/app/app.component.html
+++ b/examples/angular/src/app/app.component.html
@@ -1,3 +1,11 @@
-<h1>
-  {{title}}
-</h1>
+<div>
+
+  <form (ngSubmit)="add()">
+    <input type="text" [(ngModel)]="newTodo" name="newTodo" placeholder="New TODO">
+    <button type="submit" *ngIf="newTodo" [disabled]="newTodo?.trim().length === 0">Add</button>
+  </form>
+  <br />
+  <ul>
+    <li *ngFor="let todo of todos$ | async">{{todo.val}}</li>
+  </ul>
+</div>
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
index ff63e050..6c01d9a1 100644
--- a/examples/angular/src/app/app.component.ts
+++ b/examples/angular/src/app/app.component.ts
@@ -1,10 +1,33 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { $rx } from 'gun-edge/edge/observable/rx';
+import Gun from 'gun/gun';
+import { Observable } from 'rxjs/Observable';
+
+import { GunDb } from 'app/app.module';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app works!';
+export class AppComponent implements OnInit {
+  newTodo = '';
+
+  todos = this.db.gun.get('todos');
+  todos$: Observable<string[]> = $rx(this.todos)
+    .startWith([])
+    .map(o => Object.keys(o).filter(k => typeof o[k] === 'string').map(k => ({ key: k, val: (o[k] as string) })));
+
+  constructor(private db: GunDb) { }
+
+  ngOnInit() {
+    $rx(this.todos).subscribe(x => console.log(x));
+  }
+
+  add() {
+    if (this.newTodo) {
+      this.todos.path(Gun.text.random()).put(this.newTodo);
+      this.newTodo = '';
+    }
+  }
 }
diff --git a/examples/angular/src/app/app.module.ts b/examples/angular/src/app/app.module.ts
index 67ae4911..6ba81ff0 100644
--- a/examples/angular/src/app/app.module.ts
+++ b/examples/angular/src/app/app.module.ts
@@ -1,7 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, Injectable } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+import Gun from 'gun/gun';
 
 import { AppComponent } from './app.component';
 
@@ -14,7 +17,13 @@ import { AppComponent } from './app.component';
     FormsModule,
     HttpModule
   ],
-  providers: [],
+  providers: [GunDb],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+@Injectable()
+export class GunDb {
+
+  readonly gun = Gun(location.origin + '/gun');
+}
diff --git a/examples/angular/src/main.ts b/examples/angular/src/main.ts
index a9ca1caf..83eb8fb4 100644
--- a/examples/angular/src/main.ts
+++ b/examples/angular/src/main.ts
@@ -4,6 +4,9 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/startWith';
+
 if (environment.production) {
   enableProdMode();
 }