react-native-in-app-debugger 1.0.6 → 1.0.9

package/Api.jsx

@@ -13,15 +13,21 @@ let Clipboard;
 try {
   Clipboard = require("@react-native-clipboard/clipboard")?.default;
 } catch (error) {
-  console.error("Error importing Clipboard:", error);
+  // console.error("Error importing Clipboard:", error);
 }
 
 const MAX_URL_LENGTH = 100;
 
 const Row = ({ item }) => {
-  const [tab, setTab] = useState("response-body");
+  const tabs = [
+    { value: "Response Body" },
+    { value: "Request Body", hide: !item.request.data },
+    { value: "Request Body" },
+  ];
+  const [tab, setTab] = useState(tabs[0].value);
   const hasResponse = item.response;
-  const Tab = ({ value, label }) => {
+  const Tab = ({ value, hide }) => {
+    if (hide) return null;
     const isSelected = value === tab;
     return (
       <TouchableOpacity
@@ -33,13 +39,17 @@ const Row = ({ item }) => {
         ]}
       >
         <Text
-          style={{ color: isSelected ? "#000" : "#fff", textAlign: "center" }}
+          style={{
+            color: isSelected ? "#000" : "#ffffff88",
+            textAlign: "center",
+          }}
         >
-          {label}
+          {value}
         </Text>
       </TouchableOpacity>
     );
   };
+
   return (
     <View style={styles.details}>
       {item.request.url.length > MAX_URL_LENGTH && (
@@ -49,24 +59,22 @@ const Row = ({ item }) => {
       )}
       <View>
         <View style={{ flexDirection: "row" }}>
-          <Tab value="response-body" label="Response Body" />
-          {!!item.request.data && (
-            <Tab value="request-body" label="Request Body" />
-          )}
-          <Tab value="request-header" label="Request Header" />
+          {tabs.map((t) => (
+            <Tab key={t.value} {...t} />
+          ))}
         </View>
 
-        {tab === "response-body" && hasResponse && (
+        {tab === tabs[0].value && hasResponse && (
           <Text style={{ color: "white" }}>
             {JSON.stringify(item.response.data, undefined, 4)}
           </Text>
         )}
-        {tab === "request-body" && (
+        {tab === tabs[1].value && (
           <Text style={{ color: "white" }}>
             {JSON.stringify(item.request.data, undefined, 4)}
           </Text>
         )}
-        {tab === "request-header" && (
+        {tab === tabs[2].value && (
           <Text style={{ color: "white" }}>
             {JSON.stringify(item.request.headers, undefined, 4)}
           </Text>
@@ -148,6 +156,13 @@ export default (props) => {
           </TouchableOpacity>
         )}
       </View>
+      {!filter &&
+        !!props.maxNumOfApiToStore &&
+        apis.length === props.maxNumOfApiToStore && (
+          <Text style={{ color: "#ffffff88", padding: 10 }}>
+            Capped to only latest {props.maxNumOfApiToStore} APIs
+          </Text>
+        )}
       <SectionList
         contentContainerStyle={{ padding: 5 }}
         keyExtractor={(i) => i.id}
@@ -166,19 +181,19 @@ export default (props) => {
           const item = data[0];
           const hasResponse = !!item.response;
 
-          let duration = 0;
-          if (item.response?.datetime) {
-            let [hr, min, sec] = item.request.datetime.split(" ")[0].split(":");
-            const start = new Date();
-            start.setHours(hr);
-            start.setMinutes(min);
-            start.setSeconds(sec);
-            [hr, min, sec] = item.response.datetime.split(" ")[0].split(":");
-            const end = new Date();
-            end.setHours(hr);
-            end.setMinutes(min);
-            end.setSeconds(sec);
-            duration = (end.getTime() - start.getTime()) / 1000;
+          const duration = item.response?.timestamp
+            ? ~~(item.response?.timestamp - item.request.timestamp) / 1000
+            : 0;
+          const date = new Date(item.request.datetime);
+          let hour = date.getHours();
+          const minute = date.getMinutes();
+
+          const amPm = hour >= 12 ? "PM" : "AM";
+
+          if (hour > 12) {
+            hour -= 12;
+          } else if (hour === 0) {
+            hour = 12;
           }
           const isExpand = expands[item.id];
           return (
@@ -199,7 +214,7 @@ export default (props) => {
                   {item.request.method +
                     ` (${item.response?.status ?? "no response"})` +
                     " - " +
-                    item.request.datetime +
+                    item.request.time +
                     (hasResponse ? " - " + duration + " second(s)" : "") +
                     "\n"}
                 </Text>

package/Variables.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Text, FlatList, TextInput } from 'react-native';
 
-export default ({ envs }) => {
+export default ({ variables }) => {
   const [filter, setFilter] = useState('');
 
   return (
@@ -15,13 +15,13 @@ export default ({ envs }) => {
       />
       <FlatList
         contentContainerStyle={{ padding: 5, paddingBottom: 20 }}
-        data={Object.keys(envs).filter(
-          (k) => !filter || envs[k].toLowerCase().includes(filter) || k.toLowerCase().includes(filter),
+        data={Object.keys(variables).filter(
+          (k) => !filter || variables[k].toLowerCase().includes(filter) || k.toLowerCase().includes(filter),
         )}
         keyExtractor={(i) => i}
         renderItem={({ item }) => (
           <Text selectable style={{ color: 'white', marginVertical: 10 }}>
-            {item + ' : ' + envs[item]}
+            {item + ' : ' + variables[item]}
           </Text>
         )}
       />

package/index.jsx

@@ -19,7 +19,7 @@ let DeviceInfo;
 try {
   DeviceInfo = require("react-native-device-info");
 } catch (error) {
-  console.error("Error importing DeviceInfo:", error);
+  // console.error("Error importing DeviceInfo:", error);
 }
 
 import useAnimation from "./useAnimation";
@@ -31,6 +31,13 @@ const dimension = Dimensions.get("window");
 
 const v = DeviceInfo?.getReadableVersion() || "";
 
+let modelOs;
+if (DeviceInfo) {
+  let model = DeviceInfo.getDeviceId();
+  if (model === "unknown") model = DeviceInfo.getModel();
+  modelOs = model + " - " + DeviceInfo.getSystemVersion();
+}
+
 const Label = (props) => (
   <Text
     {...props}
@@ -40,8 +47,8 @@ const Label = (props) => (
   />
 );
 
-export default ({ variables, env, version = v }) => {
-  const { apis, clear } = useApiInterceptor();
+export default ({ variables, env, version = v, maxNumOfApiToStore = 0 }) => {
+  const { apis, clear } = useApiInterceptor(maxNumOfApiToStore);
 
   const [tab, setTab] = useState("api");
 
@@ -74,6 +81,7 @@ export default ({ variables, env, version = v }) => {
         backgroundColor: "#000000" + (isOpen ? "dd" : "bb"),
         height,
         width,
+        borderTopRightRadius: numPendingApiCalls || errors ? 0 : undefined,
       }}
       {...(isOpen ? {} : panResponder.panHandlers)}
     >
@@ -96,19 +104,11 @@ export default ({ variables, env, version = v }) => {
           {(!!env || !!version) && (
             <Label>{(env || "") + (env ? " " : "") + version}</Label>
           )}
-          {!!DeviceInfo && (
-            <Label style={{ fontSize: 6 }}>
-              {DeviceInfo.getDeviceId() + " " + DeviceInfo.getSystemVersion()}
-            </Label>
-          )}
-          <Label style={{ fontSize: 6 }}>
-            {dimension.width + "x" + dimension.height}
-          </Label>
-          {variables?.GIT_BRANCH && (
-            <Label style={{ fontSize: 6 }}>{variables.GIT_BRANCH}</Label>
-          )}
+          {!!modelOs && <Label>{modelOs}</Label>}
+          <Label>{dimension.width + " x " + dimension.height}</Label>
+          {variables?.GIT_BRANCH && <Label>{variables.GIT_BRANCH}</Label>}
           {variables?.BUILD_DATE_TIME && (
-            <Label style={{ fontSize: 6 }}>{variables.BUILD_DATE_TIME}</Label>
+            <Label>{variables.BUILD_DATE_TIME}</Label>
           )}
         </TouchableOpacity>
       ) : (
@@ -129,7 +129,13 @@ export default ({ variables, env, version = v }) => {
                         borderColor: "white",
                       }}
                     >
-                      <Text style={{ color: "white", textAlign: "center" }}>
+                      <Text
+                        style={{
+                          color: "white",
+                          opacity: isSelected ? 1 : 0.5,
+                          textAlign: "center",
+                        }}
+                      >
                         {t.toUpperCase()}
                       </Text>
                     </TouchableOpacity>
@@ -143,7 +149,13 @@ export default ({ variables, env, version = v }) => {
           {tab === "variables" && !!variables && (
             <Variables variables={variables} />
           )}
-          {tab === "api" && <Api apis={apis} clear={clear} />}
+          {tab === "api" && (
+            <Api
+              apis={apis}
+              clear={clear}
+              maxNumOfApiToStore={maxNumOfApiToStore}
+            />
+          )}
         </SafeAreaView>
       )}
     </Animated.View>
@@ -156,12 +168,12 @@ const styles = StyleSheet.create({
     width: "100%",
     height: "100%",
   },
-  label: { color: "white", textAlign: "center", fontSize: 8 },
+  label: { color: "white", textAlign: "center", fontSize: 6 },
   badgeContainer: {
     gap: 3,
     flexDirection: "row",
-    top: -8,
-    right: -3,
+    top: -12,
+    right: -6,
     position: "absolute",
     zIndex: 999,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-in-app-debugger",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "",
   "main": "index.jsx",
   "scripts": {

package/useApiInterceptor.js

@@ -1,17 +1,7 @@
-// @ts-nocheck
 import { useEffect, useState } from "react";
-import { Platform } from "react-native";
 import XHRInterceptor from "react-native/Libraries/Network/XHRInterceptor.js";
 
 const filterNonBusinessRelatedAPI = true;
-const MAX_NUM_OF_API = 50;
-
-const now = () =>
-  new Date().toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-  });
 
 const shouldExclude = (url, method) =>
   ["HEAD"].includes(method) ||
@@ -27,20 +17,34 @@ const parse = (data) => {
   }
 };
 
-export default () => {
+export default (maxNumOfApiToStore) => {
   const [apis, setApis] = useState([]);
 
   const makeRequest = (data) => {
+    const date = new Date();
+    let hour = date.getHours();
+    const minute = (date.getMinutes() + "").padStart(2, "0");
+
+    const amPm = hour >= 12 ? "PM" : "AM";
+
+    if (hour > 12) {
+      hour -= 12;
+    } else if (hour === 0) {
+      hour = 12;
+    }
     const request = {
       ...data,
-      datetime: now(),
+      timestamp: performance.now(),
+      time: `${hour}:${minute} ${amPm}`,
     };
-    setApis((v) =>
-      [
+    setApis((v) => {
+      const newData = [
         { request, id: Date.now().toString(36) + Math.random().toString(36) },
         ...v,
-      ].slice(0, MAX_NUM_OF_API)
-    );
+      ];
+      if (maxNumOfApiToStore) newData.slice(0, maxNumOfApiToStore);
+      return newData;
+    });
   };
 
   const receiveResponse = (data) => {
@@ -59,7 +63,7 @@ export default () => {
 
         oldData[i].response = {
           ...data,
-          datetime: now(),
+          timestamp: performance.now(),
           error,
         };
         break;