added some realtime database goodness

markgoho · Feb 8, 2017 · 8d2ed7a · 8d2ed7a
1 parent 9be919f
commit 8d2ed7a
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 60 deletions.
diff --git a/firebase.rules.json b/firebase.rules.json
@@ -1,15 +1,19 @@
 {
   "rules": {
+    "admin": {
+      ".read": true,
+      ".write": "auth != null && auth.uid === 'sswKqoKoUga7528m8HVc2ahPyDw2'"
+    },
     "avatars": {
       ".read": true,
-      ".write": "auth != null && auth.uid === 'inpZRUkiEIXaCFnsDOVGLpUUtHl2'"
+      ".write": true
     },
     "users": {
       "$uid": {
         ".read": "auth !== null && auth.uid === $uid",
         ".write": "auth !== null && auth.uid === $uid",
         ".indexOn": [
-          "datetime"
+          "createdAt"
         ]
       }
     }

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -40,6 +40,8 @@ export class AppComponent {
         iconRegistry.addSvgIcon(
             'avatar_anonymous',
             sanitizer.bypassSecurityTrustResourceUrl('assets/icons/avatar_anonymous.svg'));
+
+        console.log('current userInfo: ', auth.userInfo);
     }
 
     signOut(message: string): void {

diff --git a/src/auth/auth.service.ts b/src/auth/auth.service.ts
@@ -4,50 +4,67 @@ import UserInfo = firebase.UserInfo;
 
 @Injectable()
 export class AuthService {
-    private authState: FirebaseAuthState = null;
+    private _authState: FirebaseAuthState;
+    private _userInfo: UserInfo;
 
     constructor(public auth$: AngularFireAuth) {
+        this.authState = null;
+        this.userInfo = null;
+
+        let that = this;
         auth$.subscribe((state: FirebaseAuthState) => {
             this.authState = state;
+
+            if (this.authState !== null) {
+                switch (state.provider) {
+                    case AuthProviders.Google:
+                        that.userInfo = state.google;
+                        break;
+
+                    case AuthProviders.Facebook:
+                        that.userInfo = state.facebook;
+                        break;
+
+                    case AuthProviders.Twitter:
+                        that.userInfo = state.twitter;
+                        break;
+
+                    case AuthProviders.Github:
+                        that.userInfo = state.github;
+                        break;
+                }
+            }
         });
     }
 
-    get authenticated(): boolean {
-        return this.authState !== null;
-    }
 
-    get id(): string {
-        return this.authenticated ? this.authState.uid : '';
+    get authState(): FirebaseAuthState {
+        return this._authState;
     }
 
-    get state(): FirebaseAuthState|null {
-        return this.authenticated ? this.authState : null;
+    set authState(value: FirebaseAuthState) {
+        this._authState = value;
     }
 
     get userInfo(): UserInfo {
-        let info:UserInfo;
+        return this._userInfo;
+    }
 
-        if (this.authenticated) {
-            switch (this.state.provider) {
-                case AuthProviders.Google:
-                    info = this.state.google;
-                    break;
+    set userInfo(value: UserInfo) {
+        this._userInfo = value;
+    }
 
-                case AuthProviders.Facebook:
-                    info = this.state.facebook;
-                    break;
 
-                case AuthProviders.Twitter:
-                    info = this.state.twitter;
-                    break;
+    get authenticated(): boolean {
+        return this._authState !== null;
+    }
 
-                case AuthProviders.Github:
-                    info = this.state.github;
-                    break;
-            }
-        }
+    get id(): string {
+        return this.authenticated ? this.authState.uid : '';
+    }
 
-        return info;
+    get state(): FirebaseAuthState|null {
+        return this.authenticated ? this.authState : null;
     }
 
     signIn(provider: number): firebase.Promise<FirebaseAuthState> {

diff --git a/src/common/avatar.model.ts b/src/common/avatar.model.ts
@@ -2,7 +2,7 @@ export interface IAvatar {
     $key?: string;
 
     createdAt: number;
-    title: string;
+    author: string;
     image?: string;
 
     gender: string;
@@ -19,7 +19,7 @@ export interface IAvatar {
 
 export class Avatar implements IAvatar {
     private _createdAt: number;
-    private _title: string;
+    private _author: string;
     private _image: string;
 
     private _gender: string;
@@ -45,11 +45,11 @@ export class Avatar implements IAvatar {
         this._createdAt = value;
     }
 
-    get title(): string {
-        return this._title;
+    get author(): string {
+        return this._author;
     }
-    set title(value: string) {
-        this._title = value;
+    set author(value: string) {
+        this._author = value;
     }
 
     get image(): string {

diff --git a/src/common/avatar.service.ts b/src/common/avatar.service.ts
@@ -9,42 +9,42 @@ import {IAvatar, Avatar} from './avatar.model';
 
 @Injectable()
 export class AvatarService {
-    private _allAvatars$: FirebaseListObservable<IAvatar[]>;
+    private _publicAvatars$: FirebaseListObservable<IAvatar[]>;
     private _userAvatars$: FirebaseListObservable<IAvatar[]>;
 
     constructor(af: AngularFire, auth: AuthService) {
-        const allAvatarsPath = `/avatars`;
-        this._allAvatars$ = af.database.list(allAvatarsPath);
+        const publicAvatarsPath = `/avatars`;
+        this._publicAvatars$ = af.database.list(publicAvatarsPath);
 
         const userAvatarsPath = `/users/${auth.id}/avatars`;
         this._userAvatars$ = af.database.list(userAvatarsPath);
     }
 
 
-    get allAvatars(): FirebaseListObservable<IAvatar[]> {
-        return this._allAvatars$;
+    get publicAvatars(): FirebaseListObservable<IAvatar[]> {
+        return this._publicAvatars$;
     }
 
     get userAvatars(): FirebaseListObservable<IAvatar[]> {
         return this._userAvatars$;
     }
 
     /** PUBLIC EVENTS **/
-    createPublicAvatar(title: string, datetime: string, image: string): firebase.Promise<any> {
-        return this._allAvatars$.push(new Avatar(title, datetime, image));
+    createPublicAvatar(avatar:Avatar): firebase.Promise<any> {
+        return this._publicAvatars$.push(avatar);
     }
 
     removePublicAvatar(avatar: IAvatar): firebase.Promise<any> {
-        return this._allAvatars$.remove(avatar.$key);
+        return this._publicAvatars$.remove(avatar.$key);
     }
 
     updatePublicAvatar(avatar: IAvatar, changes: any): firebase.Promise<any> {
-        return this._allAvatars$.update(avatar.$key, changes);
+        return this._publicAvatars$.update(avatar.$key, changes);
     }
 
     /** USER-CENTRIC EVENTS **/
-    createUserAvatar(title: string, datetime: string, image: string): firebase.Promise<any> {
-        return this._userAvatars$.push(new Avatar(title, datetime, image));
+    createUserAvatar(avatar:Avatar): firebase.Promise<any> {
+        return this._userAvatars$.push(avatar);
     }
 
     removeUserAvatar(avatar: IAvatar): firebase.Promise<any> {

diff --git a/src/create/create.component.html b/src/create/create.component.html
@@ -71,7 +71,7 @@
       <a md-button id="save" attr.aria-label="Save" download="avatar.png" [href]="imageData">
         <md-icon>save</md-icon> Save
       </a>
-      <a md-button id="upload" attr.aria-label="Upload">
+      <a md-button id="upload" attr.aria-label="Upload" (click)="uploadAvatar($event)">
         <md-icon>cloud_upload</md-icon> Upload
       </a>
       <button md-button id="repeat" attr.aria-label="Shuffle" (click)="renderRandom()">

diff --git a/src/create/create.component.ts b/src/create/create.component.ts
@@ -6,6 +6,7 @@ import * as html2canvas from "html2canvas";
 import * as _ from "lodash";
 import 'rxjs/add/observable/throw';
 import {Avatar} from "../common/avatar.model";
+import {AvatarService} from "../common/avatar.service";
 
 export interface IColor {
     title: string,
@@ -289,7 +290,7 @@ export class CreateComponent implements OnInit {
         }
     ];
 
-    constructor(iconRegistry: MdIconRegistry, private sanitizer: DomSanitizer) {
+    constructor(iconRegistry: MdIconRegistry, private sanitizer: DomSanitizer, private avatarService: AvatarService) {
         this.currentAvatar = new Avatar();
 
         this.setsKeys = _.keys(this.SETS);
@@ -344,25 +345,29 @@ export class CreateComponent implements OnInit {
             setTimeout(function () {
                 html2canvas(document.getElementById('avatar'))
                     .then(function (canvas) {
-                        that.imageData = canvas.toDataURL('image/png');
+                        (document.getElementById('save') as HTMLAnchorElement).href = that.imageData = canvas.toDataURL('image/png');
 
                         //console.log('new image data', that.imageData);
-
-                        (document.getElementById('save') as HTMLAnchorElement).href = canvas.toDataURL('image/png');
                     });
             }, 2000);
         }
     }
 
-    addAssetRandom(key, list) {
+    uploadAvatar(): void {
+        // For demo, upload all to public, user-specific, and Firebase storage
+        this.avatarService.createPublicAvatar(this.currentAvatar);
+        this.avatarService.createUserAvatar(this.currentAvatar);
+    }
+
+    addAssetRandom(key, list): void {
         this.currentAvatar[key] = list[this.randIndex(list)];
     }
 
-    randIndex(list) {
+    randIndex(list): number {
         return Math.floor(Math.random() * list.length);
     }
 
-    autoShuffle() {
+    autoShuffle(): void {
         if (this.intervalPromise) {
             clearInterval(this.intervalPromise);
             this.intervalPromise = null;

diff --git a/src/gallery/gallery.component.html b/src/gallery/gallery.component.html
@@ -1,10 +1,10 @@
 <div class="gallery">
   <h1>Gallery of Avatars</h1>
-  <div class="avatars-grid" *ngIf="allAvatars.length > 0">
-    <h2>Number of avatars: {{ allAvatars.length }}</h2>
-    <div *ngFor="let avatar of allAvatars | async">{{ avatar.title }}</div>
+  <div class="avatars-grid" *ngIf="publicAvatars.length > 0">
+    <h2>Number of avatars: {{ publicAvatars.length }}</h2>
+    <div *ngFor="let avatar of publicAvatars | async">{{ avatar.title }}</div>
   </div>
-  <div class="avatars-empty" *ngIf="!allAvatars.length" fxLayout="column" fxLayoutAlign="center center">
+  <div class="avatars-empty" *ngIf="!publicAvatars.length" fxLayout="column" fxLayoutAlign="center center">
     <img class="placeholder" src="/assets/images/gallery-placeholder.gif" />
   </div>
 </div>

diff --git a/src/gallery/gallery.component.ts b/src/gallery/gallery.component.ts
@@ -11,14 +11,14 @@ import {AvatarService} from '../common/avatar.service';
     encapsulation: ViewEncapsulation.None
 })
 export class GalleryComponent implements OnInit {
-    allAvatars: FirebaseListObservable<IAvatar[]>;
+    publicAvatars: FirebaseListObservable<IAvatar[]>;
     userAvatars: FirebaseListObservable<IAvatar[]>;
 
     constructor(avatarService: AvatarService) {
-        this.allAvatars = avatarService.allAvatars;
+        this.publicAvatars = avatarService.publicAvatars;
         this.userAvatars = avatarService.userAvatars;
 
-        console.log('all avatars', this.allAvatars);
+        console.log('all avatars', this.publicAvatars);
     }
 
     ngOnInit() {}