Merge pull request #7 from aviabird/phoenix

Working on Phoenix Socket Channel implementation on comments

package.json

@@ -36,6 +36,7 @@
     "ng2-progressbar": "^1.0.3",
     "ng2-slim-loading-bar": "^2.0.5",
     "ng2-tag-input": "^0.4.4",
+    "phoenix_js": "0.0.3",
     "reselect": "^2.5.4",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",

src/app/actions/comment.ts

@@ -15,8 +15,8 @@ export const ActionTypes = {
   LOAD_COMMENTS_SUCCESS:            type('[Comment] Load Comments Success'),
   ADD_COMMENT:                      type('[Comment] Add Comment'),
   ADD_COMMENT_SUCCESS:              type('[Comment] Add Comment Success'),
-  SAVE_COMMENT:                     type('[Comment] Save Comment'),
-  SAVE_COMMENT_SUCCESS:             type('[Comment] Save Comment Success'),
+  // SAVE_COMMENT:                     type('[Comment] Save Comment'),
+  // SAVE_COMMENT_SUCCESS:             type('[Comment] Save Comment Success'),
   DELETE_COMMENT:                   type('[Comment] Delete Comment'),
   DELETE_COMMENT_SUCCESS:           type('[Comment] Delete Comment Success'),
 };
@@ -53,17 +53,17 @@ export class AddCommentSuccessAction implements Action {
   constructor(public payload: Comment) { };
 }
 
-export class SaveCommentAction implements Action {
-  type = ActionTypes.SAVE_COMMENT;
+// export class SaveCommentAction implements Action {
+//   type = ActionTypes.SAVE_COMMENT;
 
-  constructor(public payload: Comment) { };
-}
+//   constructor(public payload: Comment) { };
+// }
 
-export class SaveCommentSuccessAction implements Action {
-  type = ActionTypes.SAVE_COMMENT_SUCCESS;
+// export class SaveCommentSuccessAction implements Action {
+//   type = ActionTypes.SAVE_COMMENT_SUCCESS;
 
-  constructor() { };
-}
+//   constructor() { };
+// }
 
 export class DeleteCommentAction implements Action {
   type = ActionTypes.DELETE_COMMENT
@@ -86,7 +86,7 @@ export type Actions
   | LoadCommentsSuccessAction
   | AddCommentAction
   | AddCommentSuccessAction
-  | SaveCommentAction
-  | SaveCommentSuccessAction
+  // | SaveCommentAction
+  // | SaveCommentSuccessAction
   | DeleteCommentAction
   | DeleteCommentSuccessAction

src/app/app.module.ts

@@ -34,6 +34,7 @@ import { NotificationEffects } from './effects/notification';
 import { ToasterService, ToasterModule } from 'angular2-toaster/angular2-toaster';
 import { CanActivateViaAuthGuard } from './guards/authenticated';
 import { CanEditPinGuard } from './guards/can-edit-pin';
+import { PhoenixChannelService } from './services/phoenix-channel.service';
 
 // Must export the config
 export const firebaseConfig = {
@@ -98,7 +99,8 @@ export const firebaseConfig = {
     },
     ToasterService,
     CanActivateViaAuthGuard,
-    CanEditPinGuard
+    CanEditPinGuard,
+    PhoenixChannelService
   ],
   bootstrap: [AppComponent]
 })

src/app/components/shared/footer/footer.component.html

@@ -1,14 +1,23 @@
 <div class="footer">
-  <div class="row full-width">
-    <div class="small-12 medium-3 large-4 columns">
+  <div class="row">
+    <div class="small-12 medium-4 large-5 columns">
       <i class="fa fa-laptop fa-4"></i>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maiores alias ea sunt facilis impedit fuga dignissimos illo quaerat iure in nobis id quos, eaque nostrum! Unde, voluptates suscipit repudiandae!</p>
+      <p>Built with love <span class="fa fa-heart"></span> <a href="https://medium.com/aviabird">@aviabird</a></p>
+      <p>
+        We’re excited to start this new adventure, and work more closely with enterprise teams working on Angular 2/Ruby on rails/Phoenix Framework/GoLang applications.
+        Think we can help your team? Reach out at [email protected]
+      </p>
     </div>
-    <div class="small-12 medium-3 large-4 columns">
+
+    <div class="small-12 medium-5 large-5 columns">
       <i class="fa fa-code fa-4"></i>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit consequuntur at! Amet sed itaque nostrum, distinctio eveniet odio, id ipsam fuga quam minima cumque nobis veniam voluptates deserunt!</p>
+      <h4>WHO AM I?</h4>
+      <p>
+        I'm a Rubyist from Pune. Founder of <a href="https://medium.com/aviabird/introducing-aviabird-technologies-929db42e342d#.z1h59tnkw">Aviabird Techonolgy</a>.
+      </p>
     </div>
-    <div class="small-6 medium-3 large-2 columns">
+
+    <!--<div class="small-6 medium-3 large-2 columns">
       <h4>Work With Me</h4>
       <ul class="footer-links">
         <li><a href="#">What I Do</a></li>
@@ -17,13 +26,15 @@ <h4>Work With Me</h4>
         <li><a href="#">Blog</a></li>
         <li><a href="#">FAQ's</a></li>
       </ul>
-    </div>
+    </div>-->
     <div class="small-6 medium-3 large-2 columns">
       <h4>Follow Me</h4>
       <ul class="footer-links">
         <li><a href="https://github.com/pkrawat1">GitHub</a></li>
         <li><a href="https://www.facebook.com/pkrawat1">Facebook</a></li>
         <li><a href="https://twitter.com/pkrawat1">Twitter</a></li>
