react-native-in-app-debugger 2.0.6 → 2.0.8

package/Api/index.jsx

@@ -192,37 +192,40 @@ export default (props) => {
 
           return (
             <View style={styles.rowHeader}>
-              <Bookmark
-                color={bookmarkColor}
-                onPress={() => {
-                  props.setBookmarks((v) => {
-                    if (!bookmarkColor)
-                      return { ...v, [item.id]: getRandomBrightColor() };
-                    const newV = { ...v };
-                    delete newV[item.id];
-                    return newV;
-                  });
-                }}
-              />
-              <Text selectable style={{ flex: 1, color, marginVertical: 10 }}>
-                <Text style={{ color: "#555", fontSize: 8 }}>
-                  {item.id + "\n"}
-                </Text>
-
-                <Text style={{ opacity: 0.7 }}>
-                  {item.request.method +
-                    ` (${item.response?.status ?? "no response"})` +
-                    " - " +
-                    item.request.time +
-                    (hasResponse ? " - " + duration + " second(s)" : "") +
-                    "\n"}
+              <View style={{ flex: 1 }}>
+                <View style={{ flexDirection: "row", gap: 5 }}>
+                  <Bookmark
+                    color={bookmarkColor}
+                    onPress={() => {
+                      props.setBookmarks((v) => {
+                        if (!bookmarkColor)
+                          return { ...v, [item.id]: getRandomBrightColor() };
+                        const newV = { ...v };
+                        delete newV[item.id];
+                        return newV;
+                      });
+                    }}
+                  />
+                  <Text style={{ color: "#555", fontSize: 8 }}>
+                    {item.id + "\n"}
+                  </Text>
+                </View>
+                <Text selectable style={{ flex: 1, color }}>
+                  <Text style={{ opacity: 0.7 }}>
+                    {item.request.method +
+                      ` (${item.response?.status ?? "no response"})` +
+                      " - " +
+                      item.request.time +
+                      (hasResponse ? " - " + duration + " second(s)" : "") +
+                      "\n"}
+                  </Text>
+                  <Highlight
+                    text={item.request.url.slice(0, MAX_URL_LENGTH)}
+                    filter={filter}
+                  />
+                  {item.request.url.length > MAX_URL_LENGTH && "......."}
                 </Text>
-                <Highlight
-                  text={item.request.url.slice(0, MAX_URL_LENGTH)}
-                  filter={filter}
-                />
-                {item.request.url.length > MAX_URL_LENGTH && "......."}
-              </Text>
+              </View>
               <View style={{ gap: 4 }}>
                 <TouchableOpacity
                   onPress={() =>
@@ -254,30 +257,35 @@ export default (props) => {
                     <Text style={{ color: "black", fontSize: 10 }}>Copy</Text>
                   </TouchableOpacity>
                 )}
-                <TouchableOpacity
-                  onPress={() => {
-                    Alert.alert(
-                      "Are you sure",
-                      `You want to blacklist: \n\n(${item.request.method}) ${item.request.url} \n\nwhere all history logs for this API will be removed and all future request for this API will not be recorded?`,
-                      [
-                        {
-                          text: "Blacklist",
-                          onPress: () =>
-                            props.setBlacklists({
-                              method: item.request.method,
-                              url: item.request.url,
-                            }),
-                          style: "cancel",
-                        },
-                        { text: "Cancel" },
-                      ]
-                    );
-                  }}
-                  style={styles.actionButton}
-                >
-                  <BlacklistIcon />
-                </TouchableOpacity>
-                {item.interface === "axios" && (
+                {isExpand && (
+                  <TouchableOpacity
+                    onPress={() => {
+                      Alert.alert(
+                        "Are you sure",
+                        `You want to blacklist: \n\n(${item.request.method}) ${item.request.url} \n\nwhere all history logs for this API will be removed and all future request for this API will not be recorded?`,
+                        [
+                          {
+                            text: "Blacklist",
+                            onPress: () =>
+                              props.setBlacklists({
+                                method: item.request.method,
+                                url: item.request.url,
+                              }),
+                            style: "cancel",
+                          },
+                          { text: "Cancel" },
+                        ]
+                      );
+                    }}
+                    style={styles.actionButton}
+                  >
+                    <Text style={{ color: "black", fontSize: 10 }}>
+                      Blacklist{" "}
+                    </Text>
+                    <BlacklistIcon />
+                  </TouchableOpacity>
+                )}
+                {isExpand && item.interface === "axios" && (
                   <TouchableOpacity
                     onPress={() => {
                       props.goToMock(

package/Mock/MockDetails.jsx

@@ -1,20 +1,26 @@
-import { useEffect, useState } from 'react';
-import { Alert, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
-import Text from '../Text';
-import X from '../X';
+import { useEffect, useState } from "react";
+import {
+  Alert,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Text from "../Text";
+import X from "../X";
 
-const removeId = (key, value) => (key === 'id' ? undefined : value);
+const removeId = (key, value) => (key === "id" ? undefined : value);
 export default (p) => {
-  const [tab, setTab] = useState('response');
-  const [tmpResBody, setTmpResBody] = useState('');
-  const [tmpResStatus, setTmpResStatus] = useState('');
+  const [tab, setTab] = useState("response");
+  const [tmpResBody, setTmpResBody] = useState("");
+  const [tmpResStatus, setTmpResStatus] = useState("");
   const [tmpMockDetails, setTmpMockDetails] = useState({});
 
   const save = (cb) => {
-    if (tab === 'response') {
+    if (tab === "response") {
       try {
         if (!tmpResStatus) {
-          return Alert.alert('Sorry', 'Status code is required');
+          return Alert.alert("Sorry", "Status code is required");
         }
         const tmp = JSON.parse(tmpMockDetails);
         tmp.response.data = JSON.parse(tmpResBody);
@@ -46,25 +52,25 @@ export default (p) => {
         // })
         cb?.();
       } catch (e) {
-        return Alert.alert('Sorry', 'Please fix the response body JSON');
+        return Alert.alert("Sorry", "Please fix the response body JSON");
       }
-    } else if (tab === 'json') {
+    } else if (tab === "json") {
       cb?.();
-    } else if (tab === 'request') {
+    } else if (tab === "request") {
       cb?.();
     }
   };
-  const hasResponse = !!p.mockDetails?.response
+  const hasResponse = !!p.mockDetails?.response;
 
   const reset = () => {
     if (!p.mockDetails) return;
     setTmpMockDetails(JSON.stringify(p.mockDetails, removeId, 4));
     if (hasResponse) {
       setTmpResBody(JSON.stringify(p.mockDetails.response.data, removeId, 4));
-      setTmpResStatus(p.mockDetails.response.status + '' || '');
+      setTmpResStatus(p.mockDetails.response.status + "" || "");
     } else {
-      setTmpResBody('');
-      setTmpResStatus('');
+      setTmpResBody("");
+      setTmpResStatus("");
     }
   };
   useEffect(reset, [p.mockDetails]);
@@ -91,9 +97,11 @@ export default (p) => {
   // }, [p.mockDetails, tmpMockDetails]);
   if (!p.mockDetails) return null;
   // const canReset = JSON.stringify(p.mockDetails, removeId)?.replace(/\s+/g, '') !== tmpMockDetails?.replace?.(/\s+/g, '');
-  const canReset = !hasResponse ||
+  const canReset =
+    !hasResponse ||
     tmpResStatus != p.mockDetails.response.status ||
-    JSON.stringify(p.mockDetails.response.data)?.replace(/\s+/g, '') !== tmpResBody?.replace?.(/\s+/g, '');
+    JSON.stringify(p.mockDetails.response.data)?.replace(/\s+/g, "") !==
+      tmpResBody?.replace?.(/\s+/g, "");
   const isnew = !p.mocks.some((m) => m.id === p.mockDetails.id);
 
   // console.log('xxxxx response', JSON.stringify(p.mockDetails.response.data)?.replace(/\s+/g, ''));
@@ -106,17 +114,19 @@ export default (p) => {
         bottom: 0,
         left: 0,
         right: 0,
-        position: 'absolute',
+        position: "absolute",
         zIndex: 1000,
-        backgroundColor: 'grey',
-        width: '100%',
-        height: '100%',
+        backgroundColor: "grey",
+        width: "100%",
+        height: "100%",
         paddingTop: 50,
       }}
     >
       {!isnew && <Text style={{ opacity: 0.3 }}>{p.mockDetails.id}</Text>}
-      <View style={{ flexDirection: 'row' }}>
-        <Text style={{ flex: 1 }}>{`(${p.mockDetails.request.method}) ${p.mockDetails.request.url}`}</Text>
+      <View style={{ flexDirection: "row" }}>
+        <Text
+          style={{ flex: 1 }}
+        >{`(${p.mockDetails.request.method}) ${p.mockDetails.request.url}`}</Text>
         <TouchableOpacity onPress={() => p.setMockDetails(null)}>
           <X size={25} />
         </TouchableOpacity>
@@ -124,34 +134,46 @@ export default (p) => {
       <View
         style={{
           marginVertical: 10,
-          flexDirection: 'row',
-          justifyContent: 'space-around',
-          backgroundColor: 'black',
+          flexDirection: "row",
+          justifyContent: "space-around",
+          backgroundColor: "black",
           borderRadius: 5,
           padding: 5,
         }}
       >
-        {['request', 'response', 'json'].map((item) => {
+        {["request", "response", "json"].map((item) => {
           const isSelected = item === tab;
           return (
             <TouchableOpacity
-              style={{ backgroundColor: isSelected ? 'white' : 'black', padding: 3, borderRadius: 5 }}
+              style={{
+                backgroundColor: isSelected ? "white" : "black",
+                padding: 3,
+                borderRadius: 5,
+              }}
               onPress={() => {
-                save(() => setTab(item));
+                // save(() => setTab(item));
+                setTab(item);
               }}
             >
-              <Text style={{ textTransform: 'uppercase', color: isSelected ? 'black' : 'white' }}>{item}</Text>
+              <Text
+                style={{
+                  textTransform: "uppercase",
+                  color: isSelected ? "black" : "white",
+                }}
+              >
+                {item}
+              </Text>
             </TouchableOpacity>
           );
         })}
       </View>
-      {tab === 'response' && (
+      {tab === "response" && (
         <View style={{ gap: 3 }}>
-          <View style={{ flexDirection: 'row', gap: 5 }}>
+          <View style={{ flexDirection: "row", gap: 5 }}>
             <Text>Status</Text>
             <TextInput
-              style={{ backgroundColor: '#ccc', width: 50, padding: 2 }}
-              inputMode='numeric'
+              style={{ backgroundColor: "#ccc", width: 50, padding: 2 }}
+              inputMode="numeric"
               onChangeText={(t) => {
                 setTmpResStatus(t);
                 // try {
@@ -166,10 +188,15 @@ export default (p) => {
             />
           </View>
 
-          <View style={{ flexDirection: 'row', gap: 5 }}>
+          <View style={{ flexDirection: "row", gap: 5 }}>
             <Text>Body</Text>
             <TextInput
-              style={{ backgroundColor: '#ccc', height: 250, flex: 1, padding: 2 }}
+              style={{
+                backgroundColor: "#ccc",
+                height: 250,
+                flex: 1,
+                padding: 2,
+              }}
               multiline
               onChangeText={setTmpResBody}
               value={tmpResBody}
@@ -177,12 +204,22 @@ export default (p) => {
           </View>
         </View>
       )}
-      {tab !== 'response' && <Text style={{ marginTop: 30, textAlign: 'center' }}>To be developed later</Text>}
+      {tab !== "response" && (
+        <Text style={{ marginTop: 30, textAlign: "center" }}>
+          To be developed later
+        </Text>
+      )}
       {/* {tab === 'json' && (
         <TextInput onChangeText={setTmpMockDetails} value={tmpMockDetails} style={{ height: '40%' }} multiline />
       )} */}
-      {tab === 'response' && (
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
+      {tab === "response" && (
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            padding: 10,
+          }}
+        >
           {!isnew && (
             <TouchableOpacity
               style={styles.actionButton}
@@ -233,10 +270,10 @@ export default (p) => {
 
 const styles = StyleSheet.create({
   actionButton: {
-    backgroundColor: 'white',
+    backgroundColor: "white",
     borderRadius: 5,
     padding: 4,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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": {