From f0ed5014509f06165e76c4a64d1fe456c34a06ae Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Thu, 18 Aug 2022 20:25:39 -0300 Subject: [PATCH] Chore: Hooks App/share (#4417) * Chore: Hooks App/share * getTheme to outside * update types Co-authored-by: Gleidson Daniel --- app/share.tsx | 181 ++++++++++++++++---------------------------------- 1 file changed, 56 insertions(+), 125 deletions(-) diff --git a/app/share.tsx b/app/share.tsx index eed5f55c..81076b4c 100644 --- a/app/share.tsx +++ b/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 { - getTheme, - initialTheme, - newThemeState, - setNativeTheme, - subscribeTheme, - unsubscribeTheme -} from './lib/methods/helpers/theme'; +import { getTheme, setNativeTheme, initialTheme as initialThemeFunction, 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(); const InsideStack = () => { const { theme } = useContext(ThemeContext); @@ -86,7 +60,7 @@ const OutsideStack = () => { // App const Stack = createStackNavigator(); -export const App = ({ root }: any) => ( +export const App = ({ root }: { root: string }): React.ReactElement => ( <> {!root ? : null} @@ -96,116 +70,73 @@ export const App = ({ root }: any) => ( ); -class Root extends React.Component<{}, IState> { - private mounted = false; +const { width, height, scale, fontScale } = Dimensions.get('screen'); +const initialTheme = initialThemeFunction(); +const theme = getTheme(initialTheme); - constructor(props: any) { - super(props); - const { width, height, scale, fontScale } = Dimensions.get('screen'); - const theme = initialTheme(); - this.state = { - theme: getTheme(theme), - themePreferences: theme, - root: '', - width, - height, - scale, - fontScale - }; - this.init(); - setNativeTheme(theme); - } +const Root = (): React.ReactElement => { + const [root, setRoot] = useState(''); + const navTheme = navigationTheme(theme); - componentDidMount() { - this.mounted = true; - } + useLayoutEffect(() => { + setNativeTheme(initialTheme); + }, []); - componentWillUnmount(): void { - closeShareExtension(); - unsubscribeTheme(); - } - - init = async () => { - const currentServer = UserPreferences.getString(CURRENT_SERVER); - - if (currentServer) { + useEffect(() => { + const authenticateShare = async (currentServer: string) => { 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 - this.state.root = 'outside'; + setRoot('outside'); } const state = Navigation.navigationRef.current?.getRootState(); const currentRouteName = getActiveRouteName(state); Navigation.routeNameRef.current = currentRouteName; setCurrentScreen(currentRouteName); - }; - 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); - } - ); - }; + return () => { + closeShareExtension(); + unsubscribeTheme(); + }; + }, []); - // 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 ( - - - + + + { + const previousRouteName = Navigation.routeNameRef.current; + const currentRouteName = getActiveRouteName(state); + if (previousRouteName !== currentRouteName) { + setCurrentScreen(currentRouteName); + } + Navigation.routeNameRef.current = currentRouteName; }} > - { - const previousRouteName = Navigation.routeNameRef.current; - const currentRouteName = getActiveRouteName(state); - if (previousRouteName !== currentRouteName) { - setCurrentScreen(currentRouteName); - } - Navigation.routeNameRef.current = currentRouteName; - }} - > - - - - - - - ); - } -} + + + + + + + ); +}; export default Root;