Merge remote-tracking branch 'origin/master' into resume-apply-missed…

…-logs

CHANGELOG.md

@@ -1,5 +1,25 @@
 
 
+## [1.16.1](https://github.com/alexbrazier/react-native-network-logger/compare/v1.16.0...v1.16.1) (2024-04-13)
+
+
+### Bug Fixes
+
+* incorrect export of types ([#99](https://github.com/alexbrazier/react-native-network-logger/issues/99)) ([484414f](https://github.com/alexbrazier/react-native-network-logger/commit/484414f07ae8272a7bd7224f1c78e04dc670cfa9))
+
+# [1.16.0](https://github.com/alexbrazier/react-native-network-logger/compare/v1.15.0...v1.16.0) (2024-04-12)
+
+
+### Bug Fixes
+
+* requests not being updated when maxRequests is reached ([#88](https://github.com/alexbrazier/react-native-network-logger/issues/88)) ([89e14ae](https://github.com/alexbrazier/react-native-network-logger/commit/89e14aeff895097c8445bbdfc51ffe354d141fa4))
+
+
+### Features
+
+* Compact vs regular rows ([#92](https://github.com/alexbrazier/react-native-network-logger/issues/92)) ([3913d9d](https://github.com/alexbrazier/react-native-network-logger/commit/3913d9dc058147ed5532d72dbe468ce2e749561a))
+* Disable the singleton logger ([#93](https://github.com/alexbrazier/react-native-network-logger/issues/93)) ([1191b61](https://github.com/alexbrazier/react-native-network-logger/commit/1191b61e9f6bf40ade4bee09718c14334e47581c))
+
 # [1.15.0](https://github.com/alexbrazier/react-native-network-logger/compare/v1.14.1...v1.15.0) (2023-05-24)
 
 
@@ -215,4 +235,4 @@
 
 
 
-## [1.0.1](https://github.com/alexbrazier/react-native-network-logger/compare/v1.0.3...v1.1.0) (2020-06-19)
+## [1.0.1](https://github.com/alexbrazier/react-native-network-logger/compare/v1.0.3...v1.1.0) (2020-06-19)

README.md

@@ -166,6 +166,26 @@ import NetworkLogger from 'react-native-network-logger';
 const MyScreen = () => <NetworkLogger sort="asc" />;
 ```
 
+#### Max Rows
+
+Set the maximum number of rows to display in the list to improve rendering. Default is same as request limit.
+
+```tsx
+import NetworkLogger from 'react-native-network-logger';
+
+const MyScreen = () => <NetworkLogger maxRows={100} />;
+```
+
+#### Compact Rows
+
+Make the rows smaller to fit more on the screen.
+
+```tsx
+import NetworkLogger from 'react-native-network-logger';
+
+const MyScreen = () => <NetworkLogger compact />;
+```
+
 #### Force Enable
 
 If you are running another network logging interceptor, e.g. Reactotron, the logger will not start as only one can be run at once. You can override this behaviour and force the logger to start by using the `forceEnable` option.

example/yarn.lock

@@ -3622,9 +3622,9 @@ ip-regex@^2.1.0:
   integrity sha512-58yWmlHpp7VYfcdTwMTvwMmqx/Elfxjd9RXTDyMsbL7lLWmhMylLEqiYVLKuLzOZqVgiWXD9MfR62Vv89VRxkw==
 
 ip@^1.1.5:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"
-  integrity sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
 
 ipaddr.js@^1.9.0:
   version "1.9.1"
@@ -5865,9 +5865,9 @@ symbol-observable@^4.0.0:
   integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
 
 tar@^6.0.2, tar@^6.0.5:
-  version "6.1.15"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.15.tgz#c9738b0b98845a3b344d334b8fa3041aaba53a69"
-  integrity sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"

global-jest-setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC';
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-network-logger",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "description": "An HTTP traffic monitor for React Native with zero dependencies",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -79,7 +79,8 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
       "<rootDir>/lib/"
-    ]
+    ],
+    "globalSetup": "<rootDir>/global-jest-setup.js"
   },
   "husky": {
     "hooks": {

src/components/NetworkLogger.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react-native';
+
+import { act, fireEvent, render, within } from '@testing-library/react-native';
 import NetworkLogger, { NetworkLoggerProps } from './NetworkLogger';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
@@ -122,3 +123,59 @@ describe('options', () => {
     unmount();
   });
 });
+
+describe('regular vs compact row', () => {
+  it.each([true, false])('should render the row compact: %p', (compact) => {
+    const requests = [] as NetworkRequestInfo[];
+    const spyOnLoggerSetCallback = jest.spyOn(logger, 'setCallback');
+    const emitCallback = jest.fn();
+    spyOnLoggerSetCallback.mockImplementation((callback) => {
+      return emitCallback.mockImplementation((id: number) => {
+        if (id !== 1) {
+          const request = new NetworkRequestInfo(
+            `${id}`,
+            'XMLHttpRequest',
+            'GET',
+            `http://example.com/${id}`
+          );
+          requests.unshift(request);
+          return callback(requests);
+        }
+        const request = new NetworkRequestInfo(
+          '1',
+          'XMLHttpRequest',
+          'POST',
+          'http://example.com/1'
+        );
+        request.startTime = new Date('2000-01-01T12:34:00.000Z').getTime();
+        request.endTime = new Date('2000-01-01T12:34:56.789Z').getTime();
+        request.status = 200;
+        requests.unshift(request);
+        return callback(requests);
+      });
+    });
+
+    const { getByText } = render(<MyNetworkLogger compact={compact} />);
+
+    act(() => {
+      emitCallback(1);
+    });
+
+    const method = getByText(/^post$/i);
+    expect(method).toBeTruthy();
+    expect(!!within(method.parent!.parent!).queryByText(/^12:34:00$/i)).toBe(
+      compact
+    );
+
+    const status = getByText(/^200$/i);
+    expect(status).toBeTruthy();
+    expect(
+      within(status.parent!.parent!).queryByText(/^56789ms$/i)
+    ).toBeTruthy();
+    expect(within(status.parent!.parent!).queryByText(/^12:34:00$/i)).not.toBe(
+      compact
+    );
+
+    spyOnLoggerSetCallback.mockRestore();
+  });
+});