+        <li><a href="https://www.facebook.com/aviabird">AviaBird Technology</a></li>
+        <li><a href="https://www.facebook.com/AngularCasts/">AngularCasts</a></li>
       </ul>
     </div>
   </div>

src/app/components/shared/footer/footer.component.css → src/app/components/shared/footer/footer.component.scss

@@ -29,7 +29,7 @@
 
 @media only screen and (min-width: 40.063em) {
   .footer .columns:nth-child(n+2) {
-    border-left: 1px solid scale-color(#555);
+    border-left: 1px solid rgba(85, 85, 85, 0.05);;
     min-height: 280px;
   }
 }
@@ -50,3 +50,7 @@
 .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
   border-color: #805840 transparent transparent;
 }
+
+.fa-heart{
+  color: red;
+}

src/app/components/shared/footer/footer.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'pin-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
+  styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
 

src/app/services/phoenix-channel.service.ts

@@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { Socket } from "phoenix_js"
+import { environment } from '../../environments/environment';
+import { Store } from '@ngrx/store';
+import { AppState, getUserAuthStatus, getAuthUser } from '../reducers/index';
+import { storeFreeze } from 'ngrx-store-freeze';
+import { LoadCommentsSuccessAction, DeleteCommentSuccessAction } from '../actions/comment';
+import { User } from '../models/user';
+
+@Injectable()
+export class PhoenixChannelService {
+  private socket: any;
+  private user: User;
+
+  constructor(
+    private store: Store<AppState>
+  ) {
+    this.store.select(getUserAuthStatus).subscribe(
+      authStatus => {
+        if (!authStatus) {
+          if(this.socket) {
+            this.socket.disconnect();
+          }
+        }
+        else {
+          // Incase Socket is not present
+          if(!this.socket) {
+            this.socket = this._socket();
+            this.store.select(getAuthUser).subscribe(
+              user => this.user = user
+            );
+          }
+
+          this.socket.connect();
+
+          this.socket.onOpen(ev => console.log("OPEN", ev));
+          this.socket.onError(ev => console.log("ERROR", ev));
+          this.socket.onClose(e => console.log("CLOSE", e));
+
+          this.initCommentChannel();
+        }
+      }
+    );
+  }
+
+  private _socket(){
+    return new Socket(
+      `${environment.socketEndpoint}/socket`,
+      {
+        params: {
+          token: localStorage.getItem('access_token')
+        },
+        transport: WebSocket,
+        logger: ((kind, msg, data) => { console.log(`${kind}: ${msg}`, data) })
+      },
+    );
+  }
+
+  private initCommentChannel() {
+    var chan = this.socket.channel("comments:lobby", {});
+    chan.join().receive("ignore", () => console.log("auth error"))
+      .receive("ok", () => console.log("join ok"));
+    chan.onError(e => console.log("something went wrong", e));
+    chan.onClose(e => console.log("channel closed", e));
+
+    // chan.on("user:entered", msg => {
+    //   var username = msg.user || "anonymous";
+    //   console.log("User Entered: ", username);
+    // })
+
+    chan.on("new:msg", msg => {
+      if (this.user.id != msg.user_id) {
+        this.store.dispatch(new LoadCommentsSuccessAction([msg]));
+      }
+    })
+
+    chan.on("delete:msg", msg => {
+      if (this.user.id != msg.user_id) {
+        this.store.dispatch(new DeleteCommentSuccessAction(msg.id));
+      }
+    })
+  }
+
+}

src/app/services/pin-data.ts

@@ -10,6 +10,7 @@ import { ApiUrl } from '../app.api-url';
 import { HttpService } from './http';
 import { AppState, getPinscountWithSeatchQuery } from '../reducers/index';
 import { Store } from '@ngrx/store';
+import { PhoenixChannelService } from './phoenix-channel.service';
 
 @Injectable()
 export class PinDataService {
@@ -20,7 +21,8 @@ export class PinDataService {
   constructor(
     public db: AngularFireDatabase,
     public http: HttpService,
-    public store: Store<AppState>
+    public store: Store<AppState>,
+    private phoenixChannelService: PhoenixChannelService
   ) {
     this.store.select(getPinscountWithSeatchQuery()).subscribe(
       params => {

src/environments/environment.prod.ts

@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
   apiEndpoint: 'https://pinwork-api.herokuapp.com/api/',
+  socketEndpoint: 'ws://pinwork-api.herokuapp.com',
   basic_auth_token: btoa('api:password')
 };

src/environments/environment.ts

@@ -7,5 +7,6 @@ export const environment = {
   production: false,
   // apiEndpoint: 'https://pinwork-api.herokuapp.com/api/',
   apiEndpoint: 'http://localhost:4000/api/',
+  socketEndpoint: 'ws://localhost:4000',
   basic_auth_token: btoa('api:password')
 };

src/typings.d.ts

@@ -1,2 +1,13 @@
 // Typings reference file, you can add your own global typings here
 // https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+declare module 'phoenix_js' {
+  class Socket {
+    constructor(endPoint: any, opts: any) 
+    connect(): void;
+    disconnect(callback: any, code: any, reason: any): void;
+    onOpen(callback: any): void;
+    onError(callback: any): void;
+    onClose(callback: any): void;
+    channel(topic: any, chanParams?: {}): any;
+  }
+}