react-native-in-app-debugger 1.0.39 → 1.0.41

package/Api.jsx

@@ -59,9 +59,7 @@ const Row = ({ item, filter }) => {
       )}
       <View>
         <View style={{ flexDirection: "row" }}>
-          {tabs.map((t) => (
-            <Tab key={t.value} {...t} />
-          ))}
+          {tabs.map((t) => <Tab key={t.value} {...t} />)}
         </View>
 
         {tab === tabs[0].value && hasResponse && (
@@ -97,7 +95,6 @@ const isError = (a) => a.response?.status < 200 || a.response?.status >= 400;
 export default (props) => {
   const [filter, setFilter] = useState("");
   const [errorOnly, setErrorOnly] = useState(false);
-  const [filterUrlOnly, setFilterUrlOnly] = useState(true);
   const [expands, setExpands] = useState({});
   const apis = props.apis.filter((a) => !errorOnly || isError(a));
 
@@ -105,14 +102,7 @@ export default (props) => {
 
   return (
     <>
-      <View
-        style={{
-          flexDirection: "row",
-          paddingLeft: 5,
-          alignItems: "center",
-          gap: 5,
-        }}
-      >
+      <View style={styles.container}>
         {!!apis.length && !filter && (
           <TouchableOpacity
             style={{ padding: 5, backgroundColor: "white", borderRadius: 5 }}
@@ -123,7 +113,7 @@ export default (props) => {
               ])
             }
           >
-            <Text style={{ color: "black" }}>
+            <Text style={{ color: "black", fontSize: 10 }}>
               Clear {props.apis.length} APIs
             </Text>
           </TouchableOpacity>
@@ -137,6 +127,7 @@ export default (props) => {
               style={{
                 color: "red",
                 textDecorationLine: errorOnly ? "line-through" : undefined,
+                fontSize: 10,
               }}
             >
               {apis.filter(isError).length} error
@@ -144,26 +135,30 @@ export default (props) => {
             </Text>
           </TouchableOpacity>
         )}
-        <View style={{ flexDirection: "row", flex: 1 }}>
-          <TextInput
-            value={filter}
-            placeholder="Filter..."
-            clearButtonMode="always"
-            placeholderTextColor="grey"
-            style={{ paddingHorizontal: 5, color: "white", flex: 1 }}
-            onChangeText={(t) => setFilter(t.toLowerCase())}
-          />
-        </View>
-        {!!filter && (
+        {!!props.blacklists.length &&  !filter && (
           <TouchableOpacity
-            style={{ padding: 5 }}
-            onPress={() => setFilterUrlOnly((v) => !v)}
+            style={{ padding: 5, backgroundColor: "white", borderRadius: 5 }}
+            onPress={() =>
+              Alert.alert("Are you sure", "You want to clear all blacklists", [
+                { text: "Clear", onPress: () => props.setBlacklists([]), style: "cancel" },
+                { text: "Cancel" },
+              ])
+            }
           >
-            <Text style={{ color: "#ffffff88" }}>
-              {filterUrlOnly ? "by URL" : "by URL & body"}
+            <Text style={{ color: "black", fontSize: 10 }}>
+              Clear {props.blacklists.length} Blacklists
             </Text>
           </TouchableOpacity>
         )}
+
+        <TextInput
+          value={filter}
+          placeholder="Filter..."
+          clearButtonMode="always"
+          placeholderTextColor="grey"
+          style={{ paddingHorizontal: 5, color: "white", flex: 1 }}
+          onChangeText={(t) => setFilter(t.toLowerCase())}
+        />
       </View>
       {!filter &&
         !!props.maxNumOfApiToStore &&
@@ -173,15 +168,12 @@ export default (props) => {
           </Text>
         )}
       <SectionList
-        contentContainerStyle={{ padding: 5 }}
         keyExtractor={(i) => i.id}
         stickySectionHeadersEnabled
         showsVerticalScrollIndicator
         sections={apis
           .filter((a) =>
-            !filter || filterUrlOnly
-              ? a.request.url.includes(filter)
-              : JSON.stringify(a).toLowerCase().includes(filter)
+            !filter || JSON.stringify(a).toLowerCase().includes(filter)
           )
           .map((data) => ({ data: [data], id: data.id }))}
         renderItem={(i) =>
@@ -195,23 +187,15 @@ export default (props) => {
           const item = data[0];
           const hasResponse = !!item.response;
 
-          const duration = item.response?.timestamp
-            ? ~~(item.response?.timestamp - item.request.timestamp) / 1000
-            : 0;
+          const duration = item.response?.timestamp ? ~~(item.response?.timestamp - item.request.timestamp) / 1000 : 0;
           const isExpand = expands[item.id];
+          const color = hasResponse ? item.response.error ? "red" : "white" : "yellow";
+
           return (
             <View style={styles.rowHeader}>
               <Text
                 selectable
-                style={{
-                  flex: 1,
-                  color: hasResponse
-                    ? item.response.error
-                      ? "red"
-                      : "white"
-                    : "yellow",
-                  marginVertical: 10,
-                }}
+                style={{flex: 1, color, marginVertical: 10}}
               >
                 <Text style={{ opacity: 0.7 }}>
                   {item.request.method +
@@ -239,7 +223,7 @@ export default (props) => {
                   }
                   style={styles.actionButton}
                 >
-                  <Text style={{ color: "black" }}>
+                  <Text style={{ color: "black", fontSize: 10 }}>
                     {isExpand ? "Hide" : "Show"}
                   </Text>
                 </TouchableOpacity>
@@ -248,15 +232,19 @@ export default (props) => {
                     onPress={() => {
                       const content = { ...item };
                       delete content.id;
-                      Clipboard.setString(
-                        JSON.stringify(content, undefined, 4)
-                      );
+                      Clipboard.setString(JSON.stringify(content, undefined, 4));
                     }}
                     style={styles.actionButton}
                   >
-                    <Text style={{ color: "black" }}>Copy</Text>
+                    <Text style={{ color: "black", fontSize: 10 }}>Copy</Text>
                   </TouchableOpacity>
                 )}
+                <TouchableOpacity
+                  onPress={() => props.setBlacklists(v => [...v, item.request])}
+                  style={styles.actionButton}
+                >
+                  <Text style={{ color: "black", fontSize: 10 }}>Blacklist</Text>
+                </TouchableOpacity>
               </View>
             </View>
           );
@@ -267,6 +255,12 @@ export default (props) => {
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    paddingLeft: 5,
+    alignItems: "center",
+    gap: 5,
+  },
   details: {
     padding: 5,
     backgroundColor: "#171717",

package/index.jsx

@@ -50,7 +50,8 @@ export default ({
   labels = [],
   interceptResponse
 }) => {
-  const { apis, clear } = useApiInterceptor(maxNumOfApiToStore, interceptResponse);
+  const [blacklists, setBlacklists] = useState([]);
+  const { apis, clear } = useApiInterceptor(maxNumOfApiToStore, blacklists, interceptResponse);
 
   const [tab, setTab] = useState("api");
 
@@ -86,7 +87,7 @@ export default ({
         transform: [{ translateX }, { translateY }],
         position: "absolute",
         borderRadius,
-        backgroundColor: "#000000" + (isOpen ? "dd" : "bb"),
+        backgroundColor: "#000000" + (isOpen ? "ee" : "bb"),
         height,
         width,
         borderTopRightRadius: numPendingApiCalls || errors ? 0 : undefined,
@@ -162,9 +163,7 @@ export default ({
           )}
           {tab === "api" && (
             <Api
-              apis={apis}
-              clear={clear}
-              maxNumOfApiToStore={maxNumOfApiToStore}
+              {...{apis, clear, setBlacklists, blacklists, maxNumOfApiToStore}}
             />
           )}
         </SafeAreaView>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "This library's main usage is to be used by Non-Technical testers during UAT, SIT or any testing phase.",
   "main": "index.jsx",
   "scripts": {

package/useApiInterceptor.js

@@ -17,10 +17,11 @@ const parse = (data) => {
   }
 };
 
-export default (maxNumOfApiToStore, interceptResponse) => {
+export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
   const [apis, setApis] = useState([]);
 
   const makeRequest = (data) => {
+    if (blacklists.some(b => b.url === data.url && b.method === data.method)) return;
     const date = new Date();
     let hour = date.getHours();
     const minute = (date.getMinutes() + "").padStart(2, "0");
@@ -40,6 +41,12 @@ export default (maxNumOfApiToStore, interceptResponse) => {
     });
   };
 
+  useEffect(() => {
+    setApis((v) => (
+      v.filter(v => !blacklists.some(b => b.url === v.request.url && b.method === v.request.method))
+    ))
+  }, [blacklists])
+
   const receiveResponse = (data) => {
     const error = data.status < 200 || data.status >= 400;