Oauth.tsx

import { MiniAlert } from "elements/form/MiniAlert.native"
import qs from "qs"
import * as React from 'react'
import { Dimensions, Text, TouchableOpacity, View, ActivityIndicator } from "react-native"
import { WebView } from 'react-native-webview'
import { Bootstrap } from "scss/native/BootstrapVariables"
import { rem } from "scss/native/NativeUnits"
import { CarPlatform } from 'utils/CarPlatforms'
import * as M from "./M_ConnectCarPlatform"
import { OauthResponse } from "./OauthCallback"
import { PlatformCredentialsModal_Ouath_Common } from "./PlatformCredentialsModal_Oauth_Common"

type Props = {
	cp: CarPlatform
	onSubmit: (
		authorizationCode: string,
		handleError: (t: M.Result_connectCarPlatform) => React.ReactNode,
	) => Promise<React.ReactNode>
	close: () => void
}

export const PlatformCredentialsModal_Oauth = (props: Props) => {
	const [errorMessage, setErrorMessage] = React.useState<React.ReactNode | undefined>(undefined)

	// If we have error WebView will unmount, by removing error
	// on reload press we reload and rerender WebView
	if (!errorMessage) {
		return (
			<WebView
				source={{ uri: PlatformCredentialsModal_Ouath_Common.getUrl(props.cp) }}
				javaScriptEnabled={true}
				injectedJavaScript={`
						function listenForLocationChange() {
							const interval = setInterval(() => {
								if (window.location.href.startsWith("https://carsync.io")) {
									window.ReactNativeWebView.postMessage(window.location.search)
									clearTimeout(interval)
								}
							}, 100)
						}
						listenForLocationChange();
					`}
				style={{
					minHeight: Dimensions.get("window").height * 0.6
				}}
				startInLoadingState={true}
				renderLoading={() => (
					<View style={{
						position: 'absolute',
						height: '100%',
						width: '100%',
						justifyContent: 'center',
						alignItems: 'center'
					}}>
						<ActivityIndicator size="large" />
					</View>
				)}
				onMessage={async e => {
					if (e.nativeEvent.data) {
						const q = qs.parse(e.nativeEvent.data.slice(1, e.nativeEvent.data.length)) as OauthResponse
						const errorMessage = await PlatformCredentialsModal_Ouath_Common.runOauthCompleted(q, props.onSubmit, props.cp)
						setErrorMessage(errorMessage)
					}
				}}
				onError={e => {
					// This could be more specific, but needs more testing
					setErrorMessage(
						<MiniAlert type="danger">
							Unknown error code: {e.nativeEvent.code}
						</MiniAlert>
					)
				}}
			/>
		)
	} else {
		return <View style={{
			display: "flex",
			flexDirection: "column",
			flex: 1,
			justifyContent: "center",
			alignItems: "center"
		}}>
			{errorMessage}
			<TouchableOpacity
				onPress={() => {
					setErrorMessage(null)
				}}
				style={{
					flexDirection: 'row',
					justifyContent: 'center',
					backgroundColor: Bootstrap.blue,
					width: '90%',
					marginBottom: rem
				}}>
				<Text style={{
					textAlign: 'center',
					fontSize: 1 * rem,
					paddingVertical: 9.5,
					color: Bootstrap.white,
				}}>Retry</Text>
			</TouchableOpacity>
		</View>
	}
}