From ec089e5c8846bcba238dca3548907f5ae287ed4d Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 8 Aug 2022 17:09:29 -0300 Subject: [PATCH 1/3] Chore: Hooks App/share --- app/share.tsx | 168 +++++++++++++++----------------------------------- 1 file changed, 51 insertions(+), 117 deletions(-) diff --git a/app/share.tsx b/app/share.tsx index 08918148384..56a98a16c0f 100644 --- a/app/share.tsx +++ b/app/share.tsx @@ -1,20 +1,19 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { Dimensions } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { AppearanceProvider } from 'react-native-appearance'; import { createStackNavigator } from '@react-navigation/stack'; import { Provider } from 'react-redux'; -import { getTheme, initialTheme, newThemeState, subscribeTheme, unsubscribeTheme } from './lib/methods/helpers/theme'; +import { getTheme, initialTheme, 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'; @@ -25,29 +24,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); @@ -90,115 +71,68 @@ export const App = ({ root }: any) => ( ); -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(); - this.state = { - theme: getTheme(theme), - themePreferences: theme, - root: '', - width, - height, - scale, - fontScale - }; - this.init(); - } +const { width, height, scale, fontScale } = Dimensions.get('screen'); - componentDidMount() { - this.mounted = true; - } +const Root = () => { + const [root, setRoot] = useState(''); + const theme = getTheme(initialTheme()); + const navTheme = navigationTheme(theme); - componentWillUnmount(): void { - closeShareExtension(); - unsubscribeTheme(); - } + useEffect(() => { + const authenticateShare = async (currentServer: string) => { + await localAuthenticate(currentServer); + setRoot('inside'); + await shareExtensionInit(currentServer); + }; - init = async () => { const currentServer = UserPreferences.getString(CURRENT_SERVER); - if (currentServer) { - await localAuthenticate(currentServer); - this.setState({ root: 'inside' }); - await shareExtensionInit(currentServer); - } else if (this.mounted) { - this.setState({ root: 'outside' }); + 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); - } - ); - }; - // 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 - }); - }; + return () => { + closeShareExtension(); + unsubscribeTheme(); + }; + }, []); - 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; From b492d4f1b656704d8c4f61c9da3eb14ef5dc3fb2 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 10 Aug 2022 17:47:23 -0300 Subject: [PATCH 2/3] getTheme to outside --- app/share.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/share.tsx b/app/share.tsx index a3fc4c608ee..a14cd2d4cec 100644 --- a/app/share.tsx +++ b/app/share.tsx @@ -71,10 +71,10 @@ export const App = ({ root }: any) => ( ); const { width, height, scale, fontScale } = Dimensions.get('screen'); +const theme = getTheme(initialTheme()); const Root = () => { const [root, setRoot] = useState(''); - const theme = getTheme(initialTheme()); const navTheme = navigationTheme(theme); useEffect(() => { From 447b41adf9e78495a84e814bf4a4e1d4047917ef Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Fri, 12 Aug 2022 15:34:11 -0300 Subject: [PATCH 3/3] update types --- app/share.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/share.tsx b/app/share.tsx index a14cd2d4cec..51e99a26da2 100644 --- a/app/share.tsx +++ b/app/share.tsx @@ -60,7 +60,7 @@ const OutsideStack = () => { // App const Stack = createStackNavigator(); -export const App = ({ root }: any) => ( +export const App = ({ root }: { root: string }): React.ReactElement => ( <> {!root ? : null} @@ -73,7 +73,7 @@ export const App = ({ root }: any) => ( const { width, height, scale, fontScale } = Dimensions.get('screen'); const theme = getTheme(initialTheme()); -const Root = () => { +const Root = (): React.ReactElement => { const [root, setRoot] = useState(''); const navTheme = navigationTheme(theme);