react-native-xenon/lib/module/ui/components/details/NetworkRequestDetails.js

A powerful in-app debugging tool for React Native.

"use strict";

import { useContext, useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { MainContext } from "../../../contexts/index.js";
import { beautify, formatRequestDuration, formatRequestMethod, formatRequestStatusCode, getNetworkUtils } from "../../../core/utils.js";
import colors from "../../../theme/colors.js";
import NetworkRequestDetailsItem from "../items/NetworkRequestDetailsItem.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const TabScrollView = ({
  id,
  children
}) => /*#__PURE__*/_jsx(ScrollView, {
  contentContainerStyle: styles.contentContainer,
  children: children
}, id);
export default function NetworkRequestDetails({
  style,
  ref
}) {
  const {
    debuggerState: {
      detailsData
    }
  } = useContext(MainContext);
  const item = detailsData?.data;
  const beautified = useRef(null);
  const shouldBeautifiedRefUpdate = beautified.current !== detailsData?.beautified && typeof detailsData?.beautified === 'boolean';
  const {
    isWS,
    requestUrl,
    overviewShown,
    headersShown,
    requestShown,
    responseShown,
    messagesShown
  } = getNetworkUtils(item);
  const content = useRef({
    overview: null,
    headers: null,
    request: null,
    response: null,
    messages: null
  });
  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;
  }
  if (overviewShown && !content.current.overview && item) {
    content.current.overview = /*#__PURE__*/_jsxs(TabScrollView, {
      id: "overview",
      children: [/*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Request Type",
        content: item.type
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Request URL",
        content: item.url
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Request Method",
        content: formatRequestMethod(isWS ? undefined : item.method)
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Status Code",
        content: formatRequestStatusCode(item.status)
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Start Time",
        content: new Date(item.startTime ?? 0).toISOString()
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "End Time",
        content: new Date(item.endTime ?? 0).toISOString()
      }), /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Duration",
        content: formatRequestDuration(item.startTime, item.endTime)
      })]
    });
  }
  if (headersShown && !content.current.headers && item) {
    let headers = [];
    const requestHeaders = [];
    const responseHeaders = [];
    if (isWS) {
      headers = Object.entries(item.options?.headers ?? {});
    } else {
      for (const [key, value] of (item.requestHeaders ?? new Map()).entries()) {
        requestHeaders.push([key, value]);
      }
      for (const [key, value] of (item.responseHeaders ?? new Map()).entries()) {
        responseHeaders.push([key, value]);
      }
    }
    content.current.headers = /*#__PURE__*/_jsxs(TabScrollView, {
      id: "headers",
      children: [isWS && !!headers.length && /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Headers",
        content: headers
      }), !isWS && !!requestHeaders.length && /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Request Headers",
        content: requestHeaders
      }), !isWS && !!responseHeaders.length && /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Response Headers",
        content: responseHeaders
      })]
    });
  }
  if (requestShown && shouldBeautifiedRefUpdate && item) {
    const queryStringParameters = [];
    requestUrl.searchParams.forEach((value, name) => {
      queryStringParameters.push([name, value]);
    });
    const body = beautify(item.body, detailsData?.beautified ?? false);
    content.current.request = /*#__PURE__*/_jsxs(TabScrollView, {
      id: "request",
      children: [!!queryStringParameters.length && /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Query String",
        content: queryStringParameters
      }), !!body && /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Body",
        content: body
      })]
    });
  }
  if (responseShown && shouldBeautifiedRefUpdate && item) {
    const response = beautify(item.response, detailsData?.beautified ?? false);
    content.current.response = /*#__PURE__*/_jsx(TabScrollView, {
      id: "response",
      children: /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Response",
        content: response
      })
    });
  }
  if (messagesShown && !content.current.messages && item) {
    content.current.messages = /*#__PURE__*/_jsx(TabScrollView, {
      id: "messages",
      children: /*#__PURE__*/_jsx(NetworkRequestDetailsItem, {
        label: "Messages",
        content: item.messages
      })
    });
  }
  if (shouldBeautifiedRefUpdate) {
    beautified.current = detailsData?.beautified ?? false;
  }
  return /*#__PURE__*/_jsx(View, {
    ref: ref,
    style: [styles.container, style],
    children: content.current[detailsData?.selectedTab]
  });
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  contentContainer: {
    padding: 8
  },
  text: {
    fontSize: 14,
    color: colors.black
  },
  label: {
    fontSize: 14,
    fontWeight: 'bold',
    color: colors.black
  },
  buttonContent: {
    padding: 8,
    borderRadius: 4,
    borderWidth: 1,
    alignItems: 'center'
  }
});
//# sourceMappingURL=NetworkRequestDetails.js.map