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, useMemo } from 'react';
-import { Alert, View, StyleSheet, BackHandler, Share } from 'react-native';
+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);
@@ -73,28 +74,35 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
     return () => backHandler.remove();
   }, [showDetails, setShowDetails]);
 
-  const getHar = async () => {
+  const getHar = useCallback(async () => {
     const har = await createHar(logger.getRequests());
 
     Share.share({
       message: JSON.stringify(har),
     });
-  };
+  }, []);
 
-  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]);
 
   const requestsInfo = useMemo(() => {
     return requests.map((r) => r.toRow());
@@ -117,7 +125,7 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
           ) : (
             <RequestList
               requestsInfo={requestsInfo}
-              onShowMore={showMore}
+              options={options}
               showDetails={showDetails && !!request}
               onPressItem={(id) => {
                 setRequest(requests.find((r) => r.id === id));

src/components/RequestList.tsx

@@ -3,21 +3,20 @@ import { View, StyleSheet, FlatList } from 'react-native';
 import NetworkRequestInfo from '../NetworkRequestInfo';
 import { useThemedStyles, Theme } from '../theme';
 import ResultItem from './ResultItem';
-import Button from './Button';
 import SearchBar from './SearchBar';
 import { NetworkRequestInfoRow } from '../types';
 
 interface Props {
   requestsInfo: NetworkRequestInfoRow[];
   onPressItem: (item: NetworkRequestInfo['id']) => void;
-  onShowMore: () => void;
+  options: { text: string; onPress: () => void }[];
   showDetails: boolean;
 }
 
 const RequestList: React.FC<Props> = ({
   requestsInfo,
   onPressItem,
-  onShowMore,
+  options,
   showDetails,
 }) => {
   const styles = useThemedStyles(themedStyles);
@@ -37,16 +36,14 @@ const RequestList: React.FC<Props> = ({
   return (
     <View style={styles.container}>
       {!showDetails && (
-        <SearchBar value={searchValue} onChangeText={onChangeSearchText} />
+        <SearchBar
+          value={searchValue}
+          onChangeText={onChangeSearchText}
+          options={options}
+        />
       )}
       <FlatList
         keyExtractor={(item) => item.id}
-        // eslint-disable-next-line react/no-unstable-nested-components
-        ListHeaderComponent={() => (
-          <Button onPress={onShowMore} style={styles.more}>
-            More
-          </Button>
-        )}
         data={filteredRequests}
         renderItem={({ item }) => (
           <ResultItem request={item} onPress={() => onPressItem(item.id)} />
@@ -62,9 +59,6 @@ const themedStyles = (theme: Theme) =>
       backgroundColor: theme.colors.background,
       flex: 1,
     },
-    more: {
-      marginLeft: 10,
-    },
   });
 
 export default RequestList;

src/components/SearchBar.tsx

@@ -1,57 +1,131 @@
 import React from 'react';
-import { View, Image, TextInput, StyleSheet } from 'react-native';
+import {
+  View,
+  Image,
+  TextInput,
+  StyleSheet,
+  Modal,
+  Text,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+} from 'react-native';
+
+import Button from './Button';
 import { Theme, useThemedStyles, useTheme } from '../theme';
 
 interface Props {
   value: string;
   onChangeText(text: string): void;
+  options: { text: string; onPress: () => void }[];
 }
 
-const SearchBar: React.FC<Props> = ({ value, onChangeText }) => {
+const SearchBar: React.FC<Props> = ({ options, value, onChangeText }) => {
   const styles = useThemedStyles(themedStyles);
   const theme = useTheme();
+  const [openOptions, setOpenOptions] = React.useState(false);
 
   return (
     <View style={styles.searchContainer}>
-      <Image
-        source={require('./search.png')}
-        resizeMode="contain"
-        style={styles.searchIcon}
-      />
-      <TextInput
-        onChangeText={onChangeText}
-        value={value}
-        placeholder="Filter URLs"
-        underlineColorAndroid="transparent"
-        style={styles.textInputSearch}
-        placeholderTextColor={theme.colors.muted}
-      />
+      <View style={styles.searchBar}>
+        <Image
+          source={require('./search.png')}
+          resizeMode="contain"
+          style={styles.icon}
+        />
+        <TextInput
+          onChangeText={onChangeText}
+          value={value}
+          placeholder="Filter URLs"
+          underlineColorAndroid="transparent"
+          style={styles.textInputSearch}
+          placeholderTextColor={theme.colors.muted}
+        />
+      </View>
+      <TouchableOpacity
+        style={styles.menu}
+        onPress={() => setOpenOptions((prev) => !prev)}
+      >
+        <Image
+          source={require('./more.png')}
+          resizeMode="contain"
+          style={styles.icon}
+        />
+      </TouchableOpacity>
+      <Modal
+        visible={openOptions}
+        animationType="fade"
+        transparent={true}
+        onDismiss={() => setOpenOptions(false)}
+        onRequestClose={() => setOpenOptions(false)}
+      >
+        <View style={styles.modalRoot}>
+          <TouchableWithoutFeedback onPress={() => setOpenOptions(false)}>
+            <View style={styles.backdrop} />
+          </TouchableWithoutFeedback>
+          <View style={styles.modalContent}>
+            <Text style={styles.title}>Options</Text>
+            {options.map(({ text, onPress }) => (
+              <Button key={text} onPress={onPress}>
+                {text}
+              </Button>
+            ))}
+          </View>
+        </View>
+      </Modal>
     </View>
   );
 };
 
 const themedStyles = (theme: Theme) =>
   StyleSheet.create({
-    searchContainer: {
+    searchBar: {
       flexDirection: 'row',
       alignItems: 'center',
       paddingHorizontal: 10,
       margin: 5,
       borderWidth: 1,
       borderColor: theme.colors.muted,
       borderRadius: 20,
+      flex: 1,
+    },
+    modalRoot: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      flex: 1,
+    },
+    modalContent: {
+      borderRadius: 8,
+      padding: 16,
+      maxWidth: '100%',
+      backgroundColor: 'white',
     },
-    searchIcon: {
+    backdrop: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    icon: {
       width: 20,
       height: 20,
       marginRight: 10,
+      alignSelf: 'center',
     },
     textInputSearch: {
       height: 30,
       padding: 0,
       flexGrow: 1,
       color: theme.colors.text,
     },
+    searchContainer: {
+      flexDirection: 'row',
+    },
+    menu: { alignSelf: 'center' },
+    title: {
+      fontSize: 20,
+      paddingBottom: 10,
+      fontWeight: 'bold',
+      textAlign: 'center',
+    },
   });
 
 export default SearchBar;