@ozdao/martyrs 0.2.431 → 0.2.433

package/src/modules/notifications/notifications.client.js

@@ -1,168 +1,322 @@
 import { watch, toRefs } from "vue";
-import routerNotifications from './router/notifications.router.js';
-import * as storeNotifications from './store/notifications.store.js';
+// Router import 
+import routerNotifications from './router/notifications.router.js'; 
+// Store 
+import * as storeNotifications from './store/notifications.store.js'; 
+// Auth store import
 import * as auth from '@martyrs/src/modules/auth/views/store/auth';
+// Global WebSocket import
 import globalWebSocket from '@martyrs/src/modules/globals/views/classes/globals.websocket.js';
-import NotificationsLayout from './components/layouts/NotificationsLayout.vue';
-import NotificationsList from './components/sections/NotificationsList.vue';
-import NotificationPreferences from './components/sections/NotificationPreferences.vue';
-import Notifications from './components/pages/Notifications.vue';
-import NotificationBadge from './components/elements/NotificationBadge.vue';
-import NotificationItem from './components/blocks/NotificationItem.vue';
+// Layouts 
+import NotificationsLayout from './components/layouts/NotificationsLayout.vue'; 
+// Sections 
+import NotificationsList from './components/sections/NotificationsList.vue'; 
+import NotificationPreferences from './components/sections/NotificationPreferences.vue'; 
+// Pages 
+import Notifications from './components/pages/Notifications.vue'; 
+// Components 
+import NotificationBadge from './components/elements/NotificationBadge.vue'; 
+import NotificationItem from './components/blocks/NotificationItem.vue'; 
+
+/**
+ * WebSocket notification handler that uses the global WebSocket connection
+ */
+class WebSocketNotificationHandler {
+  constructor(store, options = {}) {
+    this.store = store;
+    this.options = options;
+    this.moduleName = 'notifications';
+    this.listeners = [];
+  }
 
-// WebSocket notification handlers
-const wsNotificationHandlers = {
-  connect: (store, userId, options = {}) => {
-    if (typeof window === 'undefined' || !userId) return Promise.resolve(false);
-    
-    return globalWebSocket.connect(userId).then(() => {
-      const moduleName = 'notifications';
-      const listeners = [];
+  /**
+   * Connect to notifications channel
+   */
+  connect(userId) {
+    // Skip if running in SSR
+    if (typeof window === 'undefined' || !userId) {
+      return Promise.resolve(false);
+    }
 
-      const addListener = (event, handler) => {
-        listeners.push(globalWebSocket.addEventListener(event, handler, { module: moduleName }));
-      };
+    // First ensure the global WebSocket is connected
+    return globalWebSocket.connect(userId).then(() => {
+      // Register event listeners
+      this._registerListeners();
+      return true;
+    });
+  }
 
-      addListener('notification', (data) => {
-        if (!data || !data.data) return;
-        const notification = data.data;
-        
-        store.notifications.actions.addLocalNotification({
-          _id: notification._id,
-          title: notification.title,
-          body: notification.body,
-          type: notification.type || 'info',
-          metadata: notification.metadata || {},
-          status: 'unread',
-          createdAt: notification.createdAt || new Date().toISOString(),
-          updatedAt: notification.updatedAt || new Date().toISOString()
-        });
-      });
+  /**
+   * Disconnect notification listeners
+   */
+  disconnect() {
+    globalWebSocket.removeModuleListeners(this.moduleName);
+  }
 
-      addListener('notification_read', (data) => {
-        store.notifications.actions.syncNotificationStatus(data.notificationId, 'read');
-      });
+  /**
+   * Register notification event listeners
+   */
+  _registerListeners() {
+    // Listen for notification events
+    this.listeners.push(
+      globalWebSocket.addEventListener('notification', this._processNotification.bind(this), {
+        module: this.moduleName
+      })
+    );
+    
+    // Listen for notification read status changes
+    this.listeners.push(
+      globalWebSocket.addEventListener('notification_read', (data) => {
+        this.store.notifications.actions.syncNotificationStatus(data.notificationId, 'read');
+      }, { module: this.moduleName })
+    );
+  }
 
-      return { listeners, moduleName };
+  /**
+   * Process incoming notification
+   */
+  _processNotification(data) {
+    if (!data || !data.data) return;
+    
+    const notification = data.data;
+    
+    // Add notification to store
+    this.store.notifications.actions.addLocalNotification({
+      _id: notification._id,
+      title: notification.title,
+      body: notification.body,
+      type: notification.type || 'info',
+      metadata: notification.metadata || {},
+      status: 'unread',
+      createdAt: notification.createdAt || new Date().toISOString(),
+      updatedAt: notification.updatedAt || new Date().toISOString()
     });
-  },
-
-  disconnect: (moduleName, listeners) => {
-    if (listeners) {
-      globalWebSocket.removeModuleListeners(moduleName);
-    }
   }
-};
+}
+
+/**
+ * Capacitor Push Notification handler
+ */
+class CapacitorPushHandler {
+  constructor(store) {
+    this.store = store;
+    this.pushNotifications = null;
+    this.device = null;
+    this.isInitialized = false;
+  }
 
-// Capacitor Push Notification handlers
-const pushNotificationHandlers = {
-  initialize: async () => {
-    if (typeof window === 'undefined') return false;
+  /**
+   * Initialize Capacitor plugins
+   */
+  async initialize() {
+    // Skip if running in SSR
+    if (typeof window === 'undefined') {
+      return false;
+    }
 
     try {
+      // Dynamic imports to prevent errors in web environment
       const { Capacitor } = await import('@capacitor/core');
       const { PushNotifications } = await import('@capacitor/push-notifications');
       const { Device } = await import('@capacitor/device');
-
-      if (!Capacitor.isNativePlatform()) return false;
-
-      return { pushNotifications: PushNotifications, device: Device };
+      
+      this.capacitor = Capacitor;
+      this.pushNotifications = PushNotifications;
+      this.device = Device;
+      
+      // Only proceed if running on a native platform
+      if (!this.capacitor.isNativePlatform()) {
+        return false;
+      }
+      
+      this.isInitialized = true;
+      return true;
     } catch (error) {
       console.error('Error importing Capacitor plugins:', error);
       return false;
     }
-  },
-
-  requestPermissions: async (store) => {
-    if (typeof window === 'undefined') return false;
-
-    const plugins = await pushNotificationHandlers.initialize();
-    if (!plugins) return false;
-
-    const { pushNotifications, device } = plugins;
+  }
 
-    const permissionResult = await pushNotifications.requestPermissions();
-    if (permissionResult.receive !== 'granted') {
-      console.log('Push notification permission denied');
+  /**
+   * Request permission and register for push notifications
+   */
+  async requestPermissions() {
+    // Skip if running in SSR
+    if (typeof window === 'undefined') {
       return false;
     }
 
-    const setupListeners = () => {
-      pushNotifications.addListener('registration', async (token) => {
-        try {
-          const deviceInfo = await device.getInfo();
-          const deviceId = await device.getId();
-
-          const deviceData = {
-            deviceId: deviceId.uuid,
-            deviceType: deviceInfo.platform.toLowerCase(),
-            deviceToken: token.value
-          };
+    if (!this.isInitialized) {
+      const initialized = await this.initialize();
+      if (!initialized) return false;
+    }
 
-          await store.notifications.actions.registerDevice(deviceData);
-        } catch (error) {
-          console.error('Error handling push registration:', error);
-        }
-      });
+    try {
+      // Request permission
+      const permissionResult = await this.pushNotifications.requestPermissions();
+      if (permissionResult.receive !== 'granted') {
+        console.log('Push notification permission denied');
+        return false;
+      }
+      
+      // Set up event listeners
+      this._setupListeners();
+      
+      // Register with Apple/Google
+      await this.pushNotifications.register();
+      return true;
+    } catch (error) {
+      console.error('Error requesting push notification permissions:', error);
+      return false;
+    }
+  }
 
-      pushNotifications.addListener('pushNotificationReceived', (notification) => {
-        store.notifications.actions.addLocalNotification({
-          title: notification.title,
-          body: notification.body,
-          data: notification.data || {}
-        });
-      });
+  /**
+   * Setup push notification event listeners
+   */
+  _setupListeners() {
+    // Registration event
+    this.pushNotifications.addListener('registration', 
+      this._handleRegistration.bind(this)
+    );
+    
+    // Notification received event
+    this.pushNotifications.addListener('pushNotificationReceived',
+      this._handleNotificationReceived.bind(this)
+    );
+    
+    // Notification action performed event
+    this.pushNotifications.addListener('pushNotificationActionPerformed',
+      this._handleNotificationAction.bind(this)
+    );
+  }
 
-      pushNotifications.addListener('pushNotificationActionPerformed', (actionData) => {
-        if (actionData.notification && actionData.notification.data) {
-          store.notifications.actions.handleNotificationAction(actionData.notification.data);
-        }
-      });
-    };
+  /**
+   * Handle registration token received
+   */
+  async _handleRegistration(token) {
+    try {
+      // Get device info
+      const deviceInfo = await this.device.getInfo();
+      const deviceId = await this.device.getId();
+      
+      // Prepare device data
+      const deviceData = {
+        deviceId: deviceId.uuid,
+        deviceType: deviceInfo.platform.toLowerCase(),
+        deviceToken: token.value
+      };
+      
+      // Register device with backend
+      await this.store.notifications.actions.registerDevice(deviceData);
+    } catch (error) {
+      console.error('Error handling push registration:', error);
+    }
+  }
 
-    setupListeners();
-    await pushNotifications.register();
-    return true;
-  },
+  /**
+   * Handle received notification
+   */
+  _handleNotificationReceived(notification) {
+    // Add notification to store
+    this.store.notifications.actions.addLocalNotification({
+      title: notification.title,
+      body: notification.body,
+      data: notification.data || {}
+    });
+  }
 
-  removeListeners: (pushNotifications) => {
-    if (typeof window === 'undefined' || !pushNotifications) return;
-    pushNotifications.removeAllListeners();
+  /**
+   * Handle notification action (when user taps on notification)
+   */
+  _handleNotificationAction(actionData) {
+    if (actionData.notification && actionData.notification.data) {
+      this.store.notifications.actions.handleNotificationAction(
+        actionData.notification.data
+      );
+    }
   }
-};
 
-// Notification utilities
-const notificationUtils = {
-  initialize: async (store, options = {}) => {
-    if (typeof window === 'undefined') return;
+  /**
+   * Remove push notification listeners
+   */
+  removeListeners() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    
+    if (this.pushNotifications) {
+      this.pushNotifications.removeAllListeners();
+    }
+  }
+}
+
+/**
+ * Notification Manager for coordinating WebSocket and Push notifications
+ */
+class NotificationManager {
+  constructor(store, options = {}) {
+    this.store = store;
+    this.options = options;
+    this.wsHandler = new WebSocketNotificationHandler(store, options);
+    this.pushHandler = new CapacitorPushHandler(store);
+    this.initialized = false;
+    this.isServer = typeof window === 'undefined';
+  }
 
-    const userId = store.auth.state.user?._id;
+  /**
+   * Initialize notifications
+   */
+  async initialize() {
+    if (this.initialized || this.isServer) return;
+    
+    // Get current user ID from auth store instead of localStorage
+    const userId = this.store.auth.state.user?._id;
     if (!userId) {
       console.warn('Cannot initialize notifications: No user ID found in auth store');
       return;
     }
-
-    let wsListeners = null;
-    if (options.enablePush !== false) {
-      await pushNotificationHandlers.requestPermissions(store);
+    
+    // Initialize WebSocket for realtime notifications
+    await this.wsHandler.connect(userId);
+    
+    // Initialize push notifications for mobile if enabled
+    if (this.options.enablePush !== false) {
+      await this.pushHandler.requestPermissions();
     }
+    
+    this.initialized = true;
+    
+    // Fetch existing notifications
+    await this.store.notifications.actions.getNotifications(userId);
+  }
 
-    wsListeners = await wsNotificationHandlers.connect(store, userId, options);
-
-    await store.notifications.actions.getNotifications(userId);
-
-    return {
-      disconnect: () => {
-        wsNotificationHandlers.disconnect(wsListeners?.moduleName, wsListeners?.listeners);
-        pushNotificationHandlers.removeListeners(globalThis.pushNotifications);
-      }
-    };
-  },
-
-  prefetchForSSR: async (store, context) => {
+  /**
+   * Disconnect and clean up
+   */
+  disconnect() {
+    if (this.isServer) return;
+    
+    this.wsHandler.disconnect();
+    this.pushHandler.removeListeners();
+    this.initialized = false;
+  }
+}
+
+/**
+ * Server-side utility for pre-fetching notification data
+ */
+const SSRUtils = {
+  /**
+   * Pre-fetch notifications for SSR
+   * @param {Object} store - Store instance
+   * @param {Object} context - SSR context
+   */
+  async prefetchNotifications(store, context) {
     try {
       const userId = store.auth.state.user?._id;
       if (userId) {
+        // Fetch notifications without WebSocket or push setup
         await store.notifications.actions.getNotifications(userId);
       }
     } catch (error) {
@@ -171,86 +325,116 @@ const notificationUtils = {
   }
 };
 
-// Main initialization function
-const initializeNotifications = (app, store, router, options = {}) => {
+/**
+ * Function to initialize the notifications module
+ * @param {Object} app - Vue app instance
+ * @param {Object} store - Vuex/Pinia store
+ * @param {Object} router - Vue Router instance
+ * @param {Object} options - Configuration options
+ */
+function initializeNotifications(app, store, router, options = {}) {
+  // Add routes and store
   const route = options.route || 'User Profile Root';
   router.addRoute(route, routerNotifications);
   store.addStore('notifications', storeNotifications);
-
+  
+  // Initialize global WebSocket if needed
   if (options.wsUrl) {
     globalWebSocket.initialize({ wsUrl: options.wsUrl });
   }
-
+  
+  // Create notification manager
+  const notificationManager = new NotificationManager(store, {
+    enablePush: options.enablePush !== false,
+    maxReconnectAttempts: options.maxReconnectAttempts || 5,
+    reconnectDelay: options.reconnectDelay || 3000,
+    pingInterval: options.pingInterval || 30000
+  });
+  
+  // Attach notification manager to store for access in components
+  store.notificationManager = notificationManager;
+  
+  // Don't auto-initialize on server
   const isServer = typeof window === 'undefined';
   const autoInit = !isServer && options.autoInit !== false;
-
-  let notificationManager = null;
-
+  
   if (autoInit) {
-    const initNotifications = async () => {
-      if (store.auth.state.isAuthenticated && store.auth.state.user?._id) {
-        notificationManager = await notificationUtils.initialize(store, {
-          enablePush: options.enablePush !== false,
-          maxReconnectAttempts: options.maxReconnectAttempts || 5,
-          reconnectDelay: options.reconnectDelay || 3000,
-          pingInterval: options.pingInterval || 30000
-        });
-      }
-    };
-
+    // Initialize after auth is confirmed
+    const isAuthenticated = store.auth.state.isAuthenticated;
+    const userId = store.auth.state.user?._id;
+    
+    if (isAuthenticated && userId) {
+      notificationManager.initialize();
+    }
+    
+    // Watch for user login/logout using auth store
     watch(() => store.auth.state.isAuthenticated, (isAuthenticated) => {
       if (isAuthenticated) {
-        initNotifications();
-      } else if (notificationManager) {
+        notificationManager.initialize();
+      } else {
         notificationManager.disconnect();
         store.notifications.mutations.resetNotifications();
-        notificationManager = null;
       }
     });
-
-    if (store.auth.state.isAuthenticated) {
-      initNotifications();
-    }
   }
+  
+  // Provide composable for components to access notification functionality
+  app.provide('useNotifications', () => {
+    return {
+      ...toRefs(store.notifications.state),
+      ...store.notifications.actions,
+      ...store.notifications.mutations,
+      init: notificationManager.initialize.bind(notificationManager),
+      disconnect: notificationManager.disconnect.bind(notificationManager),
+      isServer
+    };
+  });
+  
+  return notificationManager;
+}
 
-  app.provide('useNotifications', () => ({
-    ...toRefs(store.notifications.state),
-    ...store.notifications.actions,
-    ...store.notifications.mutations,
-    init: () => notificationUtils.initialize(store, options),
-    disconnect: () => notificationManager?.disconnect(),
-    isServer
-  }));
-
-  return {
-    SSR: { prefetchNotifications: notificationUtils.prefetchForSSR }
-  };
-};
-
+// Module export
 const ModuleNotifications = {
   initialize: initializeNotifications,
+  SSR: SSRUtils, // Export SSR utilities
   views: {
-    store: { storeNotifications },
-    router: { routerNotifications },
+    store: {
+      storeNotifications,
+    },
+    router: {
+      routerNotifications
+    },
     components: {
+      // Elements
       NotificationBadge,
+      // Blocks
       NotificationItem,
+      // Sections
       NotificationsList,
       NotificationPreferences,
+      // Pages
       Notifications,
+      // Layouts
       NotificationsLayout
     }
   }
 };
 
+// Component exports
 export {
+  // Elements
   NotificationBadge,
+  // Blocks
   NotificationItem,
+  // Sections
   NotificationsList,
   NotificationPreferences,
+  // Pages
   Notifications,
+  // Layouts
   NotificationsLayout,
-  notificationUtils as SSRUtils
+  // SSR Utilities
+  SSRUtils
 };
 
-export default ModuleNotifications;
+export default ModuleNotifications;