Chore: Hooks App/share (#4417)
* Chore: Hooks App/share * getTheme to outside * update types Co-authored-by: Gleidson Daniel <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto
Diego Mello
parent
13ad685ecb
commit
8810f80b7e
181
app/share.tsx
181
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<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> {
|
||||
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 (
|
||||
<Provider store={store}>
|
||||
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
|
||||
<DimensionsContext.Provider
|
||||
value={{
|
||||
width,
|
||||
height,
|
||||
scale,
|
||||
fontScale,
|
||||
setDimensions: this.setDimensions
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<ThemeContext.Provider value={{ theme, colors: colors[theme] }}>
|
||||
<DimensionsContext.Provider
|
||||
value={{
|
||||
width,
|
||||
height,
|
||||
scale,
|
||||
fontScale
|
||||
}}
|
||||
>
|
||||
<NavigationContainer
|
||||
theme={navTheme}
|
||||
ref={Navigation.navigationRef}
|
||||
onStateChange={state => {
|
||||
const previousRouteName = Navigation.routeNameRef.current;
|
||||
const currentRouteName = getActiveRouteName(state);
|
||||
if (previousRouteName !== currentRouteName) {
|
||||
setCurrentScreen(currentRouteName);
|
||||
}
|
||||
Navigation.routeNameRef.current = currentRouteName;
|
||||
}}
|
||||
>
|
||||
<NavigationContainer
|
||||
theme={navTheme}
|
||||
ref={Navigation.navigationRef}
|
||||
onStateChange={state => {
|
||||
const previousRouteName = Navigation.routeNameRef.current;
|
||||
const currentRouteName = getActiveRouteName(state);
|
||||
if (previousRouteName !== currentRouteName) {
|
||||
setCurrentScreen(currentRouteName);
|
||||
}
|
||||
Navigation.routeNameRef.current = currentRouteName;
|
||||
}}
|
||||
>
|
||||
<App root={root} />
|
||||
</NavigationContainer>
|
||||
<ScreenLockedView />
|
||||
</DimensionsContext.Provider>
|
||||
</ThemeContext.Provider>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
<App root={root} />
|
||||
</NavigationContainer>
|
||||
<ScreenLockedView />
|
||||
</DimensionsContext.Provider>
|
||||
</ThemeContext.Provider>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
|
|
|
|||
Loading…
Reference in New Issue