start home screen

apps/disney-planner/src/app/app.config.ts

@@ -2,10 +2,12 @@ import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
 import {IonicModule} from '@ionic/angular';
+import { provideStore } from '@ngrx/store';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes),
+    provideStore(),
     importProvidersFrom(
       IonicModule.forRoot()
     )

apps/disney-planner/src/app/app.routes.ts

@@ -1,4 +1,4 @@
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
 export const appRoutes: Routes = [
   {

apps/disney-planner/src/app/home/home.page.ts

@@ -1,6 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 import { ScheduleComponent } from './components/schedule/schedule.component';
+import { Store } from '@ngrx/store';
+import { fromUpcomingTripsActions, fromUpcomingTripsSelectors } from 'disney-planner-trips-ngrx';
+import { Subject, takeUntil } from 'rxjs';
+import { UpcomingTrip } from 'disney-planner-models';
 
 @Component({
   selector: 'disney-home',
@@ -11,13 +15,37 @@ import { ScheduleComponent } from './components/schedule/schedule.component';
       </ion-toolbar>
     </ion-header>
     <ion-content>
-      
+      @for (trip of trips(); track $index) {
+        <disney-schedule [title]="trip.park" [subtitle]="trip.date" [content]="'This is a mock trip'"></disney-schedule>
+      } @empty {
+        <article>You have no upcoming trips</article>
+      }
     </ion-content>
   `,
   standalone: true,
   imports: [IonicModule, ScheduleComponent],
   styles: ``
 })
-export class HomePage {
-
+export class HomePage implements OnInit, OnDestroy {
+  private _store = inject(Store);
+
+  trips = signal<UpcomingTrip[]>([]);
+
+  private _onDestroySub$ = new Subject<void>();
+
+  ngOnInit(): void {
+    this._store.dispatch(fromUpcomingTripsActions.loadUpcomingTrips());
+    this._store.select(fromUpcomingTripsSelectors.selectUpcomingTrips).pipe(
+      takeUntil(this._onDestroySub$)
+    ).subscribe(upcomingTrips => {
+      this.trips.set(upcomingTrips);      
+    }
+    )
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroySub$.next();
+    this._onDestroySub$.complete();
+  }
+
 }

apps/disney-planner/src/app/tabs/tabs.routes.ts

@@ -1,4 +1,7 @@
 import { Routes } from '@angular/router';
+import { provideEffects } from '@ngrx/effects';
+import { provideState } from '@ngrx/store';
+import { fromUpcomingTrips, fromUpcomingTripsEffects } from 'disney-planner-trips-ngrx';
 
 export const routes: Routes = [
   {
@@ -7,7 +10,11 @@ export const routes: Routes = [
     children: [
       {
         path: 'home',
-        loadComponent: () => import('../home/home.page').then(p => p.HomePage)
+        loadComponent: () => import('../home/home.page').then(p => p.HomePage),
+        providers: [
+          provideState(fromUpcomingTrips.upcomingTripsFeature),
+          provideEffects([fromUpcomingTripsEffects.UpcomingTripsEffects])
+        ]
       },
       {
         path: 'map',

libs/disney-planner-trips-ngrx/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/disney-planner-trips-ngrx/README.md

@@ -0,0 +1,7 @@
+# disney-planner-trips-ngrx
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test disney-planner-trips-ngrx` to execute the unit tests.

libs/disney-planner-trips-ngrx/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'disney-planner-trips-ngrx',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/libs/disney-planner-trips-ngrx',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/disney-planner-trips-ngrx/project.json

@@ -0,0 +1,27 @@
+{
+  "name": "disney-planner-trips-ngrx",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/disney-planner-trips-ngrx/src",
+  "prefix": "lib",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/disney-planner-trips-ngrx/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/disney-planner-trips-ngrx/**/*.ts",
+          "libs/disney-planner-trips-ngrx/**/*.html"
+        ]
+      }
+    }
+  }
+}

libs/disney-planner-trips-ngrx/src/index.ts

@@ -0,0 +1,4 @@
+export * as fromUpcomingTripsActions from './lib/disney-planner-trips-ngrx/trips.actions';
+export * as fromUpcomingTrips from './lib/disney-planner-trips-ngrx/trips.feature';
+export * as fromUpcomingTripsSelectors from './lib/disney-planner-trips-ngrx/trips.selectors';
+export * as fromUpcomingTripsEffects from './lib/disney-planner-trips-ngrx/trips.effects';

