Add refresher on homepage to refresh captures

android/app/src/main/java/io/numbersprotocol/capturelite/MainActivity.java

@@ -10,7 +10,6 @@
 import java.util.ArrayList;
 import android.content.res.Configuration;
 import android.webkit.WebSettings;
-import android.webkit.WebView;
 
 public class MainActivity extends BridgeActivity {
   void setDarkMode() {

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

@@ -1,4 +1,7 @@
-<mat-card *transloco="let t" class="user-card">
+<ion-refresher slot="fixed" (ionRefresh)="refreshCaptures($event)">
+  <ion-refresher-content></ion-refresher-content>
+</ion-refresher>
+<mat-card *transloco="let t" class="user-card" id="user-card">
   <mat-card-header>
     <app-avatar mat-card-avatar></app-avatar>
     <mat-card-title>

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

@@ -13,6 +13,9 @@ div.mat-title {
   padding-left: 16px;
   padding-right: 16px;
   box-shadow: none;
+}
+
+#user-card {
   background-color: var(--capture-color-dark-background, white);
 }
 

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

@@ -4,8 +4,9 @@ import { AlertController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { groupBy } from 'lodash-es';
-import { catchError, map } from 'rxjs/operators';
+import { catchError, finalize, map } from 'rxjs/operators';
 import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.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 { getOldProof } from '../../../shared/repositories/proof/old-proof-adapter';
@@ -37,6 +38,7 @@ export class CaptureTabComponent {
   constructor(
     private readonly proofRepository: ProofRepository,
     private readonly diaBackendAuthService: DiaBackendAuthService,
+    private readonly diaBackendAssetRefreshingService: DiaBackendAsseRefreshingService,
     private readonly alertController: AlertController,
     private readonly translocoService: TranslocoService,
     private readonly errorService: ErrorService,
@@ -94,4 +96,11 @@ export class CaptureTabComponent {
   trackCaptureItem(_: number, item: Proof) {
     return getOldProof(item).hash;
   }
+
+  refreshCaptures(event: Event) {
+    this.diaBackendAssetRefreshingService
+      .refresh()
+      .pipe(finalize(() => (<CustomEvent>event).detail.complete()))
+      .subscribe();
+  }
 }

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

@@ -1,122 +1,124 @@
-<mat-sidenav-container *transloco="let t">
-  <mat-sidenav #sidenav mode="over" autoFocus="false">
-    <mat-toolbar color="primary">
-      <button (click)="sidenav.toggle()" mat-icon-button>
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-      <span>{{ username$ | ngrxPush }}</span>
-    </mat-toolbar>
-    <mat-nav-list>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          routerLink="/profile"
-          (click)="sidenav.close()"
-          mat-list-item
-        >
-          {{ t('profile') }}
-        </a>
-      </mat-list-item>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          routerLink="/contacts"
-          (click)="sidenav.close()"
-          mat-list-item
-        >
-          {{ t('contacts') }}
-        </a>
-      </mat-list-item>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          routerLink="/settings"
-          (click)="sidenav.close()"
-          mat-list-item
-        >
-          {{ t('settings') }}
-        </a>
-      </mat-list-item>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          (click)="sidenav.close(); openCaptureClub()"
-          mat-list-item
-        >
-          CaptureClub
-        </a>
-      </mat-list-item>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          routerLink="/privacy"
-          (click)="sidenav.close()"
-          mat-list-item
-        >
-          {{ t('privacy') }}
-        </a>
-      </mat-list-item>
-      <mat-list-item>
-        <a
-          class="mat-title"
-          routerLink="/about"
-          (click)="sidenav.close()"
-          mat-list-item
-        >
-          {{ t('about') }}
-        </a>
-      </mat-list-item>
-    </mat-nav-list>
-  </mat-sidenav>
-  <mat-sidenav-content>
-    <mat-toolbar color="primary">
-      <button (click)="sidenav.toggle()" mat-icon-button>
-        <mat-icon>menu</mat-icon>
-      </button>
-      <span class="toolbar-spacer"></span>
-      <button routerLink="transaction" mat-icon-button>
-        <mat-icon>history</mat-icon>
-      </button>
-      <button routerLink="inbox" mat-icon-button>
-        <mat-icon
-          *ngrxLet="hasNewInbox$ as hasNewInbox"
-          matBadge="&#8288;"
-          [matBadgeHidden]="!hasNewInbox"
-          matBadgeSize="small"
-          matBadgeColor="warn"
-        >
-          email</mat-icon
-        >
-      </button>
-    </mat-toolbar>
-    <mat-tab-group
-      headerPosition="below"
-      mat-stretch-tabs
-      mat-align-tabs="center"
-      backgroundColor="primary"
-      [disablePagination]="true"
-      [(selectedIndex)]="selectedTabIndex"
-      animationDuration="0ms"
-    >
-      <mat-tab>
-        <ng-template mat-tab-label>
-          <mat-icon>apps</mat-icon>
-        </ng-template>
-        <app-capture-tab></app-capture-tab>
-      </mat-tab>
-      <mat-tab disabled>
-        <ng-template mat-tab-label>
-          <button mat-icon-button (click)="capture()">
-            <mat-icon class="tab-action-button-icon">camera_alt</mat-icon>
-          </button>
-        </ng-template>
-      </mat-tab>
-      <mat-tab>
-        <ng-template mat-tab-label>
-          <mat-icon>move_to_inbox</mat-icon>
-        </ng-template>
-        <app-post-capture-tab></app-post-capture-tab>
-      </mat-tab>
-    </mat-tab-group>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+<ion-content>
+  <mat-sidenav-container *transloco="let t">
+    <mat-sidenav #sidenav mode="over" autoFocus="false">
+      <mat-toolbar color="primary">
+        <button (click)="sidenav.toggle()" mat-icon-button>
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+        <span>{{ username$ | ngrxPush }}</span>
+      </mat-toolbar>
+      <mat-nav-list>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            routerLink="/profile"
+            (click)="sidenav.close()"
+            mat-list-item
+          >
+            {{ t('profile') }}
+          </a>
+        </mat-list-item>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            routerLink="/contacts"
+            (click)="sidenav.close()"
+            mat-list-item
+          >
+            {{ t('contacts') }}
+          </a>
+        </mat-list-item>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            routerLink="/settings"
+            (click)="sidenav.close()"
+            mat-list-item
+          >
+            {{ t('settings') }}
+          </a>
+        </mat-list-item>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            (click)="sidenav.close(); openCaptureClub()"
+            mat-list-item
+          >
+            CaptureClub
+          </a>
+        </mat-list-item>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            routerLink="/privacy"
+            (click)="sidenav.close()"
+            mat-list-item
+          >
+            {{ t('privacy') }}
+          </a>
+        </mat-list-item>
+        <mat-list-item>
+          <a
+            class="mat-title"
+            routerLink="/about"
+            (click)="sidenav.close()"
+            mat-list-item
+          >
+            {{ t('about') }}
+          </a>
+        </mat-list-item>
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <mat-toolbar color="primary">
+        <button (click)="sidenav.toggle()" mat-icon-button>
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span class="toolbar-spacer"></span>
+        <button routerLink="transaction" mat-icon-button>
+          <mat-icon>history</mat-icon>
+        </button>
+        <button routerLink="inbox" mat-icon-button>
+          <mat-icon
+            *ngrxLet="hasNewInbox$ as hasNewInbox"
+            matBadge="&#8288;"
+            [matBadgeHidden]="!hasNewInbox"
+            matBadgeSize="small"
+            matBadgeColor="warn"
+          >
+            email</mat-icon
+          >
+        </button>
+      </mat-toolbar>
+      <mat-tab-group
+        headerPosition="below"
+        mat-stretch-tabs
+        mat-align-tabs="center"
+        backgroundColor="primary"
+        [disablePagination]="true"
+        [(selectedIndex)]="selectedTabIndex"
+        animationDuration="0ms"
+      >
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>apps</mat-icon>
+          </ng-template>
+          <app-capture-tab></app-capture-tab>
+        </mat-tab>
+        <mat-tab disabled>
+          <ng-template mat-tab-label>
+            <button mat-icon-button (click)="capture()">
+              <mat-icon class="tab-action-button-icon">camera_alt</mat-icon>
+            </button>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>move_to_inbox</mat-icon>
+          </ng-template>
+          <app-post-capture-tab></app-post-capture-tab>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</ion-content>

src/app/shared/dia-backend/asset/refreshing/dia-backend-asset-refreshing.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../../shared-testing.module';
+import { DiaBackendAsseRefreshingService } from './dia-backend-asset-refreshing.service';
+
+describe('DiaBackendAssetUploadingService', () => {
+  let service: DiaBackendAsseRefreshingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [SharedTestingModule],
+    });
+    service = TestBed.inject(DiaBackendAsseRefreshingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/dia-backend/asset/refreshing/dia-backend-asset-refreshing.service.ts

@@ -0,0 +1,43 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { EMPTY, forkJoin } from 'rxjs';
+import { catchError, concatMap, first } from 'rxjs/operators';
+import { HttpErrorCode } from '../../../error/error.service';
+import { ProofRepository } from '../../../repositories/proof/proof-repository.service';
+import { DiaBackendAssetRepository } from '../dia-backend-asset-repository.service';
+import { DiaBackendAssetPrefetchingService } from '../prefetching/dia-backend-asset-prefetching.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DiaBackendAsseRefreshingService {
+  constructor(
+    private readonly assetRepository: DiaBackendAssetRepository,
+    private readonly proofRepository: ProofRepository,
+    private readonly diaBackendAssetPrefetchingService: DiaBackendAssetPrefetchingService
+  ) {}
+
+  refresh() {
+    return this.proofRepository.all$.pipe(
+      first(),
+      concatMap(proofs =>
+        forkJoin(
+          proofs.map(proof =>
+            this.assetRepository.fetchByProof$(proof).pipe(
+              catchError((err: unknown) => {
+                if (
+                  err instanceof HttpErrorResponse &&
+                  err.status === HttpErrorCode.NOT_FOUND
+                ) {
+                  this.proofRepository.remove(proof);
+                }
+                return EMPTY;
+              })
+            )
+          )
+        )
+      ),
+      concatMap(() => this.diaBackendAssetPrefetchingService.prefetch())
+    );
+  }
+}

src/theme/variables.scss

@@ -193,7 +193,7 @@ $dark-theme: mat-dark-theme(
 }
 
 body.dark {
-  @include angular-material-theme($dark-theme);
+  @include angular-material-color($dark-theme);
 
   --capture-color-dark-background: #36393f;
   --capture-color-dark-contrast: #444;