diff --git a/src/Logger.ts b/src/Logger.ts index 81c4cdd..7306f29 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -19,6 +19,7 @@ export default class Logger { private ignoredUrls: Set | 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)) { diff --git a/src/components/NetworkLogger.tsx b/src/components/NetworkLogger.tsx index c7ce548..0e3d6c4 100644 --- a/src/components/NetworkLogger.tsx +++ b/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 = ({ theme = 'light', sort = 'desc' }) => { const [request, setRequest] = useState(); const [showDetails, _setShowDetails] = useState(false); const [mounted, setMounted] = useState(false); + const [paused, setPaused] = useState(logger.paused); const setShowDetails = useCallback((shouldShow: boolean) => { _setShowDetails(shouldShow); @@ -73,28 +74,35 @@ const NetworkLogger: React.FC = ({ 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 = ({ theme = 'light', sort = 'desc' }) => { ) : ( { setRequest(requests.find((r) => r.id === id)); diff --git a/src/components/RequestList.tsx b/src/components/RequestList.tsx index ae759ad..0423e42 100644 --- a/src/components/RequestList.tsx +++ b/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 = ({ requestsInfo, onPressItem, - onShowMore, + options, showDetails, }) => { const styles = useThemedStyles(themedStyles); @@ -37,16 +36,14 @@ const RequestList: React.FC = ({ return ( {!showDetails && ( - + )} item.id} - // eslint-disable-next-line react/no-unstable-nested-components - ListHeaderComponent={() => ( - - )} data={filteredRequests} renderItem={({ item }) => ( onPressItem(item.id)} /> @@ -62,9 +59,6 @@ const themedStyles = (theme: Theme) => backgroundColor: theme.colors.background, flex: 1, }, - more: { - marginLeft: 10, - }, }); export default RequestList; diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 3db50c5..ca926a5 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,38 +1,84 @@ 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 = ({ value, onChangeText }) => { +const SearchBar: React.FC = ({ options, value, onChangeText }) => { const styles = useThemedStyles(themedStyles); const theme = useTheme(); + const [openOptions, setOpenOptions] = React.useState(false); return ( - - + + + + + setOpenOptions((prev) => !prev)} + > + + + setOpenOptions(false)} + onRequestClose={() => setOpenOptions(false)} + > + + setOpenOptions(false)}> + + + + Options + {options.map(({ text, onPress }) => ( + + ))} + + + ); }; const themedStyles = (theme: Theme) => StyleSheet.create({ - searchContainer: { + searchBar: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, @@ -40,11 +86,29 @@ const themedStyles = (theme: Theme) => 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, @@ -52,6 +116,16 @@ const themedStyles = (theme: Theme) => flexGrow: 1, color: theme.colors.text, }, + searchContainer: { + flexDirection: 'row', + }, + menu: { alignSelf: 'center' }, + title: { + fontSize: 20, + paddingBottom: 10, + fontWeight: 'bold', + textAlign: 'center', + }, }); export default SearchBar; diff --git a/src/components/more.png b/src/components/more.png new file mode 100644 index 0000000..5fe0d23 Binary files /dev/null and b/src/components/more.png differ