diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/Navigation.tsx | 2 | ||||
-rw-r--r-- | src/screens/Log.tsx | 128 | ||||
-rw-r--r-- | src/view/screens/Log.tsx | 116 |
3 files changed, 129 insertions, 117 deletions
diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 97c351bc8..7af38105b 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -55,7 +55,6 @@ import {DebugModScreen} from '#/view/screens/DebugMod' import {FeedsScreen} from '#/view/screens/Feeds' import {HomeScreen} from '#/view/screens/Home' import {ListsScreen} from '#/view/screens/Lists' -import {LogScreen} from '#/view/screens/Log' import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts' import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists' import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts' @@ -74,6 +73,7 @@ import {BottomBar} from '#/view/shell/bottom-bar/BottomBar' import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth' import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen' import HashtagScreen from '#/screens/Hashtag' +import {LogScreen} from '#/screens/Log' import {MessagesScreen} from '#/screens/Messages/ChatList' import {MessagesConversationScreen} from '#/screens/Messages/Conversation' import {MessagesInboxScreen} from '#/screens/Messages/Inbox' diff --git a/src/screens/Log.tsx b/src/screens/Log.tsx new file mode 100644 index 000000000..2dd7fe84c --- /dev/null +++ b/src/screens/Log.tsx @@ -0,0 +1,128 @@ +import {useCallback, useState} from 'react' +import {LayoutAnimation, View} from 'react-native' +import {Pressable} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import { + type CommonNavigatorParams, + type NativeStackScreenProps, +} from '#/lib/routes/types' +import {getEntries} from '#/logger/logDump' +import {useTickEveryMinute} from '#/state/shell' +import {useSetMinimalShellMode} from '#/state/shell' +import {atoms as a, useTheme} from '#/alf' +import { + ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon, + ChevronTop_Stroke2_Corner0_Rounded as ChevronTopIcon, +} from '#/components/icons/Chevron' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo' +import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' +import * as Layout from '#/components/Layout' +import {Text} from '#/components/Typography' + +export function LogScreen({}: NativeStackScreenProps< + CommonNavigatorParams, + 'Log' +>) { + const t = useTheme() + const {_} = useLingui() + const setMinimalShellMode = useSetMinimalShellMode() + const [expanded, setExpanded] = useState<string[]>([]) + const timeAgo = useGetTimeAgo() + const tick = useTickEveryMinute() + + useFocusEffect( + useCallback(() => { + setMinimalShellMode(false) + }, [setMinimalShellMode]), + ) + + const toggler = (id: string) => () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + if (expanded.includes(id)) { + setExpanded(expanded.filter(v => v !== id)) + } else { + setExpanded([...expanded, id]) + } + } + + return ( + <Layout.Screen> + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + <Layout.Header.TitleText> + <Trans>System log</Trans> + </Layout.Header.TitleText> + </Layout.Header.Content> + <Layout.Header.Slot /> + </Layout.Header.Outer> + <Layout.Content> + {getEntries() + .slice(0) + .map(entry => { + return ( + <View key={`entry-${entry.id}`}> + <Pressable + style={[ + a.flex_row, + a.align_center, + a.py_md, + a.px_sm, + a.border_b, + t.atoms.border_contrast_low, + t.atoms.bg, + a.gap_sm, + ]} + onPress={toggler(entry.id)} + accessibilityLabel={_(msg`View debug entry`)} + accessibilityHint={_( + msg`Opens additional details for a debug entry`, + )}> + {entry.level === 'warn' || entry.level === 'error' ? ( + <WarningIcon size="sm" fill={t.palette.negative_500} /> + ) : ( + <CircleInfoIcon size="sm" /> + )} + <Text style={[a.flex_1]}>{String(entry.message)}</Text> + {entry.metadata && + Object.keys(entry.metadata).length > 0 && + (expanded.includes(entry.id) ? ( + <ChevronTopIcon + size="sm" + style={[t.atoms.text_contrast_low]} + /> + ) : ( + <ChevronBottomIcon + size="sm" + style={[t.atoms.text_contrast_low]} + /> + ))} + <Text style={[{minWidth: 40}, t.atoms.text_contrast_medium]}> + {timeAgo(entry.timestamp, tick)} + </Text> + </Pressable> + {expanded.includes(entry.id) && ( + <View + style={[ + t.atoms.bg_contrast_25, + a.rounded_xs, + a.p_sm, + a.border_b, + t.atoms.border_contrast_low, + ]}> + <View style={[a.px_sm, a.py_xs]}> + <Text>{JSON.stringify(entry.metadata, null, 2)}</Text> + </View> + </View> + )} + </View> + ) + })} + </Layout.Content> + </Layout.Screen> + ) +} diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx deleted file mode 100644 index 026319baf..000000000 --- a/src/view/screens/Log.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' -import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' -import {s} from '#/lib/styles' -import {getEntries} from '#/logger/logDump' -import {useTickEveryMinute} from '#/state/shell' -import {useSetMinimalShellMode} from '#/state/shell' -import {Text} from '#/view/com/util/text/Text' -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {ScrollView} from '#/view/com/util/Views' -import * as Layout from '#/components/Layout' - -export function LogScreen({}: NativeStackScreenProps< - CommonNavigatorParams, - 'Log' ->) { - const pal = usePalette('default') - const {_} = useLingui() - const setMinimalShellMode = useSetMinimalShellMode() - const [expanded, setExpanded] = React.useState<string[]>([]) - const timeAgo = useGetTimeAgo() - const tick = useTickEveryMinute() - - useFocusEffect( - React.useCallback(() => { - setMinimalShellMode(false) - }, [setMinimalShellMode]), - ) - - const toggler = (id: string) => () => { - if (expanded.includes(id)) { - setExpanded(expanded.filter(v => v !== id)) - } else { - setExpanded([...expanded, id]) - } - } - - return ( - <Layout.Screen> - <ViewHeader title="Log" /> - <ScrollView style={s.flex1}> - {getEntries() - .slice(0) - .map(entry => { - return ( - <View key={`entry-${entry.id}`}> - <TouchableOpacity - style={[styles.entry, pal.border, pal.view]} - onPress={toggler(entry.id)} - accessibilityLabel={_(msg`View debug entry`)} - accessibilityHint={_( - msg`Opens additional details for a debug entry`, - )}> - {entry.level === 'debug' ? ( - <FontAwesomeIcon icon="info" /> - ) : ( - <FontAwesomeIcon icon="exclamation" style={s.red3} /> - )} - <Text type="sm" style={[styles.summary, pal.text]}> - {String(entry.message)} - </Text> - {entry.metadata && Object.keys(entry.metadata).length ? ( - <FontAwesomeIcon - icon={ - expanded.includes(entry.id) ? 'angle-up' : 'angle-down' - } - style={s.mr5} - /> - ) : undefined} - <Text type="sm" style={[styles.ts, pal.textLight]}> - {timeAgo(entry.timestamp, tick)} - </Text> - </TouchableOpacity> - {expanded.includes(entry.id) ? ( - <View style={[pal.view, s.pl10, s.pr10, s.pb10]}> - <View style={[pal.btn, styles.details]}> - <Text type="mono" style={pal.text}> - {JSON.stringify(entry.metadata, null, 2)} - </Text> - </View> - </View> - ) : undefined} - </View> - ) - })} - <View style={s.footerSpacer} /> - </ScrollView> - </Layout.Screen> - ) -} - -const styles = StyleSheet.create({ - entry: { - flexDirection: 'row', - borderTopWidth: 1, - paddingVertical: 10, - paddingHorizontal: 6, - }, - summary: { - flex: 1, - }, - ts: { - width: 40, - }, - details: { - paddingVertical: 10, - paddingHorizontal: 6, - }, -}) |