use gun for todo list

Author: victornoel

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",

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');

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;}

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>

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 = '';
+    }
+  }
 }

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');
+}

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();
 }