Moved cron to class component

ephemeraHQ · Oct 19, 2024 · 5ec6299 · 5ec6299
1 parent 7949f22
commit 5ec6299
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git a/App.tsx b/App.tsx
@@ -29,7 +29,7 @@ import { Provider as PaperProvider } from "react-native-paper";
 import { ThirdwebProvider } from "thirdweb/react";
 
 import "./utils/splash/splash";
-import { XmtpCron } from "./components/XmtpEngine";
+import { xmtpCron, xmtpEngine } from "./components/XmtpEngine";
 import config from "./config";
 import { useAppStore } from "./data/store/appStore";
 import { useSelect } from "./data/store/storeHelpers";
@@ -59,6 +59,9 @@ initSentry();
 
 const coinbaseUrl = new URL(`https://${config.websiteDomain}/coinbase`);
 
+xmtpEngine.start();
+xmtpCron.start();
+
 const App = () => {
   const styles = useStyles();
   const debugRef = useRef();
@@ -99,7 +102,6 @@ const App = () => {
 
   return (
     <View style={styles.safe}>
-      <XmtpCron />
       <Main />
       <DebugButton ref={debugRef} />
     </View>

diff --git a/App.web.tsx b/App.web.tsx
@@ -9,7 +9,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import "./assets/web.css";
 import "./polyfills";
 
-import { XmtpCron } from "./components/XmtpEngine";
+import { xmtpCron, xmtpEngine } from "./components/XmtpEngine";
 import config from "./config";
 import Main from "./screens/Main";
 
@@ -29,6 +29,9 @@ createWeb3Modal({
   projectId: config.walletConnectConfig.projectId,
 });
 
+xmtpEngine.start();
+xmtpCron.start();
+
 export default function App() {
   const colorScheme = useColorScheme();
 
@@ -58,7 +61,6 @@ export default function App() {
           >
             <>
               <Main />
-              <XmtpCron />
             </>
           </PrivyProvider>
         </PaperProvider>

diff --git a/components/XmtpEngine.tsx b/components/XmtpEngine.tsx
@@ -5,7 +5,6 @@ import {
 import { appStateIsBlurredState } from "@utils/appState/appStateIsBlurred";
 import logger from "@utils/logger";
 import { stopStreamingAllMessage } from "@utils/xmtpRN/messages";
-import { useCallback, useEffect, useRef } from "react";
 import {
   AppState,
   AppStateStatus,
@@ -27,16 +26,22 @@ import { sendPendingMessages } from "../utils/xmtpRN/send";
 import { syncXmtpClient } from "../utils/xmtpRN/sync";
 
 class XmtpEngine {
-  appStoreSubscription: () => void;
-  appStateSubscription: NativeEventSubscription;
-  isInternetReachable: boolean;
-  hydrationDone: boolean;
-  syncedAccounts: { [account: string]: boolean };
-  syncingAccounts: { [account: string]: boolean };
-  appState: AppStateStatus;
-
-  constructor() {
-    logger.debug("[XmtpEngine] Initializing");
+  appStoreSubscription: (() => void) | null = null;
+  appStateSubscription: NativeEventSubscription | null = null;
+  isInternetReachable: boolean = false;
+  hydrationDone: boolean = false;
+  syncedAccounts: { [account: string]: boolean } = {};
+  syncingAccounts: { [account: string]: boolean } = {};
+  appState: AppStateStatus = AppState.currentState;
+  started: boolean = false;
+
+  start() {
+    logger.debug("[XmtpEngine] Starting");
+    if (this.started) {
+      return;
+    }
+
+    this.started = true;
     this.syncedAccounts = {};
     this.syncingAccounts = {};
 
@@ -138,28 +143,27 @@ class XmtpEngine {
   }
 
   destroy() {
-    // Normal app usage won't call this, but hot reloading will
     logger.debug("[XmtpEngine] Removing subscriptions");
-    this.appStoreSubscription();
-    this.appStateSubscription.remove();
+    this.appStoreSubscription?.();
+    this.appStateSubscription?.remove();
   }
 }
 
 export const xmtpEngine = new XmtpEngine();
 
-export function XmtpCron() {
-  // Cron
-  const lastCronTimestamp = useRef(0);
-  const runningCron = useRef(false);
+class XmtpCron {
+  private lastCronTimestamp: number = 0;
+  private runningCron: boolean = false;
+  private interval: NodeJS.Timeout | null = null;
 
-  const xmtpCron = useCallback(async () => {
+  private async xmtpCron() {
     if (
       !useAppStore.getState().splashScreenHidden ||
       AppState.currentState.match(/inactive|background/)
     ) {
       return;
     }
-    runningCron.current = true;
+    this.runningCron = true;
     const accounts = getAccountsList();
     for (const account of accounts) {
       if (
@@ -174,22 +178,25 @@ export function XmtpCron() {
         }
       }
     }
-    lastCronTimestamp.current = new Date().getTime();
-    runningCron.current = false;
-  }, []);
-
-  useEffect(() => {
-    // Launch cron
-    const interval = setInterval(() => {
-      if (runningCron.current) return;
+    this.lastCronTimestamp = new Date().getTime();
+    this.runningCron = false;
+  }
+
+  start() {
+    logger.debug("[XmtpCron] Starting");
+    this.interval = setInterval(() => {
+      if (this.runningCron) return;
       const now = new Date().getTime();
-      if (now - lastCronTimestamp.current > 1000) {
-        xmtpCron();
+      if (now - this.lastCronTimestamp > 1000) {
+        this.xmtpCron();
       }
     }, 300);
+  }
 
-    return () => clearInterval(interval);
-  }, [xmtpCron]);
-
-  return null;
+  destroy() {
+    logger.debug("[XmtpCron] Destroying");
+    this.interval && clearInterval(this.interval);
+  }
 }
+
+export const xmtpCron = new XmtpCron();