feat: initial full version without ngrx

src/app/app-routing.module.ts

@@ -3,9 +3,10 @@ import { Routes, RouterModule } from '@angular/router';
 
 const routes: Routes = [
   {
-    path: '',
-    children: []
-  }
+    path: 'notes',
+    loadChildren: 'app/views/notes/notes.module#NotesModule'
+  },
+  { path: '', redirectTo: '/notes', pathMatch: 'full' },
 ];
 
 @NgModule({

src/app/app.component.css

@@ -1,3 +0,0 @@
-.card{
-  margin-bottom: 15px;
-}

src/app/app.component.html

@@ -4,6 +4,7 @@
     <div class="nav-left">
       <a class="nav-item" routerLink="/">
         Angular Ngrx Socket
+        (<span></span>)
       </a>
     </div>
     <span class="nav-toggle">
@@ -24,37 +25,9 @@
 </nav>
 <section class="section">
   <div class="container content">
-    <a class="button is-success" (click)="addNote({username: 'avatsaev', body: 'Lorem dolor ipsum'})">
-      <span class="fa fa-plus"></span>
-      ADD
-    </a>
-    <p class="has-text-centered">List of notes</p>
-      <div class="box">
-
-
-        <div  *ngFor=" let note of notes$ | async" class="card">
-          <div class="card-header">
-            <p class="card-header-title">
-              @{{note.username}}
-            </p>
-
-          </div>
-          <div class="card-content">
-            {{note.body}}
-          </div>
-          <footer class="card-footer">
-            <a class="card-footer-item" (click)="updateNote(note)">Edit</a>
-            <a class="card-footer-item is-danger" (click)="deleteNote(note)">Delete</a>
-          </footer>
-        </div>
-      </div>
-
-
-
-
-    </div>
-
+    <router-outlet></router-outlet>
+  </div>
 
 </section>
 
-<router-outlet></router-outlet>
+

src/app/app.component.ts

@@ -1,32 +1,11 @@
 import { Component } from '@angular/core';
-import {SocketService} from './core/services/socket.service';
-import {Note} from './core/models/note';
-import {Observable} from 'rxjs/Observable';
+
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  notes$: Observable<Note[]>;
-
-  constructor(private socket: SocketService) {
-    this.notes$ = socket.listen('[Notes] Listed').map(notes => Object.values(notes));
-
-    socket.join('notes');
-
-  }
-
-  addNote(note: Note) {
-    this.socket.emit('[Notes] Add', note);
-  }
-
-  deleteNote(note) {
-    this.socket.emit('[Notes] Delete', note);
-  }
 
-  updateNote(note){
-    this.socket.emit('[Notes] Update', {...note, body: '----'});
-  }
 }

src/app/app.module.ts

@@ -1,19 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
+
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import {SocketService} from './core/services/socket.service';
+import {SharedModule} from './core/modules/shared.module';
+import {BrowserModule} from '@angular/platform-browser';
+import {CommonModule} from '@angular/common';
+
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    SharedModule
   ],
-  providers: [SocketService],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/core/components/note-item/note-item.component.css

@@ -0,0 +1,4 @@
+.card{
+  margin-bottom: 15px;
+}
+

src/app/core/components/note-item/note-item.component.html

@@ -0,0 +1,25 @@
+<div  class="card">
+  <div class="card-header">
+    <p class="card-header-title">
+      @{{note.username}}
+    </p>
+
+  </div>
+  <div class="card-content">
+    <span *ngIf="!editMode" class="note-body">
+      {{note.body}}
+    </span>
+
+    <textarea class="textarea" *ngIf="editMode" [(ngModel)]="newNoteBody" >
+    </textarea>
+
+  </div>
+  <footer *ngIf="!editMode" class="card-footer">
+    <a class="card-footer-item" (click)="toggleEditMode()">Edit</a>
+    <a class="card-footer-item" (click)="deleteNote()">Delete</a>
+  </footer>
+  <footer *ngIf="editMode" class="card-footer">
+    <a class="card-footer-item" (click)="toggleEditMode()">Cancel</a>
+    <a class="card-footer-item" (click)="updateNote()">Save</a>
+  </footer>
+</div>

