Major refactorering to get a hold on all these events

src/managers/EventRenderer.ts

@@ -1,6 +1,7 @@
 import { EventBus } from '../core/EventBus';
 import { IEventBus, CalendarEvent } from '../types/CalendarTypes';
 import { EventTypes } from '../constants/EventTypes';
+import { StateEvents } from '../types/CalendarState';
 import { calendarConfig } from '../core/CalendarConfig';
 import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
 
@@ -11,30 +12,36 @@ import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
 export class EventRenderer {
     private eventBus: IEventBus;
     private pendingEvents: CalendarEvent[] = [];
+    private dataReady: boolean = false;
+    private gridReady: boolean = false;
 
     constructor(eventBus: IEventBus) {
         this.eventBus = eventBus;
         this.setupEventListeners();
-        
-        // Initialize the factory (if not already done)
-        CalendarTypeFactory.initialize();
     }
 
     private setupEventListeners(): void {
-        this.eventBus.on(EventTypes.EVENTS_LOADED, (event: Event) => {
+        // Listen for state-driven data loaded event
+        this.eventBus.on(StateEvents.DATA_LOADED, (event: Event) => {
             const customEvent = event as CustomEvent;
-            const { events } = customEvent.detail;
-            console.log('EventRenderer: Received EVENTS_LOADED with', events.length, 'events');
-            // Store events but don't render yet - wait for grid to be ready
-            this.pendingEvents = events;
+            // Events are in customEvent.detail (direct from StateEvent payload)
+            const eventCount = customEvent.detail.data?.eventCount || 0;
+            const events = customEvent.detail.data?.events || [];
+            console.log('EventRenderer: Received DATA_LOADED with', eventCount, 'events');
+            this.pendingEvents = events; // Store the actual events
+            this.dataReady = true;
             this.tryRenderEvents();
         });
 
-        this.eventBus.on(EventTypes.GRID_RENDERED, () => {
-            // Grid is ready, now we can render events
+        // Listen for state-driven grid rendered event  
+        this.eventBus.on(StateEvents.GRID_RENDERED, (event: Event) => {
+            const customEvent = event as CustomEvent;
+            console.log('EventRenderer: Received GRID_RENDERED');
+            this.gridReady = true;
             this.tryRenderEvents();
         });
 
+
         this.eventBus.on(EventTypes.VIEW_RENDERED, () => {
             // Clear existing events when view changes
             this.clearEvents();
@@ -48,20 +55,50 @@ export class EventRenderer {
     }
 
     private tryRenderEvents(): void {
-        // Only render if we have both events and appropriate columns are ready
-        console.log('EventRenderer: tryRenderEvents called, pending events:', this.pendingEvents.length);
+        // Only render if we have both data and grid ready
+        console.log('EventRenderer: tryRenderEvents called', {
+            dataReady: this.dataReady,
+            gridReady: this.gridReady,
+            pendingEvents: this.pendingEvents.length
+        });
+        
+        if (!this.dataReady || !this.gridReady) {
+            console.log('EventRenderer: Waiting - data ready:', this.dataReady, 'grid ready:', this.gridReady);
+            return;
+        }
         
         if (this.pendingEvents.length > 0) {
-            const calendarType = calendarConfig.getCalendarType();
+            const calendarType = calendarConfig.getCalendarMode();
             let columnsSelector = calendarType === 'resource' ? 'swp-resource-column' : 'swp-day-column';
             const columns = document.querySelectorAll(columnsSelector);
             
             console.log(`EventRenderer: Found ${columns.length} ${columnsSelector} elements for ${calendarType} calendar`);
             
             if (columns.length > 0) {
+                console.log('🎨 EventRenderer: Both data and grid ready, rendering events!');
+                const eventCount = this.pendingEvents.length;
                 this.renderEvents(this.pendingEvents);
                 this.pendingEvents = []; // Clear pending events after rendering
+                
+                // Emit events rendered event
+                this.eventBus.emit(StateEvents.EVENTS_RENDERED, {
+                    type: StateEvents.EVENTS_RENDERED,
+                    component: 'EventRenderer',
+                    timestamp: Date.now(),
+                    data: {
+                        eventCount,
+                        calendarMode: calendarType,
+                        renderMethod: 'state-driven'
+                    },
+                    metadata: {
+                        phase: 'event-rendering'
+                    }
+                });
+            } else {
+                console.log('EventRenderer: Grid not ready yet, columns not found');
             }
+        } else {
+            console.log('EventRenderer: No pending events to render');
         }
     }
 
@@ -69,7 +106,7 @@ export class EventRenderer {
         console.log('EventRenderer: renderEvents called with', events.length, 'events');
         
         // Get the appropriate event renderer strategy
-        const calendarType = calendarConfig.getCalendarType();
+        const calendarType = calendarConfig.getCalendarMode();
         const eventRenderer = CalendarTypeFactory.getEventRenderer(calendarType);
         
         console.log(`EventRenderer: Using ${calendarType} event renderer strategy`);
@@ -84,7 +121,7 @@ export class EventRenderer {
     }
 
     private clearEvents(): void {
-        const calendarType = calendarConfig.getCalendarType();
+        const calendarType = calendarConfig.getCalendarMode();
         const eventRenderer = CalendarTypeFactory.getEventRenderer(calendarType);
         eventRenderer.clearEvents();
     }