feat: Add option to change sort order and set default to desc (#14)

README.md

@@ -64,7 +64,7 @@ npm install --save react-native-network-logger
 
 Call `startNetworkLogging` in your apps entry point to log every request, or call it on a button press to manually trigger it.
 
-```js
+```ts
 import { startNetworkLogging } from 'react-native-network-logger';
 
 startNetworkLogging();
@@ -73,7 +73,7 @@ AppRegistry.registerComponent('App', () => App);
 
 ### Display Requests and Responses
 
-```js
+```ts
 import NetworkLogger from 'react-native-network-logger';
 
 const MyScreen = () => <NetworkLogger />;
@@ -83,7 +83,7 @@ const MyScreen = () => <NetworkLogger />;
 
 You can change between the dark and light theme by passing the `theme` prop with `"dark"` or `"light"`.
 
-```js
+```ts
 import NetworkLogger from 'react-native-network-logger';
 
 const MyScreen = () => <NetworkLogger theme="dark" />;
@@ -93,10 +93,18 @@ const MyScreen = () => <NetworkLogger theme="dark" />;
 
 You can configure the max number of requests stored on the device using by calling `startNetworkLogging` with the `maxRequests` option. The default is `500`.
 
-```js
+```ts
 startNetworkLogging({ maxRequests: 500 });
 ```
 
+Set the sort order of requests. Options are `asc` or `desc`, default is `desc` (most recent at the top).
+
+```ts
+import NetworkLogger from 'react-native-network-logger';
+
+const MyScreen = () => <NetworkLogger sort="asc" />;
+```
+
 ## Example App
 
 To test the example app, after cloning the repo, install the required dependencies by running:

src/Logger.ts

@@ -22,7 +22,7 @@ export default class Logger {
 
   private getRequest = (xhrIndex?: number) => {
     if (xhrIndex === undefined) return undefined;
-    const requestIndex = this.xhrIdMap[xhrIndex];
+    const requestIndex = this.requests.length - this.xhrIdMap[xhrIndex] - 1;
     return this.requests[requestIndex];
   };
 
@@ -43,10 +43,10 @@ export default class Logger {
     const newRequest = new NetworkRequestInfo('XMLHttpRequest', method, url);
 
     if (this.requests.length >= this.maxRequests) {
-      this.requests.shift();
+      this.requests.pop();
     }
 
-    this.requests.push(newRequest);
+    this.requests.unshift(newRequest);
   };
 
   private requestHeadersCallback = (

src/components/NetworkLogger.tsx

@@ -8,20 +8,30 @@ import RequestDetails from './RequestDetails';
 
 interface Props {
   theme?: ThemeName;
+  sort?: 'asc' | 'desc';
 }
 
-const NetworkLogger: React.FC<Props> = ({ theme = 'light' }) => {
-  const [requests, setRequests] = useState(logger.getRequests());
+const sortRequests = (requests: NetworkRequestInfo[], sort: 'asc' | 'desc') => {
+  if (sort === 'asc') {
+    return requests.reverse();
+  }
+  return [...requests];
+};
+
+const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
+  const [requests, setRequests] = useState(
+    sortRequests(logger.getRequests(), sort)
+  );
   const [request, setRequest] = useState<NetworkRequestInfo>();
   const [showDetails, setShowDetails] = useState(false);
 
   useEffect(() => {
     logger.setCallback((updatedRequests: NetworkRequestInfo[]) => {
-      setRequests([...updatedRequests]);
+      setRequests(sortRequests(updatedRequests, sort));
     });
 
     logger.enableXHRInterception();
-  }, []);
+  }, [sort]);
 
   const showMore = () => {
     Alert.alert('More Options', undefined, [