Skip to content

Chore: Hooks App/share #4417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reinaldonetof merged 5 commits into from
Aug 18, 2022
Merged

Chore: Hooks App/share #4417

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ec089e5
Chore: Hooks App/share
reinaldonetof Aug 8, 2022
dbf0933
Merge branch 'develop' into chore.hooks-app-share
reinaldonetof Aug 10, 2022
b492d4f
getTheme to outside
reinaldonetof Aug 10, 2022
447b41a
update types
dnlsilva Aug 12, 2022
7edd769
Merge branch 'develop' into chore.hooks-app-share
reinaldonetof Aug 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 51 additions & 117 deletions app/share.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import React, { useContext } from 'react';
import React, { useContext, useEffect, 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, 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';
Expand All @@ -24,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);
Expand Down Expand Up @@ -79,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}
Expand All @@ -89,115 +70,68 @@ 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();
this.state = {
theme: getTheme(theme),
themePreferences: theme,
root: '',
width,
height,
scale,
fontScale
};
this.init();
}
const { width, height, scale, fontScale } = Dimensions.get('screen');
const theme = getTheme(initialTheme());
Comment thread
reinaldonetof marked this conversation as resolved.
Outdated

componentDidMount() {
this.mounted = true;
}
const Root = (): React.ReactElement => {
const [root, setRoot] = useState('');
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 (
<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;