react-native-xenon 0.6.0 → 1.0.0

package/src/ui/components/details/NetworkRequestDetails.tsx

@@ -1,5 +1,5 @@
-import { useContext, useRef, type JSX, type ReactNode } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
+import { forwardRef, useContext, useRef, type JSX } from 'react';
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
 import {
   beautify,
@@ -7,158 +7,175 @@ import {
   formatRequestMethod,
   formatRequestStatusCode,
   getNetworkUtils,
-  keyValueToString,
-  limitChar,
 } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import { type DetailTab, type HttpRequest, type WebSocketRequest } from '../../../types';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
 
-interface NetworkRequestDetailsProps {
-  item: HttpRequest | WebSocketRequest;
-}
-
-export default function NetworkRequestDetails({ item }: NetworkRequestDetailsProps) {
-  const {
-    debuggerState: { detailsData },
-  } = useContext(MainContext)!;
-
-  const beautified = useRef<boolean | null>(null);
-  const shouldBeautifiedRefUpdate = beautified.current !== detailsData?.beautified;
-
-  const {
-    isHttp,
-    requestUrl,
-    overviewShown,
-    headersShown,
-    requestShown,
-    responseShown,
-    messagesShown,
-  } = getNetworkUtils(item);
-
-  const content = useRef<Record<Exclude<DetailTab, 'logMessage'>, JSX.Element | null>>({
-    overview: null,
-    headers: null,
-    request: null,
-    response: null,
-    messages: null,
-  });
-
-  if (overviewShown && !content.current.overview) {
-    content.current.overview = (
-      <>
-        <NetworkRequestDetailsItem label="Request Type" content={item.type} />
-
-        <NetworkRequestDetailsItem label="Request URL" content={item.url} />
+const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle> }>(
+  ({ style }, ref) => {
+    const {
+      debuggerState: { detailsData },
+    } = useContext(MainContext)!;
+
+    const item = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
+
+    const beautified = useRef<boolean | null>(null);
+    const shouldBeautifiedRefUpdate =
+      beautified.current !== detailsData?.beautified &&
+      typeof detailsData?.beautified === 'boolean';
+
+    const {
+      isHttp,
+      requestUrl,
+      overviewShown,
+      headersShown,
+      requestShown,
+      responseShown,
+      messagesShown,
+    } = getNetworkUtils(item);
+
+    const content = useRef<Record<Exclude<DetailTab, 'logMessage'>, JSX.Element | null>>({
+      overview: null,
+      headers: null,
+      request: null,
+      response: null,
+      messages: null,
+    });
 
-        <NetworkRequestDetailsItem
-          label="Request Method"
-          content={formatRequestMethod(isHttp ? (item as HttpRequest).method : undefined)}
-        />
+    if (!item) {
+      content.current.overview = null;
+      content.current.headers = null;
+      content.current.request = null;
+      content.current.response = null;
+      content.current.messages = null;
+      beautified.current = null;
+    }
 
-        <NetworkRequestDetailsItem
-          label="Duration"
-          content={formatRequestDuration(item.duration)}
-        />
+    if (overviewShown && !content.current.overview && item) {
+      content.current.overview = (
+        <>
+          <NetworkRequestDetailsItem label="Request Type" content={item.type} />
 
-        <NetworkRequestDetailsItem
-          label="Status Code"
-          content={formatRequestStatusCode(item.status)}
-        />
-      </>
-    );
-  }
+          <NetworkRequestDetailsItem label="Request URL" content={item.url} />
 
-  if (headersShown && !content.current.headers) {
-    content.current.headers = (
-      <>
-        {!isHttp && (
           <NetworkRequestDetailsItem
-            label="Headers"
-            content={limitChar((item as WebSocketRequest).options?.headers)}
+            label="Request Method"
+            content={formatRequestMethod(isHttp ? (item as HttpRequest).method : undefined)}
           />
-        )}
 
-        {isHttp && (
           <NetworkRequestDetailsItem
-            label="Request Headers"
-            content={(item as HttpRequest).requestHeadersString}
+            label="Status Code"
+            content={formatRequestStatusCode(item.status)}
           />
-        )}
 
-        {isHttp && (
           <NetworkRequestDetailsItem
-            label="Response Headers"
-            content={(item as HttpRequest).responseHeaders}
+            label="Start Time"
+            content={new Date(item.startTime ?? 0).toUTCString()}
           />
-        )}
-      </>
-    );
-  }
 
-  if (requestShown && shouldBeautifiedRefUpdate) {
-    const queryStringParameters: ReactNode[] = [];
+          <NetworkRequestDetailsItem
+            label="End Time"
+            content={new Date(item.endTime ?? 0).toUTCString()}
+          />
+
+          <NetworkRequestDetailsItem
+            label="Duration"
+            content={formatRequestDuration(item.startTime, item.endTime)}
+          />
+        </>
+      );
+    }
+
+    if (headersShown && !content.current.headers && item) {
+      let headers: [string, string][] = [];
+      let requestHeaders: [string, string][] = [];
+      let responseHeaders: [string, string][] = [];
+
+      if (!isHttp) {
+        headers = Object.entries((item as WebSocketRequest).options?.headers ?? {});
+      }
+
+      if (isHttp) {
+        for (const [key, value] of ((item as HttpRequest).requestHeaders ?? new Map()).entries()) {
+          requestHeaders.push([key, value]);
+        }
+        for (const [key, value] of ((item as HttpRequest).responseHeaders ?? new Map()).entries()) {
+          responseHeaders.push([key, value]);
+        }
+      }
+
+      content.current.headers = (
+        <>
+          {!isHttp && !!headers.length && (
+            <NetworkRequestDetailsItem label="Headers" content={headers} />
+          )}
+
+          {isHttp && !!requestHeaders.length && (
+            <NetworkRequestDetailsItem label="Request Headers" content={requestHeaders} />
+          )}
+
+          {isHttp && !!responseHeaders.length && (
+            <NetworkRequestDetailsItem label="Response Headers" content={responseHeaders} />
+          )}
+        </>
+      );
+    }
+
+    if (requestShown && shouldBeautifiedRefUpdate && item && requestUrl.searchParams) {
+      let queryStringParameters: [string, string][] = [];
 
-    requestUrl.searchParams.forEach((value, name) => {
-      queryStringParameters.push(
+      requestUrl.searchParams.forEach((value, name) => {
+        queryStringParameters.push([name, value]);
+      });
+
+      const body = beautify((item as HttpRequest).body, detailsData?.beautified ?? false);
+
+      content.current.request = (
+        <>
+          {!!queryStringParameters.length && (
+            <NetworkRequestDetailsItem label="Query String" content={queryStringParameters} />
+          )}
+
+          {!!body && <NetworkRequestDetailsItem label="Body" content={body} />}
+        </>
+      );
+    }
+
+    if (responseShown && shouldBeautifiedRefUpdate && item) {
+      content.current.response = (
         <NetworkRequestDetailsItem
-          key={keyValueToString(name, value, null)}
-          label="Query String"
-          content={keyValueToString(name, value, null)}
-        />,
+          label="Response"
+          content={beautify((item as HttpRequest).response, detailsData?.beautified ?? false)}
+        />
       );
-    });
+    }
 
-    content.current.request = (
-      <>
-        {queryStringParameters}
+    if (messagesShown && !content.current.messages && item) {
+      content.current.messages = (
         <NetworkRequestDetailsItem
-          label="Body"
-          content={beautify((item as HttpRequest).body, detailsData?.beautified ?? false)}
+          label="Messages"
+          content={(item as WebSocketRequest).messages!}
         />
-      </>
-    );
-  }
-
-  if (responseShown && shouldBeautifiedRefUpdate) {
-    content.current.response = (
-      <NetworkRequestDetailsItem
-        label="Response"
-        content={beautify((item as HttpRequest).response, detailsData?.beautified ?? false)}
-      />
-    );
-  }
-
-  if (messagesShown && !content.current.messages) {
-    content.current.messages = (
-      <NetworkRequestDetailsItem
-        label="Messages"
-        content={`\n${(item as WebSocketRequest).messages}`}
-      />
-    );
-  }
+      );
+    }
 
-  if (shouldBeautifiedRefUpdate) {
-    beautified.current = detailsData?.beautified ?? false;
-  }
+    if (shouldBeautifiedRefUpdate) {
+      beautified.current = detailsData?.beautified ?? false;
+    }
 
-  return (
-    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
-      {content.current[detailsData!.selectedTab as keyof typeof content.current]}
-    </ScrollView>
-  );
-}
+    return (
+      <ScrollView ref={ref} style={[styles.container, style]}>
+        {content.current[detailsData?.selectedTab as keyof typeof content.current]}
+      </ScrollView>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-  },
-  contentContainer: {
-    paddingHorizontal: 8,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: colors.gray,
+    padding: 8,
   },
   text: {
     fontSize: 14,
@@ -176,3 +193,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
+
+export default NetworkRequestDetails;

package/src/ui/components/headers/ConsoleHeader.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import type { PanelState } from '../../../core/refs';
+import Divider from '../common/Divider';
+import HeaderComponents from './HeaderComponents';
+import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
+
+interface ConsoleHeaderProps {
+  selectedPanel: PanelState;
+  style?: StyleProp<ViewStyle>;
+}
+
+const ConsoleHeader = forwardRef<ScrollView, ConsoleHeaderProps>(
+  ({ selectedPanel, style }, ref) => {
+    return (
+      <HeaderComponents.Wrapper ref={ref} style={style}>
+        <HeaderComponents.Back selectedPanel={selectedPanel} />
+        <HeaderComponents.MainButtons />
+        <Divider type="vertical" />
+        <HeaderComponents.TabItem tab="logMessage" label="Console" />
+      </HeaderComponents.Wrapper>
+    );
+  },
+);
+
+export default ConsoleHeader;

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -1,157 +1,28 @@
-import { useCallback, useContext, useMemo, useRef } from 'react';
-import { ScrollView, Share, StyleSheet, View } from 'react-native';
+import { forwardRef, useContext } from 'react';
+import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
-import { convertToCurl, getNetworkUtils } from '../../../core/utils';
-import colors from '../../../theme/colors';
+import refs, { PanelState } from '../../../core/refs';
 import icons from '../../../theme/icons';
-import { DebuggerPanel, NetworkType, type DetailTab } from '../../../types';
+import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+import HeaderComponents from './HeaderComponents';
 
-let isSharing = false;
-
-export default function DebuggerHeader() {
-  const {
-    debuggerState: { detailsData, selectedPanel },
-    setDebuggerState,
-    networkInterceptor,
-    consoleInterceptor,
-  } = useContext(MainContext)!;
-
-  const lastSelectedPanel = useRef<DebuggerPanel>(selectedPanel ?? DebuggerPanel.Network);
-
-  const backButton = useMemo(
-    () => (
-      <DebuggerHeaderItem
-        content={icons.arrowLeft}
-        onPress={() => {
-          setDebuggerState(draft => {
-            draft.selectedPanel = lastSelectedPanel.current;
-            draft.detailsData = null;
-          });
-        }}
-      />
-    ),
-    [setDebuggerState],
-  );
-
-  const renderTabItem = useCallback(
-    (tab: DetailTab, label: string) => (
-      <DebuggerHeaderItem
-        isLabel
-        isActive={detailsData?.selectedTab === tab}
-        content={label}
-        onPress={() => {
-          setDebuggerState(draft => {
-            draft.detailsData!.selectedTab = tab;
-          });
-        }}
-      />
-    ),
-    [detailsData?.selectedTab, setDebuggerState],
-  );
-
-  const networkHeader = useMemo(() => {
-    if (detailsData?.type !== DebuggerPanel.Network) return null;
-
-    const { isHttp, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
-      getNetworkUtils(detailsData.data);
-
-    return (
-      <>
-        {backButton}
-
-        {isHttp && (
-          <>
-            <DebuggerHeaderItem
-              content={icons.share}
-              onPress={async () => {
-                if (isSharing || detailsData.data.type === NetworkType.WS) return;
-
-                try {
-                  isSharing = true;
-                  setDebuggerState(draft => {
-                    draft.visibility = 'bubble';
-                  });
-
-                  await Share.share({
-                    message: convertToCurl(
-                      detailsData.data.method,
-                      detailsData.data.url,
-                      detailsData.data.requestHeaders,
-                      detailsData.data.body,
-                    ),
-                  });
-                } catch (error) {
-                  // Handle error
-                } finally {
-                  isSharing = false;
-                }
-              }}
-            />
-
-            <DebuggerHeaderItem
-              content={icons.beautify}
-              isActive={detailsData.beautified}
-              activeColor={colors.green}
-              onPress={() => {
-                setDebuggerState(draft => {
-                  draft.detailsData!.beautified = !draft.detailsData?.beautified;
-                });
-              }}
-            />
-          </>
-        )}
-
-        <View style={styles.divider} />
-
-        {overviewShown && renderTabItem('overview', 'Overview')}
-        {headersShown && renderTabItem('headers', 'Headers')}
-        {requestShown && renderTabItem('request', 'Request')}
-        {responseShown && renderTabItem('response', 'Response')}
-        {messagesShown && renderTabItem('messages', 'Messages')}
-      </>
-    );
-  }, [
-    detailsData?.type,
-    detailsData?.data,
-    detailsData?.beautified,
-    backButton,
-    renderTabItem,
-    setDebuggerState,
-  ]);
-
-  const consoleHeader = useMemo(() => {
-    if (detailsData?.type !== DebuggerPanel.Console) return null;
-
-    return (
-      <>
-        {backButton}
-
-        <View style={styles.divider} />
+interface DebuggerHeaderProps {
+  selectedPanel: PanelState;
+  setSelectedPanel: React.Dispatch<React.SetStateAction<PanelState>>;
+  style?: StyleProp<ViewStyle>;
+}
 
-        {renderTabItem('logMessage', 'Log Message')}
-      </>
-    );
-  }, [detailsData?.type, backButton, renderTabItem]);
+const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
+  ({ selectedPanel, setSelectedPanel, style }, ref) => {
+    const { setDebuggerState, networkInterceptor, consoleInterceptor } = useContext(MainContext)!;
 
-  const mainHeader = useMemo(() => {
-    const onHide = () => {
-      setDebuggerState(draft => {
-        draft.visibility = 'bubble';
-      });
-    };
+    const switchTo = (panelState: PanelState) => {
+      refs.panel.current?.setCurrentIndex(panelState);
+      setSelectedPanel(panelState);
 
-    const onMove = () => {
       setDebuggerState(draft => {
-        draft.position = draft.position === 'bottom' ? 'top' : 'bottom';
-      });
-    };
-
-    const switchTo = (debuggerPanel: DebuggerPanel) => {
-      setDebuggerState(draft => {
-        draft.selectedPanel = debuggerPanel;
         draft.detailsData = null;
-        lastSelectedPanel.current = debuggerPanel;
       });
     };
 
@@ -168,18 +39,16 @@ export default function DebuggerHeader() {
     };
 
     return (
-      <>
-        <DebuggerHeaderItem onPress={onHide} content={icons.hide} />
-
-        <DebuggerHeaderItem onPress={onMove} content={icons.move} />
+      <HeaderComponents.Wrapper ref={ref} style={style}>
+        <HeaderComponents.MainButtons />
 
-        <View style={styles.divider} />
+        <Divider type="vertical" />
 
         <DebuggerHeaderItem
           isLabel
-          isActive={selectedPanel === DebuggerPanel.Network}
+          isActive={selectedPanel === PanelState.Network}
           content="Network Panel"
-          onPress={() => switchTo(DebuggerPanel.Network)}
+          onPress={() => switchTo(PanelState.Network)}
         />
 
         <DebuggerHeaderItem
@@ -193,13 +62,13 @@ export default function DebuggerHeader() {
           content={icons.delete}
         />
 
-        <View style={styles.divider} />
+        <Divider type="vertical" />
 
         <DebuggerHeaderItem
           isLabel
-          isActive={selectedPanel === DebuggerPanel.Console}
+          isActive={selectedPanel === PanelState.Console}
           content="Console Panel"
-          onPress={() => switchTo(DebuggerPanel.Console)}
+          onPress={() => switchTo(PanelState.Console)}
         />
 
         <DebuggerHeaderItem
@@ -212,41 +81,9 @@ export default function DebuggerHeader() {
           onPress={consoleInterceptor.clearAllLogMessages}
           content={icons.delete}
         />
-      </>
+      </HeaderComponents.Wrapper>
     );
-  }, [selectedPanel, consoleInterceptor, networkInterceptor, setDebuggerState]);
-
-  return (
-    <ScrollView
-      horizontal
-      style={styles.container}
-      contentContainerStyle={styles.contentContainer}
-      showsHorizontalScrollIndicator={false}
-    >
-      {(() => {
-        switch (detailsData?.type) {
-          case DebuggerPanel.Network:
-            return networkHeader;
-          case DebuggerPanel.Console:
-            return consoleHeader;
-          default:
-            return mainHeader;
-        }
-      })()}
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 0,
-  },
-  contentContainer: {
-    padding: 8,
-    columnGap: 8,
   },
-  divider: {
-    width: 1,
-    backgroundColor: colors.gray,
-  },
-});
+);
+
+export default DebuggerHeader;

package/src/ui/components/headers/Header.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+import refs, { HeaderState, PanelState } from '../../../core/refs';
+import IndexedStack from '../common/IndexedStack';
+import ConsoleHeader from './ConsoleHeader';
+import DebuggerHeader from './DebuggerHeader';
+import NetworkHeader from './NetworkHeader';
+
+const Header = () => {
+  const [selectedPanel, setSelectedPanel] = useState<PanelState>(
+    refs.panel.current?.getCurrentIndex() ?? PanelState.Network,
+  );
+
+  return (
+    <IndexedStack defaultIndex={HeaderState.Debugger} id="debugger-header" ref={refs.header}>
+      <DebuggerHeader selectedPanel={selectedPanel} setSelectedPanel={setSelectedPanel} />
+      <NetworkHeader selectedPanel={selectedPanel} />
+      <ConsoleHeader selectedPanel={selectedPanel} />
+    </IndexedStack>
+  );
+};
+
+export default Header;