react-native-bugbubble/src/components/LogEntry/expanded/WebSocketExpanded.tsx at b0f702ec014582d67f603959210e59d55715bc31 · lokal-app/react-native-bugbubble · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { memo } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { type WebSocketLogEntry } from '../../../types';
import { formatDataForCopy } from '../../../utils';

interface WebSocketExpandedProps {
  log: WebSocketLogEntry;
}

const getEventColor = (event: string): string => {
  switch (event) {
    case 'open':
      return '#34C759';
    case 'message':
      return '#007AFF';
    case 'close':
      return '#8E8E93';
    case 'error':
      return '#FF3B30';
    default:
      return '#8E8E93';
  }
};

export const WebSocketExpanded = memo<WebSocketExpandedProps>(({ log }) => {
  const eventColor = getEventColor(log.event || 'unknown');
  const eventText =
    log.event && typeof log.event === 'string'
      ? log.event.toUpperCase()
      : 'UNKNOWN';

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>Event</Text>
        </View>
        <View style={[styles.eventBadge, { backgroundColor: eventColor }]}>
          <Text style={styles.eventText}>{eventText}</Text>
        </View>
      </View>

      {log.url && (
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>URL</Text>
          </View>
          <Text style={styles.urlText}>{log.url}</Text>
        </View>
      )}

      {log.data && (
        <View style={styles.section}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Data</Text>
          </View>
          <Text style={styles.codeText}>{formatDataForCopy(log.data)}</Text>
        </View>
      )}
    </View>
  );
});

WebSocketExpanded.displayName = 'WebSocketExpanded';

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 12,
    paddingBottom: 12,
  },
  section: {
    marginBottom: 16,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
    gap: 8,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#000000',
    flex: 1,
  },
  eventBadge: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 12,
    alignSelf: 'flex-start',
  },
  eventText: {
    color: '#FFFFFF',
    fontSize: 12,
    fontWeight: '600',
  },
  urlText: {
    fontSize: 14,
    color: '#007AFF',
    fontFamily: 'monospace',
    backgroundColor: '#F2F2F7',
    padding: 8,
    borderRadius: 4,
  },
  codeText: {
    fontSize: 13,
    fontFamily: 'monospace',
    color: '#000000',
    backgroundColor: '#F8F9FA',
    padding: 12,
    borderRadius: 6,
    lineHeight: 20,
    letterSpacing: 0.2,
    borderWidth: 1,
    borderColor: '#E9ECEF',
  },
});