react-native-debug-toolkit 0.1.1

package/lib/views/HttpLogDetails.js

@@ -0,0 +1,666 @@
+import React, { useState, useCallback } from 'react'
+import { View, Text, StyleSheet, Clipboard, Dimensions } from 'react-native'
+import { ScrollView, Pressable } from 'react-native-gesture-handler'
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window')
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+const LongTextContent = ({ text }) => {
+  return (
+    <View style={styles.longTextContainer}>
+      <Text style={styles.jsonString} selectable={true}>
+        {text}
+      </Text>
+    </View>
+  )
+}
+
+const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
+  const [expanded, setExpanded] = useState(level < maxExpandLevel)
+
+  if (value === null) {
+    return <Text style={styles.jsonNull}>null</Text>
+  }
+
+  if (value === undefined) {
+    return <Text style={styles.jsonNull}>undefined</Text>
+  }
+
+  if (typeof value === 'boolean') {
+    return <Text style={styles.jsonBoolean}>{value.toString()}</Text>
+  }
+
+  if (typeof value === 'number') {
+    return <Text style={styles.jsonNumber}>{value}</Text>
+  }
+
+  if (typeof value === 'string') {
+    if (value.length > 150) {
+      return (
+        <CollapsibleSection
+          title={`String (${value.length} chars)`}
+          initiallyExpanded={false}>
+          <LongTextContent text={value} />
+        </CollapsibleSection>
+      )
+    }
+
+    return (
+      <Text style={styles.jsonString} selectable={true}>
+        {value}
+      </Text>
+    )
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return <Text style={styles.jsonArray}>[]</Text>
+    }
+
+    return (
+      <View style={styles.jsonContainer}>
+        <Pressable
+          onPress={() => setExpanded(!expanded)}
+          style={styles.jsonToggle}>
+          <Text style={styles.jsonBrackets}>
+            [{!expanded && '...'}
+            {expanded && value.length > 0 && ''}
+          </Text>
+          {!expanded && (
+            <Text style={styles.jsonCollapsed}> Array({value.length}) </Text>
+          )}
+        </Pressable>
+
+        {expanded && (
+          <View style={styles.jsonChildren}>
+            {value.map((item, index) => (
+              <View key={`${path}-${index}`} style={styles.jsonArrayItem}>
+                <Text style={styles.jsonKey}>{index}: </Text>
+                <View style={styles.jsonValue}>
+                  <JSONValue
+                    value={item}
+                    path={`${path}[${index}]`}
+                    level={level + 1}
+                  />
+                </View>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {expanded && <Text style={styles.jsonBrackets}>]</Text>}
+      </View>
+    )
+  }
+
+  if (typeof value === 'object') {
+    const keys = Object.keys(value)
+
+    if (keys.length === 0) {
+      return <Text style={styles.jsonObject}>{'{}'}</Text>
+    }
+
+    return (
+      <View style={styles.jsonContainer}>
+        <Pressable
+          onPress={() => setExpanded(!expanded)}
+          style={styles.jsonToggle}>
+          <Text style={styles.jsonBrackets}>
+            {'{'}
+            {!expanded && '...'}
+            {expanded && keys.length > 0 && ''}
+          </Text>
+          {!expanded && (
+            <Text style={styles.jsonCollapsed}> Object({keys.length}) </Text>
+          )}
+        </Pressable>
+
+        {expanded && (
+          <View style={styles.jsonChildren}>
+            {keys.map((key) => (
+              <View key={`${path}-${key}`} style={styles.jsonProperty}>
+                <Text style={styles.jsonKey}>{key}: </Text>
+                <View style={styles.jsonValue}>
+                  <JSONValue
+                    value={value[key]}
+                    path={`${path}.${key}`}
+                    level={level + 1}
+                  />
+                </View>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {expanded && <Text style={styles.jsonBrackets}>{'}'}</Text>}
+      </View>
+    )
+  }
+
+  return <Text>{String(value)}</Text>
+}
+
+const ApiStatus = ({ status, success }) => {
+  let statusColor = '#666'
+  let statusText = ''
+
+  if (typeof status === 'number') {
+    statusText = status.toString()
+
+    if (status >= 200 && status < 300) {
+      statusColor = '#00C851'
+    } else if (status >= 400) {
+      statusColor = '#ff4444'
+    }
+  } else if (success === false) {
+    statusColor = '#ff4444'
+    statusText = 'Error'
+  } else if (success === true) {
+    statusColor = '#00C851'
+    statusText = 'Success'
+  }
+
+  return (
+    <Text style={[styles.statusPill, { backgroundColor: statusColor }]}>
+      {statusText}
+    </Text>
+  )
+}
+
+const HttpLogDetails = ({ log }) => {
+  const formatDataSize = (data) => {
+    if (!data) {
+      return '(empty)'
+    }
+
+    try {
+      const stringData = typeof data === 'string' ? data : JSON.stringify(data)
+      // Use string length as an approximation instead of TextEncoder
+      const bytes = stringData.length
+
+      if (bytes < 1024) {
+        return `(${bytes} B)`
+      } else if (bytes < 1024 * 1024) {
+        return `(${(bytes / 1024).toFixed(1)} KB)`
+      } else {
+        return `(${(bytes / (1024 * 1024)).toFixed(1)} MB)`
+      }
+    } catch (e) {
+      return '(size unknown)'
+    }
+  }
+
+  const generateCurl = useCallback(() => {
+    if (!log.request) {
+      return 'curl command unavailable'
+    }
+
+    let curl = `curl -X ${log.request.method || 'GET'} '${log.request.url}'`
+
+    // Add headers
+    if (log.request.headers && Object.keys(log.request.headers).length > 0) {
+      Object.entries(log.request.headers).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+          curl += ` \\\n  -H '${key}: ${value}'`
+        }
+      })
+    }
+
+    // Add body
+    if (log.request.body) {
+      try {
+        const bodyStr =
+          typeof log.request.body === 'string'
+            ? log.request.body
+            : JSON.stringify(log.request.body)
+
+        curl += ` \\\n  -d '${bodyStr.replace(/'/g, "'\\''")}'`
+      } catch (e) {
+        // Skip body if it can't be stringified
+      }
+    }
+
+    return curl
+  }, [log])
+
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Log data is missing</Text>
+      </View>
+    )
+  }
+
+  const request = log.request || {}
+  const response = log.response || {}
+  const status = response.status
+  const success = response.success
+  const error = log.error
+  const duration = log.duration
+
+  const requestData = request.body
+  const responseData = response.data
+  const responseSize = formatDataSize(responseData)
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'
+      nestedScrollEnabled={true}>
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+          <Text style={styles.url} numberOfLines={2} selectable={true}>
+            {request.url || 'Unknown URL'}
+          </Text>
+          <View style={styles.methodRow}>
+            <Text
+              style={[
+                styles.method,
+                { color: getMethodColor(request.method) },
+              ]}>
+              {(request.method || 'GET').toUpperCase()}
+            </Text>
+            {status && <ApiStatus status={status} success={success} />}
+          </View>
+        </View>
+        <CopyButton text={request.url || ''} />
+      </View>
+
+      <CollapsibleSection title='Request' initiallyExpanded={true}>
+        <View style={styles.content}>
+          {requestData && (
+            <View style={styles.dataSection}>
+              <View style={styles.dataSectionHeader}>
+                <Text style={styles.dataSectionTitle}>
+                  Body {formatDataSize(requestData)}
+                </Text>
+                <CopyButton
+                  text={
+                    typeof requestData === 'string'
+                      ? requestData
+                      : JSON.stringify(requestData, null, 2)
+                  }
+                />
+              </View>
+              <View style={styles.dataContent}>
+                <JSONValue value={requestData} maxExpandLevel={1} />
+              </View>
+            </View>
+          )}
+
+          <CollapsibleSection title='Headers'>
+            <View style={styles.dataContent}>
+              <JSONValue value={request.headers || {}} maxExpandLevel={0} />
+            </View>
+          </CollapsibleSection>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title={`Response ${responseSize}`}
+        initiallyExpanded={true}>
+        <View style={styles.content}>
+          <View style={styles.row}>
+            <Text style={styles.label}>Status:</Text>
+            <Text style={styles.value}>
+              {status || (success === false ? 'Error' : 'Unknown')}
+              {status && response.statusText ? ` (${response.statusText})` : ''}
+            </Text>
+          </View>
+
+          {duration && (
+            <View style={styles.row}>
+              <Text style={styles.label}>Duration:</Text>
+              <Text style={styles.value}>{duration}ms</Text>
+            </View>
+          )}
+
+          {error && (
+            <View style={styles.errorSection}>
+              <Text style={styles.errorLabel}>Error:</Text>
+              <Text style={styles.errorValue} selectable={true}>
+                {error}
+              </Text>
+            </View>
+          )}
+
+          {responseData && (
+            <View style={styles.dataSection}>
+              <View style={styles.dataSectionHeader}>
+                <Text style={styles.dataSectionTitle}>Body</Text>
+                <CopyButton
+                  text={
+                    typeof responseData === 'string'
+                      ? responseData
+                      : JSON.stringify(responseData, null, 2)
+                  }
+                />
+              </View>
+              <View style={styles.dataContent}>
+                <JSONValue value={responseData} maxExpandLevel={1} />
+              </View>
+            </View>
+          )}
+
+          <CollapsibleSection title='Headers'>
+            <View style={styles.dataContent}>
+              <JSONValue value={response.headers || {}} maxExpandLevel={0} />
+            </View>
+          </CollapsibleSection>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='cURL Command'>
+        <View style={styles.content}>
+          <View style={styles.codeBlockContainer}>
+            <View style={styles.codeBlockHeader}>
+              <Text style={styles.codeBlockLabel}>Debug with cURL</Text>
+              <CopyButton text={generateCurl()} />
+            </View>
+            <View style={styles.codeBlock}>
+              <Text style={styles.codeText} selectable={true}>
+                {generateCurl()}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='Timing'>
+        <View style={styles.content}>
+          <Text style={styles.label}>Time:</Text>
+          <Text style={styles.value}>
+            {log.timestamp
+              ? new Date(log.timestamp).toLocaleString()
+              : 'Unknown'}
+          </Text>
+
+          <Text style={styles.label}>Duration:</Text>
+          <Text style={styles.value}>
+            {log.duration ? `${log.duration}ms` : 'Unknown'}
+          </Text>
+        </View>
+      </CollapsibleSection>
+    </ScrollView>
+  )
+}
+
+const getMethodColor = (method) => {
+  switch (method?.toUpperCase()) {
+    case 'GET':
+      return '#0D96F2' // Standard API blue
+    case 'POST':
+      return '#49CC90' // Swagger green
+    case 'PUT':
+      return '#FCA130' // Standard PUT orange
+    case 'DELETE':
+      return '#F93E3E' // Standard DELETE red
+    default:
+      return '#666666'
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'flex-start',
+  },
+  headerInfo: {
+    flex: 1,
+    marginRight: 10,
+  },
+  url: {
+    fontSize: 14,
+    color: '#333',
+    marginBottom: 6,
+    fontWeight: '500',
+  },
+  methodRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  method: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  statusPill: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 12,
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  content: {
+    padding: 15,
+  },
+  row: {
+    marginBottom: 10,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#666',
+    marginBottom: 5,
+  },
+  value: {
+    fontSize: 14,
+    color: '#333',
+    marginBottom: 10,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  errorSection: {
+    backgroundColor: '#fff8f8',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#ffdddd',
+    marginBottom: 15,
+  },
+  errorLabel: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#ff4444',
+    marginBottom: 5,
+  },
+  errorValue: {
+    fontSize: 14,
+    color: '#ff4444',
+  },
+  dataSection: {
+    marginBottom: 15,
+  },
+  dataSectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  dataSectionTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#666',
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  codeBlockContainer: {
+    marginBottom: 15,
+  },
+  codeBlockHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  codeBlockLabel: {
+    fontSize: 12,
+    color: '#666',
+    fontWeight: 'bold',
+  },
+  codeBlock: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  codeText: {
+    fontSize: 13,
+    color: '#333',
+    fontFamily: 'Courier',
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  jsonContainer: {
+    marginVertical: 2,
+  },
+  jsonToggle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  jsonBrackets: {
+    color: '#666',
+    fontWeight: 'bold',
+  },
+  jsonCollapsed: {
+    color: '#888',
+    fontSize: 12,
+    fontStyle: 'italic',
+  },
+  jsonChildren: {
+    paddingLeft: 16,
+    borderLeftWidth: 1,
+    borderLeftColor: '#e0e0e0',
+  },
+  jsonProperty: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 2,
+  },
+  jsonArrayItem: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 2,
+  },
+  jsonKey: {
+    color: '#7B61AB',
+    fontWeight: '500',
+  },
+  jsonValue: {
+    flex: 1,
+  },
+  jsonString: {
+    color: '#CB772F',
+  },
+  jsonNumber: {
+    color: '#2878D0',
+  },
+  jsonBoolean: {
+    color: '#2878D0',
+    fontWeight: 'bold',
+  },
+  jsonNull: {
+    color: '#A0A0A0',
+    fontStyle: 'italic',
+  },
+  jsonObject: {
+    color: '#666',
+  },
+  jsonArray: {
+    color: '#666',
+  },
+  longTextContainer: {
+    maxHeight: 200,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+  },
+})
+
+export default HttpLogDetails