react-native-inapp-inspector 2.2.2 → 2.2.4

package/src/components/Inspector/ConsoleTab.tsx

@@ -0,0 +1,702 @@
+import React, {useCallback, useMemo} from 'react';
+import {
+  FlatList,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {useInspector} from './InspectorContext';
+import {useTranslation} from '../../i18n';
+import TouchableScale from '../TouchableScale';
+import AnimatedEntrance from '../AnimatedEntrance';
+import {ConsoleLogCard} from '../ConsoleLogCard';
+import EmptyState from '../EmptyState';
+import EndOfListFooter from '../EndOfListFooter';
+import styles from '../../styles';
+import {AppColors} from '../../styles/AppColors';
+import {AppFonts} from '../../styles/AppFonts';
+import {
+  SearchIcon,
+  ClearIcon,
+  SortArrowIcon,
+  TrashIcon,
+  LayersIcon,
+  CheckIcon,
+  UserIcon,
+  InfoCircleIcon,
+  WarningTriangleIcon,
+  ErrorCircleIcon,
+  AnalyticsIcon,
+  HeaderPauseIcon,
+} from '../NetworkIcons';
+
+const ConsoleTab = React.memo(() => {
+  const {t} = useTranslation();
+  const {
+    logSearch,
+    setLogSearch,
+    logSortOrder,
+    setLogSortOrder,
+    handleDelete,
+    logFilters,
+    setLogFilters,
+    logCounts,
+    filteredConsoleLogs,
+    visibleConsoleLogs,
+    isConsolePaused,
+    setIsConsolePaused,
+  } = useInspector();
+
+  const renderItem = useCallback(
+    ({item, index}: {item: any; index: number}) => (
+      <AnimatedEntrance index={index} distance={8}>
+        <ConsoleLogCard item={item} searchStr={logSearch} />
+      </AnimatedEntrance>
+    ),
+    [logSearch],
+  );
+
+  const keyExtractor = useCallback(
+    (item: any, index: number) => item?.id?.toString() ?? index.toString(),
+    [],
+  );
+
+  const listHeader = useMemo(() => {
+    const total = visibleConsoleLogs.length;
+    const filtered = filteredConsoleLogs.length;
+    const isAllSelected =
+      logFilters.has('all') ||
+      !Array.from(logFilters).some(f => f !== 'all');
+    if (isAllSelected) {
+      return (
+        <Text
+          style={[
+            styles.resultCount,
+            {marginBottom: 4, marginTop: 12},
+          ]}>
+          Showing ({filtered}/{total}) logs showing
+        </Text>
+      );
+    } else {
+      const activeFilterNames = Array.from(logFilters)
+        .filter(f => f !== 'all')
+        .map(f => {
+          if (f === 'user-log') return 'User Log';
+          if (f === 'analytics') return 'Analytics';
+          return (
+            (f as string).charAt(0).toUpperCase() +
+            (f as string).slice(1)
+          );
+        });
+      return (
+        <Text
+          style={[
+            styles.resultCount,
+            {marginBottom: 4, marginTop: 12},
+          ]}>
+          Filtering with {activeFilterNames.join(', ')} (
+          {filtered}/{total}) logs is showing
+        </Text>
+      );
+    }
+  }, [visibleConsoleLogs.length, filteredConsoleLogs.length, logFilters]);
+
+  const [isSearchFocused, setIsSearchFocused] = React.useState(false);
+
+  const QUICK_TAG_SUGGESTIONS = useMemo(
+    () => ['[AXIOS]', '[API]', '[REDUX]', '[ANALYTICS]', '[AUTH]', '[WARN]', '[ERROR]'],
+    [],
+  );
+
+  return (
+    <View style={{flex: 1}}>
+      <View
+        style={{
+          backgroundColor: AppColors.white,
+          borderBottomWidth: 1,
+          borderBottomColor: AppColors.dividerColor,
+          paddingBottom: 6,
+        }}>
+        <View
+          style={[
+            styles.toolbarRow,
+            {marginTop: 12, marginBottom: 8},
+          ]}>
+          <View
+            style={[
+              styles.searchContainer,
+              isSearchFocused && {
+                borderColor: AppColors.purple,
+                borderWidth: 1.5,
+              },
+            ]}>
+            <SearchIcon
+              color={isSearchFocused ? AppColors.purple : AppColors.grayTextWeak}
+              size={16}
+            />
+            <TextInput
+              placeholder={t('console.searchPlaceholder')}
+              placeholderTextColor={AppColors.grayTextWeak}
+              value={logSearch}
+              onChangeText={setLogSearch}
+              onFocus={() => setIsSearchFocused(true)}
+              onBlur={() => setIsSearchFocused(false)}
+              style={styles.searchInput}
+              autoCorrect={false}
+              autoCapitalize="none"
+            />
+            {logSearch.length > 0 && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 4,
+                }}>
+                <View
+                  style={{
+                    backgroundColor: `${AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                  }}>
+                  <Text
+                    style={{
+                      color: AppColors.purple,
+                      fontSize: 10,
+                      fontFamily: AppFonts.interBold,
+                    }}>
+                    {filteredConsoleLogs.length}
+                  </Text>
+                </View>
+                <Pressable
+                  onPress={() => setLogSearch('')}
+                  hitSlop={10}
+                  style={styles.clearBtn}>
+                  <ClearIcon
+                    color={AppColors.grayTextWeak}
+                    size={14}
+                  />
+                </Pressable>
+              </View>
+            )}
+          </View>
+
+          <View style={styles.toolbarRight}>
+            <TouchableScale
+              style={[
+                styles.toolbarBtn,
+                isConsolePaused && {
+                  borderColor: `${AppColors.darkOrange}50`,
+                  backgroundColor: `${AppColors.darkOrange}18`,
+                },
+              ]}
+              onPress={() => setIsConsolePaused(p => !p)}
+              hitSlop={6}>
+              <HeaderPauseIcon
+                isPaused={isConsolePaused}
+                color={
+                  isConsolePaused
+                    ? AppColors.darkOrange
+                    : AppColors.grayTextStrong
+                }
+                size={16}
+              />
+            </TouchableScale>
+            <TouchableScale
+              style={styles.toolbarBtn}
+              onPress={() =>
+                setLogSortOrder(o =>
+                  o === 'newest' ? 'oldest' : 'newest',
+                )
+              }
+              hitSlop={10}>
+              <SortArrowIcon
+                color={AppColors.grayTextStrong}
+                size={18}
+                direction={
+                  logSortOrder === 'newest' ? 'down' : 'up'
+                }
+              />
+            </TouchableScale>
+            <TouchableScale
+              style={[
+                styles.toolbarBtn,
+                {
+                  borderColor: `${AppColors.errorColor}38`,
+                  backgroundColor: `${AppColors.errorColor}0F`,
+                },
+              ]}
+              onPress={handleDelete}
+              hitSlop={6}>
+              <TrashIcon
+                color={AppColors.errorColor}
+                size={15}
+              />
+            </TouchableScale>
+          </View>
+        </View>
+
+        {/* Quick Tag Search Suggestions Bar */}
+        {(isSearchFocused || logSearch.length > 0) && (
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{marginBottom: 6, maxHeight: 30}}
+            contentContainerStyle={{
+              paddingHorizontal: 16,
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 6,
+            }}>
+            {QUICK_TAG_SUGGESTIONS.map(tag => {
+              const isSelected = logSearch.includes(tag);
+              return (
+                <TouchableScale
+                  key={tag}
+                  onPress={() => {
+                    if (isSelected) {
+                      setLogSearch(prev =>
+                        prev.replace(tag, '').trim(),
+                      );
+                    } else {
+                      setLogSearch(prev =>
+                        prev ? `${prev} ${tag}`.trim() : tag,
+                      );
+                    }
+                  }}>
+                  <View
+                    style={{
+                      paddingHorizontal: 8,
+                      paddingVertical: 3,
+                      borderRadius: 6,
+                      backgroundColor: isSelected
+                        ? AppColors.purple
+                        : `${AppColors.purple}14`,
+                      borderWidth: 1,
+                      borderColor: isSelected
+                        ? AppColors.purple
+                        : `${AppColors.purple}30`,
+                    }}>
+                    <Text
+                      style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: isSelected
+                          ? AppColors.white
+                          : AppColors.purple,
+                      }}>
+                      {tag}
+                    </Text>
+                  </View>
+                </TouchableScale>
+              );
+            })}
+          </ScrollView>
+        )}
+
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          style={{marginVertical: 4, maxHeight: 46}}
+          contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+          }}>
+          {/* All Filter */}
+          {(() => {
+            const active = logFilters.has('all');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(new Set(['all']));
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.indigo600Alt : AppColors.indigo50,
+                      borderColor: active ? AppColors.indigo600 : AppColors.indigo400,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.indigo600Alt,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <LayersIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.indigo600Alt}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.indigo600Alt,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('common.all', 'All')} ({logCounts.all})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+
+          {/* User Log / Standard Log Filter */}
+          {(() => {
+            const active = logFilters.has('user-log');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(prev => {
+                    const next = new Set(prev);
+                    next.delete('all');
+                    next.has('user-log')
+                      ? next.delete('user-log')
+                      : next.add('user-log');
+                    if (next.size === 0) next.add('all');
+                    return next;
+                  });
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.teal600 : AppColors.teal100,
+                      borderColor: active ? AppColors.teal600 : AppColors.teal400,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.teal600,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <UserIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.teal600}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.teal600,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('console.log', 'Log')} ({logCounts['user-log']})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+
+          {/* Info Filter */}
+          {(() => {
+            const active = logFilters.has('info');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(prev => {
+                    const next = new Set(prev);
+                    next.delete('all');
+                    next.has('info')
+                      ? next.delete('info')
+                      : next.add('info');
+                    if (next.size === 0) next.add('all');
+                    return next;
+                  });
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.sky600 : AppColors.sky100,
+                      borderColor: active ? AppColors.blue700 : AppColors.sky400,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.sky600,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <InfoCircleIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.sky600}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.sky600,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('console.info', 'Info')} ({logCounts.info})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+
+          {/* Warning Filter */}
+          {(() => {
+            const active = logFilters.has('warn');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(prev => {
+                    const next = new Set(prev);
+                    next.delete('all');
+                    next.has('warn')
+                      ? next.delete('warn')
+                      : next.add('warn');
+                    if (next.size === 0) next.add('all');
+                    return next;
+                  });
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.amber600 : AppColors.amber100,
+                      borderColor: active ? AppColors.amber700 : AppColors.amber200,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.amber600,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <WarningTriangleIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.amber700}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.amber800Warm,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('console.warning', 'Warn')} ({logCounts.warn})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+
+          {/* Error Filter */}
+          {(() => {
+            const active = logFilters.has('error');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(prev => {
+                    const next = new Set(prev);
+                    next.delete('all');
+                    next.has('error')
+                      ? next.delete('error')
+                      : next.add('error');
+                    if (next.size === 0) next.add('all');
+                    return next;
+                  });
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.red500 : AppColors.red100,
+                      borderColor: active ? AppColors.red600 : AppColors.errorBorder,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.red500,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <ErrorCircleIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.red500}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.redErrorText,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('console.error', 'Error')} ({logCounts.error})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+
+          {/* Analytics Filter */}
+          {(() => {
+            const active = logFilters.has('analytics');
+            return (
+              <TouchableScale
+                onPress={() => {
+                  setLogFilters(prev => {
+                    const next = new Set(prev);
+                    next.delete('all');
+                    next.has('analytics')
+                      ? next.delete('analytics')
+                      : next.add('analytics');
+                    if (next.size === 0) next.add('all');
+                    return next;
+                  });
+                }}>
+                <View
+                  style={[
+                    styles.statusFilterChip,
+                    {
+                      backgroundColor: active ? AppColors.violet600 : AppColors.purple100,
+                      borderColor: active ? AppColors.purple700 : AppColors.purple200,
+                      borderRadius: 8,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                    },
+                    active && {
+                      shadowColor: AppColors.violet600,
+                      shadowOffset: {width: 0, height: 1},
+                      shadowOpacity: 0.28,
+                      shadowRadius: 2.5,
+                      elevation: 2,
+                    },
+                  ]}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      gap: 6,
+                    }}>
+                    <AnalyticsIcon
+                      size={13}
+                      color={active ? AppColors.white : AppColors.violet600}
+                    />
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.statusFilterText,
+                        {
+                          color: active ? AppColors.white : AppColors.purpleText,
+                          fontFamily: AppFonts.interBold,
+                        },
+                      ]}>
+                      {t('console.analytics', 'Analytics')} ({logCounts.analytics})
+                    </Text>
+                  </View>
+                </View>
+              </TouchableScale>
+            );
+          })()}
+        </ScrollView>
+      </View>
+
+      <FlatList
+        data={filteredConsoleLogs}
+        keyExtractor={keyExtractor}
+        ListHeaderComponent={listHeader}
+        renderItem={renderItem}
+        initialNumToRender={12}
+        maxToRenderPerBatch={8}
+        windowSize={5}
+        removeClippedSubviews={true}
+        renderToHardwareTextureAndroid={true}
+        ListEmptyComponent={
+          <EmptyState
+            isSearch={
+              logSearch.length > 0 || logFilters.size > 0
+            }
+          />
+        }
+        ListFooterComponent={
+          filteredConsoleLogs.length > 0 ? (
+            <EndOfListFooter count={filteredConsoleLogs.length} label="logs" />
+          ) : null
+        }
+        contentContainerStyle={[
+          styles.listContent,
+          filteredConsoleLogs.length === 0 && {flexGrow: 1},
+        ]}
+        keyboardShouldPersistTaps="handled"
+      />
+    </View>
+  );
+});
+
+export default ConsoleTab;