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,84 +70,43 @@ export const App = ({ root }: any) => (
 	</Stack.Navigator>
 );
 
-class Root extends React.Component<{}, IState> {
-	private mounted = false;
-
-	constructor(props: any) {
-		super(props);
 const { width, height, scale, fontScale } = Dimensions.get('screen');
-		const theme = initialTheme();
+const initialTheme = initialThemeFunction();
-		this.state = {
+const theme = getTheme(initialTheme);
-			theme: getTheme(theme),
-			themePreferences: theme,
-			root: '',
-			width,
-			height,
-			scale,
-			fontScale
-		};
-		this.init();
-		setNativeTheme(theme);
-	}
 
-	componentDidMount() {
+const Root = (): React.ReactElement => {
-		this.mounted = true;
+	const [root, setRoot] = useState('');
-	}
+	const navTheme = navigationTheme(theme);
 
-	componentWillUnmount(): void {
+	useLayoutEffect(() => {
-		closeShareExtension();
+		setNativeTheme(initialTheme);
-		unsubscribeTheme();
+	}, []);
-	}
 
-	init = async () => {
+	useEffect(() => {
-		const currentServer = UserPreferences.getString(CURRENT_SERVER);
+		const authenticateShare = async (currentServer: string) => {
-
-		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);
+
+		return () => {
+			closeShareExtension();
+			unsubscribeTheme();
 		};
+	}, []);
 
-	setTheme = (newTheme = {}) => {
-		// change theme state
-		this.setState(
-			prevState => newThemeState(prevState, newTheme as IThemePreference),
-			() => {
-				const { themePreferences } = this.state;
-				// subscribe to Appearance changes
-				subscribeTheme(themePreferences, this.setTheme);
-			}
-		);
-	};
-
-	// Dimensions update fires twice
-	onDimensionsChange = debounce(({ window: { width, height, scale, fontScale } }: { window: IDimensions }) => {
-		this.setDimensions({ width, height, scale, fontScale });
-	});
-
-	setDimensions = ({ width, height, scale, fontScale }: IDimensions) => {
-		this.setState({
-			width,
-			height,
-			scale,
-			fontScale
-		});
-	};
-
-	render() {
-		const { theme, root, width, height, scale, fontScale } = this.state;
-		const navTheme = navigationTheme(theme);
 	return (
 		<Provider store={store}>
 			<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
@@ -182,8 +115,7 @@ class Root extends React.Component<{}, IState> {
 						width,
 						height,
 						scale,
-							fontScale,
+						fontScale
-							setDimensions: this.setDimensions
 					}}
 				>
 					<NavigationContainer
@@ -205,7 +137,6 @@ class Root extends React.Component<{}, IState> {
 			</ThemeContext.Provider>
 		</Provider>
 	);
-	}
+};
-}
 
 export default Root;