Home

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/components/schedule/schedule.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'disney-schedule',
+  standalone: true,
+  imports: [IonicModule],
+  template: `
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>{{title}}</ion-card-title>
+        @if (subtitle) {
+          <ion-card-subtitle>{{subtitle}}</ion-card-subtitle>
+        }        
+      </ion-card-header>
+      <ion-card-content>
+        {{content}}
+      </ion-card-content>
+    </ion-card>
+  `,
+  styles: ``,
+})
+export class ScheduleComponent {
+  @Input({required: true})
+  title!: string;
+
+  @Input({required: true})
+  content!: string;
+
+  @Input()
+  subtitle?: string;
+}

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

@@ -1,13 +1,51 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+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',
   template: `
-    <div>Home Page</div>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home</ion-title>
+      </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: [CommonModule],
+  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-models/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/disney-planner-models/README.md

@@ -0,0 +1,7 @@
+# disney-planner-models
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build disney-planner-models` to build the library.

libs/disney-planner-models/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "disney-planner-models",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/disney-planner-models/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "disney-planner-models",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/disney-planner-models/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/disney-planner-models",
+        "main": "libs/disney-planner-models/src/index.ts",
+        "tsConfig": "libs/disney-planner-models/tsconfig.lib.json",
+        "assets": ["libs/disney-planner-models/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/disney-planner-models/**/*.ts",
+          "libs/disney-planner-models/package.json"
+        ]
+      }
+    }
+  },
+  "tags": []
+}

libs/disney-planner-models/src/index.ts

@@ -0,0 +1,4 @@
+export {
+  DisneyPark,
+  UpcomingTrip
+} from './lib/upcoming-trips';

libs/disney-planner-models/src/lib/upcoming-trips.ts

@@ -0,0 +1,13 @@
+const DISNEY_PARK_MAP = {  
+  epcot: 'Epcot',
+  studios: 'Hollywood Studios',
+  animal: 'Animal Kingdom',
+  magic: 'Magic Kingdom',
+}
+
+export type DisneyPark = keyof typeof DISNEY_PARK_MAP;
+
+export interface UpcomingTrip {
+  date: string;
+  park: DisneyPark;
+}

libs/disney-planner-models/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/disney-planner-models/tsconfig.lib.json

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

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');