feat: add debug menu to specify endpoint for mobile token server #5049
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import {Button} from '@atb/components/button'; | ||
| import {ThemeText} from '@atb/components/text'; | ||
| import {storage} from '@atb/storage'; | ||
| import {StyleSheet} from '@atb/theme'; | ||
| import {useEffect, useState} from 'react'; | ||
| import {TextInput, View} from 'react-native'; | ||
|
|
||
| export const DebugTokenServerAddress = () => { | ||
| const [ipAddress, setIpAddress] = useState<string>(''); | ||
|
|
||
| const saveDebugIpAddress = async (ipAddress: string) => { | ||
| if (ipAddress.length > 0) { | ||
| const fullAddress = `http://${ipAddress}:8080`; | ||
|
There was a problem hiding this comment. Not quite sure what's useful to test in practice, but should we have the input be the whole address instead of just the IP? If it's useful to e.g. for point a prod device to staging servers, where we don't have access to a server running on a local IP. There was a problem hiding this comment. We usually save that into the .env file and read from it. There was a problem hiding this comment. We can change it to a whole IP (probably with a Also, pointing a prod device to staging server won't work, because the tokens on Prod are different from tokens from Staging. This is just to make it easier for testing on staging, either for reproducing a bug, or testing/developing new functionality. For example: we want to replicate a bug with creating tokens, we can just point the token server to local, instead of changing some parameters from the code to allow debug. These changes might be minor, but the added overhead of having to modify the server is something that we could have avoided with this menu. |
||
| await storage.set('@ATB_debug_token_server_ip_address', fullAddress); | ||
| } else { | ||
| await storage.remove('@ATB_debug_token_server_ip_address'); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const getStoredIpAddress = async () => { | ||
| const storedAddress = await storage.get( | ||
| '@ATB_debug_token_server_ip_address', | ||
| ); | ||
| setIpAddress(storedAddress ?? ''); | ||
| }; | ||
| getStoredIpAddress(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <View> | ||
| <ThemeText>Server IP Address</ThemeText> | ||
|
|
||
| <TextInput | ||
| onChangeText={(text) => setIpAddress(text)} | ||
| value={ipAddress} | ||
| inputMode="numeric" | ||
| placeholder="e.g. 10.100.1.89 (Leave blank to use default)" | ||
| clearButtonMode="always" | ||
| /> | ||
| <Button | ||
| onPress={async () => await saveDebugIpAddress(ipAddress)} | ||
| text="Use IP Address" | ||
| style={styles.button} | ||
| expanded={true} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| button: { | ||
| marginVertical: 8, | ||
| }, | ||
| container: { | ||
| marginVertical: 8, | ||
| }, | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Regarding storage, we recently created
usePersistedBoolState.We might want to either create one for string as well, or make the existing one general purpose. @gorandalum
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, it is possible to refactor it into a more generic
usePersistedState.