chore(examples): prevent state updates after unmount

Author: fadi-george

examples/demo/src/hooks/useOneSignal.ts

@@ -153,6 +153,8 @@ export function useOneSignal(): UseOneSignalReturn {
   }, []);
 
   useEffect(() => {
+    let cancelled = false;
+
     const handleIamWillDisplay = (e: InAppMessageWillDisplayEvent) => {
       console.log(`IAM willDisplay: ${e.message.messageId}`);
     };
@@ -271,6 +273,7 @@ export function useOneSignal(): UseOneSignalReturn {
         OneSignal.User.pushSubscription.getOptedInAsync(),
         OneSignal.Notifications.hasPermission(),
       ]);
+      if (cancelled) return;
 
       setAppId(nextAppId);
       setConsentRequiredState(nextConsentRequired);
@@ -284,6 +287,7 @@ export function useOneSignal(): UseOneSignalReturn {
       setIsReady(true);
 
       const initialOnesignalId = await OneSignal.User.getOnesignalId();
+      if (cancelled) return;
       if (initialOnesignalId) {
         await fetchUserDataFromApi();
       }
@@ -296,6 +300,7 @@ export function useOneSignal(): UseOneSignalReturn {
 
     console.log('Loaded OneSignal');
     return () => {
+      cancelled = true;
       console.log('Cleaning up OneSignal listeners');
       OneSignal.InAppMessages.removeEventListener('willDisplay', handleIamWillDisplay);
       OneSignal.InAppMessages.removeEventListener('didDisplay', handleIamDidDisplay);

examples/demo_pods/src/App.tsx

@@ -1,7 +1,7 @@
 import { StatusBar, Style } from '@capacitor/status-bar';
-import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { IonApp, setupIonicReact } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 
 import HomeScreen from './pages/HomeScreen';
 import Secondary from './pages/Secondary';
@@ -31,7 +31,7 @@ setupIonicReact();
 const App: React.FC = () => (
   <IonApp>
     <IonReactRouter>
-      <IonRouterOutlet>
+      <Switch>
         <Route exact path="/home">
           <HomeScreen />
         </Route>
@@ -41,7 +41,7 @@ const App: React.FC = () => (
         <Route exact path="/">
           <Redirect to="/home" />
         </Route>
-      </IonRouterOutlet>
+      </Switch>
     </IonReactRouter>
   </IonApp>
 );

examples/demo_pods/src/hooks/useOneSignal.ts

@@ -153,6 +153,8 @@ export function useOneSignal(): UseOneSignalReturn {
   }, []);
 
   useEffect(() => {
+    let cancelled = false;
+
     const handleIamWillDisplay = (e: InAppMessageWillDisplayEvent) => {
       console.log(`IAM willDisplay: ${e.message.messageId}`);
     };
@@ -271,6 +273,7 @@ export function useOneSignal(): UseOneSignalReturn {
         OneSignal.User.pushSubscription.getOptedInAsync(),
         OneSignal.Notifications.hasPermission(),
       ]);
+      if (cancelled) return;
 
       setAppId(nextAppId);
       setConsentRequiredState(nextConsentRequired);
@@ -284,6 +287,7 @@ export function useOneSignal(): UseOneSignalReturn {
       setIsReady(true);
 
       const initialOnesignalId = await OneSignal.User.getOnesignalId();
+      if (cancelled) return;
       if (initialOnesignalId) {
         await fetchUserDataFromApi();
       }
@@ -296,6 +300,7 @@ export function useOneSignal(): UseOneSignalReturn {
 
     console.log('Loaded OneSignal');
     return () => {
+      cancelled = true;
       console.log('Cleaning up OneSignal listeners');
       OneSignal.InAppMessages.removeEventListener('willDisplay', handleIamWillDisplay);
       OneSignal.InAppMessages.removeEventListener('didDisplay', handleIamDidDisplay);