Skip to content

Commit 7f67954

Browse files
tido64tido64
committed
chore: migrate example app to TypeScript
When upgrading Flow (from upgrading react-native), a bunch of errors come from the test app. Taking this opportunity to migrate to TypeScript to avoid future issues. Next up would be to convert the rest of the Flow files.
1 parent 385ddc4 commit 7f67954

File tree

12 files changed

+481
-462
lines changed

12 files changed

+481
-462
lines changed

‎example/App.js

Lines changed: 0 additions & 167 deletions
This file was deleted.

‎example/App.tsx

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import React, { useCallback, useState } from 'react';
9+
import {
10+
Button,
11+
Keyboard,
12+
SafeAreaView,
13+
StyleSheet,
14+
Text,
15+
TouchableOpacity,
16+
View
17+
} from 'react-native';
18+
import BasicExample from './examples/Basic';
19+
import GetSetClear from './examples/GetSetClear';
20+
import MergeItem from './examples/MergeItem';
21+
22+
const TESTS = {
23+
GetSetClear: {
24+
title: 'Simple Get/Set value',
25+
testId: 'get-set-clear',
26+
description: 'Store and retrieve persisted data',
27+
render() {
28+
return <GetSetClear />;
29+
},
30+
},
31+
MergeItem: {
32+
title: 'Merge item',
33+
testId: 'merge-item',
34+
description: 'Merge object with already stored data',
35+
render() {
36+
return <MergeItem />;
37+
},
38+
},
39+
Basic: {
40+
title: 'Basic',
41+
testId: 'basic',
42+
description: 'Basic functionality test',
43+
render() {
44+
return <BasicExample />;
45+
},
46+
},
47+
};
48+
49+
export default function App(): JSX.Element {
50+
const [iteration, setIteration] = useState(0);
51+
const [currentTest, setCurrentTest] = useState(TESTS.GetSetClear);
52+
53+
const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
54+
const simulateRestart = useCallback(() => setIteration(iteration + 1), [iteration]);
55+
const testBasic = useCallback(() => setCurrentTest(TESTS.Basic), []);
56+
const testGetSetClear = useCallback(() => setCurrentTest(TESTS.GetSetClear), []);
57+
const testMergeItem = useCallback(() => setCurrentTest(TESTS.MergeItem), []);
58+
59+
return (
60+
<SafeAreaView style={styles.container}>
61+
<TouchableOpacity
62+
style={styles.closeKeyboardView}
63+
onPress={dismissKeyboard}
64+
testID="closeKeyboard"
65+
/>
66+
67+
<TouchableOpacity
68+
testID="restart_button"
69+
onPress={simulateRestart}
70+
style={styles.restartButton}
71+
activeOpacity={0.6}>
72+
<Text>Simulate Restart</Text>
73+
</TouchableOpacity>
74+
75+
<View style={styles.testPickerContainer}>
76+
<Button
77+
testID="testType_getSetClear"
78+
title="Get/Set/Clear"
79+
onPress={testGetSetClear}
80+
/>
81+
<Button
82+
testID="testType_mergeItem"
83+
title="Merge Item"
84+
onPress={testMergeItem}
85+
/>
86+
<Button
87+
title={TESTS.Basic.title}
88+
onPress={testBasic}
89+
/>
90+
</View>
91+
92+
<View
93+
testID={`example-${currentTest.testId}`}
94+
key={currentTest.title + iteration}
95+
style={styles.exampleContainer}>
96+
<Text style={styles.exampleTitle}>{currentTest.title}</Text>
97+
<Text style={styles.exampleDescription}>
98+
{currentTest.description}
99+
</Text>
100+
<View style={styles.exampleInnerContainer}>
101+
{currentTest.render()}
102+
</View>
103+
</View>
104+
</SafeAreaView>
105+
);
106+
}
107+
108+
const styles = StyleSheet.create({
109+
container: {
110+
flex: 1,
111+
backgroundColor: '#F5FCFF',
112+
padding: 8,
113+
},
114+
exampleContainer: {
115+
padding: 4,
116+
backgroundColor: '#FFF',
117+
borderColor: '#EEE',
118+
borderTopWidth: 1,
119+
borderBottomWidth: 1,
120+
flex: 1,
121+
},
122+
exampleTitle: {
123+
fontSize: 18,
124+
},
125+
exampleDescription: {
126+
color: '#333333',
127+
marginBottom: 16,
128+
},
129+
exampleInnerContainer: {
130+
borderColor: '#EEE',
131+
borderTopWidth: 1,
132+
paddingTop: 10,
133+
flex: 1,
134+
},
135+
restartButton: {
136+
padding: 6,
137+
borderRadius: 5,
138+
backgroundColor: '#F3F3F3',
139+
alignItems: 'center',
140+
justifyContent: 'center',
141+
alignSelf: 'flex-end',
142+
},
143+
closeKeyboardView: {
144+
width: 5,
145+
height: 5,
146+
},
147+
testPickerContainer: {
148+
flexDirection: 'row',
149+
flexWrap: 'wrap',
150+
},
151+
});

