feat: Initial clean release of CHM

packages/app-mobile/components/screens/UpgradeSyncTargetScreen.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import useSyncTargetUpgrade from '@joplin/lib/services/synchronizer/gui/useSyncTargetUpgrade';
+import { _ } from '@joplin/lib/locale';
+import { View, Text, ScrollView, TextStyle } from 'react-native';
+
+import { connect } from 'react-redux';
+import { themeStyle } from '../global-style';
+import ScreenHeader from '../ScreenHeader';
+import { AppState } from '../../utils/types';
+
+interface Props {
+	themeId: number;
+}
+
+function UpgradeSyncTargetScreen(props: Props) {
+	const upgradeResult = useSyncTargetUpgrade();
+
+	const theme = themeStyle(props.themeId);
+
+	const lineStyle = { ...theme.normalText, marginBottom: 20 };
+	const stackTraceStyle: TextStyle = { ...theme.normalText, flexWrap: 'nowrap', fontSize: theme.fontSize * 0.5, color: theme.colorFaded };
+	const headerStyle = { ...theme.headerStyle, marginBottom: 20 };
+
+	function renderUpgradeError() {
+		if (!upgradeResult.error) return null;
+
+		return (
+			<View style={{ backgroundColor: theme.backgroundColor, flex: 1, flexDirection: 'column' }}>
+				<Text style={headerStyle}>Error</Text>
+				<Text style={lineStyle}>The sync target could not be upgraded due to an error. For support, please copy the content of this page and paste it in the forum: https://discourse.joplinapp.org/</Text>
+				<Text style={lineStyle}>The full error was:</Text>
+				<Text style={lineStyle}>{upgradeResult.error.message}</Text>
+				<Text style={stackTraceStyle}>{upgradeResult.error.stack}</Text>
+			</View>
+		);
+	}
+
+	function renderInProgress() {
+		if (upgradeResult.error || upgradeResult.done) return null;
+
+		return (
+			<View>
+				<Text style={headerStyle}>Joplin upgrade in progress...</Text>
+				<Text style={lineStyle}>Please wait while the sync target is being upgraded. It may take a few seconds or a few minutes depending on the upgrade.</Text>
+				<Text style={lineStyle}>Make sure you leave your device on and the app opened while the upgrade is in progress.</Text>
+			</View>
+		);
+	}
+
+	function renderDone() {
+		if (upgradeResult.error || !upgradeResult.done) return null;
+
+		return (
+			<View>
+				<Text style={headerStyle}>Upgrade complete</Text>
+				<Text style={lineStyle}>The upgrade has been applied successfully. Please press Back to exit this screen.</Text>
+			</View>
+		);
+	}
+
+	return (
+		<ScrollView style={{ flex: 1, flexDirection: 'column', backgroundColor: theme.backgroundColor }}>
+			<ScreenHeader title={_('Sync Target Upgrade')} showShouldUpgradeSyncTargetMessage={false} showSearchButton={false} showBackButton={upgradeResult.done}/>
+			<View style={{ padding: 15, flex: 1 }}>
+				{renderInProgress()}
+				{renderDone()}
+				{renderUpgradeError()}
+			</View>
+		</ScrollView>
+	);
+}
+
+export default connect((state: AppState) => {
+	return {
+		themeId: state.settings.theme,
+	};
+})(UpgradeSyncTargetScreen);