Implement tutorial slides (#376)

Co-authored-by: DaYuan <[email protected]>

.vscode/settings.json

@@ -3,6 +3,7 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.tslint": true,
+    "source.fixAll.stylelint": true,
     "source.organizeImports": true
   },
   "typescript.preferences.importModuleSpecifier": "relative"

src/app/app-routing.module.ts

@@ -50,6 +50,14 @@ const routes: Routes = [
       import('./pages/about/about.module').then(m => m.AboutPageModule),
     canActivate: [AuthGuard],
   },
+  {
+    path: 'tutorial',
+    loadChildren: () =>
+      import('./pages/tutorial/tutorial.module').then(
+        m => m.TutorialPageModule
+      ),
+    canActivate: [AuthGuard],
+  },
 ];
 @NgModule({
   imports: [

src/app/pages/home/home.page.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 import { SharedTestingModule } from '../../shared/shared-testing.module';
 import { HomePage } from './home.page';
 
@@ -12,6 +13,9 @@ describe('HomePage', () => {
       imports: [SharedTestingModule],
     }).compileComponents();
 
+    const router = TestBed.inject(Router);
+    spyOn(router, 'navigate').and.resolveTo(true);
+
     fixture = TestBed.createComponent(HomePage);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/pages/home/home.page.ts

@@ -1,7 +1,8 @@
 import { formatDate, KeyValue } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTabChangeEvent } from '@angular/material/tabs';
+import { Router } from '@angular/router';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { groupBy, isEqual, sortBy } from 'lodash';
@@ -17,6 +18,7 @@ import { CollectorService } from '../../services/collector/collector.service';
 import { DiaBackendAssetRepository } from '../../services/dia-backend/asset/dia-backend-asset-repository.service';
 import { DiaBackendAuthService } from '../../services/dia-backend/auth/dia-backend-auth.service';
 import { DiaBackendTransactionRepository } from '../../services/dia-backend/transaction/dia-backend-transaction-repository.service';
+import { OnboardingService } from '../../services/onboarding/onboarding.service';
 import { getOldProof } from '../../services/repositories/proof/old-proof-adapter';
 import { Proof } from '../../services/repositories/proof/proof';
 import { ProofRepository } from '../../services/repositories/proof/proof-repository.service';
@@ -28,7 +30,7 @@ import { capture } from '../../utils/camera';
   templateUrl: './home.page.html',
   styleUrls: ['./home.page.scss'],
 })
-export class HomePage {
+export class HomePage implements OnInit {
   readonly capturesByDate$ = this.getCaptures$().pipe(
     map(captures =>
       sortBy(captures, c => -c.proofWithThumbnail.proof.timestamp)
@@ -78,9 +80,17 @@ export class HomePage {
     private readonly diaBackendAssetRepository: DiaBackendAssetRepository,
     private readonly diaBackendTransactionRepository: DiaBackendTransactionRepository,
     private readonly snackbar: MatSnackBar,
-    private readonly translocoService: TranslocoService
+    private readonly translocoService: TranslocoService,
+    private readonly onboardingService: OnboardingService,
+    private readonly router: Router
   ) {}
 
+  async ngOnInit() {
+    if (await this.onboardingService.isOnboarding()) {
+      this.router.navigate(['/tutorial']);
+    }
+  }
+
   // tslint:disable-next-line: prefer-function-over-method
   keyDescendingOrder(
     a: KeyValue<number, string>,

src/app/pages/tutorial/tutorial-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TutorialPage } from './tutorial.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TutorialPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TutorialPageRoutingModule {}

src/app/pages/tutorial/tutorial.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { TutorialPageRoutingModule } from './tutorial-routing.module';
+import { TutorialPage } from './tutorial.page';
+
+@NgModule({
+  imports: [TutorialPageRoutingModule, SharedModule],
+  declarations: [TutorialPage],
+})
+export class TutorialPageModule {}