src/components/NetworkLogger.tsx

@@ -13,6 +13,7 @@ import Unmounted from './Unmounted';
 interface Props {
   theme?: ThemeName | DeepPartial<Theme>;
   sort?: 'asc' | 'desc';
+  compact?: boolean;
   maxRows?: number;
 }
 
@@ -26,6 +27,7 @@ const sortRequests = (requests: NetworkRequestInfo[], sort: 'asc' | 'desc') => {
 const NetworkLogger: React.FC<Props> = ({
   theme = 'light',
   sort = 'desc',
+  compact = false,
   maxRows,
 }) => {
   const [requests, setRequests] = useState(logger.getRequests());
@@ -134,6 +136,7 @@ const NetworkLogger: React.FC<Props> = ({
                 </View>
               )}
               <RequestList
+                compact={compact}
                 requestsInfo={requestsInfo}
                 options={options}
                 showDetails={showDetails && !!request}

src/components/Options.tsx

@@ -50,6 +50,7 @@ const Options: React.FC<Props> = ({ options }) => {
               <Button
                 key={text}
                 onPress={async () => {
+                  // Need to await in order for the getHar option to work
                   await onPress();
                   setOpenOptions(false);
                 }}

src/components/RequestList.tsx

@@ -11,6 +11,7 @@ interface Props {
   onPressItem: (item: NetworkRequestInfo['id']) => void;
   options: { text: string; onPress: () => Promise<void> }[];
   showDetails: boolean;
+  compact: boolean;
   maxRows: number;
 }
 
@@ -19,6 +20,7 @@ const RequestList: React.FC<Props> = ({
   onPressItem,
   options,
   showDetails,
+  compact,
   maxRows,
 }) => {
   const styles = useThemedStyles(themedStyles);
@@ -50,7 +52,11 @@ const RequestList: React.FC<Props> = ({
         keyExtractor={(item) => item.id}
         data={filteredRequests}
         renderItem={({ item }) => (
-          <ResultItem request={item} onPress={() => onPressItem(item.id)} />
+          <ResultItem
+            request={item}
+            onPress={() => onPressItem(item.id)}
+            compact={compact}
+          />
         )}
       />
     </View>

src/components/ResultItem.tsx

@@ -8,9 +8,10 @@ interface Props {
   request: NetworkRequestInfoRow;
   onPress?(): void;
   style?: any;
+  compact?: boolean;
 }
 
-const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
+const ResultItem: React.FC<Props> = ({ style, request, onPress, compact }) => {
   const styles = useThemedStyles(themedStyles);
   const theme = useTheme();
   const onDetailsPage = !onPress;
@@ -63,23 +64,34 @@ const ResultItem: React.FC<Props> = ({ style, request, onPress }) => {
       style={[styles.container, style]}
       {...(onPress && { accessibilityRole: 'button', onPress })}
     >
-      <View style={styles.leftContainer}>
-        <Text
-          style={[styles.text, styles.method]}
-          accessibilityLabel={`Method: ${request.method}`}
-        >
-          {request.method}
-        </Text>
-        <Text
-          style={[styles.status, getStatusStyles(request.status)]}
-          accessibilityLabel={`Response status ${status}`}
-        >
-          {status}
-        </Text>
-        <Text style={styles.text}>
-          {request.duration > 0 ? `${request.duration}ms` : 'pending'}
-        </Text>
-        <Text style={styles.time}>{getTime(request.startTime)}</Text>
+      <View
+        style={compact ? styles.leftContainerCompact : styles.leftContainer}
+      >
+        <View style={styles.leftContainerSplit}>
+          <Text
+            style={[styles.text, styles.method]}
+            accessibilityLabel={`Method: ${request.method}`}
+          >
+            {request.method}
+          </Text>
+          {compact && (
+            <Text style={styles.time}>{getTime(request.startTime)}</Text>
+          )}
+        </View>
+        <View style={styles.leftContainerSplit}>
+          <Text
+            style={[styles.status, getStatusStyles(request.status)]}
+            accessibilityLabel={`Response status ${status}`}
+          >
+            {status}
+          </Text>
+          <Text style={styles.time}>
+            {request.duration > 0 ? `${request.duration}ms` : 'pending'}
+          </Text>
+          {!compact && (
+            <Text style={styles.time}>{getTime(request.startTime)}</Text>
+          )}
+        </View>
       </View>
       <View style={[styles.content]}>
         <Text
@@ -119,6 +131,13 @@ const themedStyles = (theme: Theme) =>
       flexDirection: 'column',
       alignItems: 'center',
     },
+    leftContainerCompact: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    leftContainerSplit: {
+      alignItems: 'center',
+    },
     status: {
       fontWeight: 'bold',
       borderWidth: 1,
@@ -157,8 +176,8 @@ const themedStyles = (theme: Theme) =>
       backgroundColor: theme.colors.secondary,
       borderRadius: 10,
       alignSelf: 'flex-start',
-      padding: 5,
-      marginTop: 5,
+      padding: 4,
+      marginTop: 4,
     },
     gqlText: {
       color: theme.colors.onSecondary,

src/index.tsx

@@ -17,4 +17,4 @@ export const clearRequests = () => logger.clearRequests();
 
 export { getBackHandler } from './backHandler';
 
-export { ThemeName, Theme } from './theme';
+export type { ThemeName, Theme } from './theme';

yarn.lock

@@ -5141,14 +5141,14 @@ invariant@*, invariant@^2.2.4:
     loose-envify "^1.0.0"
 
 ip@^1.1.5, ip@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"
-  integrity sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
 
 ip@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
-  integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.1.tgz#e8f3595d33a3ea66490204234b77636965307105"
+  integrity sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==
 
 is-absolute@^1.0.0:
   version "1.0.0"