feat(calendar): reset selected date on create calendar

Anlanther · Oct 18, 2024 · 065de07 · 065de07
1 parent 6f5b5fd
commit 065de07
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/calendar-app/src/app/components/calendar/calendar.component.html b/calendar-app/src/app/components/calendar/calendar.component.html
@@ -1,6 +1,9 @@
 @if (activeCalendar$ | async; as activeCalendar) {
   @if (selectedYear$ | async; as selectedYear) {
-    <mat-tab-group (selectedTabChange)="onTabChange($event)">
+    <mat-tab-group
+      [selectedIndex]="selectedSeason"
+      (selectedTabChange)="onTabChange($event)"
+    >
       <mat-tab label="Spring">
         <ng-template matTabContent><app-grid></app-grid></ng-template>
       </mat-tab>

diff --git a/calendar-app/src/app/components/calendar/calendar.component.ts b/calendar-app/src/app/components/calendar/calendar.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { select, Store } from '@ngrx/store';
 import { map, Observable, Subscription } from 'rxjs';
@@ -13,7 +13,7 @@ import { AppFeature } from '../../state/app.state';
   templateUrl: './calendar.component.html',
   styleUrl: './calendar.component.scss',
 })
-export class CalendarComponent {
+export class CalendarComponent implements OnDestroy {
   get fall() {
     return Season.FALL;
   }
@@ -27,6 +27,8 @@ export class CalendarComponent {
     return Season.WINTER;
   }
 
+  selectedSeason = 0;
+
   store = inject(Store<AppStore>);
   subs = new Subscription();
 
@@ -41,6 +43,32 @@ export class CalendarComponent {
       select(AppFeature.selectSelectedDate),
       map((date) => date.year),
     );
+    this.subs.add(
+      this.store
+        .pipe(
+          select(AppFeature.selectSelectedDate),
+          map((date) => date.season),
+        )
+        .subscribe((season) => {
+          switch (season) {
+            case Season.SPRING:
+              this.selectedSeason = 0;
+              break;
+            case Season.SUMMER:
+              this.selectedSeason = 1;
+              break;
+            case Season.FALL:
+              this.selectedSeason = 2;
+              break;
+            case Season.WINTER:
+              this.selectedSeason = 3;
+              break;
+          }
+        }),
+    );
+  }
+  ngOnDestroy(): void {
+    this.subs.unsubscribe();
   }
 
   onTabChange(event: MatTabChangeEvent) {

diff --git a/calendar-app/src/app/state/app.effect.ts b/calendar-app/src/app/state/app.effect.ts
@@ -391,7 +391,6 @@ export class AppEffects {
         this.store.pipe(select(AppFeature.selectOfflineMode)),
       ]),
       switchMap(([{ downloadedCalendar }, availableCalendars, offlineMode]) => {
-        console.log('test', downloadedCalendar);
         let calendarName = downloadedCalendar.name;
         const duplicates = availableCalendars.filter((calendar) => {
           const test = new RegExp(downloadedCalendar.name, 'g').test(

diff --git a/calendar-app/src/app/state/app.reducer.ts b/calendar-app/src/app/state/app.reducer.ts
@@ -44,7 +44,7 @@ export const appReducer = createReducer<AppState>(
       ...state,
       activeCalendar: { ...action.calendar, filteredGameEvents },
       availableCalendars: [...state.availableCalendars, action.calendar],
-      selectedDate: { ...state.selectedDate, year: 1 },
+      selectedDate: initialState.selectedDate,
       navBarOpen: false,
     };
   }),