fix: calendar crash when revisiting page (#455)

* fix: Duplicate events * fix: Crash when revisiting * style: format * style: lint
Verseghy · May 1, 2019 · 26cd509 · 26cd509
1 parent e67b4dc
commit 26cd509
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 deletions.
diff --git a/apps/frontend/src/app/modules/events/components/events/events.component.ts b/apps/frontend/src/app/modules/events/components/events/events.component.ts
@@ -3,7 +3,7 @@ import { Event, Settings } from '@verseghy/calendar'
 import { EVENTS_FEATURE_KEY, EventsState } from '../../reducer/events.reducer'
 import { select, Store } from '@ngrx/store'
 import { MonthChange } from '../../reducer/events.actions'
-import { map } from 'rxjs/operators'
+import { map, delay } from 'rxjs/operators'
 import { Observable } from 'rxjs'
 
 @Component({

diff --git a/libs/calendar/src/lib/calendar.component.ts b/libs/calendar/src/lib/calendar.component.ts
@@ -34,6 +34,7 @@ export class CalendarComponent implements OnInit, AfterViewInit {
   private _displayedEvents: DisplayedEvent[] = []
   private _settings: Settings
   private _renderer = new Renderer()
+  private _ready = false
 
   public moreEventsPopupVisible = false
   public moreEventsPopupTop: number
@@ -66,6 +67,8 @@ export class CalendarComponent implements OnInit, AfterViewInit {
       this._renderer.HostElementRef = this._el
       this._renderer.settings = this.settings
       this._changeMonth()
+      this._ready = true
+      this._cells = this._renderer.renderEvents()
     })
   }
 
@@ -103,7 +106,6 @@ export class CalendarComponent implements OnInit, AfterViewInit {
 
   private _changeMonth(): void {
     this._renderer.changeMonth(this._date)
-    this._cells = this._renderer.getCells()
     this.monthChanged.emit({
       year: this.date.getFullYear(),
       month: this.date.getMonth(),
@@ -149,18 +151,32 @@ export class CalendarComponent implements OnInit, AfterViewInit {
     this.date = new Date()
   }
 
-  public setEvents(events: Array<Event>) {
-    this._events = events
-    this._sortEventsArray()
-    this._generateEvents()
+  private _isArrayContainsId(array: Event[], id: Number): boolean {
+    for (const item of array) {
+      if (item.id === id) {
+        return true
+      }
+    }
+    return false
   }
 
   @Input('events') public set events(events: Event[]) {
+    if (!events) return
     if (events.length) {
-      this._events = events
+      let tempEvents = []
+      for (const event of events) {
+        if (!!tempEvents.length) {
+          if (!this._isArrayContainsId(tempEvents, event.id)) {
+            tempEvents = [...tempEvents, event]
+          }
+        } else {
+          tempEvents = [...tempEvents, event]
+        }
+      }
+      this._events = tempEvents
       this._sortEventsArray()
       this._generateEvents()
-      this._renderer.renderEvents()
+      if (this._ready) this._cells = this._renderer.renderEvents()
     }
   }
 
@@ -351,7 +367,8 @@ export class CalendarComponent implements OnInit, AfterViewInit {
     })
   }
 
-  @HostListener('document:click', ['$event']) clickout(event) {
+  @HostListener('document:click', ['$event'])
+  clickout(event) {
     let eventDetails = false
     let moreEvents = false
     for (let i = 0; i < event.path.length; i++) {

diff --git a/libs/calendar/src/lib/lib/event.ts b/libs/calendar/src/lib/lib/event.ts
@@ -1,45 +1,33 @@
 export class Event {
-  constructor(id: number, title: string, description: string = '', startDate: Date, endDate: Date = startDate, color: string = '#3f51b5') {
-    this._id = id
-    this._title = title
-    this._description = description
-    this._startDate = startDate
-    this._endDate = endDate
-    this._color = color
-  }
-
-  private _id: number
+  constructor(
+    private _id: number,
+    private _title: string,
+    private _description: string = '',
+    private _startDate: Date,
+    private _endDate: Date = _startDate,
+    private _color: string = '#3f51b5'
+  ) {}
 
   get id() {
     return this._id
   }
 
-  private _title: string
-
   get title() {
     return this._title
   }
 
-  private _description?: string
-
   get description() {
     return this._description
   }
 
-  private _startDate: Date
-
   get startDate() {
     return this._startDate
   }
 
-  private _endDate?: Date
-
   get endDate() {
     return this._endDate
   }
 
-  private _color?: string
-
   get color() {
     return this._color
   }

diff --git a/libs/calendar/src/lib/lib/renderer.ts b/libs/calendar/src/lib/lib/renderer.ts
@@ -28,7 +28,8 @@ export class Renderer {
   private _settings: Settings
   public HostElementRef: ElementRef
 
-  public renderEvents(): void {
+  public renderEvents(): Cell[] {
+    this._generateCells()
     const firstCellDate = this._getFirstCellDate()
     for (const i of Object.keys(this._events)) {
       const item = this._events[i]
@@ -73,6 +74,7 @@ export class Renderer {
         }
       }
     }
+    return this._cells
   }
 
   public changeMonth(date: Date): void {
@@ -84,19 +86,14 @@ export class Renderer {
     this._events = events
   }
 
-  public getCells(): Cell[] {
-    return this._cells
-  }
-
-  private _generateCells(): Cell[] {
+  private _generateCells(): void {
     this._clearCells()
     const rows = this._getRowsInMonth()
     const firstCellDate = this._getFirstCellDate()
     for (let i = 0; i < 7 * rows; i++) {
       const cell = new Cell(i, isToday(addDays(firstCellDate, i)), addDays(firstCellDate, i), this._getMaxVisibleRows(), this._settings)
       this._cells.push(cell)
     }
-    return this._cells
   }
 
   private _getFirstCellDate(): Date {