Merge pull request #3243 from numbersprotocol/feature-collection-tab

feat: change explore tab to collection tab

src/app/app.component.ts

@@ -139,7 +139,7 @@ export class AppComponent {
       'capture-rebrand-camera-crop',
       'capture',
       'profile',
-      'search',
+      'collection',
       'edit',
       'capture-rebrand-add',
     ];

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

@@ -61,9 +61,6 @@
       <ion-segment-button [value]="captureTabSegments.VERIFIED">
         <ion-label>{{ 'home.profileTab.verified' | transloco }}</ion-label>
       </ion-segment-button>
-      <ion-segment-button [value]="captureTabSegments.COLLECTED">
-        <ion-label>{{ 'home.profileTab.collected' | transloco }}</ion-label>
-      </ion-segment-button>
       <ion-segment-button [value]="captureTabSegments.DRAFT">
         <ion-label>{{ 'home.profileTab.draft' | transloco }}</ion-label>
       </ion-segment-button>
@@ -89,36 +86,6 @@
       </div>
     </div>
 
-    <div class="post-captures" *ngSwitchCase="captureTabSegments.COLLECTED">
-      <mat-grid-list cols="2" gutterSize="16px">
-        <mat-grid-tile
-          class="capture-item"
-          *ngFor="
-            let postCapture of collectedTabItems$ | ngrxPush;
-            trackBy: trackPostCapture
-          "
-          [routerLink]="[
-            'details',
-            { type: 'post-capture', id: postCapture.id }
-          ]"
-        >
-          <ng-container *ngIf="postCapture.asset_file_mime_type as mimeType">
-            <ion-icon
-              *ngIf="mimeType | startsWith: 'video'"
-              name="videocam"
-              class="is-video"
-            ></ion-icon>
-          </ng-container>
-          <ion-icon
-            *ngIf="postCapture.source_type === 'store'"
-            name="storefront"
-            class="is-from-store"
-          ></ion-icon>
-          <ion-img [src]="postCapture.asset_file_thumbnail"></ion-img>
-        </mat-grid-tile>
-      </mat-grid-list>
-    </div>
-
     <div *ngSwitchCase="captureTabSegments.DRAFT">
       <div class="capture-container" *transloco="let t">
         <mat-grid-list cols="2" gutterSize="16px">

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

@@ -113,40 +113,6 @@ app-capture-item {
   border-radius: 16px;
 }
 
