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
|
import { useCallback } from 'react';
import styled from 'styled-components';
import { Button } from '../lib/components';
import { FlexColumn } from '../lib/components/flex-column';
import { spacings } from '../lib/foundations';
import { useHistory } from '../lib/history';
import { useBoolean } from '../lib/utility-hooks';
import { AppNavigationHeader } from './';
import { measurements } from './common-styles';
import { BackAction } from './KeyboardNavigation';
import { Layout, SettingsContainer } from './Layout';
import { NavigationContainer } from './NavigationContainer';
import { NavigationScrollbars } from './NavigationScrollbars';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';
const StyledContent = styled.div({
display: 'flex',
flexDirection: 'column',
flex: 1,
marginBottom: '2px',
});
const StyledButtonGroup = styled.div({
margin: `${spacings.large} ${measurements.horizontalViewMargin}`,
});
export default function Debug() {
const { pop } = useHistory();
return (
<BackAction action={pop}>
<Layout>
<SettingsContainer>
<NavigationContainer>
<AppNavigationHeader title="Developer tools" />
<NavigationScrollbars>
<SettingsHeader>
<HeaderTitle>Developer tools</HeaderTitle>
</SettingsHeader>
<StyledContent>
<StyledButtonGroup>
<FlexColumn $gap="medium">
<ThrowErrorButton />
<UnhandledRejectionButton />
<ErrorDuringRender />
</FlexColumn>
</StyledButtonGroup>
</StyledContent>
</NavigationScrollbars>
</NavigationContainer>
</SettingsContainer>
</Layout>
</BackAction>
);
}
function ThrowErrorButton() {
const handleClick = useCallback(() => {
throw new Error('This is a test error');
}, []);
return (
<Button variant="destructive" onClick={handleClick}>
<Button.Text>Throw error</Button.Text>
</Button>
);
}
function UnhandledRejectionButton() {
const handleClick = useCallback(() => {
return new Promise((_resolve, reject) => setTimeout(reject, 100));
}, []);
return (
<Button variant="destructive" onClick={handleClick}>
<Button.Text>Unhandled rejection</Button.Text>
</Button>
);
}
function ErrorDuringRender() {
const [error, setError] = useBoolean(false);
if (error) {
throw new Error('This is a test error during render');
}
return (
<Button variant="destructive" onClick={setError}>
<Button.Text>Error next render</Button.Text>
</Button>
);
}
|
