refactor: refactor app to a state before the main changes

angular.json

@@ -26,6 +26,7 @@
  "outputPath": "dist/movies/browser",
  "index": "projects/movies/src/index.original.html",
  "main": "projects/movies/src/main.ts",
+ "polyfills": "projects/movies/src/polyfills.ts",
  "tsConfig": "projects/movies/tsconfig.app.json",
  "inlineStyleLanguage": "scss",
  "namedChunks": true,

projects/movies/src/app/app-shell/account-menu/account-menu.component.ts

@@ -20,7 +20,7 @@ type Actions = {
  selector: 'account-menu',
  templateUrl: './account-menu.component.html',
  styleUrls: ['./account-menu.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ changeDetection: ChangeDetectionStrategy.Default,
  providers: [RxState, RxEffects],
 })
 export class AccountMenuComponent {

projects/movies/src/app/app-shell/app-shell.component.html

@@ -1,6 +1,5 @@
-<ng-container *rxLet="viewState$; let vs">
+<ng-container *ngIf="viewState$ | async as vs">
  <ui-side-drawer
- *rxLet="[]"
  [opened]="vs.sideDrawerOpen"
  (openedChange)="ui.sideDrawerOpenToggle(false)"
  >
@@ -16,7 +15,7 @@
  />
  </picture>
  </a>
- <nav class="navigation" *rxLet="[]">
+ <nav class="navigation">
  <h3 class="navigation--headline">Discover</h3>
  <a
  data-uf="menu-cat-popular"
@@ -54,7 +53,7 @@ <h3 class="navigation--headline">Discover</h3>
  <h3 class="navigation--headline">Genres</h3>
  <a
  [attr.data-uf]="'menu-gen-'+genre.id"
- *rxFor="let genre of genres$; trackBy: trackByGenre; strategy: 'idle'"
+ *ngFor="let genre of genres$ | async; trackBy: trackByGenre;"
  class="navigation--link"
  [routerLink]="['/list', 'genre', genre.id]"
  routerLinkActive="active"
@@ -86,7 +85,7 @@ <h3 class="navigation--headline">Genres</h3>
  </div>
  </ui-side-drawer>
  <div class="content-wrapper">
- <div *rxLet="[]" class="ui-toolbar">
+ <div class="ui-toolbar">
  <ui-hamburger-button
  data-uf="menu-btn"
  class="ui-toolbar--action"
@@ -115,7 +114,7 @@ <h3 class="navigation--headline">Genres</h3>
  </div>
  </div>
  </div>
- <div *rxLet="[]" class="content">
+ <div class="content">
  <ng-content></ng-content>
  </div>
  </div>

projects/movies/src/app/app-shell/app-shell.component.scss

@@ -146,7 +146,6 @@ ui-side-drawer {
 .content {
  min-height: calc(100vh - 72px);
  width: 100%;
- contain: layout;
 }
 
 :host {

projects/movies/src/app/app-shell/app-shell.component.ts

@@ -21,7 +21,7 @@ import { trackByProp } from '../shared/utils/track-by';
 import { RxActionFactory } from '../shared/rxa-custom/actions';
 import { RouterState } from '../shared/router/router.state';
 import { getIdentifierOfTypeAndLayout } from '../shared/state/utils';
-import { getGenresCached } from '../data-access/api/resources/genre.resource';
+import { GenreResource } from '../data-access/api/resources/genre.resource';
 import { RxEffects } from '@rx-angular/state/effects';
 
 type Actions = {
@@ -33,7 +33,7 @@ type Actions = {
  selector: 'app-shell',
  templateUrl: './app-shell.component.html',
  styleUrls: ['./app-shell.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
+ changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  providers: [RxState, RxEffects, RxActionFactory],
 })
@@ -59,7 +59,8 @@ export class AppShellComponent {
  public routerState: RouterState,
  @Inject(DOCUMENT) document: Document,
  private router: Router,
- private actionsF: RxActionFactory<Actions>
+ private actionsF: RxActionFactory<Actions>,
+ private genreResource: GenreResource
  ) {
  this.init();
  /**
@@ -87,7 +88,7 @@ export class AppShellComponent {
  );
  }
 
- readonly genres$ = getGenresCached();
+ readonly genres$ = this.genreResource.getGenresCached();
 
  readonly viewState$ = this.state.select();
 

projects/movies/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
+// import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
 
 @Component({
  selector: 'app-root',
  template: `
- <app-shell *rxLet="[]">
+ <app-shell>
  <router-outlet></router-outlet>
  </app-shell>
  `,
@@ -13,7 +13,7 @@ import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
  *
  * Use ChangeDetectionStrategy.OnPush in all components to reduce change detection & template re-evaluation
  */
- changeDetection: ChangeDetectionStrategy.OnPush,
+ changeDetection: ChangeDetectionStrategy.Default,
 })
 export class AppComponent {
  /**
@@ -28,8 +28,9 @@ export class AppComponent {
  this.zonelessRouting.init();
  }
  *
- */
+
  constructor(private zonelessRouting: ZonelessRouting) {
  this.zonelessRouting.init();
  }
+ */
 }

projects/movies/src/app/app.module.ts

@@ -5,8 +5,8 @@ import { AppComponent } from './app.component';
 import { AppShellModule } from './app-shell/app-shell.module';
 import { ROUTING_IMPORTS } from './app.routing';
 import { TMDB_HTTP_INTERCEPTORS_PROVIDER } from './shared/auth/tmdb-http-interceptor.providers';
-import { GLOBAL_STATE_APP_INITIALIZER_PROVIDER } from './state-app-initializer.provider';
-import { SCHEDULED_APP_INITIALIZER_PROVIDER } from './shared/app-initializer/chunk-app-initializer.provider';
+// import { GLOBAL_STATE_APP_INITIALIZER_PROVIDER } from './state-app-initializer.provider';
+// import { SCHEDULED_APP_INITIALIZER_PROVIDER } from './shared/app-initializer/chunk-app-initializer.provider';
 import { SERVICE_WORKER_IMPORTS } from './shared/pwa/service-worker.imports';
 import { RXA_PROVIDER } from './shared/rxa-custom/rxa.provider';
 import { LetModule } from '@rx-angular/template/let';
@@ -45,13 +45,13 @@ import { RxActionFactory } from './shared/rxa-custom/actions';
  *
  * Fetch data visible in viewport on app bootstrap instead of component initialization.
  */
- GLOBAL_STATE_APP_INITIALIZER_PROVIDER,
+ // GLOBAL_STATE_APP_INITIALIZER_PROVIDER,
  /**
  * **🚀 Perf Tip for TBT:**
  *
  * Chunk app bootstrap over APP_INITIALIZER.
  */
- SCHEDULED_APP_INITIALIZER_PROVIDER,
+ // SCHEDULED_APP_INITIALIZER_PROVIDER,
  /**
  * **🚀 Perf Tip for TBT, LCP, CLS:**
  *

projects/movies/src/app/app.routing.ts

@@ -85,7 +85,7 @@ export const ROUTING_IMPORTS = [
  *
  * Disable initial sync navigation in router config and schedule it in router-outlet container component
  */
- initialNavigation: 'disabled',
+ // initialNavigation: 'disabled',
  /**
  * **💡 UX Tip for InfiniteScroll:**
  *

projects/movies/src/app/data-access/api/resources/account.resource.ts

@@ -1,5 +1,4 @@
 import { getTMDBPaginateOptions } from '../paginate/utils';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
  TMDBPaginateOptions,
  TMDBPaginateResult,
@@ -9,6 +8,8 @@ import { TMDBAccountList } from '../model/list.model';
 import { baseUrlApiV4 } from './internal/base-urls.constant';
 import { getTMDBSortOptions } from '../sort/utils';
 import { TMDBDiscoverOptions } from './discover.resource';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
 const URL_ACCOUNT_LIST = (uid: string) =>
  [baseUrlApiV4, 'account', uid, 'lists'].join('/');
@@ -22,12 +23,19 @@ function getTMDBAcountListOptions(options: any): TMDBDiscoverOptions {
 }
 
 export type TMDBAccountListResponse = TMDBPaginateResult<TMDBAccountList>;
-export const getAccountList = (
- accountId: string,
- params: TMDBPaginateOptions = {} as TMDBPaginateOptions
-): Observable<TMDBAccountListResponse> => {
- params = getTMDBAcountListOptions(params);
- return getHTTP().get<TMDBAccountListResponse>(URL_ACCOUNT_LIST(accountId), {
- params,
- });
-};
+
+@Injectable({
+ providedIn: 'root',
+})
+export class AccountResource {
+ constructor(private http: HttpClient) {}
+ getAccountList = (
+ accountId: string,
+ params: TMDBPaginateOptions = {} as TMDBPaginateOptions
+ ): Observable<TMDBAccountListResponse> => {
+ params = getTMDBAcountListOptions(params);
+ return this.http.get<TMDBAccountListResponse>(URL_ACCOUNT_LIST(accountId), {
+ params,
+ });
+ };
+}

projects/movies/src/app/data-access/api/resources/authv3.resource.ts

@@ -1,14 +1,20 @@
 import { Observable } from 'rxjs';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import { GuestSession } from '../model/guest-session.interface';
 import { staticRequest } from '../staticRequest';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const baseUrl = [baseUrlApiV3, 'authentication'].join('/');
 const URL_GUEST_SESSION = [baseUrl, 'guest_session', 'new'].join('/');
 
-export const getGuestSession = (): Observable<GuestSession> => {
- return getHTTP().get<GuestSession>(URL_GUEST_SESSION);
-};
-
-export const getGuestSessionCached = staticRequest(getGuestSession);
+@Injectable({
+ providedIn: 'root',
+})
+export class GuestSessionResource {
+ constructor(private http: HttpClient) {}
+ getGuestSession = (): Observable<GuestSession> => {
+ return this.http.get<GuestSession>(URL_GUEST_SESSION);
+ };
+ getGuestSessionCached = staticRequest(this.getGuestSession);
+}

projects/movies/src/app/data-access/api/resources/authv4.resource.ts

@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 import { baseUrlApiV4 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type Token = {
  request_token: string;
@@ -12,16 +13,22 @@ const baseUrl = [baseUrlApiV4, 'auth'].join('/');
 const URL_REQUEST_TOKEN = [baseUrl, 'request_token'].join('/');
 const URL_ACCESS_TOKEN = [baseUrl, 'access_token'].join('/');
 
-export const createRequestToken = (redirectTo: string): Observable<Token> => {
- return getHTTP().post<any>(URL_REQUEST_TOKEN, {
- redirect_to: redirectTo,
- });
-};
+@Injectable({
+ providedIn: 'root',
+})
+export class Authv4Resource {
+ constructor(private http: HttpClient) {}
+
+ createRequestToken = (redirectTo: string): Observable<Token> =>
+ this.http.post<any>(URL_REQUEST_TOKEN, {
+ redirect_to: redirectTo,
+ });
 
-export const createAccessToken = (requestToken: string): Observable<Token> =>
- getHTTP().post<any>(URL_ACCESS_TOKEN, { request_token: requestToken });
+  createAccessToken = (requestToken: string): Observable<Token> =>
+  this.http.post<any>(URL_ACCESS_TOKEN, { request_token: requestToken });
 
-export const deleteAccessToken = (accessToken: string): Observable<Token> =>
- getHTTP().delete<any>(URL_ACCESS_TOKEN, {
- body: { access_token: accessToken },
- });
+ deleteAccessToken = (accessToken: string): Observable<Token> =>
+ this.http.delete<any>(URL_ACCESS_TOKEN, {
+ body: { access_token: accessToken },
+ });
+}

projects/movies/src/app/data-access/api/resources/configuration.resource.ts

@@ -1,9 +1,16 @@
 import { Observable } from 'rxjs';
 import { TMDBConfigurationModel } from '../model/configuration.model';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const URL_CONFIGURATION = [baseUrlApiV3, 'configuration'].join('/');
 
-export const getConfig = (): Observable<TMDBConfigurationModel> =>
- getHTTP().get<TMDBConfigurationModel>(URL_CONFIGURATION);
+@Injectable({
+ providedIn: 'root',
+})
+export class ConfigurationResource {
+ constructor(private http: HttpClient) {}
+ getConfig = (): Observable<TMDBConfigurationModel> =>
+ this.http.get<TMDBConfigurationModel>(URL_CONFIGURATION);
+}

projects/movies/src/app/data-access/api/resources/discover.resource.ts

@@ -1,14 +1,15 @@
 import { TMDBMovieModel } from '../model/movie.model';
 import { getTMDBPaginateOptions } from '../paginate/utils';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
  TMDBPaginateResult,
  TMDBPaginateOptions,
 } from '../paginate/paginate.interface';
 import { Observable } from 'rxjs';
 import { TMDBSortOptions } from '../sort/sort.interface';
 import { getTMDBSortOptions } from '../sort/utils';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const URL_DISCOVER_MOVIE = [baseUrlApiV3, 'discover', 'movie'].join('/');
 
@@ -32,13 +33,20 @@ function getTMDBDiscoverOptions(options: any): TMDBDiscoverOptions {
  return discoverOptions;
 }
 
-/**
- * This endpoint returns related movies for genres and cast actors
- * @param discoverOptions
- */
-export const getDiscoverMovies = (
- discoverOptions: TMDBDiscoverOptions = {} as TMDBDiscoverOptions
-): Observable<TMDBDiscoverResponse> =>
- getHTTP().get<TMDBDiscoverResponse>(URL_DISCOVER_MOVIE, {
- params: getTMDBDiscoverOptions(discoverOptions),
- });
+@Injectable({
+ providedIn: 'root',
+})
+export class DiscoverResource {
+ constructor(private http: HttpClient) {}
+
+ /**
+ * This endpoint returns related movies for genres and cast actors
+ * @param discoverOptions
+ */
+ getDiscoverMovies = (
+ discoverOptions: TMDBDiscoverOptions = {} as TMDBDiscoverOptions
+ ): Observable<TMDBDiscoverResponse> =>
+ this.http.get<TMDBDiscoverResponse>(URL_DISCOVER_MOVIE, {
+ params: getTMDBDiscoverOptions(discoverOptions),
+ });
+}