merge: more user settings

Author: peterpeterparker

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -3,12 +3,14 @@ import {Component, Event, EventEmitter, Prop, State, h} from '@stencil/core';
 import {Subscription} from 'rxjs';
 
 import {AuthUser} from '../../../models/auth/auth.user';
+import {User} from '../../../models/data/user';
 
 import {Utils} from '../../../utils/core/utils';
 import {IonControllerUtils} from '../../../utils/core/ion-controller-utils';
 
 import {AuthService} from '../../../services/auth/auth.service';
 import {NavDirection, NavService} from '../../../services/core/nav/nav.service';
+import {UserService} from '../../../services/data/user/user.service';
 
 @Component({
     tag: 'app-navigation-actions',
@@ -26,26 +28,41 @@ export class AppNavigationActions {
 
     private navService: NavService;
 
+    private userService: UserService;
+    private userSubscription: Subscription;
+
     @State()
     private authUser: AuthUser;
 
+    @State()
+    private photoUrl: string;
+
     @Event() private actionPublish: EventEmitter<void>;
 
     constructor() {
         this.authService = AuthService.getInstance();
         this.navService = NavService.getInstance();
+        this.userService = UserService.getInstance();
     }
 
     componentWillLoad() {
         this.subscription = this.authService.watch().subscribe((authUser: AuthUser) => {
             this.authUser = authUser;
         });
+
+        this.userSubscription = this.userService.watch().subscribe((user: User) => {
+            this.photoUrl = user && user.data ? user.data.photo_url : undefined;
+        });
     }
 
     componentDidUnload() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
+
+        if (this.userSubscription) {
+            this.userSubscription.unsubscribe();
+        }
     }
 
     private async openMenu($event: UIEvent) {
@@ -85,9 +102,9 @@ export class AppNavigationActions {
     }
 
     private renderLoggedIn() {
-        if (Utils.isLoggedIn(this.authUser)) {
+        if (Utils.isLoggedIn(this.authUser) && this.photoUrl) {
             return <a class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)}>
-                <app-avatar src={this.authUser.photo_url}></app-avatar>
+                <app-avatar src={this.photoUrl}></app-avatar>
             </a>;
         } else {
             return undefined;

studio/src/app/components/core/app-user-info/app-user-info.tsx

@@ -3,10 +3,12 @@ import {Component, Prop, State, h} from '@stencil/core';
 import {Subscription} from 'rxjs';
 
 import {AuthUser} from '../../../models/auth/auth.user';
+import {User} from '../../../models/data/user';
 
 import {AuthService} from '../../../services/auth/auth.service';
 import {ApiUserService} from '../../../services/api/user/api.user.service';
 import {ApiUser} from '../../../models/api/api.user';
+import {UserService} from '../../../services/data/user/user.service';
 
 @Component({
     tag: 'app-user-info',
@@ -23,15 +25,25 @@ export class AppUserInfo {
     private apiUserService: ApiUserService;
     private apiUserSubscription: Subscription;
 
+    private userService: UserService;
+    private userSubscription: Subscription;
+
     @State()
     private authUser: AuthUser;
 
     @State()
     private apiUser: ApiUser;
 
+    @State()
+    private name: string;
+
+    @State()
+    private photoUrl: string;
+
     constructor() {
         this.authService = AuthService.getInstance();
         this.apiUserService = ApiUserService.getInstance();
+        this.userService = UserService.getInstance();
     }
 
     componentWillLoad() {
@@ -42,6 +54,11 @@ export class AppUserInfo {
         this.apiUserSubscription = this.apiUserService.watch().subscribe((user: ApiUser) => {
             this.apiUser = user;
         });
+
+        this.userSubscription = this.userService.watch().subscribe((user: User) => {
+            this.name = user && user.data ? user.data.name : undefined;
+            this.photoUrl = user && user.data ? user.data.photo_url : undefined;
+        });
     }
 
     componentDidUnload() {
@@ -52,15 +69,19 @@ export class AppUserInfo {
         if (this.apiUserSubscription) {
             this.apiUserSubscription.unsubscribe();
         }
+
+        if (this.userSubscription) {
+            this.userSubscription.unsubscribe();
+        }
     }
 
     render() {
         if (this.authUser) {
             return <ion-grid>
                 <ion-row class="ion-align-items-center">
-                    <ion-col size={'' + this.avatarColSize}><app-avatar src={this.authUser.photo_url}></app-avatar></ion-col>
+                    <ion-col size={'' + this.avatarColSize}><app-avatar src={this.photoUrl}></app-avatar></ion-col>
                     <ion-col size={'' + (12 - this.avatarColSize)} class="user-info">
-                        <ion-label>{this.authUser.name}</ion-label>
+                        <ion-label>{this.name}</ion-label>
                         <ion-label>{!this.authUser.anonymous && this.apiUser && this.apiUser.username ? '@' + this.apiUser.username : undefined}</ion-label>
                     </ion-col>
                 </ion-row>

studio/src/app/modals/editor/app-custom-images/app-custom-images.tsx

@@ -173,7 +173,7 @@ export class AppCustomImages {
             if (filePicker.files && filePicker.files.length > 0) {
                 this.uploading = true;
 
-                const storageFile: StorageFile = await this.storageService.uploadImage(filePicker.files[0]);
+                const storageFile: StorageFile = await this.storageService.uploadImage(filePicker.files[0], 'images');
 
                 if (storageFile) {
                     await this.selectAndClose(storageFile);

studio/src/app/models/data/user.tsx

@@ -2,6 +2,8 @@ export interface UserData {
     anonymous: boolean;
 
     name?: string;
+    email?: string;
+    newsletter?: boolean;
     photo_url?: string;
 
     created_at: firebase.firestore.Timestamp;

studio/src/app/pages/core/app-settings/app-settings.scss

@@ -5,5 +5,32 @@ app-settings {
     ion-router-link {
       cursor: pointer;
     }
+
+    div.newsletter, div.avatar {
+      padding: 8px;
+
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    div.newsletter {
+      ion-checkbox {
+        margin-left: 8px;
+      }
+    }
+
+    div.avatar {
+      --deckgo-avatar-size: 3rem;
+
+      input {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+
+    p.info {
+      font-size: var(--font-size-small);
+    }
   }
 }