Feature rebrand prepare iframe for explore tab

src/app/app.component.ts

@@ -63,7 +63,11 @@ export class AppComponent {
     this.registerIcon();
   }
 
-  static setDarkMode() {
+  static setDarkMode(forceDarkMode = false) {
+    if (forceDarkMode) {
+      document.body.classList.toggle('dark', true);
+      return;
+    }
     const dark =
       window.navigator.userAgent.includes('AndroidDarkMode') ||
       window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -72,7 +76,7 @@ export class AppComponent {
 
   async initializeApp() {
     await this.platform.ready();
-    AppComponent.setDarkMode();
+    AppComponent.setDarkMode(true);
     await SplashScreen.hide();
   }
 

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

@@ -2,43 +2,87 @@
   <ion-refresher-content></ion-refresher-content>
 </ion-refresher>
 <mat-card *transloco="let t" class="user-card" id="user-card">
+  <app-avatar mat-card-avatar></app-avatar>
   <mat-card-header>
-    <app-avatar mat-card-avatar></app-avatar>
-    <mat-card-title>
-      {{ username$ | ngrxPush }}
-      <button mat-button (click)="editUsername()">
-        <mat-icon class="edit-icon">edit</mat-icon>
-      </button>
-    </mat-card-title>
+    <mat-card-title>{{ username$ | ngrxPush }}</mat-card-title>
+    <div class="vertical-space-8"></div>
     <mat-card-subtitle>{{ email$ | ngrxPush }} </mat-card-subtitle>
   </mat-card-header>
 </mat-card>
 <app-uploading-bar></app-uploading-bar>
-<div class="capture-container" *transloco="let t">
-  <ng-container
-    *ngFor="
-      let group of capturesByDate$ | ngrxPush | keyvalue: keyDescendingOrder;
-      first as isFirstGroup;
-      trackBy: trackCaptureGroupByDate
-    "
-  >
-    <div class="mat-title">{{ group.key | date: 'longDate' }}</div>
+
+<div [ngSwitch]="categories">
+  <ion-segment mode="md" [(ngModel)]="categories">
+    <ion-segment-button value="captured">
+      <ion-label>{{ 'home.profileTab.captured' | transloco }}</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="collected">
+      <ion-label>{{ 'home.profileTab.collected' | transloco }}</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <p *ngIf="(networkConnected$ | ngrxPush) === false" class="network-status">
+    {{ 'message.networkNotConnected' | transloco }}
+  </p>
+
+  <div *ngSwitchCase="'captured'">
+    <div class="capture-container" *transloco="let t">
+      <ng-container
+        *ngFor="
+          let group of capturesByDate$
+            | ngrxPush
+            | keyvalue: keyDescendingOrder;
+          first as isFirstGroup;
+          trackBy: trackCaptureGroupByDate
+        "
+      >
+        <div class="mat-title">{{ group.key | date: 'longDate' }}</div>
+        <mat-grid-list cols="3" gutterSize="8px">
+          <mat-grid-tile
+            *ngFor="
+              let proof of group.value;
+              first as isFirstProof;
+              trackBy: trackCaptureItem
+            "
+            class="capture-item"
+            [joyrideStep]="
+              isFirstGroup && isFirstProof
+                ? 'highlightFirstCapture'
+                : 'notFirst'
+            "
+            [title]="t('userGuide.capturedItem')"
+            [text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
+          >
+            <app-capture-item [proof]="proof"></app-capture-item>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </ng-container>
+    </div>
+  </div>
+
+  <div class="post-captures" *ngSwitchCase="'collected'">
     <mat-grid-list cols="3" gutterSize="8px">
       <mat-grid-tile
         *ngFor="
-          let proof of group.value;
-          first as isFirstProof;
-          trackBy: trackCaptureItem
-        "
-        class="capture-item"
-        [joyrideStep]="
-          isFirstGroup && isFirstProof ? 'highlightFirstCapture' : 'notFirst'
+          let postCapture of postCaptures$ | ngrxPush;
+          trackBy: trackPostCapture
         "
-        [title]="t('userGuide.capturedItem')"
-        [text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
+        [routerLink]="['details', { type: 'post-capture', id: postCapture.id }]"
       >
-        <app-capture-item [proof]="proof"></app-capture-item>
+        <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>
-  </ng-container>
+  </div>
 </div>

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

@@ -8,6 +8,22 @@ div.mat-title {
   font-size: medium;
 }
 
+mat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+mat-card-title {
+  text-align: center;
+  margin-top: 32px;
+}
+
+mat-card-subtitle {
+  margin-top: 12px !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .user-card {
   width: 100%;
   padding-left: 16px;
@@ -34,6 +50,16 @@ app-avatar {
   height: 64px;
 }
 
+.network-status {
+  margin: 0;
+  padding: 8px;
+  text-align: center;
+  color: darkgray;
+  font-weight: 500;
+  font-size: 0.9em;
+  background-color: var(--ion-color-light);
+}
+
 .capture-container {
   padding-left: 16px;
   padding-right: 16px;
@@ -45,3 +71,37 @@ app-capture-item {
   overflow: hidden;
   border-radius: 4px;
 }
+
+.post-captures {
+  overflow: auto;
+  padding: 16px;
+
+  mat-grid-tile {
+    ion-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      overflow: hidden;
+      border-radius: 4px;
+    }
+
+    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;
+    }
+  }
+}

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

@@ -4,11 +4,17 @@ import { AlertController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { groupBy } from 'lodash-es';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { iif } from 'rxjs';
+import { catchError, finalize, map, pluck, switchMap } from 'rxjs/operators';
 import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service';
+import {
+  DiaBackendAsset,
+  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 { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service';
 import { ErrorService } from '../../../shared/error/error.service';
+import { NetworkService } from '../../../shared/network/network.service';
 import { getOldProof } from '../../../shared/repositories/proof/old-proof-adapter';
 import { Proof } from '../../../shared/repositories/proof/proof';
 import { ProofRepository } from '../../../shared/repositories/proof/proof-repository.service';
@@ -20,6 +26,8 @@ import { ProofRepository } from '../../../shared/repositories/proof/proof-reposi
   styleUrls: ['./capture-tab.component.scss'],
 })
 export class CaptureTabComponent {
+  categories: 'captured' | 'collected' = 'captured';
+
   readonly username$ = this.diaBackendAuthService.username$;
 
   readonly email$ = this.diaBackendAuthService.email$;
@@ -35,11 +43,25 @@ export class CaptureTabComponent {
     )
   );
 
+  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))
+  );
+
   constructor(
     private readonly proofRepository: ProofRepository,
     private readonly diaBackendAuthService: DiaBackendAuthService,
+    private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
     private readonly diaBackendAssetRefreshingService: DiaBackendAsseRefreshingService,
     private readonly alertController: AlertController,
+    private readonly networkService: NetworkService,
     private readonly translocoService: TranslocoService,
     private readonly errorService: ErrorService,
     private readonly blockingActionService: BlockingActionService
@@ -97,6 +119,11 @@ export class CaptureTabComponent {
     return getOldProof(item).hash;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  trackPostCapture(_: number, item: DiaBackendAsset) {
+    return item.id;
+  }
+
   refreshCaptures(event: Event) {
     this.diaBackendAssetRefreshingService
       .refresh()

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

@@ -0,0 +1,10 @@
+<div
+  *ngIf="(networkConnected$ | ngrxPush) === false; else bubbleIframe"
+  class="no-network-text"
+>
+  {{ 'message.networkNotConnected' | transloco }}
+</div>
+
+<ng-template #bubbleIframe>
+  <iframe [src]="bubbleIframeUrl" class="bubble-iframe"></iframe>
+</ng-template>

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

@@ -0,0 +1,11 @@
+.no-network-text {
+  font-size: 18px;
+  text-align: center;
+}
+
+.bubble-iframe {
+  background-color: black;
+  width: 100vw;
+  height: 100vh;
+  border: 0;
+}

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

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

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

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ErrorService } from '../../../../shared/error/error.service';
+import { NetworkService } from '../../../../shared/network/network.service';
+
+@Component({
+  selector: 'app-explore-tab',
+  templateUrl: './explore-tab.component.html',
+  styleUrls: ['./explore-tab.component.scss'],
+})
+export class ExploreTabComponent {
+  // TODO: change url to point to production bubble app
+  readonly bubbleIframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+    'https://captureappiframe.bubbleapps.io/version-test/'
+  );
+
+  readonly networkConnected$ = this.networkService.connected$;
+
+  constructor(
+    private readonly sanitizer: DomSanitizer,
+    private readonly networkService: NetworkService,
+    private readonly errorService: ErrorService
+  ) {}
+}

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

@@ -4,6 +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 { HomePageRoutingModule } from './home-routing.module';
 import { HomePage } from './home.page';
 import { UpdateAppDialogComponent } from './in-app-updates/update-app-dialog/update-app-dialog.component';
@@ -14,6 +15,7 @@ import { PostCaptureTabComponent } from './post-capture-tab/post-capture-tab.com
   declarations: [
     HomePage,
     CaptureTabComponent,
+    ExploreTabComponent,
     PostCaptureTabComponent,
     PrefetchingDialogComponent,
     UpdateAppDialogComponent,