libs/disney-planner-trips-ngrx/src/lib/disney-planner-trips-ngrx/trips.actions.ts

@@ -0,0 +1,6 @@
+import { createAction } from '@ngrx/store';
+import { UpcomingTrip } from 'disney-planner-models';
+
+export const loadUpcomingTrips = createAction('[UpcomingTrips] Load UpcomingTrips');
+export const loadUpcomingTripsSuccess = createAction('[UpcomingTrips] Load UpcomingTrips Success', (trips: UpcomingTrip[]) => ({ trips }));
+export const loadUpcomingTripsFailure = createAction('[UpcomingTrips] Load UpcomingTrips Failure');

libs/disney-planner-trips-ngrx/src/lib/disney-planner-trips-ngrx/trips.effects.ts

@@ -0,0 +1,39 @@
+import { Injectable, inject } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { loadUpcomingTrips, loadUpcomingTripsSuccess } from './trips.actions';
+import { filter, switchMap, withLatestFrom } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { selectUpcomingTrips } from './trips.selectors';
+import { UpcomingTrip } from 'disney-planner-models';
+
+@Injectable()
+export class UpcomingTripsEffects {
+  private _actions$ = inject(Actions);
+  private _store = inject(Store);
+
+  loadUpcomingTrips$ = createEffect(
+    () => this._actions$.pipe(
+      ofType(loadUpcomingTrips),
+      withLatestFrom(this._store.select(selectUpcomingTrips)),
+      filter(([, trips]) => !trips.length),
+      switchMap(() => {
+        const mockTrips: UpcomingTrip[] = [
+          {
+            date: '2023-12-15',
+            park: 'magic'
+          },
+          {
+            date: '2023-12-16',
+            park: 'epcot'
+          },
+          {
+            date: '2023-12-17',
+            park: 'studios'
+          }
+        ];
+        return [loadUpcomingTripsSuccess(mockTrips)];
+      })
+
+    )
+  );
+}

libs/disney-planner-trips-ngrx/src/lib/disney-planner-trips-ngrx/trips.feature.ts

@@ -0,0 +1,24 @@
+import { createFeature, createReducer, on } from '@ngrx/store';
+import { UpcomingTrip } from 'disney-planner-models';
+import { loadUpcomingTripsSuccess } from './trips.actions';
+
+export interface UpcomingTripsState {
+  readonly trips: UpcomingTrip[];
+}
+
+const initialState: UpcomingTripsState = {
+  trips: []
+};
+
+export const TRIPS_STATE_KEY = 'upcomingTrips';
+
+export const upcomingTripsFeature = createFeature({
+  name: TRIPS_STATE_KEY,
+  reducer: createReducer(
+    initialState,
+    on(
+      loadUpcomingTripsSuccess,
+      (state, { trips }) => ({ ...state, trips })
+    )
+  )
+});

libs/disney-planner-trips-ngrx/src/lib/disney-planner-trips-ngrx/trips.selectors.ts

@@ -0,0 +1,11 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { TRIPS_STATE_KEY, UpcomingTripsState } from './trips.feature';
+import {
+ } from './trips.feature';
+
+export const selectUpcomingTripsState = createFeatureSelector<UpcomingTripsState>(TRIPS_STATE_KEY);
+
+export const selectUpcomingTrips = createSelector(
+  selectUpcomingTripsState,
+  (state: UpcomingTripsState) => state.trips
+);

libs/disney-planner-trips-ngrx/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

libs/disney-planner-trips-ngrx/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/disney-planner-trips-ngrx/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/disney-planner-trips-ngrx/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.base.json

@@ -33,7 +33,10 @@
       "@pmt/pmt-input": ["libs/pmt-input/src/index.ts"],
       "@pmt/pmt-mobile-toolbar": ["libs/pmt-mobile-toolbar/src/index.ts"],
       "@pmt/pmt-simple-form": ["libs/pmt-simple-form/src/index.ts"],
-      "disney-planner-models": ["libs/disney-planner-models/src/index.ts"]
+      "disney-planner-models": ["libs/disney-planner-models/src/index.ts"],
+      "disney-planner-trips-ngrx": [
+        "libs/disney-planner-trips-ngrx/src/index.ts"
+      ]
     }
   },
   "exclude": ["node_modules", "tmp"]