Skip to content

Commit 6603573

Browse files
jasonrichdarmawanjasonrichdarmawan
committed
chore: add function to experiencs and checkout
1 parent 4499cfb commit 6603573

File tree

8 files changed

+99
-42
lines changed

8 files changed

+99
-42
lines changed

‎projects/account/src/app/features/account/presentation/pages/account/account.page.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class AccountPage implements OnInit {
2424
ngOnInit(): void {
2525
}
2626

27-
private async initIsLoggedIn() {
27+
private initIsLoggedIn() {
2828
if (isPlatformServer(this.platformId)) { return; }
2929

3030
onAuthStateChanged(this.auth, (user) => {

‎projects/checkout/src/app/app.module.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { NgModule } from '@angular/core';
1+
import { NgModule, inject } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33

44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { environment } from '../environments/environment';
77
import { COMMON_ENVIRONMENT_TOKEN } from 'projects/common/environments/environment.interface';
88
import { commonEnvironment } from 'projects/common/environments/environment';
9-
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
9+
import { FirebaseApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
1010
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
1111
import { provideAuth,getAuth } from '@angular/fire/auth';
1212
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
13-
import { provideFunctions,getFunctions } from '@angular/fire/functions';
13+
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
1414

1515
@NgModule({
1616
declarations: [
@@ -23,7 +23,14 @@ import { provideFunctions,getFunctions } from '@angular/fire/functions';
2323
provideAnalytics(() => getAnalytics()),
2424
provideAuth(() => getAuth()),
2525
provideFirestore(() => getFirestore()),
26-
provideFunctions(() => getFunctions())
26+
provideFunctions(() => {
27+
const app = inject(FirebaseApp);
28+
const functions = getFunctions(app, "asia-east1");
29+
if (commonEnvironment.useEmulators) {
30+
connectFunctionsEmulator(functions, "127.0.0.1", commonEnvironment.emulators!.functions.port);
31+
}
32+
return functions;
33+
})
2734
],
2835
providers: [
2936
{

‎projects/checkout/src/app/features/checkout/presentation/pages/checkout/checkout.page.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<p>checkout works!</p>
22

3-
<ng-container *ngIf="isLoggedIn !== undefined else loading">
4-
<ng-container
5-
*ngTemplateOutlet="isLoggedIn ? user : loginForm">
3+
<ng-container [ngSwitch]="helloWorld">
4+
<ng-container *ngSwitchCase="undefined">
5+
<ng-container *ngTemplateOutlet="loading"></ng-container>
66
</ng-container>
7+
<p *ngSwitchDefault>response from the helloWorld cloud function: {{ helloWorld }}</p>
8+
</ng-container>
9+
10+
<ng-container [ngSwitch]="isLoggedIn">
11+
<ng-container *ngSwitchCase="undefined">
12+
<ng-container *ngTemplateOutlet="loading"></ng-container>
13+
</ng-container>
14+
<app-checkout-login-form *ngSwitchCase="false"></app-checkout-login-form>
15+
<app-checkout-user *ngSwitchCase="true"></app-checkout-user>
716
</ng-container>
817

918
<ng-template #loading>
1019
<span>Loading</span>
11-
</ng-template>
12-
13-
<ng-template #user>
14-
<app-checkout-user></app-checkout-user>
15-
</ng-template>
16-
17-
<ng-template #loginForm>
18-
<app-checkout-login-form></app-checkout-login-form>
1920
</ng-template>

‎projects/checkout/src/app/features/checkout/presentation/pages/checkout/checkout.page.ts

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { isPlatformServer } from '@angular/common';
22
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
33
import { Auth, onAuthStateChanged } from '@angular/fire/auth';
4+
import { Functions, httpsCallable } from '@angular/fire/functions';
45

56
@Component({
67
selector: 'app-checkout',
@@ -9,14 +10,25 @@ import { Auth, onAuthStateChanged } from '@angular/fire/auth';
910
})
1011
export class CheckoutPage implements OnInit {
1112
isLoggedIn?: boolean;
13+
helloWorld?: string;
1214

1315
constructor(
14-
@Inject(PLATFORM_ID) platformId: Object,
16+
@Inject(PLATFORM_ID) private platformId: Object,
1517
private auth: Auth,
18+
private functions: Functions
1619
) {
17-
if (isPlatformServer(platformId)) { return; }
20+
21+
this.initIsLoggedIn();
22+
this.fetchHelloWorld();
23+
}
24+
25+
ngOnInit(): void {
26+
}
27+
28+
private initIsLoggedIn() {
29+
if (isPlatformServer(this.platformId)) { return; }
1830

19-
onAuthStateChanged(auth, (user) => {
31+
onAuthStateChanged(this.auth, (user) => {
2032
if (user) {
2133
this.isLoggedIn = true;
2234
} else {
@@ -25,6 +37,9 @@ export class CheckoutPage implements OnInit {
2537
});
2638
}
2739

28-
ngOnInit(): void {
40+
private async fetchHelloWorld() {
41+
const callable = httpsCallable<undefined, string>(this.functions, "helloWorld");
42+
const { data } = await callable();
43+
this.helloWorld = data;
2944
}
3045
}

‎projects/experiences/src/app/app.module.ts

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { NgModule } from '@angular/core';
2-
import { BrowserModule } from '@angular/platform-browser';
1+
import { NgModule, inject } from '@angular/core';
2+
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
33

44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66

77
import { environment } from '../environments/environment';
88
import { commonEnvironment } from 'projects/common/environments/environment';
99
import { COMMON_ENVIRONMENT_TOKEN } from 'projects/common/environments/environment.interface';
10-
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
10+
import { FirebaseApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
1111
import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
1212
import { provideAuth,getAuth } from '@angular/fire/auth';
1313
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
14-
import { provideFunctions,getFunctions } from '@angular/fire/functions';
14+
import { provideFunctions,getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
1515

1616
@NgModule({
1717
declarations: [
@@ -20,11 +20,19 @@ import { provideFunctions,getFunctions } from '@angular/fire/functions';
2020
imports: [
2121
BrowserModule.withServerTransition({ appId: 'serverApp' }),
2222
AppRoutingModule,
23+
BrowserTransferStateModule,
2324
provideFirebaseApp(() => initializeApp(environment.firebase)),
2425
provideAnalytics(() => getAnalytics()),
2526
provideAuth(() => getAuth()),
2627
provideFirestore(() => getFirestore()),
27-
provideFunctions(() => getFunctions())
28+
provideFunctions(() => {
29+
const app = inject(FirebaseApp);
30+
const functions = getFunctions(app, "asia-east1");
31+
if (commonEnvironment.useEmulators) {
32+
connectFunctionsEmulator(functions, "127.0.0.1", commonEnvironment.emulators!.functions.port);
33+
}
34+
return functions;
35+
})
2836
],
2937
providers: [
3038
{

‎projects/experiences/src/app/app.server.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NgModule } from '@angular/core';
2-
import { ServerModule } from '@angular/platform-server';
2+
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
33

44
import { AppModule } from './app.module';
55
import { AppComponent } from './app.component';
@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
88
imports: [
99
AppModule,
1010
ServerModule,
11+
ServerTransferStateModule,
1112
],
1213
bootstrap: [AppComponent],
1314
})

‎projects/experiences/src/app/features/experiences/presentation/pages/experiences/experiences.page.html

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
<p>experiences works!</p>
22

3-
<ng-container *ngIf="isLoggedIn !== undefined else loading">
4-
<ng-container
5-
*ngTemplateOutlet="isLoggedIn ? user : loginForm">
3+
<ng-container [ngSwitch]="helloWorld">
4+
<ng-container *ngSwitchCase="undefined">
5+
<ng-container *ngTemplateOutlet="loading"></ng-container>
66
</ng-container>
7+
<p *ngSwitchDefault>response from the helloWorld cloud function: {{ helloWorld }}</p>
8+
</ng-container>
9+
10+
<ng-container [ngSwitch]="isLoggedIn">
11+
<ng-container *ngSwitchCase="undefined">
12+
<ng-container *ngTemplateOutlet="loading"></ng-container>
13+
</ng-container>
14+
<app-experiences-login-form *ngSwitchCase="false"></app-experiences-login-form>
15+
<app-experiences-user *ngSwitchCase="true"></app-experiences-user>
716
</ng-container>
817

918
<ng-template #loading>
1019
<span>Loading</span>
11-
</ng-template>
12-
13-
<ng-template #user>
14-
<app-experiences-user></app-experiences-user>
15-
</ng-template>
16-
17-
<ng-template #loginForm>
18-
<app-experiences-login-form></app-experiences-login-form>
1920
</ng-template>

‎projects/experiences/src/app/features/experiences/presentation/pages/experiences/experiences.page.ts

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { isPlatformServer } from '@angular/common';
22
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
33
import { Auth, onAuthStateChanged } from "@angular/fire/auth";
4+
import { Functions, httpsCallable } from '@angular/fire/functions';
5+
import { TransferState, makeStateKey } from '@angular/platform-browser';
6+
7+
const HELLO_WORLD = makeStateKey<string>("HELLO_WORLD");
48

59
@Component({
610
selector: 'app-experiences',
@@ -9,14 +13,25 @@ import { Auth, onAuthStateChanged } from "@angular/fire/auth";
913
})
1014
export class ExperiencesPage implements OnInit {
1115
isLoggedIn?: boolean;
16+
helloWorld?: string;
1217

1318
constructor(
14-
@Inject(PLATFORM_ID) platformId: Object,
15-
private auth: Auth
19+
@Inject(PLATFORM_ID) private platformId: Object,
20+
private auth: Auth,
21+
private functions: Functions,
22+
private transferState: TransferState,
1623
) {
17-
if (isPlatformServer(platformId)) { return; }
24+
this.initIsLoggedIn();
25+
this.fetchHelloWorld();
26+
}
27+
28+
ngOnInit(): void {
29+
}
30+
31+
private initIsLoggedIn() {
32+
if (isPlatformServer(this.platformId)) { return; }
1833

19-
onAuthStateChanged(auth, (user) => {
34+
onAuthStateChanged(this.auth, (user) => {
2035
if (user) {
2136
this.isLoggedIn = true;
2237
} else {
@@ -25,6 +40,15 @@ export class ExperiencesPage implements OnInit {
2540
});
2641
}
2742

28-
ngOnInit(): void {
43+
private async fetchHelloWorld() {
44+
if (this.transferState.hasKey(HELLO_WORLD)) {
45+
this.helloWorld = this.transferState.get(HELLO_WORLD, "");
46+
return;
47+
}
48+
49+
const callable = httpsCallable<undefined, string>(this.functions, "helloWorld");
50+
const { data } = await callable();
51+
this.helloWorld = data;
52+
this.transferState.set(HELLO_WORLD, data);
2953
}
3054
}

0 commit comments

Comments
 (0)