‎example/examples/Basic.js renamed to ‎example/examples/Basic.tsx

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import React from 'react';
2-
import {View, Text, Button, StyleSheet, ScrollView, TextInput} from 'react-native';
1+
// @ts-ignore
32
import AsyncStorage from '@react-native-async-storage/async-storage';
3+
import React from 'react';
4+
import { Button, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
45

6+
type DataType = {
7+
deeper?: DataType;
8+
nested?: DataType;
9+
[key: string]: string | DataType | undefined;
10+
};
511

612
const mergeInitialValue = {
713
initial: 'keep',
@@ -16,11 +22,15 @@ const mergeInitialValue = {
1622
},
1723
};
1824

25+
function hasMessage(e: unknown): e is { "message": string; } {
26+
return Boolean(typeof e === 'object' && e && 'message' in e);
27+
}
28+
1929
function NextExample() {
2030
const [keys, setKeys] = React.useState([]);
21-
const [error, setError] = React.useState(null);
22-
const [inputKey, setInputKey] = React.useState();
23-
const [inputValue, setInputValue] = React.useState();
31+
const [error, setError] = React.useState('');
32+
const [inputKey, setInputKey] = React.useState('');
33+
const [inputValue, setInputValue] = React.useState('');
2434
const [value, setValue] = React.useState();
2535
const [mergedValue, setMergedValue] = React.useState();
2636
const [overrideValue, setOverrideValue] = React.useState({
@@ -30,13 +40,17 @@ function NextExample() {
3040
});
3141

3242

33-
function runWithCatch(block) {
43+
function runWithCatch(block: () => Promise<void>) {
3444
return async () => {
3545
try {
36-
setError(null);
46+
setError('');
3747
await block();
3848
} catch (e) {
39-
setError('Caught: ' + e.message || e);
49+
if (hasMessage(e)) {
50+
setError('Caught error: ' + (e.message || e));
51+
} else {
52+
setError('Unknown error: ' + e);
53+
}
4054
}
4155
};
4256
}
@@ -90,9 +104,9 @@ function NextExample() {
90104
const {override1, override2, override3} = overrideValue;
91105

92106
// leave out empty inputs
93-
const toMerge = {};
107+
const toMerge: DataType = {};
94108
if (override1) {
95-
toMerge.override1 = override1;
109+
toMerge['override1'] = override1;
96110
}
97111
if (override2) {
98112
toMerge.nested = {
@@ -186,7 +200,6 @@ function NextExample() {
186200
</ScrollView>;
187201
}
188202

189-
190203
const styles = StyleSheet.create({
191204
example: {
192205
paddingBottom: 24,

0 commit comments

Comments
 (0)