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),
+    });
+}