src/app/core/components/note-item/note-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoteItemComponent } from './note-item.component';
+
+describe('NoteItemComponent', () => {
+  let component: NoteItemComponent;
+  let fixture: ComponentFixture<NoteItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoteItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoteItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/components/note-item/note-item.component.ts

@@ -0,0 +1,47 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {Note} from '../../models/note';
+
+@Component({
+  selector: 'app-note-item',
+  templateUrl: './note-item.component.html',
+  styleUrls: ['./note-item.component.css']
+})
+export class NoteItemComponent implements OnInit, OnChanges {
+
+  @Input() note: Note;
+  newNoteBody: string;
+
+  @Output() onNoteUpdated = new EventEmitter<Note>();
+  @Output() onNoteDeleted = new EventEmitter<Note>();
+
+  editMode = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+    this.newNoteBody = this.note.body;
+  }
+
+  toggleEditMode() {
+    this.editMode = !this.editMode;
+    if (!this.editMode) {
+      // reset new body value on edit cancel
+      this.newNoteBody = this.note.body;
+    }
+  }
+
+  updateNote() {
+    this.note.body = this.newNoteBody;
+    this.onNoteUpdated.emit(this.note);
+    this.toggleEditMode();
+  }
+
+  deleteNote() {
+    this.onNoteDeleted.emit(this.note);
+  }
+
+
+}

src/app/core/modules/shared.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {NoteItemComponent} from '../components/note-item/note-item.component';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+  imports: [
+    FormsModule,
+    CommonModule
+  ],
+  declarations: [
+    NoteItemComponent
+  ],
+  exports: [
+    NoteItemComponent,
+    FormsModule,
+  ]
+})
+export class SharedModule { }

src/app/core/services/socket.service.ts

@@ -2,18 +2,34 @@ import { Injectable } from '@angular/core';
 import * as socketio from 'socket.io-client';
 import {environment} from '../../../environments/environment';
 import {Observable} from 'rxjs/Observable';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+
+// Low level socket service
 
 @Injectable()
 export class SocketService {
 
-  socket: SocketIOClient.Socket;
+  private socket: SocketIOClient.Socket;
+  connected$ = new BehaviorSubject<boolean>(false);
 
   constructor() {
     this.socket = socketio(environment.socket.baseUrl, environment.socket.config);
+    this.socket.on('connect', () => this.connected$.next(true));
+    this.socket.on('disconnect', () => this.connected$.next(false));
   }
 
   join(room: string) {
-    this.socket.emit('join', {room});
+    // auto rejoin after reconnect mechanism
+    this.connected$.filter(Boolean).subscribe(connected => {
+      if (connected) {
+        this.socket.emit('join', {room});
+      }
+    });
+  }
+
+  disconnect() {
+    this.socket.disconnect();
+    this.connected$.next(false);
   }
 
   emit(event: string, data?: any) {
@@ -22,7 +38,9 @@ export class SocketService {
 
   listen(event: string): Observable<any> {
     return new Observable( observer => {
+
       this.socket.on(event, data => observer.next(data));
+      // dispose of the event listener when unsubscribed
       return () => this.socket.off(event);
     });
   }

src/app/views/notes/note-list/note-list.component.css

@@ -0,0 +1,20 @@
+.card{
+  margin-bottom: 15px;
+}
+
+.connected {
+  color: green;
+
+}
+
+.connected:after {
+  content: 'CONNECTED';
+}
+
+.disconnected {
+  color: red;
+}
+
+.disconnected:after {
+  content: 'DISONNECTED';
+}

src/app/views/notes/note-list/note-list.component.html

@@ -0,0 +1,16 @@
+<a class="button is-success" (click)="addNote({username: 'username', body: 'Lorem dolor ipsum'})">
+  <span class="fa fa-plus"></span>
+  ADD
+</a>
+<p class="has-text-centered">List of notes</p>
+
+
+
+<app-note-item
+        *ngFor=" let note of notes$ | async"
+        [note]="note"
+        (onNoteUpdated)="updateNote($event)"
+        (onNoteDeleted)="deleteNote($event)"
+>
+</app-note-item>
+

src/app/views/notes/note-list/note-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoteListComponent } from './note-list.component';
+
+describe('NoteListComponent', () => {
+  let component: NoteListComponent;
+  let fixture: ComponentFixture<NoteListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoteListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoteListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});