-.post-captures {
-  overflow: auto;
-  padding: 32px 8px;
-
-  mat-grid-tile {
-    ion-img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      object-position: center;
-      overflow: hidden;
-      border-radius: 16px;
-    }
-
-    ion-icon {
-      color: white;
-      z-index: 10;
-      position: absolute;
-      opacity: 0.3;
-      font-size: 16px;
-    }
-
-    ion-icon.is-video {
-      top: 8px;
-      right: 8px;
-    }
-
-    ion-icon.is-from-store {
-      top: 8px;
-      left: 8px;
-    }
-  }
-}
-
 mat-grid-list {
   margin-left: 12px;
   margin-right: 12px;

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

@@ -17,10 +17,8 @@ import {
   concatMap,
   concatMapTo,
   map,
-  pluck,
   shareReplay,
   startWith,
-  switchMap,
   tap,
 } from 'rxjs/operators';
 import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service';
@@ -30,10 +28,7 @@ import {
 } from '../../../shared/capture-tab/capture-tab.service';
 import { ConfirmAlert } from '../../../shared/confirm-alert/confirm-alert.service';
 import { Database } from '../../../shared/database/database.service';
-import {
-  DiaBackendAsset,
-  DiaBackendAssetRepository,
-} from '../../../shared/dia-backend/asset/dia-backend-asset-repository.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';
@@ -60,7 +55,7 @@ export class CaptureTabComponent implements OnInit {
    * Used in the HTML template to avoid hardcoded string values.
    */
   readonly captureTabSegments = CaptureTabSegments;
-  segment: CaptureTabSegments = CaptureTabSegments.COLLECTED;
+  segment: CaptureTabSegments = CaptureTabSegments.VERIFIED;
 
   readonly hasNewInbox$ = this.diaBackendTransactionRepository.inbox$.pipe(
     catchError((err: unknown) => this.errorService.toastError$(err)),
@@ -103,33 +98,12 @@ export class CaptureTabComponent implements OnInit {
 
   readonly networkConnected$ = this.networkService.connected$;
 
-  readonly postCaptures$ = this.networkConnected$.pipe(
-    switchMap(isConnected =>
-      iif(
-        () => isConnected,
-        this.diaBackendAssetRepository.postCaptures$.pipe(pluck('results'))
-      )
-    ),
-    catchError((err: unknown) => this.errorService.toastError$(err))
-  );
-
   private readonly itemsPerPage = 10;
 
   readonly capturedTabPageIndex$ = new BehaviorSubject<number>(0);
 
-  readonly collectedTabPageIndex$ = new BehaviorSubject<number>(0);
-
   readonly draftTabPageIndex$ = new BehaviorSubject<number>(0);
 
-  readonly collectedTabItems$ = combineLatest([
-    this.postCaptures$,
-    this.collectedTabPageIndex$,
-  ]).pipe(
-    map(([items, page]) =>
-      items.slice(0, page * this.itemsPerPage + this.itemsPerPage)
-    )
-  );
-
   readonly validatedCaptures$ = this.captures$.pipe(
     map(proofs => proofs.filter(p => p.diaBackendAssetId !== undefined))
   );
@@ -203,9 +177,6 @@ export class CaptureTabComponent implements OnInit {
       case CaptureTabSegments.VERIFIED:
         this.capturedTabPageIndex$.next(this.capturedTabPageIndex$.value + 1);
         break;
-      case CaptureTabSegments.COLLECTED:
-        this.collectedTabPageIndex$.next(this.collectedTabPageIndex$.value + 1);
-        break;
       case CaptureTabSegments.DRAFT:
         this.draftTabPageIndex$.next(this.draftTabPageIndex$.value + 1);
     }
@@ -341,11 +312,6 @@ export class CaptureTabComponent implements OnInit {
     return getOldProof(item).hash;
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  trackPostCapture(_: number, item: DiaBackendAsset) {
-    return item.id;
-  }
-
   async refreshCaptures(event: Event) {
     (<CustomEvent>event).detail.complete();
 
@@ -355,7 +321,6 @@ export class CaptureTabComponent implements OnInit {
     const confirmRefresh = await this.showRefreshAlert();
     if (confirmRefresh) {
       this.capturedTabPageIndex$.next(0);
-      this.collectedTabPageIndex$.next(0);
       this.draftTabPageIndex$.next(0);
 
       return this.dialog.open(PrefetchingDialogComponent, {

src/app/features/home/explore-tab/explore-tab/explore-tab.component.html → src/app/features/home/collection-tab/collection-tab/collection-tab.component.html

@@ -13,7 +13,7 @@
     "
   >
     <iframe
-      #exploreIframe
+      #collectionIframe
       [src]="bubbleIframeUrlWithCachedJWTToken"
       class="bubble-iframe"
     ></iframe>

src/app/features/home/explore-tab/explore-tab/explore-tab.component.spec.ts → src/app/features/home/collection-tab/collection-tab/collection-tab.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../shared/shared-testing.module';
 
-import { ExploreTabComponent } from './explore-tab.component';
+import { CollectionTabComponent } from './collection-tab.component';
 
-describe('ExploreTabComponent', () => {
-  let component: ExploreTabComponent;
-  let fixture: ComponentFixture<ExploreTabComponent>;
+describe('CollectionTabComponent', () => {
+  let component: CollectionTabComponent;
+  let fixture: ComponentFixture<CollectionTabComponent>;
 
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [ExploreTabComponent],
+        declarations: [CollectionTabComponent],
         imports: [SharedTestingModule],
       }).compileComponents();
 
-      fixture = TestBed.createComponent(ExploreTabComponent);
+      fixture = TestBed.createComponent(CollectionTabComponent);
       component = fixture.componentInstance;
       fixture.detectChanges();
     })

src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts → src/app/features/home/collection-tab/collection-tab/collection-tab.component.ts

@@ -11,41 +11,42 @@ import { NetworkService } from '../../../../shared/network/network.service';
 
 @UntilDestroy()
 @Component({
-  selector: 'app-explore-tab',
-  templateUrl: './explore-tab.component.html',
-  styleUrls: ['./explore-tab.component.scss'],
+  selector: 'app-collection-tab',
+  templateUrl: './collection-tab.component.html',
+  styleUrls: ['./collection-tab.component.scss'],
 })
-export class ExploreTabComponent {
+export class CollectionTabComponent {
   readonly bubbleIframeUrlWithCachedJWTToke$ = combineLatest([
     this.diaBackendAuthService.cachedQueryJWTToken$,
-    this.iframeService.exploreTabRefreshRequested$,
+    this.iframeService.collectionTabRefreshRequested$,
   ]).pipe(
     map(([token, _]) => {
-      const url = `${BUBBLE_IFRAME_URL}/?token=${token.access}&refresh_token=${token.refresh}`;
+      const url = `${BUBBLE_IFRAME_URL}/collection?token=${token.access}&refresh_token=${token.refresh}`;
       return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     })
   );
 
   readonly networkConnected$ = this.networkService.connected$;
 
-  @ViewChild('exploreIframe') exploreIframe?: ElementRef<HTMLIFrameElement>;
+  @ViewChild('collectionIframe')
+  collectionIframe?: ElementRef<HTMLIFrameElement>;
 
   constructor(
     private readonly networkService: NetworkService,
     private readonly diaBackendAuthService: DiaBackendAuthService,
     private readonly iframeService: IframeService,
     private readonly sanitizer: DomSanitizer
   ) {
-    iframeService.exploreTabIframeNavigateBack$
+    iframeService.collectionTabIframeNavigateBack$
       .pipe(
-        tap(_ => this.navigateBackExploreIframe()),
+        tap(_ => this.navigateBackCollectionIframe()),
         untilDestroyed(this)
       )
       .subscribe();
   }
 
-  navigateBackExploreIframe() {
-    this.exploreIframe?.nativeElement.contentWindow?.postMessage(
+  navigateBackCollectionIframe() {
+    this.collectionIframe?.nativeElement.contentWindow?.postMessage(
       IonicToBubblePostMessage.ANDROID_BACK_BUTTON,
       BUBBLE_IFRAME_URL
     );

src/app/features/home/home.module.ts

@@ -4,7 +4,7 @@ import { SharedModule } from '../../shared/shared.module';
 import { CaptureItemComponent } from './capture-tab/capture-item/capture-item.component';
 import { CaptureTabComponent } from './capture-tab/capture-tab.component';
 import { UploadingBarComponent } from './capture-tab/uploading-bar/uploading-bar.component';
-import { ExploreTabComponent } from './explore-tab/explore-tab/explore-tab.component';
+import { CollectionTabComponent } from './collection-tab/collection-tab/collection-tab.component';
 import { HomePageRoutingModule } from './home-routing.module';
 import { HomePage } from './home.page';
 import { UpdateAppDialogComponent } from './in-app-updates/update-app-dialog/update-app-dialog.component';
@@ -15,7 +15,7 @@ import { PostCaptureTabComponent } from './post-capture-tab/post-capture-tab.com
   declarations: [
     HomePage,
     CaptureTabComponent,
-    ExploreTabComponent,
+    CollectionTabComponent,
     PostCaptureTabComponent,
     PrefetchingDialogComponent,
     UpdateAppDialogComponent,

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

@@ -124,17 +124,17 @@
       </mat-tab>
       <mat-tab>
         <ng-template mat-tab-label>
-          <button mat-icon-button (click)="navigateToExploreTab()">
+          <button mat-icon-button (click)="navigateToCollectionTab()">
             <mat-icon
-              svgIcon="search"
+              svgIcon="collection"
               class="tab-action-button-icon"
               joyrideStep="highlightHomeTab"
               title="Home Tab"
               text="View created captures"
             ></mat-icon>
           </button>
         </ng-template>
-        <app-explore-tab></app-explore-tab>
+        <app-collection-tab></app-collection-tab>
       </mat-tab>
     </mat-tab-group>
   </mat-sidenav-content>

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

@@ -63,7 +63,7 @@ import { PrefetchingDialogComponent } from './onboarding/prefetching-dialog/pref
 export class HomePage {
   readonly initialTabIndex = 0;
   private readonly afterCaptureTabIndex = 0;
-  private readonly exploreTabIndex = 2;
+  private readonly collectionTabIndex = 2;
   selectedTabIndex = this.initialTabIndex;
 
   readonly username$ = this.diaBackendAuthService.username$;
@@ -305,11 +305,11 @@ export class HomePage {
   overrideAndroidBackButtonBehavior() {
     this.androidBackButtonService
       .overrideAndroidBackButtonBehavior$(() => {
-        const shouldNavigateBackExploreTabIframe =
-          this.selectedTabIndex === this.exploreTabIndex &&
+        const shouldNavigateBackCollectionTabIframe =
+          this.selectedTabIndex === this.collectionTabIndex &&
           this.router.url === '/home';
-        if (shouldNavigateBackExploreTabIframe) {
-          this.iframeService.navigateBackExploreTabIframe();
+        if (shouldNavigateBackCollectionTabIframe) {
+          this.iframeService.navigateBackCollectionTabIframe();
         } else {
           this.navController.back();
         }
@@ -424,32 +424,35 @@ export class HomePage {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  async navigateToExploreTab() {
-    if (this.selectedTabIndex === this.exploreTabIndex) {
+  async navigateToCollectionTab() {
+    if (this.selectedTabIndex === this.collectionTabIndex) {
       // window.location.reload();
-      this.iframeService.refreshExploreTabIframe();
+      this.iframeService.refreshCollectionTabIframe();
     }
-    const didExplain = await this.onboardingService.didExplainExploreTab();
+    /* TODO: re-enable or remove the popup.
+        Hide the popup in current version as a temporary decision.
+    const didExplain = await this.onboardingService.didExplainCollectionTab();
     if (didExplain === false) {
       await new Promise(resolve => {
         setTimeout(resolve, OnboardingService.ONBOARDING_POP_UP_DELAY);
       });
-      this.showExplainExploreTabPopUpDialog();
-      this.onboardingService.setDidExplainExploreTab(true);
+      this.showExplainCollectionTabPopUpDialog();
+      this.onboardingService.setDidExplainCollectionTab(true);
     }
+    */
   }
 
-  private showExplainExploreTabPopUpDialog() {
+  private showExplainCollectionTabPopUpDialog() {
     const panelClass = 'onboarding-pop-up-dialog';
     const data: OnboardingPopUpDialogData = {
       title: this.translocoService.translate(
-        'onboarding.explainExploreTabPopUp.title'
+        'onboarding.explainCollectionTabPopUp.title'
       ),
       content: this.translocoService.translate(
-        'onboarding.explainExploreTabPopUp.content'
+        'onboarding.explainCollectionTabPopUp.content'
       ),
       close: this.translocoService.translate(
-        'onboarding.explainExploreTabPopUp.close'
+        'onboarding.explainCollectionTabPopUp.close'
       ),
     };
     return this.dialog.open(OnboardingPopUpDialogComponent, {

src/app/shared/capture-tab/capture-tab.service.ts

@@ -21,6 +21,5 @@ export class CaptureTabService {
 
 export enum CaptureTabSegments {
   VERIFIED = 'VERIFIED',
-  COLLECTED = 'COLLECTED',
   DRAFT = 'DRAFT',
 }