From 098df0ad2cba0adc770ebb78984c074ca3c137e8 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 2 Jan 2024 17:45:58 +0800
Subject: [PATCH] Test move this out of component mount

It needs to run faster
---
 src/components/notification-service.jsx | 54 ++++++++++++++++---------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/notification-service.jsx b/src/components/notification-service.jsx
index 741e5f2e..7f071a3e 100644
--- a/src/components/notification-service.jsx
+++ b/src/components/notification-service.jsx
@@ -15,6 +15,22 @@ import Link from './link';
 import Modal from './modal';
 import Notification from './notification';
 
+{
+  if ('serviceWorker' in navigator) {
+    console.log('👂👂👂 Listen to message');
+    navigator.serviceWorker.addEventListener('message', (event) => {
+      console.log('💥💥💥 Message event', event);
+      const { type, id, accessToken } = event?.data || {};
+      if (type === 'notification') {
+        states.routeNotification = {
+          id,
+          accessToken,
+        };
+      }
+    });
+  }
+}
+
 export default memo(function NotificationService() {
   if (!('serviceWorker' in navigator)) return null;
 
@@ -82,25 +98,25 @@ export default memo(function NotificationService() {
     })();
   }, [id, accessToken]);
 
-  useLayoutEffect(() => {
-    // Listen to message from service worker
-    const handleMessage = (event) => {
-      console.log('💥💥💥 Message event', event);
-      const { type, id, accessToken } = event?.data || {};
-      if (type === 'notification') {
-        states.routeNotification = {
-          id,
-          accessToken,
-        };
-      }
-    };
-    console.log('👂👂👂 Listen to message');
-    navigator.serviceWorker.addEventListener('message', handleMessage);
-    return () => {
-      console.log('👂👂👂 Remove listen to message');
-      navigator.serviceWorker.removeEventListener('message', handleMessage);
-    };
-  }, []);
+  // useLayoutEffect(() => {
+  //   // Listen to message from service worker
+  //   const handleMessage = (event) => {
+  //     console.log('💥💥💥 Message event', event);
+  //     const { type, id, accessToken } = event?.data || {};
+  //     if (type === 'notification') {
+  //       states.routeNotification = {
+  //         id,
+  //         accessToken,
+  //       };
+  //     }
+  //   };
+  //   console.log('👂👂👂 Listen to message');
+  //   navigator.serviceWorker.addEventListener('message', handleMessage);
+  //   return () => {
+  //     console.log('👂👂👂 Remove listen to message');
+  //     navigator.serviceWorker.removeEventListener('message', handleMessage);
+  //   };
+  // }, []);
 
   useLayoutEffect(() => {
     if (navigator?.clearAppBadge) {