Pause monitoring

src/Logger.ts

@@ -19,6 +19,7 @@ export default class Logger {
   private ignoredUrls: Set<string> | undefined;
   private ignoredPatterns: RegExp[] | undefined;
   public enabled = false;
+  public paused = false;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   callback = (requests: any[]) => {};
@@ -47,6 +48,10 @@ export default class Logger {
     const xhrIndex = this.requests.length;
     this.xhrIdMap[xhr._index] = xhrIndex;
 
+    if (this.paused) {
+      return;
+    }
+
     if (this.ignoredHosts) {
       const host = extractHost(url);
       if (host && this.ignoredHosts.has(host)) {

src/components/NetworkLogger.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { Alert, View, StyleSheet, BackHandler, Share } from 'react-native';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { View, StyleSheet, BackHandler, Share } from 'react-native';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
 import { Theme, ThemeContext, ThemeName } from '../theme';
@@ -29,6 +29,7 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
   const [request, setRequest] = useState<NetworkRequestInfo>();
   const [showDetails, _setShowDetails] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [paused, setPaused] = useState<boolean>(logger.paused);
 
   const setShowDetails = useCallback((shouldShow: boolean) => {
     _setShowDetails(shouldShow);
@@ -81,20 +82,27 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
     });
   };
 
-  const showMore = () => {
-    Alert.alert('More Options', undefined, [
+  const options = useMemo(() => {
+    return [
+      {
+        text: paused ? 'Resume' : 'Pause',
+        onPress: () => {
+          setPaused((prev: boolean) => {
+            logger.paused = !prev;
+            return !prev;
+          })
+        }
+      },
       {
         text: 'Clear Logs',
         onPress: () => logger.clearRequests(),
-        style: 'destructive',
       },
       {
         text: 'Export all Logs',
         onPress: getHar,
       },
-      { text: 'Cancel', style: 'cancel' },
-    ]);
-  };
+    ];
+  }, [paused, getHar]);
 
   return (
     <ThemeContext.Provider value={theme}>
@@ -113,7 +121,7 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
           ) : (
             <RequestList
               requests={requests}
-              onShowMore={showMore}
+              options={options}
               showDetails={showDetails && !!request}
               onPressItem={(item) => {
                 setRequest(item);

src/components/RequestList.tsx

@@ -9,14 +9,14 @@ import SearchBar from './SearchBar';
 interface Props {
   requests: NetworkRequestInfo[];
   onPressItem: (item: NetworkRequestInfo) => void;
-  onShowMore: () => void;
+  options: {text: string; onPress: () => void }[];
   showDetails: boolean;
 }
 
 const RequestList: React.FC<Props> = ({
   requests,
   onPressItem,
-  onShowMore,
+  options,
   showDetails,
 }) => {
   const styles = useThemedStyles(themedStyles);
@@ -45,9 +45,13 @@ const RequestList: React.FC<Props> = ({
         keyExtractor={(item) => item.id}
         // eslint-disable-next-line react/no-unstable-nested-components
         ListHeaderComponent={() => (
-          <Button onPress={onShowMore} style={styles.more}>
-            More
-          </Button>
+          <View style={{ flexDirection: 'row' }}>
+            {options.map(({ text, onPress }) => (
+              <Button key={text} onPress={onPress} style={styles.more}>
+                {text}
+              </Button>)
+            )}
+          </View>
         )}
         data={filteredRequests}
         renderItem={({ item }) => (