react-native-xenon 0.1.0

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

@@ -0,0 +1,55 @@
+import { useCallback, useContext } from 'react';
+import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import { MainContext } from '../../../contexts';
+import { useScrollToBottom } from '../../../hooks';
+import type { LogMessage } from '../../../types';
+import ConsolePanelItem from '../items/ConsolePanelItem';
+
+const Separator = () => <View style={styles.divider} />;
+
+export default function ConsolePanel() {
+  const {
+    logInterceptor: { logMessages },
+    setPanelSelected,
+    detailsData,
+  } = useContext(MainContext)!;
+
+  const listRef = useScrollToBottom(logMessages.length);
+
+  const renderItem = useCallback<ListRenderItem<LogMessage>>(
+    ({ item }) => {
+      return (
+        <ConsolePanelItem
+          {...item}
+          onPress={() => {
+            detailsData.current = { console: item };
+            setPanelSelected(null);
+          }}
+        />
+      );
+    },
+    [detailsData, setPanelSelected],
+  );
+
+  return (
+    <FlatList
+      ref={listRef}
+      style={styles.container}
+      data={logMessages}
+      renderItem={renderItem}
+      ItemSeparatorComponent={Separator}
+      keyExtractor={(_, index) => index.toString()}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#888888',
+  },
+});

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

@@ -0,0 +1,64 @@
+import { useCallback, useContext } from 'react';
+import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import { MainContext } from '../../../contexts';
+import { useScrollToBottom } from '../../../hooks';
+import { NetworkType, type HttpRequest, type ID, type WebSocketRequest } from '../../../types';
+import NetworkPanelHeader from '../headers/NetworkPanelHeader';
+import NetworkPanelItem from '../items/NetworkPanelItem';
+
+const Separator = () => <View style={styles.divider} />;
+
+export default function NetworkPanel() {
+  const {
+    networkInterceptor: { networkRequests },
+    setPanelSelected,
+    detailsData,
+  } = useContext(MainContext)!;
+
+  const listRef = useScrollToBottom(networkRequests.size);
+
+  const renderItem = useCallback<ListRenderItem<[NonNullable<ID>, HttpRequest | WebSocketRequest]>>(
+    ({ item: [_, item] }) => {
+      const isWebSocket = item.type === NetworkType.WS;
+
+      const onPress = () => {
+        detailsData.current = { network: item };
+        setPanelSelected(null);
+      };
+
+      return (
+        <NetworkPanelItem
+          name={isWebSocket ? item.uri : item.url}
+          method={isWebSocket ? undefined : item.method}
+          status={item.status}
+          onPress={onPress}
+        />
+      );
+    },
+    [detailsData, setPanelSelected],
+  );
+
+  return (
+    <FlatList
+      ref={listRef}
+      data={Array.from(networkRequests)}
+      style={styles.container}
+      ListHeaderComponent={NetworkPanelHeader}
+      stickyHeaderIndices={[0]}
+      ItemSeparatorComponent={Separator}
+      keyExtractor={([key]) => key}
+      renderItem={renderItem}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 8,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#888888',
+  },
+});

package/src/utils.ts

@@ -0,0 +1,54 @@
+import type { HttpRequest } from './types';
+
+export const limitChar = (value: any, limit = 5000) => {
+  const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
+
+  return stringValue.length > limit
+    ? `${stringValue.slice(0, limit)}\n---LIMITED TO ${limit} CHARACTERS---`
+    : stringValue;
+};
+
+export const getHttpInterceptorId = () => {
+  const timestamp = Date.now().toString(36);
+  const randomNum = Math.random().toString(36).substring(2, 10);
+  return timestamp + randomNum;
+};
+
+export const keyValueToString = (key: string, value: any): string =>
+  `${key}: ${limitChar(value)}\n`;
+
+export const formatMethod = (method?: string) => method ?? 'GET';
+
+export const formatStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
+
+export const formatLogMessage = (type: string, values: any[]) => {
+  const message: string = values.reduce((pre, cur, index, array) => {
+    const isLastItem = index === array.length - 1;
+
+    return pre + limitChar(cur) + (isLastItem ? '' : ', ');
+  }, '');
+
+  return `${type.toUpperCase()}: ${message}`;
+};
+
+export const convertToCurl = (
+  method: HttpRequest['method'],
+  url: HttpRequest['url'],
+  headers: HttpRequest['requestHeaders'],
+  body: HttpRequest['body'],
+) => {
+  let curlCommand = `curl -X ${method.toUpperCase()} "${url}"`;
+
+  if (headers) {
+    for (const [key, value] of Object.entries(headers)) {
+      curlCommand += ` -H "${key}: ${value}"`;
+    }
+  }
+
+  if (body) {
+    const bodyString = typeof body === 'string' ? body : JSON.stringify(body);
+    curlCommand += ` -d '${bodyString}'`;
+  }
+
+  return curlCommand;
+};