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
|
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {observer} from 'mobx-react-lite'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {ScrollView} from '../com/util/Views'
import {s} from 'lib/styles'
import {ViewHeader} from '../com/util/ViewHeader'
import {Text} from '../com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {getEntries} from '#/logger/logDump'
import {ago} from 'lib/strings/time'
import {useSetMinimalShellMode} from '#/state/shell'
export const LogScreen = observer(function Log({}: NativeStackScreenProps<
CommonNavigatorParams,
'Log'
>) {
const pal = usePalette('default')
const setMinimalShellMode = useSetMinimalShellMode()
const [expanded, setExpanded] = React.useState<string[]>([])
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 (
<View style={[s.flex1]}>
<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="View debug entry"
accessibilityHint="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]}>
{ago(entry.timestamp)}
</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>
</View>
)
})
const styles = StyleSheet.create({
entry: {
flexDirection: 'row',
borderTopWidth: 1,
paddingVertical: 10,
paddingHorizontal: 6,
},
summary: {
flex: 1,
},
ts: {
width: 40,
},
details: {
paddingVertical: 10,
paddingHorizontal: 6,
},
})
|
