react-native-xenon 0.1.0 → 0.2.1

package/src/ui/components/items/NetworkPanelItem.tsx

@@ -1,17 +1,29 @@
 import { useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
-import type { HttpRequest, WebSocketRequest } from '../../../types';
-import { formatMethod, formatStatusCode } from '../../../utils';
+import type { HttpRequest, NetworkRequest } from '../../../types';
+import {
+  formatRequestDuration,
+  formatRequestMethod,
+  formatRequestStatusCode,
+} from '../../../utils';
+import colors from '../../../colors';
 
 interface NetworkPanelItemProps {
-  name: HttpRequest['url'] | WebSocketRequest['uri'];
   method?: HttpRequest['method'];
-  status?: HttpRequest['status'] | WebSocketRequest['status'];
+  name: NetworkRequest['url'];
+  duration?: NetworkRequest['duration'];
+  status?: NetworkRequest['status'];
   onPress: () => void;
 }
 
-export default function NetworkPanelItem({ name, status, method, onPress }: NetworkPanelItemProps) {
+export default function NetworkPanelItem({
+  method,
+  name,
+  duration,
+  status,
+  onPress,
+}: NetworkPanelItemProps) {
   const requestName = useMemo(() => {
     if (!name) return '[failed]';
 
@@ -28,21 +40,27 @@ export default function NetworkPanelItem({ name, status, method, onPress }: Netw
 
   return (
     <TouchableOpacity onPress={onPress} style={styles.container}>
-      <View style={[styles.column, styles.mainColumn]}>
+      <View style={styles.column}>
+        <Text numberOfLines={1} style={styles.text}>
+          {formatRequestMethod(method)}
+        </Text>
+      </View>
+
+      <View style={[styles.column, styles.nameColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {requestName}
         </Text>
       </View>
 
-      <View style={styles.column}>
+      <View style={[styles.column, styles.durationColumn]}>
         <Text numberOfLines={1} style={styles.text}>
-          {formatMethod(method)}
+          {formatRequestDuration(duration)}
         </Text>
       </View>
 
       <View style={styles.column}>
         <Text numberOfLines={1} style={styles.text}>
-          {formatStatusCode(status)}
+          {formatRequestStatusCode(status)}
         </Text>
       </View>
     </TouchableOpacity>
@@ -54,9 +72,11 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
   },
-  mainColumn: {
-    flex: 7,
-    flexShrink: 1,
+  nameColumn: {
+    flex: 5,
+  },
+  durationColumn: {
+    flex: 2,
   },
   column: {
     flex: 1.5,
@@ -65,7 +85,7 @@ const styles = StyleSheet.create({
     paddingRight: 0,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });

package/src/ui/components/items/NetworkRequestDetailsHeaderItem.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { NetworkTab } from '../../../types';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsHeaderItemProps {
   visible: boolean;
@@ -43,10 +44,10 @@ const styles = StyleSheet.create({
   activeItem: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   itemText: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/items/NetworkRequestDetailsItem.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, Text } from 'react-native';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsItemProps {
   label?: string;
@@ -33,11 +34,11 @@ export default function NetworkRequestDetailsItem({
 const styles = StyleSheet.create({
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/panels/ConsolePanel.tsx

@@ -4,6 +4,7 @@ import { MainContext } from '../../../contexts';
 import { useScrollToBottom } from '../../../hooks';
 import type { LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
+import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -50,6 +51,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/ui/components/panels/NetworkPanel.tsx

@@ -5,6 +5,7 @@ import { useScrollToBottom } from '../../../hooks';
 import { NetworkType, type HttpRequest, type ID, type WebSocketRequest } from '../../../types';
 import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
+import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -28,8 +29,9 @@ export default function NetworkPanel() {
 
       return (
         <NetworkPanelItem
-          name={isWebSocket ? item.uri : item.url}
           method={isWebSocket ? undefined : item.method}
+          name={item.url}
+          duration={item.duration}
           status={item.status}
           onPress={onPress}
         />
@@ -59,6 +61,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/utils.ts

@@ -17,9 +17,12 @@ export const getHttpInterceptorId = () => {
 export const keyValueToString = (key: string, value: any): string =>
   `${key}: ${limitChar(value)}\n`;
 
-export const formatMethod = (method?: string) => method ?? 'GET';
+export const formatRequestMethod = (method?: string) => method ?? 'GET';
 
-export const formatStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
+export const formatRequestDuration = (duration?: number) =>
+  duration ? `${duration}ms` : 'pending';
+
+export const formatRequestStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
 
 export const formatLogMessage = (type: string, values: any[]) => {
   const message: string = values.reduce((pre, cur, index, array) => {