faster way to do log tailing

Author: niteshbalusu11

src/windows/Settings/LndLog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { EmitterSubscription, NativeModules } from "react-native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { Icon } from "native-base";
@@ -20,31 +20,24 @@ export interface ILndLogProps {
 }
 export default function LndLog({ navigation }: ILndLogProps) {
   const t = useTranslation(namespaces.settings.lndLog).t;
+  const [logs, setLogs] = useState("");
 
   let log = useRef("");
   const forceUpdate = useForceUpdate();
 
-  useEffect(() => {
-    let listener: EmitterSubscription;
-    (async () => {
+  const fetchLogs = async () => {
+    try {
       const tailLog = await NativeModules.LndMobileTools.tailLog(100);
-      log.current = tailLog
-        .split("\n")
-        .map((row) => row.slice(11))
-        .join("\n");
-
-      listener = LndMobileToolsEventEmitter.addListener("lndlog", function (data: string) {
-        log.current = log.current + "\n" + data.slice(11);
-        forceUpdate();
-      });
-
-      NativeModules.LndMobileTools.observeLndLogFile();
-      forceUpdate();
-    })();
+      setLogs(tailLog);
+    } catch (error) {
+      console.error("Error fetching logs:", error);
+    }
+  };
 
-    return () => {
-      listener.remove();
-    };
+  useEffect(() => {
+    fetchLogs();
+    const logUpdateTimer = setInterval(fetchLogs, 1000);
+    return () => clearInterval(logUpdateTimer);
   }, []);
 
   useLayoutEffect(() => {
@@ -53,7 +46,7 @@ export default function LndLog({ navigation }: ILndLogProps) {
       headerShown: true,
       headerRight: () => {
         return (
-          <NavigationButton onPress={() => onPressCopy(log.current)}>
+          <NavigationButton onPress={() => onPressCopy(logs)}>
             <Icon type="MaterialCommunityIcons" name="content-copy" style={{ fontSize: 22 }} />
           </NavigationButton>
         );
@@ -68,7 +61,7 @@ export default function LndLog({ navigation }: ILndLogProps) {
 
   return (
     <Container>
-      <LogBox text={log.current} scrollLock={true} />
+      <LogBox text={logs} scrollLock={true} />
     </Container>
   );
 }

src/windows/SyncInfo.tsx

@@ -49,9 +49,8 @@ export default function SyncInfo({}: ISyncInfoProps) {
   const recoverInfo = useStoreState((store) => store.lightning.recoverInfo);
   const initialKnownBlockheight = useStoreState((store) => store.lightning.initialKnownBlockheight);
   let bestBlockheight = useStoreState((store) => store.lightning.bestBlockheight);
-  const log = useRef("");
-  const forceUpdate = useForceUpdate();
   const [showLndLog, setShowLndLog] = useState(false);
+  const [logs, setLogs] = useState("");
   const listener = useRef<EmitterSubscription>();
 
   useEffect(() => {
@@ -62,23 +61,21 @@ export default function SyncInfo({}: ISyncInfoProps) {
     };
   }, []);
 
-  const onPressShowLndLog = async () => {
-    const tailLog = await NativeModules.LndMobileTools.tailLog(100);
-    log.current = tailLog
-      .split("\n")
-      .map((row) => row.slice(11))
-      .join("\n");
-
-    listener.current = LndMobileToolsEventEmitter.addListener("lndlog", function (data: string) {
-      log.current = log.current + "\n" + data.slice(11);
-      forceUpdate();
-    });
-
-    NativeModules.LndMobileTools.observeLndLogFile();
-    forceUpdate();
-    setShowLndLog(true);
+  const fetchLogs = async () => {
+    try {
+      const tailLog = await NativeModules.LndMobileTools.tailLog(100);
+      setLogs(tailLog);
+    } catch (error) {
+      console.error("Error fetching logs:", error);
+    }
   };
 
+  useEffect(() => {
+    fetchLogs();
+    const logUpdateTimer = setInterval(fetchLogs, 1000);
+    return () => clearInterval(logUpdateTimer);
+  }, []);
+
   const onPressCopy = (l: string) => {
     Clipboard.setString(l);
     toast(t("msg.clipboardCopy", { ns: namespaces.common }), undefined, "warning");
@@ -172,16 +169,16 @@ export default function SyncInfo({}: ISyncInfoProps) {
             )}
             {!showLndLog && (
               <View style={{ marginTop: 10, flexDirection: "row" }}>
-                <Button small onPress={onPressShowLndLog}>
+                <Button small onPress={() => setShowLndLog(true)}>
                   <Text>{t("lndLog.show")}</Text>
                 </Button>
               </View>
             )}
             {showLndLog && (
               <View style={{ marginTop: 10 }}>
-                <LogBox text={log.current} style={{ maxHeight: 170 }} />
+                <LogBox text={logs} style={{ maxHeight: 170 }} />
                 <View style={{ marginTop: 10, flexDirection: "row" }}>
-                  <Button small onPress={() => onPressCopy(log.current)}>
+                  <Button small onPress={() => onPressCopy(logs)}>
                     <Text>{t("lndLog.copy")}</Text>
                   </Button>
                 </View>