Chore: Hooks App/share (#4417)

* Chore: Hooks App/share

* getTheme to outside

* update types

Co-authored-by: Gleidson Daniel <gleidson10daniel@hotmail.com>

app/share.tsx

@@ -1,26 +1,18 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { Dimensions } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { Provider } from 'react-redux';
 
-import {
+import { getTheme, setNativeTheme, initialTheme as initialThemeFunction, unsubscribeTheme } from './lib/methods/helpers/theme';
-	getTheme,
-	initialTheme,
-	newThemeState,
-	setNativeTheme,
-	subscribeTheme,
-	unsubscribeTheme
-} from './lib/methods/helpers/theme';
 import UserPreferences from './lib/methods/userPreferences';
 import Navigation from './lib/navigation/shareNavigation';
 import store from './lib/store';
 import { initStore } from './lib/store/auxStore';
 import { closeShareExtension, shareExtensionInit } from './lib/methods/shareExtension';
 import { defaultHeader, getActiveRouteName, navigationTheme, themedHeader } from './lib/methods/helpers/navigation';
-import { ThemeContext, TSupportedThemes } from './theme';
+import { ThemeContext } from './theme';
 import { localAuthenticate } from './lib/methods/helpers/localAuthentication';
-import { IThemePreference } from './definitions/ITheme';
 import ScreenLockedView from './views/ScreenLockedView';
 // Outside Stack
 import WithoutServersView from './views/WithoutServersView';
@@ -31,29 +23,11 @@ import SelectServerView from './views/SelectServerView';
 import { setCurrentScreen } from './lib/methods/helpers/log';
 import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
-import { debounce } from './lib/methods/helpers';
 import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './definitions/navigationTypes';
 import { colors, CURRENT_SERVER } from './lib/constants';
 
 initStore(store);
 
-interface IDimensions {
-	width: number;
-	height: number;
-	scale: number;
-	fontScale: number;
-}
-
-interface IState {
-	theme: TSupportedThemes;
-	themePreferences: IThemePreference;
-	root: any;
-	width: number;
-	height: number;
-	scale: number;
-	fontScale: number;
-}
-
 const Inside = createStackNavigator<ShareInsideStackParamList>();
 const InsideStack = () => {
 	const { theme } = useContext(ThemeContext);
@@ -86,7 +60,7 @@ const OutsideStack = () => {
 
 // App
 const Stack = createStackNavigator<ShareAppStackParamList>();
-export const App = ({ root }: any) => (
+export const App = ({ root }: { root: string }): React.ReactElement => (
 	<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
 		<>
 			{!root ? <Stack.Screen name='AuthLoading' component={AuthLoadingView} /> : null}
@@ -96,116 +70,73 @@ export const App = ({ root }: any) => (
 	</Stack.Navigator>
 );
 
-class Root extends React.Component<{}, IState> {
+const { width, height, scale, fontScale } = Dimensions.get('screen');
-	private mounted = false;
+const initialTheme = initialThemeFunction();
+const theme = getTheme(initialTheme);
 
-	constructor(props: any) {
+const Root = (): React.ReactElement => {
-		super(props);
+	const [root, setRoot] = useState('');
-		const { width, height, scale, fontScale } = Dimensions.get('screen');
+	const navTheme = navigationTheme(theme);
-		const theme = initialTheme();
-		this.state = {
-			theme: getTheme(theme),
-			themePreferences: theme,
-			root: '',
-			width,
-			height,
-			scale,
-			fontScale
-		};
-		this.init();
-		setNativeTheme(theme);
-	}
 
-	componentDidMount() {
+	useLayoutEffect(() => {
-		this.mounted = true;
+		setNativeTheme(initialTheme);
-	}
+	}, []);
 
-	componentWillUnmount(): void {
+	useEffect(() => {
-		closeShareExtension();
+		const authenticateShare = async (currentServer: string) => {
-		unsubscribeTheme();
-	}
-
-	init = async () => {
-		const currentServer = UserPreferences.getString(CURRENT_SERVER);
-
-		if (currentServer) {
 			await localAuthenticate(currentServer);
-			this.setState({ root: 'inside' });
+			setRoot('inside');
 			await shareExtensionInit(currentServer);
-		} else if (this.mounted) {
+		};
-			this.setState({ root: 'outside' });
+
+		const currentServer = UserPreferences.getString(CURRENT_SERVER);
+		if (currentServer) {
+			authenticateShare(currentServer);
 		} else {
-			// @ts-ignore
+			setRoot('outside');
-			this.state.root = 'outside';
 		}
 
 		const state = Navigation.navigationRef.current?.getRootState();
 		const currentRouteName = getActiveRouteName(state);
 		Navigation.routeNameRef.current = currentRouteName;
 		setCurrentScreen(currentRouteName);
-	};
 
-	setTheme = (newTheme = {}) => {
+		return () => {
-		// change theme state
+			closeShareExtension();
-		this.setState(
+			unsubscribeTheme();
-			prevState => newThemeState(prevState, newTheme as IThemePreference),
+		};
-			() => {
+	}, []);
-				const { themePreferences } = this.state;
-				// subscribe to Appearance changes
-				subscribeTheme(themePreferences, this.setTheme);
-			}
-		);
-	};
 
-	// Dimensions update fires twice
+	return (
-	onDimensionsChange = debounce(({ window: { width, height, scale, fontScale } }: { window: IDimensions }) => {
+		<Provider store={store}>
-		this.setDimensions({ width, height, scale, fontScale });
+			<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
-	});
+				<DimensionsContext.Provider
-
+					value={{
-	setDimensions = ({ width, height, scale, fontScale }: IDimensions) => {
+						width,
-		this.setState({
+						height,
-			width,
+						scale,
-			height,
+						fontScale
-			scale,
+					}}
-			fontScale
+				>
-		});
+					<NavigationContainer
-	};
+						theme={navTheme}
-
+						ref={Navigation.navigationRef}
-	render() {
+						onStateChange={state => {
-		const { theme, root, width, height, scale, fontScale } = this.state;
+							const previousRouteName = Navigation.routeNameRef.current;
-		const navTheme = navigationTheme(theme);
+							const currentRouteName = getActiveRouteName(state);
-		return (
+							if (previousRouteName !== currentRouteName) {
-			<Provider store={store}>
+								setCurrentScreen(currentRouteName);
-				<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
+							}
-					<DimensionsContext.Provider
+							Navigation.routeNameRef.current = currentRouteName;
-						value={{
-							width,
-							height,
-							scale,
-							fontScale,
-							setDimensions: this.setDimensions
 						}}
 					>
-						<NavigationContainer
+						<App root={root} />
-							theme={navTheme}
+					</NavigationContainer>
-							ref={Navigation.navigationRef}
+					<ScreenLockedView />
-							onStateChange={state => {
+				</DimensionsContext.Provider>
-								const previousRouteName = Navigation.routeNameRef.current;
+			</ThemeContext.Provider>
-								const currentRouteName = getActiveRouteName(state);
+		</Provider>
-								if (previousRouteName !== currentRouteName) {
+	);
-									setCurrentScreen(currentRouteName);
+};
-								}
-								Navigation.routeNameRef.current = currentRouteName;
-							}}
-						>
-							<App root={root} />
-						</NavigationContainer>
-						<ScreenLockedView />
-					</DimensionsContext.Provider>
-				</ThemeContext.Provider>
-			</Provider>
-		);
-	}
-}
 
 export default Root;