feat(features/home): update profile name

src/app/app-routing.module.ts

@@ -24,14 +24,6 @@ const routes: Routes = [
       import('./features/home/home.module').then(m => m.HomePageModule),
     canActivate: [AuthGuard],
   },
-  {
-    path: 'profile',
-    loadChildren: () =>
-      import('./features/profile/profile.module').then(
-        m => m.ProfilePageModule
-      ),
-    canActivate: [AuthGuard],
-  },
   {
     path: 'settings',
     loadChildren: () =>

src/app/features/contacts/contacts.page.html

@@ -18,7 +18,11 @@
           "
         />
       </ion-avatar>
-      <ion-label>{{ contact.contact_name || contact.contact_email }}</ion-label>
+      <ion-label>{{
+        contact.contact_profile_display_name ||
+          contact.contact_name ||
+          contact.contact_email
+      }}</ion-label>
       <ion-button
         (click)="delete(contact)"
         color="dark"

src/app/features/home/capture-tab/capture-tab.component.html

@@ -39,7 +39,7 @@
     <app-avatar mat-card-avatar [editable]="false"></app-avatar>
     <mat-card-header>
       <mat-card-title>
-        {{ username$ | ngrxPush }}
+        {{ profileName$ | ngrxPush }}
         <ion-icon
           src="assets/images/icons/edit.svg"
           *ngIf="networkConnected$ | async"

src/app/features/home/capture-tab/capture-tab.component.ts

@@ -1,14 +1,9 @@
 import { formatDate, KeyValue } from '@angular/common';
-import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Browser } from '@capacitor/browser';
-import {
-  ActionSheetButton,
-  ActionSheetController,
-  AlertController,
-} from '@ionic/angular';
+import { ActionSheetButton, ActionSheetController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { groupBy } from 'lodash-es';
@@ -18,7 +13,6 @@ import {
   concatMap,
   concatMapTo,
   map,
-  shareReplay,
   startWith,
   tap,
 } from 'rxjs/operators';
@@ -30,7 +24,6 @@ import {
 import { ConfirmAlert } from '../../../shared/confirm-alert/confirm-alert.service';
 import { Database } from '../../../shared/database/database.service';
 import { DiaBackendAssetRepository } from '../../../shared/dia-backend/asset/dia-backend-asset-repository.service';
-import { DiaBackendAsseRefreshingService } from '../../../shared/dia-backend/asset/refreshing/dia-backend-asset-refreshing.service';
 import { DiaBackendAssetUploadingService } from '../../../shared/dia-backend/asset/uploading/dia-backend-asset-uploading.service';
 import { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service';
 import { DiaBackendTransactionRepository } from '../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
@@ -75,12 +68,15 @@ export class CaptureTabComponent implements OnInit {
 
   readonly email$ = this.diaBackendAuthService.email$;
 
-  readonly profileDescription$ = this.diaBackendAuthService.profileDescription$;
+  readonly profileName$ = this.diaBackendAuthService.profileName$;
 
-  readonly profileBackground$ =
-    this.diaBackendAuthService.profileBackground$.pipe(
-      shareReplay({ bufferSize: 1, refCount: true })
-    );
+  readonly profileDescription$ = this.diaBackendAuthService.profile$.pipe(
+    map(profile => profile.description)
+  );
+
+  readonly profileBackground$ = this.diaBackendAuthService.profile$.pipe(
+    map(profile => profile.profile_background_thumbnail ?? '')
+  );
 
   private readonly proofs$ = this.proofRepository.all$;
 
@@ -148,8 +144,6 @@ export class CaptureTabComponent implements OnInit {
     private readonly diaBackendAuthService: DiaBackendAuthService,
     private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
     private readonly diaBackendTransactionRepository: DiaBackendTransactionRepository,
-    private readonly diaBackendAssetRefreshingService: DiaBackendAsseRefreshingService,
-    private readonly alertController: AlertController,
     private readonly networkService: NetworkService,
     private readonly translocoService: TranslocoService,
     private readonly errorService: ErrorService,
@@ -160,6 +154,10 @@ export class CaptureTabComponent implements OnInit {
     this.uploadService.pendingTasks$
       .pipe(untilDestroyed(this))
       .subscribe(value => (this.pendingUploadTasks = value));
+    this.diaBackendAuthService
+      .readProfile$()
+      .pipe(untilDestroyed(this))
+      .subscribe();
   }
 
   static async openFaq() {
@@ -255,52 +253,6 @@ export class CaptureTabComponent implements OnInit {
       .subscribe();
   }
 
-  async editUsername() {
-    const alert = await this.alertController.create({
-      header: this.translocoService.translate('editUsername'),
-      inputs: [
-        {
-          name: 'username',
-          type: 'text',
-          value: await this.diaBackendAuthService.getUsername(),
-        },
-      ],
-      buttons: [
-        {
-          text: this.translocoService.translate('cancel'),
-          role: 'cancel',
-        },
-        {
-          text: this.translocoService.translate('ok'),
-          handler: value => this.updateUsername(value.username),
-        },
-      ],
-    });
-    return alert.present();
-  }
-
-  private updateUsername(username: string) {
-    const action$ = this.diaBackendAuthService
-      .updateUser$({ username })
-      .pipe(catchError((err: unknown) => this.handleUpdateUsernameError$(err)));
-    return this.blockingActionService
-      .run$(action$)
-      .pipe(untilDestroyed(this))
-      .subscribe();
-  }
-
-  private handleUpdateUsernameError$(err: unknown) {
-    if (err instanceof HttpErrorResponse) {
-      const errorType = err.error.error?.type;
-      if (errorType === 'duplicate_username') {
-        return this.errorService.toastError$(
-          this.translocoService.translate(`error.diaBackend.${errorType}`)
-        );
-      }
-    }
-    return this.errorService.toastError$(err);
-  }
-
   // eslint-disable-next-line class-methods-use-this
   keyDescendingOrder(
     a: KeyValue<string, Proof[]>,

src/app/features/home/details/information/session/information-session.service.ts

@@ -89,8 +89,8 @@ export class DetailedCapture {
 
   readonly creator$ = defer(() => {
     if (this.proofOrDiaBackendAsset instanceof Proof)
-      return this.diaBackendAuthService.username$;
-    return of(this.proofOrDiaBackendAsset.creator_name);
+      return this.diaBackendAuthService.profileName$;
+    return of(this.proofOrDiaBackendAsset.creator_profile_display_name ?? '');
   });
 
   readonly geolocation$ = defer(async () => {

src/app/features/home/edit-profile/edit-profile.page.ts

@@ -1,19 +1,11 @@
-import { HttpErrorResponse } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { FormControl, UntypedFormGroup } from '@angular/forms';
 import { NavController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { combineLatest, forkJoin } from 'rxjs';
-import {
-  catchError,
-  first,
-  map,
-  shareReplay,
-  switchMap,
-  tap,
-} from 'rxjs/operators';
+import { combineLatest } from 'rxjs';
+import { catchError, first, map, tap } from 'rxjs/operators';
 import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service';
 import { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service';
 import { ErrorService } from '../../../shared/error/error.service';
@@ -27,22 +19,21 @@ import { NetworkService } from '../../../shared/network/network.service';
 })
 export class EditProfilePage {
   readonly networkConnected$ = this.networkService.connected$;
-  readonly username$ = this.diaBackendAuthService.username$;
-  readonly avatar$ = this.diaBackendAuthService.avatar$.pipe(
-    shareReplay({ bufferSize: 1, refCount: true })
+  readonly profileName$ = this.diaBackendAuthService.profile$.pipe(
+    map(profile => profile.display_name)
   );
-  readonly profile$ = this.diaBackendAuthService
-    .readProfile$()
-    .pipe(shareReplay({ bufferSize: 1, refCount: true }));
-  readonly description$ = this.profile$.pipe(
+  readonly description$ = this.diaBackendAuthService.profile$.pipe(
     map(profile => profile.description)
   );
-  readonly background$ = this.profile$.pipe(
+  readonly avatar$ = this.diaBackendAuthService.profile$.pipe(
+    map(profile => profile.profile_picture_thumbnail)
+  );
+  readonly background$ = this.diaBackendAuthService.profile$.pipe(
     map(profile => profile.profile_background_thumbnail)
   );
   readonly form = new UntypedFormGroup({});
   model: EditProfileFormModel = {
-    username: '',
+    profileName: '',
     description: '',
     profilePicture: undefined,
     profileBackground: undefined,
@@ -67,27 +58,27 @@ export class EditProfilePage {
 
   createFormFields() {
     combineLatest([
-      this.translocoService.selectTranslate('home.editProfile.username'),
+      this.translocoService.selectTranslate('home.editProfile.profileName'),
       this.translocoService.selectTranslate('home.editProfile.description'),
     ])
       .pipe(
-        tap(([usernameTranslation, descriptionTranslation]) => {
+        tap(([profileNameTranslation, descriptionTranslation]) => {
           this.fields = [
             {
-              key: 'username',
+              key: 'profileName',
               type: 'input',
               templateOptions: {
-                label: usernameTranslation,
-                placeholder: usernameTranslation,
+                label: profileNameTranslation,
+                placeholder: profileNameTranslation,
                 appearance: 'outline',
               },
               validators: {
-                username: {
-                  expression: (c: FormControl) => /^.{1,21}$/.test(c.value),
+                profileName: {
+                  expression: (c: FormControl) => /^.{1,15}$/.test(c.value),
                   message: () =>
                     this.translocoService.translate(
                       'home.editProfile.error.mustBeBetween',
-                      { min: 1, max: 21 }
+                      { min: 1, max: 15 }
                     ),
                 },
               },
@@ -102,12 +93,12 @@ export class EditProfilePage {
                 rows: 4,
               },
               validators: {
-                username: {
-                  expression: (c: FormControl) => /^.{0,255}$/.test(c.value),
+                description: {
+                  expression: (c: FormControl) => /^.{0,125}$/.test(c.value),
                   message: () =>
                     this.translocoService.translate(
                       'home.editProfile.error.mustBeBetween',
-                      { min: 0, max: 255 }
+                      { min: 0, max: 125 }
                     ),
                 },
               },
@@ -130,11 +121,11 @@ export class EditProfilePage {
   }
 
   populateFormFields() {
-    combineLatest([this.username$, this.description$])
+    combineLatest([this.profileName$, this.description$])
       .pipe(
         first(),
-        tap(([username, description]) => {
-          this.model = { ...this.model, username, description };
+        tap(([profileName, description]) => {
+          this.model = { ...this.model, profileName, description };
         })
       )
       .subscribe();
@@ -151,19 +142,11 @@ export class EditProfilePage {
   }
 
   async onSubmit() {
-    const updateUserNameAction$ = this.blockingActionService
-      .run$(
-        this.diaBackendAuthService
-          .updateUser$({ username: this.model.username })
-          .pipe(
-            catchError((err: unknown) => this.handleUpdateUsernameError$(err))
-          )
-      )
-      .pipe(untilDestroyed(this));
-    const updateProfileAction$ = this.blockingActionService
+    this.blockingActionService
       .run$(
         this.diaBackendAuthService
           .updateProfile$({
+            profileName: this.model.profileName,
             description: this.model.description,
             profilePicture: this.model.profilePicture,
             profileBackground: this.model.profileBackground,
@@ -173,39 +156,7 @@ export class EditProfilePage {
           )
       )
       .pipe(
-        switchMap(() => this.diaBackendAuthService.syncUser$()),
-        untilDestroyed(this)
-      );
-    forkJoin([updateUserNameAction$, updateProfileAction$])
-      .pipe(tap(() => this.navController.back()))
-      .subscribe();
-  }
-
-  private handleUpdateUsernameError$(err: unknown) {
-    if (err instanceof HttpErrorResponse) {
-      const errorType = err.error.error?.type;
-      if (errorType === 'duplicate_username') {
-        return this.errorService.toastError$(
-          this.translocoService.translate(`error.diaBackend.${errorType}`)
-        );
-      }
-    }
-    return this.errorService.toastError$(err);
-  }
-
-  private updateProfile() {
-    const updateProfileAction$ = this.diaBackendAuthService
-      .updateProfile$({
-        description: this.model.description,
-        profilePicture: this.model.profilePicture,
-        profileBackground: this.model.profileBackground,
-      })
-      .pipe(catchError((err: unknown) => this.handleUpdateProfileError(err)));
-
-    this.blockingActionService
-      .run$(updateProfileAction$)
-      .pipe(
-        switchMap(() => this.diaBackendAuthService.syncUser$()),
+        tap(() => this.navController.back()),
         untilDestroyed(this)
       )
       .subscribe();
@@ -217,7 +168,7 @@ export class EditProfilePage {
 }
 
 interface EditProfileFormModel {
-  username: string;
+  profileName: string;
   description: string;
   profilePicture: File | undefined;
   profileBackground: File | undefined;

src/app/features/home/home.page.html

@@ -4,7 +4,7 @@
       <button (click)="sidenav.toggle()" mat-icon-button>
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <span>{{ username$ | ngrxPush }}</span>
+      <span>{{ profileName$ | ngrxPush }}</span>
     </mat-toolbar>
     <mat-nav-list>
       <mat-list-item>

src/app/features/home/home.page.ts

@@ -67,7 +67,7 @@ export class HomePage {
   private shouldReloadWallet = false;
   selectedTabIndex = this.initialTabIndex;
 
-  readonly username$ = this.diaBackendAuthService.username$;
+  readonly profileName$ = this.diaBackendAuthService.profileName$;
 
   readonly hasNewInbox$ = this.diaBackendTransactionRepository.inbox$.pipe(
     catchError((err: unknown) => this.errorService.toastError$(err)),