react-native-in-app-debugger 1.0.47 → 1.0.49

package/index.jsx

@@ -8,7 +8,7 @@ import {
   Dimensions,
 } from "react-native";
 import Text from "./Text";
-import X from './X';
+import X from "./X";
 
 let DeviceInfo;
 try {
@@ -19,7 +19,8 @@ try {
 
 let LocalStorage;
 try {
-  LocalStorage = require("@react-native-async-storage/async-storage/src").default;
+  LocalStorage =
+    require("@react-native-async-storage/async-storage/src").default;
 } catch (error) {
   // console.error("Error importing LocalStorage:", error);
 }
@@ -28,6 +29,7 @@ import useAnimation from "./useAnimation";
 import Variables from "./Variables";
 import Api from "./Api";
 import useApiInterceptor from "./useApiInterceptor";
+import useStateRef from "./useStateRef";
 
 const dimension = Dimensions.get("window");
 
@@ -60,34 +62,42 @@ export default ({
   interceptResponse,
   tabs = [],
 }) => {
-  const [blacklists, setB] = useState([]);
+  const [blacklists, setB, blacklistRef] = useStateRef([]);
 
-  const setBlacklists = d => {
+  const setBlacklists = (d) => {
     if (!d) {
       setB([]);
-      LocalStorage?.removeItem('in-app-debugger-blacklist');
+      LocalStorage?.removeItem("in-app-debugger-blacklist");
     } else {
-      setB(v => {
+      setB((v) => {
         const newValue = Array.isArray(d) ? d : [...v, d];
-        LocalStorage?.setItem('in-app-debugger-blacklist', JSON.stringify(newValue));
+        LocalStorage?.setItem(
+          "in-app-debugger-blacklist",
+          JSON.stringify(newValue)
+        );
         return newValue;
       });
     }
-  }
+  };
 
   if (LocalStorage) {
     useEffect(() => {
       setTimeout(() => {
-        LocalStorage.getItem('in-app-debugger-blacklist').then(d => {
+        LocalStorage.getItem("in-app-debugger-blacklist").then((d) => {
           if (d) {
             setBlacklists(JSON.parse(d));
           }
         });
       }, 4000);
-    },[]);
+    }, []);
   }
 
-  const { apis, ...restApiInterceptor } = useApiInterceptor(maxNumOfApiToStore, blacklists, interceptResponse);
+  const { apis, ...restApiInterceptor } = useApiInterceptor(
+    maxNumOfApiToStore,
+    blacklists,
+    interceptResponse,
+    blacklistRef
+  );
 
   const [tab, setTab] = useState("api");
 
@@ -118,7 +128,7 @@ export default ({
     shouldShowDetails,
   } = useAnimation(badgeHeight);
 
-  const CustomTabComponent = tabs.find(t => tab === t.title)?.component;
+  const CustomTabComponent = tabs.find((t) => tab === t.title)?.component;
   return (
     <Animated.View
       style={{
@@ -163,34 +173,38 @@ export default ({
               <Label key={l}>{l}</Label>
             ))}
           </View>
-          <View style={{ flexDirection: "row", padding: 5 }}>
+          <View style={{ flexDirection: "row", padding: 5, gap: 6 }}>
             <View style={{ flex: 1, flexDirection: "row" }}>
               {!!variables &&
-                ["api", "variables", ...tabs.map(t => t.title)].map((t) => {
-                  const isSelected = t === tab;
-                  return (
-                    <TouchableOpacity
-                      onPress={() => setTab(t)}
-                      activeOpacity={isSelected ? 1 : 0.7}
-                      key={t}
-                      style={{
-                        flex: 1,
-                        borderBottomWidth: +isSelected,
-                        borderColor: "white",
-                      }}
-                    >
-                      <Text
+                ["api", "variables", ...tabs.map((t) => t.title)].map(
+                  (t, i) => {
+                    const isSelected = t === tab;
+                    return (
+                      <TouchableOpacity
+                        onPress={() => setTab(t)}
+                        activeOpacity={isSelected ? 1 : 0.7}
+                        key={t}
                         style={{
-                          color: "white",
-                          opacity: isSelected ? 1 : 0.5,
-                          textAlign: "center",
+                          flex: 1,
+                          borderBottomWidth: +isSelected,
+                          borderColor: "white",
                         }}
                       >
-                        {t.toUpperCase()}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
+                        <Text
+                          style={{
+                            color: "white",
+                            opacity: isSelected ? 1 : 0.5,
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                          }}
+                        >
+                          {t}
+                          {!i && apis.length && <Text> ({apis.length})</Text>}
+                        </Text>
+                      </TouchableOpacity>
+                    );
+                  }
+                )}
             </View>
             <X onPress={() => setIsOpen(false)} />
           </View>
@@ -199,7 +213,7 @@ export default ({
           )}
           {tab === "api" && (
             <Api
-              {...{apis, setBlacklists, blacklists, maxNumOfApiToStore}}
+              {...{ apis, setBlacklists, blacklists, maxNumOfApiToStore }}
               {...restApiInterceptor}
             />
           )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "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,7 +17,7 @@ const parse = (data) => {
   }
 };
 
-export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
+export default (maxNumOfApiToStore, blacklists, interceptResponse, blacklistRef) => {
   const [apis, setApis] = useState([]);
   const [bookmarks, setBookmarks] = useState({});
 
@@ -35,7 +35,7 @@ export default (maxNumOfApiToStore, blacklists, interceptResponse) => {
   }, [apis]);
 
   const makeRequest = (data) => {
-    if (blacklists.some((b) => b.url === data.url && b.method === data.method)) return;
+    if (blacklistRef.current.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');

package/useStateRef.js

@@ -0,0 +1,18 @@
+import { useCallback, useRef, useState, SetStateAction, Dispatch } from "react";
+
+const isFunction = (setStateAction) =>
+  typeof setStateAction === "function";
+
+
+export default (initialState) => {
+  const [state, setState] = useState(initialState);
+  const ref = useRef(state);
+
+  const dispatch = useCallback((setStateAction) => {
+    ref.current = isFunction(setStateAction) ? setStateAction(ref.current) : setStateAction;
+
+    setState(ref.current);
+  }, []);
+
+  return [state, dispatch, ref];
+};