feat(#773): use stencil/store for api user

Author: peterpeterparker

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

@@ -1,14 +1,8 @@
-import {Component, Prop, State, h} from '@stencil/core';
-
-import {Subscription} from 'rxjs';
+import {Component, Prop, h} from '@stencil/core';
 
 import authStore from '../../../stores/auth.store';
 import userStore from '../../../stores/user.store';
-
-import {ApiUser} from '../../../models/api/api.user';
-
-import {ApiUserService} from '../../../services/api/user/api.user.service';
-import {ApiUserFactoryService} from '../../../services/api/user/api.user.factory.service';
+import apiUserStore from '../../../stores/api.user.store';
 
 @Component({
   tag: 'app-user-info',
@@ -18,28 +12,6 @@ export class AppUserInfo {
   @Prop()
   avatarColSize: number = 4;
 
-  private apiUserService: ApiUserService;
-  private apiUserSubscription: Subscription;
-
-  @State()
-  private apiUser: ApiUser;
-
-  constructor() {
-    this.apiUserService = ApiUserFactoryService.getInstance();
-  }
-
-  componentWillLoad() {
-    this.apiUserSubscription = this.apiUserService.watch().subscribe((user: ApiUser) => {
-      this.apiUser = user;
-    });
-  }
-
-  componentDidUnload() {
-    if (this.apiUserSubscription) {
-      this.apiUserSubscription.unsubscribe();
-    }
-  }
-
   render() {
     if (authStore.state.authUser) {
       return (
@@ -50,7 +22,11 @@ export class AppUserInfo {
             </ion-col>
             <ion-col size={'' + (12 - this.avatarColSize)} class="user-info">
               <ion-label>{userStore.state.name}</ion-label>
-              <ion-label>{!authStore.state.authUser.anonymous && this.apiUser && this.apiUser.username ? '@' + this.apiUser.username : undefined}</ion-label>
+              <ion-label>
+                {!authStore.state.authUser.anonymous && apiUserStore.state.apiUser && apiUserStore.state.apiUser.username
+                  ? '@' + apiUserStore.state.apiUser.username
+                  : undefined}
+              </ion-label>
             </ion-col>
           </ion-row>
         </ion-grid>

studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx

@@ -1,23 +1,19 @@
 import {Component, Event, EventEmitter, h, State} from '@stencil/core';
 
-import {filter, take} from 'rxjs/operators';
-
 import {debounce} from '@deckdeckgo/utils';
 
 import deckStore from '../../../../stores/deck.store';
 import errorStore from '../../../../stores/error.store';
 import feedStore from '../../../../stores/feed.store';
 import publishStore from '../../../../stores/publish.store';
+import apiUserStore from '../../../../stores/api.user.store';
 
 import {Deck} from '../../../../models/data/deck';
 
 import {Resources} from '../../../../utils/core/resources';
 
 import {DeckService} from '../../../../services/data/deck/deck.service';
-import {ApiUser} from '../../../../models/api/api.user';
-import {ApiUserService} from '../../../../services/api/user/api.user.service';
 import {PublishService} from '../../../../services/editor/publish/publish.service';
-import {ApiUserFactoryService} from '../../../../services/api/user/api.user.factory.service';
 
 interface CustomInputEvent extends KeyboardEvent {
   data: string | null;
@@ -55,16 +51,11 @@ export class AppPublishEdit {
 
   @Event() private published: EventEmitter<string>;
 
-  private apiUser: ApiUser;
-  private apiUserService: ApiUserService;
-
   private publishService: PublishService;
 
   constructor() {
     this.deckService = DeckService.getInstance();
 
-    this.apiUserService = ApiUserFactoryService.getInstance();
-
     this.publishService = PublishService.getInstance();
 
     this.debounceUpdateDeck = debounce(async () => {
@@ -74,16 +65,6 @@ export class AppPublishEdit {
 
   async componentWillLoad() {
     await this.init();
-
-    this.apiUserService
-      .watch()
-      .pipe(
-        filter((apiUser: ApiUser) => apiUser !== null && apiUser !== undefined && !apiUser.anonymous),
-        take(1)
-      )
-      .subscribe(async (apiUser: ApiUser) => {
-        this.apiUser = apiUser;
-      });
   }
 
   componentDidLoad() {
@@ -409,7 +390,7 @@ export class AppPublishEdit {
   private renderPublish() {
     if (!this.publishing) {
       return (
-        <ion-button type="submit" disabled={!this.valid || this.disablePublish || !this.apiUser} color="tertiary" shape="round">
+        <ion-button type="submit" disabled={!this.valid || this.disablePublish || !apiUserStore.state.apiUser} color="tertiary" shape="round">
           <ion-label>Publish now</ion-label>
         </ion-button>
       );

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

@@ -1,8 +1,6 @@
 import {Component, Listen, State, h, Element} from '@stencil/core';
 import {loadingController, modalController, OverlayEventDetail} from '@ionic/core';
 
-import {filter, take} from 'rxjs/operators';
-
 import firebase from '@firebase/app';
 import '@firebase/auth';
 
@@ -11,6 +9,7 @@ import errorStore from '../../../stores/error.store';
 import navStore, {NavDirection} from '../../../stores/nav.store';
 import authStore from '../../../stores/auth.store';
 import userStore from '../../../stores/user.store';
+import apiUserStore from '../../../stores/api.user.store';
 
 import {ApiUser} from '../../../models/api/api.user';
 import {User} from '../../../models/data/user';
@@ -79,7 +78,8 @@ export class AppHome {
   @State()
   private custom: string = undefined;
 
-  private destroyListener;
+  private destroyUserListener;
+  private destroyApiUserListener;
 
   constructor() {
     this.apiUserService = ApiUserFactoryService.getInstance();
@@ -89,38 +89,53 @@ export class AppHome {
     this.themeService = ThemeService.getInstance();
   }
 
-  async componentWillLoad() {
-    this.apiUserService
-      .watch()
-      .pipe(
-        filter((apiUser: ApiUser) => apiUser !== null && apiUser !== undefined && !apiUser.anonymous),
-        take(1)
-      )
-      .subscribe(async (apiUser: ApiUser) => {
-        this.apiUser = apiUser;
-
-        this.apiUsername = this.apiUser.username;
-      });
+  async componentDidLoad() {
+    const promises: Promise<void>[] = [this.initUser(), this.initApiUser()];
+    await Promise.all(promises);
   }
 
-  async componentDidLoad() {
+  private async initUser() {
     if (userStore.state.user) {
       await this.initSocial();
     } else {
-      this.destroyListener = userStore.onChange('user', async () => {
+      this.destroyUserListener = userStore.onChange('user', async () => {
         await this.initSocial();
       });
     }
   }
 
+  private async initApiUser() {
+    if (apiUserStore.state.apiUser) {
+      await this.initUsername();
+    } else {
+      this.destroyApiUserListener = apiUserStore.onChange('apiUser', async () => {
+        await this.initUsername();
+      });
+    }
+  }
+
   componentDidUnload() {
-    if (this.destroyListener) {
-      this.destroyListener();
+    if (this.destroyUserListener) {
+      this.destroyUserListener();
+    }
+
+    if (this.destroyApiUserListener) {
+      this.destroyApiUserListener();
     }
   }
 
+  private initUsername() {
+    if (!apiUserStore.state.apiUser || apiUserStore.state.apiUser === undefined || apiUserStore.state.apiUser.anonymous) {
+      return;
+    }
+
+    this.apiUser = apiUserStore.state.apiUser;
+
+    this.apiUsername = this.apiUser.username;
+  }
+
   private async initSocial() {
-    if (!userStore.state.user || !userStore.state.user.data || userStore.state.user.data.anonymous) {
+    if (!userStore.state.user || userStore.state.user === undefined || !userStore.state.user.data || userStore.state.user.data.anonymous) {
       return;
     }
 

studio/src/app/services/api/user/api.user.mock.service.tsx

@@ -1,3 +1,5 @@
+import apiUserStore from '../../../stores/api.user.store';
+
 import {ApiUser, ApiUserInfo} from '../../../models/api/api.user';
 
 import {ApiUserService} from './api.user.service';
@@ -12,7 +14,7 @@ export class ApiUserMockService extends ApiUserService {
     return new Promise<ApiUser>(async (resolve) => {
       const testUser: ApiUser = await this.createTestUserInfo(apiUserInfo);
 
-      this.apiUserSubject.next(testUser);
+      apiUserStore.state.apiUser = {...testUser};
 
       resolve(testUser);
     });
@@ -38,7 +40,7 @@ export class ApiUserMockService extends ApiUserService {
         id: apiUserInfo.firebase_uid,
         anonymous: false,
         firebase_uid: apiUserInfo.firebase_uid,
-        username: 'Peter Parker'
+        username: 'Peter Parker',
       };
 
       resolve(testUser);

studio/src/app/services/api/user/api.user.prod.service.tsx

@@ -1,3 +1,5 @@
+import apiUserStore from '../../../stores/api.user.store';
+
 import {ApiUser, ApiUserInfo} from '../../../models/api/api.user';
 
 import {EnvironmentConfigService} from '../../core/environment/environment-config.service';
@@ -17,9 +19,9 @@ export class ApiUserProdService extends ApiUserService {
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
+            Authorization: `Bearer ${token}`,
           },
-          body: JSON.stringify(apiUserInfo)
+          body: JSON.stringify(apiUserInfo),
         });
 
         if (!rawResponse || (!rawResponse.ok && rawResponse.status !== 409)) {
@@ -29,7 +31,7 @@ export class ApiUserProdService extends ApiUserService {
 
         const persistedUser: ApiUser = await rawResponse.json();
 
-        this.apiUserSubject.next(persistedUser);
+        apiUserStore.state.apiUser = {...persistedUser};
 
         resolve(persistedUser);
       } catch (err) {
@@ -49,8 +51,8 @@ export class ApiUserProdService extends ApiUserService {
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`
-          }
+            Authorization: `Bearer ${token}`,
+          },
         });
 
         if (!rawResponse || !rawResponse.ok) {
@@ -75,8 +77,8 @@ export class ApiUserProdService extends ApiUserService {
           method: 'GET',
           headers: {
             Accept: 'application/json',
-            'Content-Type': 'application/json'
-          }
+            'Content-Type': 'application/json',
+          },
         });
 
         if (!rawResponse || !rawResponse.ok) {
@@ -87,7 +89,7 @@ export class ApiUserProdService extends ApiUserService {
 
         const persistedUser: ApiUser = await rawResponse.json();
 
-        this.apiUserSubject.next(persistedUser);
+        apiUserStore.state.apiUser = {...persistedUser};
 
         resolve(persistedUser);
       } catch (err) {

studio/src/app/services/api/user/api.user.service.tsx

@@ -1,11 +1,9 @@
-import {Observable, ReplaySubject} from 'rxjs';
+import apiUserStore from '../../../stores/api.user.store';
 
 import {ApiUser, ApiUserInfo} from '../../../models/api/api.user';
 import {AuthUser} from '../../../models/auth/auth.user';
 
 export abstract class ApiUserService {
-  protected apiUserSubject: ReplaySubject<ApiUser> = new ReplaySubject(1);
-
   abstract query(apiUserInfo: ApiUserInfo | ApiUser, token: string, context: string, method: string): Promise<ApiUser>;
 
   abstract delete(userId: string, token: string): Promise<void>;
@@ -41,12 +39,8 @@ export abstract class ApiUserService {
     });
   }
 
-  signOut(): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      this.apiUserSubject.next(null);
-
-      resolve();
-    });
+  async signOut() {
+    apiUserStore.reset();
   }
 
   post(apiUser: ApiUserInfo, token: string): Promise<ApiUser> {
@@ -57,10 +51,6 @@ export abstract class ApiUserService {
     return this.query(apiUser, token, `/users/${userId}`, 'PUT');
   }
 
-  watch(): Observable<ApiUser> {
-    return this.apiUserSubject.asObservable();
-  }
-
   private createUserInfo(authUser: AuthUser): Promise<ApiUserInfo> {
     return new Promise<ApiUserInfo>((resolve) => {
       if (!authUser) {
@@ -71,7 +61,7 @@ export abstract class ApiUserService {
       const apiUserInfo: ApiUserInfo = {
         anonymous: authUser.anonymous,
         firebase_uid: authUser.uid,
-        email: authUser.anonymous ? null : authUser.email
+        email: authUser.anonymous ? null : authUser.email,
       };
 
       resolve(apiUserInfo);

studio/src/app/stores/api.user.store.ts

@@ -0,0 +1,13 @@
+import {createStore} from '@stencil/store';
+
+import {ApiUser} from '../models/api/api.user';
+
+interface ApitUserStore {
+  apiUser: ApiUser | undefined;
+}
+
+const {state, onChange, reset} = createStore({
+  apiUser: undefined,
+} as ApitUserStore);
+
+export default {state, onChange, reset};