react-native-inapp-inspector 2.3.8 → 2.3.10

package/src/components/Inspector/NetworkFilterModal.tsx

@@ -0,0 +1,710 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useInspector} from './InspectorContext';
+import {Method} from '../../types';
+import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
+import {useTranslation} from '../../i18n';
+import {METHOD_COLORS} from '../../constants';
+import {
+  FilterIcon,
+  CloseWhite,
+  ClockIcon,
+  CircleCheckIcon,
+  CircleAlertIcon,
+  CircleXIcon,
+  LayersIcon,
+  RepeatIcon,
+  ShieldAlertIcon,
+  BoltIcon,
+  GlobeIcon,
+  LockIcon,
+} from '../NetworkIcons';
+import TouchableScale from '../TouchableScale';
+
+export interface NetworkFilterState {
+  statusCodes: Set<string>;
+  methods: Set<string>;
+  latency: 'all' | 'fast' | 'normal' | 'slow';
+  protocol: 'all' | 'https' | 'http';
+  sortBy: 'time_desc' | 'time_asc' | 'duration_desc' | 'duration_asc' | 'size_desc';
+}
+
+export const DEFAULT_NETWORK_FILTERS: NetworkFilterState = {
+  statusCodes: new Set(['all']),
+  methods: new Set(['all']),
+  latency: 'all',
+  protocol: 'all',
+  sortBy: 'time_desc',
+};
+
+export const isNetworkFiltersDefault = (f: NetworkFilterState): boolean =>
+  (f.statusCodes.has('all') || f.statusCodes.size === 0) &&
+  (f.methods.has('all') || f.methods.size === 0) &&
+  f.latency === 'all' &&
+  f.protocol === 'all' &&
+  f.sortBy === 'time_desc';
+
+interface NetworkFilterModalProps {
+  visible: boolean;
+  onClose: () => void;
+  filters: NetworkFilterState;
+  onApply: (filters: NetworkFilterState) => void;
+  searchQuery?: string;
+}
+
+export const NetworkFilterModal: React.FC<NetworkFilterModalProps> = ({
+  visible,
+  onClose,
+  filters,
+  onApply,
+  searchQuery = '',
+}) => {
+  const {t} = useTranslation();
+  const {logs} = useInspector();
+
+  const [draft, setDraft] = useState<NetworkFilterState>(() => ({
+    ...filters,
+    statusCodes: new Set(filters.statusCodes),
+    methods: new Set(filters.methods),
+  }));
+
+  useEffect(() => {
+    if (visible) {
+      setDraft({
+        ...filters,
+        statusCodes: new Set(filters.statusCodes),
+        methods: new Set(filters.methods),
+      });
+    }
+  }, [visible, filters]);
+
+  // Live count calculators
+  const counts = useMemo(() => {
+    const statusMap: Record<string, number> = {
+      all: logs.length,
+      '2xx': 0,
+      '3xx': 0,
+      '4xx': 0,
+      '5xx': 0,
+      failed: 0,
+    };
+    const methodMap: Record<string, number> = {all: logs.length};
+    let fastCount = 0;
+    let normalCount = 0;
+    let slowCount = 0;
+    let httpsCount = 0;
+    let httpCount = 0;
+
+    for (const log of logs) {
+      const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
+      if (log.status === 0 || log.status == null) {
+        statusMap.failed = (statusMap.failed || 0) + 1;
+      } else if (!isNaN(s)) {
+        if (s >= 200 && s < 300) statusMap['2xx'] = (statusMap['2xx'] || 0) + 1;
+        else if (s >= 300 && s < 400) statusMap['3xx'] = (statusMap['3xx'] || 0) + 1;
+        else if (s >= 400 && s < 500) statusMap['4xx'] = (statusMap['4xx'] || 0) + 1;
+        else if (s >= 500) statusMap['5xx'] = (statusMap['5xx'] || 0) + 1;
+      }
+
+      const m = (log.method || 'GET').toUpperCase();
+      methodMap[m] = (methodMap[m] || 0) + 1;
+
+      const dur = log.duration || 0;
+      if (dur < 200) fastCount++;
+      else if (dur <= 500) normalCount++;
+      else slowCount++;
+
+      if ((log.url || '').toLowerCase().startsWith('https')) httpsCount++;
+      else httpCount++;
+    }
+
+    return {
+      statusMap,
+      methodMap,
+      fastCount,
+      normalCount,
+      slowCount,
+      httpsCount,
+      httpCount,
+    };
+  }, [logs]);
+
+  // Count matching results with current draft filters
+  const previewMatchCount = useMemo(() => {
+    return logs.filter(log => {
+      // Status filter
+      if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0) {
+        const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
+        let matches = false;
+        if (draft.statusCodes.has('failed') && (log.status === 0 || log.status == null)) matches = true;
+        if (draft.statusCodes.has('2xx') && !isNaN(s) && s >= 200 && s < 300) matches = true;
+        if (draft.statusCodes.has('3xx') && !isNaN(s) && s >= 300 && s < 400) matches = true;
+        if (draft.statusCodes.has('4xx') && !isNaN(s) && s >= 400 && s < 500) matches = true;
+        if (draft.statusCodes.has('5xx') && !isNaN(s) && s >= 500) matches = true;
+        if (!matches) return false;
+      }
+
+      // Method filter
+      if (!draft.methods.has('all') && draft.methods.size > 0) {
+        const m = (log.method || 'GET').toUpperCase();
+        if (!draft.methods.has(m)) return false;
+      }
+
+      // Latency filter
+      const dur = log.duration || 0;
+      if (draft.latency === 'fast' && dur >= 200) return false;
+      if (draft.latency === 'normal' && (dur < 200 || dur > 500)) return false;
+      if (draft.latency === 'slow' && dur <= 500) return false;
+
+      // Protocol filter
+      const isHttps = (log.url || '').toLowerCase().startsWith('https');
+      if (draft.protocol === 'https' && !isHttps) return false;
+      if (draft.protocol === 'http' && isHttps) return false;
+
+      // Search query
+      if (searchQuery.trim().length > 0) {
+        const q = searchQuery.toLowerCase();
+        const u = (log.url || '').toLowerCase();
+        if (!u.includes(q)) return false;
+      }
+
+      return true;
+    }).length;
+  }, [logs, draft, searchQuery]);
+
+  const toggleStatus = (key: string) => {
+    setDraft(prev => {
+      const next = new Set(prev.statusCodes);
+      if (key === 'all') {
+        return {...prev, statusCodes: new Set(['all'])};
+      }
+      next.delete('all');
+      if (next.has(key)) {
+        next.delete(key);
+        if (next.size === 0) next.add('all');
+      } else {
+        next.add(key);
+      }
+      return {...prev, statusCodes: next};
+    });
+  };
+
+  const toggleMethod = (key: string) => {
+    setDraft(prev => {
+      const next = new Set(prev.methods);
+      if (key === 'all') {
+        return {...prev, methods: new Set(['all'])};
+      }
+      next.delete('all');
+      if (next.has(key)) {
+        next.delete(key);
+        if (next.size === 0) next.add('all');
+      } else {
+        next.add(key);
+      }
+      return {...prev, methods: next};
+    });
+  };
+
+  const handleReset = () => {
+    setDraft({
+      statusCodes: new Set(['all']),
+      methods: new Set(['all']),
+      latency: 'all',
+      protocol: 'all',
+      sortBy: 'time_desc',
+    });
+  };
+
+  const handleApply = () => {
+    onApply(draft);
+    onClose();
+  };
+
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+    if (!draft.statusCodes.has('all') && draft.statusCodes.size > 0) count += draft.statusCodes.size;
+    if (!draft.methods.has('all') && draft.methods.size > 0) count += draft.methods.size;
+    if (draft.latency !== 'all') count++;
+    if (draft.protocol !== 'all') count++;
+    if (draft.sortBy !== 'time_desc') count++;
+    return count;
+  }, [draft]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}>
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <Pressable style={styles.modalCard} onPress={e => e.stopPropagation()}>
+          {/* Header */}
+          <View style={styles.header}>
+            <View style={styles.headerLeft}>
+              <View style={styles.iconCircle}>
+                <FilterIcon size={16} color={AppColors.purple} />
+              </View>
+              <View>
+                <View style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
+                  <Text style={styles.title}>Network Filters</Text>
+                  {activeFiltersCount > 0 && (
+                    <View style={styles.activeBadge}>
+                      <Text style={styles.activeBadgeText}>{activeFiltersCount} active</Text>
+                    </View>
+                  )}
+                </View>
+                <Text style={styles.subtitle}>Filter requests by status, method & speed</Text>
+              </View>
+            </View>
+            <TouchableOpacity onPress={onClose} hitSlop={10} style={styles.closeBtn}>
+              <CloseWhite size={14} color={AppColors.grayText} />
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            style={styles.scrollArea}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}>
+            {/* Section 1: HTTP Status Codes */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>HTTP STATUS CODE</Text>
+              <View style={styles.chipsWrap}>
+                {[
+                  {key: 'all', label: 'All Statuses', color: AppColors.purple, icon: LayersIcon, count: counts.statusMap.all},
+                  {key: '2xx', label: '2xx Success', color: AppColors.greenColor, icon: CircleCheckIcon, count: counts.statusMap['2xx'] || 0},
+                  {key: '3xx', label: '3xx Redirect', color: AppColors.warningIconGold, icon: RepeatIcon, count: counts.statusMap['3xx'] || 0},
+                  {key: '4xx', label: '4xx Client Error', color: AppColors.darkOrange, icon: CircleAlertIcon, count: counts.statusMap['4xx'] || 0},
+                  {key: '5xx', label: '5xx Server Error', color: AppColors.errorColor, icon: CircleXIcon, count: counts.statusMap['5xx'] || 0},
+                  {key: 'failed', label: 'Network Failed / 0', color: AppColors.errorColor, icon: ShieldAlertIcon, count: counts.statusMap.failed || 0},
+                ].map(item => {
+                  const isSelected = draft.statusCodes.has(item.key);
+                  const IconComp = item.icon;
+                  return (
+                    <TouchableOpacity
+                      key={item.key}
+                      activeOpacity={0.7}
+                      onPress={() => toggleStatus(item.key)}
+                      style={[
+                        styles.chip,
+                        isSelected && {
+                          backgroundColor: `${item.color}15`,
+                          borderColor: item.color,
+                        },
+                      ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak} />
+                      <Text
+                        style={[
+                          styles.chipLabel,
+                          isSelected && {color: item.color, fontFamily: AppFonts.interBold},
+                        ]}>
+                        {item.label}
+                      </Text>
+                      <View
+                        style={[
+                          styles.countPill,
+                          isSelected && {backgroundColor: `${item.color}25`},
+                        ]}>
+                        <Text
+                          style={[
+                            styles.countPillText,
+                            isSelected && {color: item.color},
+                          ]}>
+                          {item.count}
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+
+            {/* Section 2: HTTP Method */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>HTTP METHOD</Text>
+              <View style={styles.chipsWrap}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  onPress={() => toggleMethod('all')}
+                  style={[
+                    styles.chip,
+                    draft.methods.has('all') && {
+                      backgroundColor: `${AppColors.purple}15`,
+                      borderColor: AppColors.purple,
+                    },
+                  ]}>
+                  <LayersIcon size={12} color={draft.methods.has('all') ? AppColors.purple : AppColors.grayTextWeak} />
+                  <Text
+                    style={[
+                      styles.chipLabel,
+                      draft.methods.has('all') && {color: AppColors.purple, fontFamily: AppFonts.interBold},
+                    ]}>
+                    All Methods
+                  </Text>
+                  <View style={[styles.countPill, draft.methods.has('all') && {backgroundColor: `${AppColors.purple}25`}]}>
+                    <Text style={[styles.countPillText, draft.methods.has('all') && {color: AppColors.purple}]}>
+                      {counts.methodMap.all}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+
+                {(['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'QUERY', 'OPTIONS', 'HEAD'] as const).map(m => {
+                  const isSelected = draft.methods.has(m);
+                  const mColor = METHOD_COLORS[m as Method] || AppColors.grayText;
+                  const count = counts.methodMap[m] || 0;
+                  return (
+                    <TouchableOpacity
+                      key={m}
+                      activeOpacity={0.7}
+                      onPress={() => toggleMethod(m)}
+                      style={[
+                        styles.chip,
+                        isSelected && {
+                          backgroundColor: `${mColor}18`,
+                          borderColor: mColor,
+                        },
+                      ]}>
+                      <View style={[styles.methodDot, {backgroundColor: mColor}]} />
+                      <Text
+                        style={[
+                          styles.chipLabel,
+                          isSelected && {color: mColor, fontFamily: AppFonts.interBold},
+                        ]}>
+                        {m}
+                      </Text>
+                      <View
+                        style={[
+                          styles.countPill,
+                          isSelected && {backgroundColor: `${mColor}25`},
+                        ]}>
+                        <Text
+                          style={[
+                            styles.countPillText,
+                            isSelected && {color: mColor},
+                          ]}>
+                          {count}
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+
+            {/* Section 3: Latency & Speed */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
+              <View style={styles.chipsWrap}>
+                {[
+                  {key: 'all' as const, label: 'All Speeds', color: AppColors.purple},
+                  {key: 'fast' as const, label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount},
+                  {key: 'normal' as const, label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount},
+                  {key: 'slow' as const, label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount},
+                ].map(item => {
+                  const isSelected = draft.latency === item.key;
+                  return (
+                    <TouchableOpacity
+                      key={item.key}
+                      activeOpacity={0.7}
+                      onPress={() => setDraft(prev => ({...prev, latency: item.key}))}
+                      style={[
+                        styles.chip,
+                        isSelected && {
+                          backgroundColor: `${item.color}15`,
+                          borderColor: item.color,
+                        },
+                      ]}>
+                      <Text
+                        style={[
+                          styles.chipLabel,
+                          isSelected && {color: item.color, fontFamily: AppFonts.interBold},
+                        ]}>
+                        {item.label}
+                      </Text>
+                      {item.count != null && (
+                        <View style={[styles.countPill, isSelected && {backgroundColor: `${item.color}25`}]}>
+                          <Text style={[styles.countPillText, isSelected && {color: item.color}]}>
+                            {item.count}
+                          </Text>
+                        </View>
+                      )}
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+
+            {/* Section 4: Protocol (HTTPS / HTTP) */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>PROTOCOL</Text>
+              <View style={styles.chipsWrap}>
+                {[
+                  {key: 'all' as const, label: 'All Protocols', color: AppColors.purple},
+                  {key: 'https' as const, label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount},
+                  {key: 'http' as const, label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount},
+                ].map(item => {
+                  const isSelected = draft.protocol === item.key;
+                  return (
+                    <TouchableOpacity
+                      key={item.key}
+                      activeOpacity={0.7}
+                      onPress={() => setDraft(prev => ({...prev, protocol: item.key}))}
+                      style={[
+                        styles.chip,
+                        isSelected && {
+                          backgroundColor: `${item.color}15`,
+                          borderColor: item.color,
+                        },
+                      ]}>
+                      <Text
+                        style={[
+                          styles.chipLabel,
+                          isSelected && {color: item.color, fontFamily: AppFonts.interBold},
+                        ]}>
+                        {item.label}
+                      </Text>
+                      {item.count != null && (
+                        <View style={[styles.countPill, isSelected && {backgroundColor: `${item.color}25`}]}>
+                          <Text style={[styles.countPillText, isSelected && {color: item.color}]}>
+                            {item.count}
+                          </Text>
+                        </View>
+                      )}
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+
+            {/* Section 5: Sort By */}
+            <View style={styles.section}>
+              <Text style={styles.sectionTitle}>SORT BY</Text>
+              <View style={styles.chipsWrap}>
+                {[
+                  {key: 'time_desc' as const, label: '⏱️ Newest First (Default)'},
+                  {key: 'time_asc' as const, label: '⌛ Oldest First'},
+                  {key: 'duration_desc' as const, label: '🐢 Slowest Response'},
+                  {key: 'duration_asc' as const, label: '🚀 Fastest Response'},
+                  {key: 'size_desc' as const, label: '📦 Largest Response Size'},
+                ].map(item => {
+                  const isSelected = draft.sortBy === item.key;
+                  return (
+                    <TouchableOpacity
+                      key={item.key}
+                      activeOpacity={0.7}
+                      onPress={() => setDraft(prev => ({...prev, sortBy: item.key}))}
+                      style={[
+                        styles.chip,
+                        isSelected && {
+                          backgroundColor: `${AppColors.purple}15`,
+                          borderColor: AppColors.purple,
+                        },
+                      ]}>
+                      <Text
+                        style={[
+                          styles.chipLabel,
+                          isSelected && {color: AppColors.purple, fontFamily: AppFonts.interBold},
+                        ]}>
+                        {item.label}
+                      </Text>
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          </ScrollView>
+
+          {/* Footer Action Buttons */}
+          <View style={styles.footer}>
+            <TouchableScale onPress={handleReset} style={styles.resetBtn}>
+              <Text style={styles.resetBtnText}>Reset All</Text>
+            </TouchableScale>
+
+            <TouchableScale onPress={handleApply} style={styles.applyBtn}>
+              <Text style={styles.applyBtnText}>
+                Apply ({previewMatchCount} Request{previewMatchCount === 1 ? '' : 's'})
+              </Text>
+            </TouchableScale>
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.55)',
+    justifyContent: 'flex-end',
+  },
+  modalCard: {
+    backgroundColor: AppColors.primaryLight,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: '85%',
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: -4},
+    shadowOpacity: 0.15,
+    shadowRadius: 10,
+    elevation: 8,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: AppColors.grayBorderSecondary,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+  },
+  iconCircle: {
+    width: 34,
+    height: 34,
+    borderRadius: 10,
+    backgroundColor: `${AppColors.purple}15`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 16,
+    color: AppColors.primaryBlack,
+  },
+  subtitle: {
+    fontFamily: AppFonts.interRegular,
+    fontSize: 11,
+    color: AppColors.grayText,
+    marginTop: 1,
+  },
+  activeBadge: {
+    backgroundColor: `${AppColors.purple}20`,
+    paddingHorizontal: 6,
+    paddingVertical: 1.5,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: `${AppColors.purple}40`,
+  },
+  activeBadgeText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    color: AppColors.purple,
+  },
+  closeBtn: {
+    padding: 6,
+  },
+  scrollArea: {
+    maxHeight: 460,
+  },
+  scrollContent: {
+    padding: 16,
+    gap: 16,
+  },
+  section: {
+    gap: 8,
+  },
+  sectionTitle: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 11,
+    color: AppColors.grayTextWeak,
+    letterSpacing: 0.8,
+  },
+  chipsWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: AppColors.grayBackground,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+  },
+  chipLabel: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 12,
+    color: AppColors.primaryBlack,
+  },
+  methodDot: {
+    width: 6.5,
+    height: 6.5,
+    borderRadius: 3.5,
+  },
+  countPill: {
+    backgroundColor: `${AppColors.grayBorderSecondary}50`,
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 6,
+  },
+  countPillText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    color: AppColors.grayText,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+    borderTopColor: AppColors.grayBorderSecondary,
+    backgroundColor: AppColors.primaryLight,
+  },
+  resetBtn: {
+    flex: 1,
+    paddingVertical: 11,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: AppColors.grayBackground,
+  },
+  resetBtnText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 13,
+    color: AppColors.grayTextStrong,
+  },
+  applyBtn: {
+    flex: 2,
+    paddingVertical: 11,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: AppColors.purple,
+    shadowColor: AppColors.purple,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  applyBtnText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 13,
+    color: AppColors.white,
+  },
+});
+
+export default NetworkFilterModal;