From 1f252a3d4b30d0cb145b961ed846b8681d480647 Mon Sep 17 00:00:00 2001 From: Natalia Venditto Date: Mon, 31 Jul 2023 16:41:36 +0200 Subject: [PATCH] feat(portal): use Angular Signals (#230) * feat(portal): migrate to signals (#223) * chore: merging to test in code spaces * fix: call discount signals in templates --------- Co-authored-by: Sumit Parakh Co-authored-by: Wassim Chegham --- .../portal/src/app/about/about.component.ts | 8 +--- .../checkoutpage/checkoutpage.component.html | 2 +- .../checkoutpage/checkoutpage.component.ts | 8 ++-- .../src/app/profile/profile.component.html | 18 ++++---- .../src/app/profile/profile.component.ts | 30 ++++++------ .../app/rentalpage/rentalpage.component.html | 46 +++++++++---------- .../app/rentalpage/rentalpage.component.ts | 21 +++++---- .../app/searchpage/searchpage.component.html | 4 +- .../app/searchpage/searchpage.component.ts | 20 ++++---- .../booking-form/booking-form.component.html | 36 +++++++-------- .../booking-form/booking-form.component.ts | 42 ++++++++--------- .../src/app/shared/card/card.component.html | 4 +- .../src/app/shared/card/card.component.ts | 12 +++-- .../errors/not-found/not-found.component.ts | 11 +---- .../favorite-button.component.html | 4 +- .../favorite-button.component.ts | 8 ++-- .../shared/main-nav/main-nav.component.html | 4 +- .../app/shared/main-nav/main-nav.component.ts | 8 ++-- .../shared/text-block/text-block.component.ts | 8 +--- packages/portal/src/types/index.d.ts | 2 + 20 files changed, 141 insertions(+), 155 deletions(-) diff --git a/packages/portal/src/app/about/about.component.ts b/packages/portal/src/app/about/about.component.ts index 4da30890..552100c7 100644 --- a/packages/portal/src/app/about/about.component.ts +++ b/packages/portal/src/app/about/about.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { TextBlockComponent } from "../shared/text-block/text-block.component"; @Component({ @@ -8,10 +8,6 @@ import { TextBlockComponent } from "../shared/text-block/text-block.component"; standalone: true, imports: [TextBlockComponent], }) -export class AboutComponent implements OnInit { +export class AboutComponent { title = "About"; - - constructor() {} - - ngOnInit(): void {} } diff --git a/packages/portal/src/app/checkoutpage/checkoutpage.component.html b/packages/portal/src/app/checkoutpage/checkoutpage.component.html index 93270de0..d7141021 100644 --- a/packages/portal/src/app/checkoutpage/checkoutpage.component.html +++ b/packages/portal/src/app/checkoutpage/checkoutpage.component.html @@ -1,4 +1,4 @@ -
+

Thank you for your booking!

diff --git a/packages/portal/src/app/checkoutpage/checkoutpage.component.ts b/packages/portal/src/app/checkoutpage/checkoutpage.component.ts index 1c9fe477..e92455bd 100644 --- a/packages/portal/src/app/checkoutpage/checkoutpage.component.ts +++ b/packages/portal/src/app/checkoutpage/checkoutpage.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, OnInit, inject } from '@angular/core'; +import { Component, OnInit, inject, signal } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { ActivatedRoute, RouterModule } from '@angular/router'; import { ReservationService } from '../shared/reservation.service'; @@ -12,16 +12,16 @@ import { ReservationService } from '../shared/reservation.service'; imports: [RouterModule, CommonModule, MatButtonModule], }) export class CheckoutpageComponent implements OnInit { - result = 'error'; + result = signal('error'); private route = inject(ActivatedRoute); private reservationService = inject(ReservationService); ngOnInit(): void { - this.result = this.route.snapshot.queryParams['result']; + this.result.set(this.route.snapshot.queryParams['result']); const reservationId = this.route.snapshot.queryParams['reservationId']; - if (reservationId && this.result === 'cancel') { + if (reservationId && this.result() === 'cancel') { this.reservationService.cancelReservation(reservationId); } } diff --git a/packages/portal/src/app/profile/profile.component.html b/packages/portal/src/app/profile/profile.component.html index a84b70c1..d40a4e84 100644 --- a/packages/portal/src/app/profile/profile.component.html +++ b/packages/portal/src/app/profile/profile.component.html @@ -5,28 +5,28 @@

My Profile

- +
-

+

You have no saved listings. Browse listings

@@ -60,8 +60,8 @@

My Profile

- No payments found. - + No payments found. +
{{ showAmount(payment.amount) }} {{ payment.currency }} (via {{ payment.provider }}) {{ payment.status }} @@ -79,8 +79,8 @@

My Profile

- No reservations found. - + No reservations found. +
{{ reservation.title }} ({{ reservation.guests }} diff --git a/packages/portal/src/app/profile/profile.component.ts b/packages/portal/src/app/profile/profile.component.ts index ebed8776..ad4c9491 100644 --- a/packages/portal/src/app/profile/profile.component.ts +++ b/packages/portal/src/app/profile/profile.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, OnInit, inject } from "@angular/core"; +import { Component, OnInit, inject, signal } from "@angular/core"; import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; import { MatIconModule } from "@angular/material/icon"; @@ -20,11 +20,11 @@ import { UserService } from "../shared/user/user.service"; imports: [CommonModule, RouterModule, MatCardModule, MatListModule, MatIconModule, MatButtonModule, MatTabsModule], }) export class ProfileComponent implements OnInit { - user: User = {} as User; - listings: Listing[] = []; - reservations: Reservation[] = []; - payments: Payment[] = []; - selectedTabIndex = 0; + user = signal({} as User); + listings = signal([]); + reservations = signal([]); + payments = signal([]); + selectedTabIndex = signal(0); private route = inject(ActivatedRoute); private userService = inject(UserService); @@ -36,13 +36,13 @@ export class ProfileComponent implements OnInit { constructor() { this.userService.user$.subscribe(user => { - this.user = user; + this.user.set(user); }); } async ngOnInit() { this.route.data.subscribe(async data => { - this.user = data["user"]; + this.user.set(data["user"]); await this.listFavorites(); await this.listReservations(); await this.listPayments(); @@ -52,32 +52,32 @@ export class ProfileComponent implements OnInit { this.route.paramMap.subscribe(async params => { const tab = params.get("tab"); - this.selectedTabIndex = tabs.indexOf(tab || "favorites"); + this.selectedTabIndex.set(tabs.indexOf(tab || "favorites")); }); } async listFavorites() { // this call allows us to get the count of favorites - this.listings = await this.favoriteService.countFavoritesByUser(this.user); + this.listings.set(await this.favoriteService.countFavoritesByUser(this.user())); // this call allows us to get the actual listings - this.listings = await this.favoriteService.getFavoritesByUser(this.user); + this.listings.set(await this.favoriteService.getFavoritesByUser(this.user())); } async removeFavorite(listing: Listing) { // remove the listing from the UI - this.listings = this.listings.filter(l => l.id !== listing.id); + this.listings.update(listings => listings.filter(l => l.id !== listing.id)); // remove the favorite from the database - await this.favoriteService.removeFavorite(listing, this.user); + await this.favoriteService.removeFavorite(listing, this.user()); } async listReservations() { - this.reservations = await this.reservationService.getReservationsByUser(this.user); + this.reservations.set(await this.reservationService.getReservationsByUser(this.user())); } async listPayments() { - this.payments = await this.paymentService.getPaymentsByUser(this.user); + this.payments.set(await this.paymentService.getPaymentsByUser(this.user())); } async viewListing(listingId: string) { diff --git a/packages/portal/src/app/rentalpage/rentalpage.component.html b/packages/portal/src/app/rentalpage/rentalpage.component.html index 8b4492f7..f96b5bd2 100644 --- a/packages/portal/src/app/rentalpage/rentalpage.component.html +++ b/packages/portal/src/app/rentalpage/rentalpage.component.html @@ -2,38 +2,38 @@
-
+
-
{{ listing.reviews_number | i18nPlural : reviewsMapping }}
+
{{ listing().reviews_number | i18nPlural : reviewsMapping }}
@@ -42,7 +42,7 @@
-
-

{{ listing.title }}

+
+

{{ listing().title }}

- {{ listing.address[0] }}, {{ listing.address[1] }}, {{ listing.address[2] }}, - {{ listing.address[3] }} + {{ listing().address[0] }}, {{ listing().address[1] }}, {{ listing().address[2] }}, + {{ listing().address[3] }}

-
+

- {{ listing.description }} + {{ listing().description }}

-
+

Features

    -
  • +
  • {{ feature.split("|")[0] }} @@ -77,6 +77,6 @@

    Features

-
- +
+
diff --git a/packages/portal/src/app/rentalpage/rentalpage.component.ts b/packages/portal/src/app/rentalpage/rentalpage.component.ts index 5c424782..32e6628e 100644 --- a/packages/portal/src/app/rentalpage/rentalpage.component.ts +++ b/packages/portal/src/app/rentalpage/rentalpage.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, OnInit, inject } from "@angular/core"; +import { Component, OnInit, inject, signal } from "@angular/core"; import { ActivatedRoute, Navigation, Router } from "@angular/router"; import { BookingFormComponent } from "../shared/booking-form/booking-form.component"; import { FavoriteButtonComponent } from "../shared/favorite-button/favorite-button/favorite-button.component"; @@ -17,13 +17,14 @@ import { UserRole, UserService } from "../shared/user/user.service"; }) export class RentalpageComponent implements OnInit { userRole: typeof UserRole = UserRole; - listing: Listing; user: User; navigation: Navigation | null; - reviewStars: number[] = []; - isLoading = true; reviewsMapping: { [k: string]: string } = { "=0": "No reviews", "=1": "1 message", other: "# reviews" }; + listing = signal({} as Listing); + reviewStars = signal([]); + isLoading = signal(true); + private router = inject(Router); private route = inject(ActivatedRoute); private listingService = inject(ListingService); @@ -31,7 +32,7 @@ export class RentalpageComponent implements OnInit { constructor() { this.navigation = this.router.getCurrentNavigation(); - this.listing = this.navigation?.extras.state?.["listing"] || null; + this.listing.set(this.navigation?.extras.state?.["listing"] || {}); this.user = this.navigation?.extras.state?.["user"] || null; } @@ -45,19 +46,19 @@ export class RentalpageComponent implements OnInit { const listing = await this.listingService.getListingById(this.route.snapshot.params["id"]); if (listing !== undefined) { - this.listing = listing; - this.isLoading = false; + this.listing.set(listing); + this.isLoading.set(false); } else { this.router.navigate(["/404"]); } - this.reviewStars = Array(5) + this.reviewStars.set(Array(5) .fill(0) - .map((x, i) => (i < this.listing?.reviews_stars ? 1 : 0)); + .map((x, i) => (i < this.listing().reviews_stars ? 1 : 0))); } async share() { - await this.listingService.share(this.listing); + await this.listingService.share(this.listing()); } async onRent(reservationDetails: ReservationRequest) { diff --git a/packages/portal/src/app/searchpage/searchpage.component.html b/packages/portal/src/app/searchpage/searchpage.component.html index 41e32b4a..9d5a7adb 100644 --- a/packages/portal/src/app/searchpage/searchpage.component.html +++ b/packages/portal/src/app/searchpage/searchpage.component.html @@ -12,9 +12,9 @@
- +
-
+

{{ searchTermInvalidMessage }}

diff --git a/packages/portal/src/app/searchpage/searchpage.component.ts b/packages/portal/src/app/searchpage/searchpage.component.ts index 9a281fe8..7fbf4a54 100644 --- a/packages/portal/src/app/searchpage/searchpage.component.ts +++ b/packages/portal/src/app/searchpage/searchpage.component.ts @@ -1,12 +1,11 @@ -import { Component, OnInit, inject } from '@angular/core'; +import { Component, OnInit, inject, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CardListComponent } from '../shared/card-list/card-list.component'; import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from '@angular/material/icon'; import { MatFormFieldModule } from "@angular/material/form-field"; import { MatInputModule } from "@angular/material/input"; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms'; import { SearchService } from '../shared/search/search.service'; @@ -20,12 +19,13 @@ import { SearchService } from '../shared/search/search.service'; export class SearchpageComponent implements OnInit { searchForm!: FormGroup; isLoading = false; - listings: Listing[] = []; noresults = false; noresultsMessage = "The search returned 0 results. Please, try again..."; - seatrchTermInvalid = false; searchTermInvalidMessage = "The search term must be at least 4 characters long. Please, try again..."; + listings = signal([]); + seatrchTermInvalid = signal(false); + private searchService = inject(SearchService); async ngOnInit(): Promise { @@ -40,21 +40,21 @@ export class SearchpageComponent implements OnInit { onSubmit(): void { this.noresults = false; - this.seatrchTermInvalid = false; + this.seatrchTermInvalid.set(false); if (this.searchForm.value.term === "" || this.searchForm.invalid) { - this.seatrchTermInvalid = true; + this.seatrchTermInvalid.set(true); return; } this.searchService.getResults(this.searchForm.value.term) .subscribe((data) => { const results: SearchResult = data.data; const listingsResults: CleanResults = results.listings; - this.listings = listingsResults.data; - if (this.listings.length === 0 && this.searchForm.get('term')?.dirty) { + this.listings.set(listingsResults.data); + if (this.listings().length === 0 && this.searchForm.get('term')?.dirty) { this.noresults = true; } this.searchForm.reset(); - }); + }); } ngOnDestroy(): void { diff --git a/packages/portal/src/app/shared/booking-form/booking-form.component.html b/packages/portal/src/app/shared/booking-form/booking-form.component.html index ed10acf7..208e763a 100644 --- a/packages/portal/src/app/shared/booking-form/booking-form.component.html +++ b/packages/portal/src/app/shared/booking-form/booking-form.component.html @@ -1,20 +1,20 @@
{{ monthlyRentPriceWithDiscount | currency: currency_symbol }}{{ monthlyRentPriceWithDiscount() | currency: currency_symbol() }}/month - {{ monthlyRentPrice | currency: currency_symbol }}{{ monthlyRentPrice() | currency: currency_symbol() }}/month
- {{ discount }}% OFF + {{ discount() }}% OFF
-
+
Enter renting period @@ -29,48 +29,48 @@ Number of Guests - {{ num | i18nPlural : capacityMapping }} + {{ num | i18nPlural : capacityMapping }} - Max. {{ capacity.length }} guests are allowed + Max. {{ capacity().length }} guests are allowed
-
+
- + - - - + + + - + - + - +
{{ months() | i18nPlural: monthsMapping }}{{ monthlyRentPriceWithDiscount * months() | currency: currency_symbol }}{{ monthlyRentPriceWithDiscount() * months() | currency: currency_symbol() }}
Number of guests {{ +guests.value }}
Discount {{ discount }}%-{{ monthlyRentPrice - monthlyRentPriceWithDiscount | currency: currency_symbol }}
Discount {{ discount() }}%-{{ monthlyRentPrice() - monthlyRentPriceWithDiscount() | currency: currency_symbol() }}
Cleaning fee{{ this.listing?.fees?.[0] | currency: currency_symbol }}{{ this.listing?.fees?.[0] | currency: currency_symbol() }}
Service fee{{ this.listing?.fees?.[1] | currency: currency_symbol }}{{ this.listing?.fees?.[1] | currency: currency_symbol() }}
Occupancy taxes and fees{{ this.listing?.fees?.[2] | currency: currency_symbol }}{{ this.listing?.fees?.[2] | currency: currency_symbol() }}
Total payment - {{ total() | currency: currency_symbol }} + {{ total() | currency: currency_symbol() }}
-
- +
+ Your credit card will be charged once the reservation is approved. Terms of service diff --git a/packages/portal/src/app/shared/booking-form/booking-form.component.ts b/packages/portal/src/app/shared/booking-form/booking-form.component.ts index bb66e876..eebe315a 100644 --- a/packages/portal/src/app/shared/booking-form/booking-form.component.ts +++ b/packages/portal/src/app/shared/booking-form/booking-form.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, EventEmitter, Input, OnInit, Output, inject } from "@angular/core"; +import { Component, EventEmitter, Input, OnInit, Output, inject, signal } from "@angular/core"; import { AbstractControl, FormControl, FormGroup, ReactiveFormsModule, ValidationErrors, ValidatorFn } from "@angular/forms"; import { MatButtonModule } from "@angular/material/button"; import { MatNativeDateModule } from "@angular/material/core"; @@ -35,29 +35,27 @@ export class BookingFormComponent implements OnInit { @Output() onRent: EventEmitter; userRole: typeof UserRole = UserRole; - - monthlyRentPrice = 0; - monthlyRentPriceWithDiscount = 0; - discount = 0; - - capacity: number[] = []; - bookingForm: FormGroup; rentingPeriod: FormGroup; guests: FormControl; currency_code = "USD"; - currency_symbol= "$"; capacityMapping: { [k: string]: string } = { "=1": "One guest", other: "# guests" }; monthsMapping: { [k: string]: string } = { "=0": "0 month", "=1": "1 month", other: "# months" }; - isGuest = false; + + isGuest = signal(false); + monthlyRentPrice = signal(0); + monthlyRentPriceWithDiscount = signal(0); + discount = signal(0); + capacity = signal([]); + currency_symbol = signal("$"); private authService = inject(AuthService); private userService = inject(UserService); constructor() { - this.isGuest = this.authService.hasRole([UserRole.Guest]); + this.isGuest.set(this.authService.hasRole([UserRole.Guest])); const differentThanStartDateValidator = (): ValidatorFn => { return (control: AbstractControl): ValidationErrors | null => { @@ -92,23 +90,21 @@ export class BookingFormComponent implements OnInit { return; } - this.monthlyRentPrice = Number(this.listing?.fees?.[4]) || 0; - this.monthlyRentPriceWithDiscount = Math.max( - 0, - this.monthlyRentPrice * (1 - (parseInt(this.listing?.fees?.[4], 10) || 0) / 100), - ); - this.currency_code = this.listing?.fees?.[5].substring(0,3); - this.currency_symbol = this.listing?.fees?.[5].substring(4); - this.discount = Number(this.listing?.fees?.[4]) || 0; - this.capacity = Array(this.listing?.capacity) + const rentPriceWithDiscount = this.monthlyRentPrice() * (1 - (parseInt(this.listing?.fees?.[4], 10) || 0) / 100); + this.monthlyRentPrice.set(Number(this.listing?.fees?.[4]) || 0); + this.monthlyRentPriceWithDiscount.set(Math.max(0, rentPriceWithDiscount)); + this.currency_code = this.listing?.fees?.[5].substring(0, 3); + this.currency_symbol.set(this.listing?.fees?.[5].substring(4)); + this.discount.set(Number(this.listing?.fees?.[4]) || 0); + this.capacity.set(Array(this.listing?.capacity) .fill(0) - .map((x, i) => i + 1); + .map((x, i) => i + 1)); } total() { const months = this.months(); return ( - months * this.monthlyRentPriceWithDiscount + + months * this.monthlyRentPriceWithDiscount() + (Number(this.listing?.fees?.[0]) || 0) + (Number(this.listing?.fees?.[1]) || 0) + (Number(this.listing?.fees?.[2]) || 0) @@ -125,7 +121,7 @@ export class BookingFormComponent implements OnInit { } async rent() { - if (!this.isGuest) { + if (!this.isGuest()) { const user = await this.userService.currentUser(); this.onRent.emit({ userId: user.id, diff --git a/packages/portal/src/app/shared/card/card.component.html b/packages/portal/src/app/shared/card/card.component.html index 6474380f..ab0aaf41 100644 --- a/packages/portal/src/app/shared/card/card.component.html +++ b/packages/portal/src/app/shared/card/card.component.html @@ -15,11 +15,11 @@ {{ listing?.address?.[1] }}, {{ listing?.address?.[2] }}

{{ listing?.description?.substr(0, 100) }}...

- +
-

{{ this.monthlyRentPriceWithDiscount | currency: listing?.fees?.[5]?.substring(4) }}/month

+

{{ monthlyRentPriceWithDiscount() | currency: listing?.fees?.[5]?.substring(4) }}/month

{{ listing?.bedrooms | i18nPlural : bedroomsMapping }}, {{ listing?.bathrooms | i18nPlural : bathroomsMapping }} diff --git a/packages/portal/src/app/shared/card/card.component.ts b/packages/portal/src/app/shared/card/card.component.ts index 24b76291..2323117b 100644 --- a/packages/portal/src/app/shared/card/card.component.ts +++ b/packages/portal/src/app/shared/card/card.component.ts @@ -1,5 +1,5 @@ import { CommonModule, NgOptimizedImage } from "@angular/common"; -import { Component, Input, OnChanges, Renderer2, inject } from "@angular/core"; +import { Component, Input, OnChanges, Renderer2, inject, signal } from "@angular/core"; import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; import { RouterModule } from "@angular/router"; @@ -18,8 +18,10 @@ export class CardComponent implements OnChanges { @Input() listing!: Listing | null; @Input() user!: User | null; userRole: typeof UserRole = UserRole; - monthlyRentPriceWithDiscount = 0; - isOperationLoading = true; + + monthlyRentPriceWithDiscount = signal(0); + isOperationLoading = signal(true); + bedroomsMapping: { [k: string]: string } = { "=1": "1 bedroom", other: "# bedrooms" }; bathroomsMapping: { [k: string]: string } = { "=1": "1 bathroom", other: "# bathrooms" }; @@ -47,13 +49,13 @@ export class CardComponent implements OnChanges { } if (this.listing && this.listing.fees && this.listing.fees.length != 0) { const discount = parseInt(this.listing.fees[3], 10) * (1 - parseInt(this.listing.fees[4], 10) / 100); - this.monthlyRentPriceWithDiscount = Math.max(0, discount); + this.monthlyRentPriceWithDiscount.set(Math.max(0, discount)); } } onImageLoad(event: Event) { const target = (event.target as HTMLImageElement).closest(".loading-background") as HTMLDivElement; this.renderer.removeClass(target, "loading-background"); - this.isOperationLoading = false; + this.isOperationLoading.set(false); } } diff --git a/packages/portal/src/app/shared/errors/not-found/not-found.component.ts b/packages/portal/src/app/shared/errors/not-found/not-found.component.ts index 8af2b963..873e05e5 100644 --- a/packages/portal/src/app/shared/errors/not-found/not-found.component.ts +++ b/packages/portal/src/app/shared/errors/not-found/not-found.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; @Component({ @@ -8,11 +8,4 @@ import { MatCardModule } from '@angular/material/card'; imports: [MatCardModule], standalone: true, }) -export class NotFoundComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} +export class NotFoundComponent {} diff --git a/packages/portal/src/app/shared/favorite-button/favorite-button/favorite-button.component.html b/packages/portal/src/app/shared/favorite-button/favorite-button/favorite-button.component.html index 88a77896..bc3a32fb 100644 --- a/packages/portal/src/app/shared/favorite-button/favorite-button/favorite-button.component.html +++ b/packages/portal/src/app/shared/favorite-button/favorite-button/favorite-button.component.html @@ -1,5 +1,5 @@ diff --git a/packages/portal/src/app/shared/main-nav/main-nav.component.ts b/packages/portal/src/app/shared/main-nav/main-nav.component.ts index fc1ecb5a..b298b887 100644 --- a/packages/portal/src/app/shared/main-nav/main-nav.component.ts +++ b/packages/portal/src/app/shared/main-nav/main-nav.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, inject } from "@angular/core"; +import { Component, inject, signal } from "@angular/core"; import { MatButtonModule } from "@angular/material/button"; import { MatMenuModule } from "@angular/material/menu"; import { RouterModule } from "@angular/router"; @@ -21,17 +21,17 @@ export class MainNavComponent { { name: "Reservations", route: "/me/reservations" }, ]; - user: User | null = null; + user = signal(null); private userService = inject(UserService); ngOnInit() { this.userService.user$.subscribe(user => { - this.user = user; + this.user.set(user); }); } isAuthenticated() { - return this.user?.role === UserRole.Renter || this.user?.role === UserRole.Admin; + return this.user()?.role === UserRole.Renter || this.user()?.role === UserRole.Admin; } } diff --git a/packages/portal/src/app/shared/text-block/text-block.component.ts b/packages/portal/src/app/shared/text-block/text-block.component.ts index bbf0e9b5..ec87461d 100644 --- a/packages/portal/src/app/shared/text-block/text-block.component.ts +++ b/packages/portal/src/app/shared/text-block/text-block.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, Input, OnInit } from "@angular/core"; +import { Component, Input } from "@angular/core"; @Component({ selector: "app-text-block", @@ -8,10 +8,6 @@ import { Component, Input, OnInit } from "@angular/core"; standalone: true, imports: [CommonModule], }) -export class TextBlockComponent implements OnInit { +export class TextBlockComponent { @Input() title = ""; - - constructor() {} - - ngOnInit(): void {} } diff --git a/packages/portal/src/types/index.d.ts b/packages/portal/src/types/index.d.ts index a37f8407..cef674ff 100644 --- a/packages/portal/src/types/index.d.ts +++ b/packages/portal/src/types/index.d.ts @@ -128,6 +128,8 @@ declare interface CheckoutSession { sessionUrl: string; } +declare type CheckoutResult = 'error' | 'success' | 'cancel'; + declare interface SearchResult { listings: CleanResults; }