diff --git a/src/app/features/home/capture-tab/capture-details/capture-details.page.ts b/src/app/features/home/capture-tab/capture-details/capture-details.page.ts index ba51de1b7..698f4c937 100644 --- a/src/app/features/home/capture-tab/capture-details/capture-details.page.ts +++ b/src/app/features/home/capture-tab/capture-details/capture-details.page.ts @@ -4,7 +4,15 @@ import { MatDialog } from '@angular/material/dialog'; import { ActivatedRoute, Router } from '@angular/router'; import { TranslocoService } from '@ngneat/transloco'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; -import { concatMap, map, shareReplay, switchMap, tap } from 'rxjs/operators'; +import { defer } from 'rxjs'; +import { + concatMap, + concatMapTo, + map, + shareReplay, + switchMap, + tap, +} from 'rxjs/operators'; import { BlockingActionService } from '../../../../shared/services/blocking-action/blocking-action.service'; import { ConfirmAlert } from '../../../../shared/services/confirm-alert/confirm-alert.service'; import { DiaBackendAuthService } from '../../../../shared/services/dia-backend/auth/dia-backend-auth.service'; @@ -96,7 +104,8 @@ export class CaptureDetailsPage { private async remove() { const action$ = this.proof$.pipe( - concatMap(proof => this.proofRepository.remove(proof)) + concatMap(proof => this.proofRepository.remove(proof)), + concatMapTo(defer(() => this.router.navigate(['..']))) ); const result = await this.confirmAlert.present(); if (result) { diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.html b/src/app/features/home/capture-tab/capture-item/capture-item.component.html new file mode 100644 index 000000000..b72448ec5 --- /dev/null +++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.html @@ -0,0 +1,11 @@ +
+ +
+ + + diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.scss b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss new file mode 100644 index 000000000..fc66c5c56 --- /dev/null +++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.scss @@ -0,0 +1,46 @@ +:host { + display: block; + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 4px; + background-color: whitesmoke; +} + +ion-icon { + position: absolute; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + z-index: 10; + opacity: 50%; + font-size: 24px; + color: white; +} + +.spinner-container { + position: absolute; + top: 50%; + left: 50%; + margin-right: -50%; + transform: translate(-50%, -50%); + z-index: 9; + + ion-spinner { + width: 48px; + height: 48px; + opacity: 50%; + + --color: white; + } +} + +img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + background-color: whitesmoke; +} diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.spec.ts b/src/app/features/home/capture-tab/capture-item/capture-item.component.spec.ts new file mode 100644 index 000000000..17af03712 --- /dev/null +++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.spec.ts @@ -0,0 +1,23 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { SharedTestingModule } from '../../../../shared/shared-testing.module'; +import { CaptureItemComponent } from './capture-item.component'; + +describe('CaptureItemComponent', () => { + let component: CaptureItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CaptureItemComponent], + imports: [SharedTestingModule], + }).compileComponents(); + + fixture = TestBed.createComponent(CaptureItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/home/capture-tab/capture-item/capture-item.component.ts b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts new file mode 100644 index 000000000..2608ba4f2 --- /dev/null +++ b/src/app/features/home/capture-tab/capture-item/capture-item.component.ts @@ -0,0 +1,63 @@ +import { Component, Input } from '@angular/core'; +import { UntilDestroy } from '@ngneat/until-destroy'; +import { BehaviorSubject } from 'rxjs'; +import { map, switchMap } from 'rxjs/operators'; +import { getOldProof } from '../../../../shared/services/repositories/proof/old-proof-adapter'; +import { Proof } from '../../../../shared/services/repositories/proof/proof'; +import { isNonNullable } from '../../../../utils/rx-operators/rx-operators'; + +@UntilDestroy({ checkProperties: true }) +@Component({ + selector: 'app-capture-item', + templateUrl: './capture-item.component.html', + styleUrls: ['./capture-item.component.scss'], +}) +export class CaptureItemComponent { + // Use setter to make sure the item is updated even if the component is + // recycled and redrawed (e.g. virtual scroll). + @Input() + set item(value: CaptureItem) { + this._item$.next(value); + } + + // tslint:disable-next-line: rxjs-no-explicit-generics + private readonly _item$ = new BehaviorSubject( + undefined + ); + readonly item$ = this._item$.asObservable().pipe(isNonNullable()); + readonly thumbnailUrl$ = this.item$.pipe( + switchMap(item => item.getThumbnailUrl()) + ); + readonly willCollectTruth$ = this.item$.pipe( + map(item => item.proof?.willCollectTruth === true) + ); +} + +export class CaptureItem { + proof?: Proof; + private readonly createdTimestamp: number; + + get oldProofHash() { + if (this.proof) { + return getOldProof(this.proof).hash; + } + } + + get timestamp() { + if (this.proof) { + return this.proof.timestamp; + } + return this.createdTimestamp; + } + + constructor({ proof }: { proof?: Proof }) { + this.proof = proof; + this.createdTimestamp = Date.now(); + } + + async getThumbnailUrl() { + if (this.proof) { + return this.proof.getThumbnailUrl(); + } + } +} diff --git a/src/app/features/home/capture-tab/capture-tab.component.html b/src/app/features/home/capture-tab/capture-tab.component.html index 656ce31c0..092c4b0d1 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.html +++ b/src/app/features/home/capture-tab/capture-tab.component.html @@ -1,25 +1,20 @@
{{ group.key }}
-
- -
- - +
diff --git a/src/app/features/home/capture-tab/capture-tab.component.scss b/src/app/features/home/capture-tab/capture-tab.component.scss index c327d6a3c..f803369be 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.scss +++ b/src/app/features/home/capture-tab/capture-tab.component.scss @@ -9,46 +9,3 @@ div.mat-title { margin: 26px 0 0; font-size: large; } - -.capture-item { - height: 30vw; - overflow: hidden; - object-fit: cover; - border-radius: 4px; - - .spinner-container { - position: absolute; - top: 50%; - left: 50%; - margin-right: -50%; - transform: translate(-50%, -50%); - z-index: 9; - - ion-spinner { - width: 48px; - height: 48px; - opacity: 50%; - - --color: white; - } - } - - ion-icon { - position: absolute; - top: 50%; - left: 50%; - margin-right: -50%; - transform: translate(-50%, -50%); - z-index: 10; - opacity: 30%; - color: white; - font-size: 24px; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: inherit; - } -} diff --git a/src/app/features/home/capture-tab/capture-tab.component.ts b/src/app/features/home/capture-tab/capture-tab.component.ts index 2f093fa7f..dd548c245 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.ts +++ b/src/app/features/home/capture-tab/capture-tab.component.ts @@ -2,8 +2,8 @@ import { formatDate, KeyValue } from '@angular/common'; import { Component } from '@angular/core'; import { groupBy } from 'lodash'; import { concatMap, map } from 'rxjs/operators'; -import { getOldProof } from '../../../shared/services/repositories/proof/old-proof-adapter'; import { ProofRepository } from '../../../shared/services/repositories/proof/proof-repository.service'; +import { CaptureItem } from './capture-item/capture-item.component'; @Component({ selector: 'app-capture-tab', @@ -15,17 +15,11 @@ export class CaptureTabComponent { readonly capturesByDate$ = this.proofs$.pipe( map(proofs => proofs.sort((a, b) => b.timestamp - a.timestamp)), concatMap(proofs => - Promise.all( - proofs.map(async proof => ({ - proof, - thumbnailUrl: await proof.getThumbnailUrl(), - oldProofHash: getOldProof(proof).hash, - })) - ) + Promise.all(proofs.map(async proof => new CaptureItem({ proof }))) ), - map(captures => - groupBy(captures, capture => - formatDate(capture.proof.timestamp, 'yyyy/MM/dd', 'en-US') + map(captureItems => + groupBy(captureItems, item => + formatDate(item.timestamp, 'yyyy/MM/dd', 'en-US') ) ) ); @@ -39,4 +33,17 @@ export class CaptureTabComponent { ): number { return a.key > b.key ? -1 : b.key > a.key ? 1 : 0; } + + // tslint:disable-next-line: prefer-function-over-method + trackCaptureGroupByDate( + _: number, + item: { key: string; value: CaptureItem[] } + ) { + return item.key; + } + + // tslint:disable-next-line: prefer-function-over-method + trackCaptureItem(_: number, item: CaptureItem) { + return item.oldProofHash; + } } diff --git a/src/app/features/home/home.module.ts b/src/app/features/home/home.module.ts index 35b2d91dc..1df576792 100644 --- a/src/app/features/home/home.module.ts +++ b/src/app/features/home/home.module.ts @@ -1,12 +1,13 @@ import { NgModule } from '@angular/core'; import { PostCaptureCardModule } from '../../shared/core/post-capture-card/post-capture-card.module'; 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 { HomePageRoutingModule } from './home-routing.module'; import { HomePage } from './home.page'; @NgModule({ imports: [SharedModule, HomePageRoutingModule, PostCaptureCardModule], - declarations: [HomePage, CaptureTabComponent], + declarations: [HomePage, CaptureTabComponent, CaptureItemComponent], }) export class HomePageModule {} diff --git a/src/app/features/home/inbox/inbox.page.html b/src/app/features/home/inbox/inbox.page.html index a28d493d4..11004f5a0 100644 --- a/src/app/features/home/inbox/inbox.page.html +++ b/src/app/features/home/inbox/inbox.page.html @@ -6,10 +6,6 @@
- -