Beta

app/AppContainer.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { connect } from 'react-redux';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+
+import Navigation from './lib/Navigation';
+import { defaultHeader, getActiveRouteName } from './utils/navigation';
+import {
+	ROOT_LOADING, ROOT_OUTSIDE, ROOT_NEW_SERVER, ROOT_INSIDE, ROOT_SET_USERNAME, ROOT_BACKGROUND
+} from './actions/app';
+import ActionSheetProvider from './actionSheet';
+
+// Stacks
+import AuthLoadingView from './views/AuthLoadingView';
+
+// SetUsername Stack
+import SetUsernameView from './views/SetUsernameView';
+
+import OutsideStack from './stacks/OutsideStack';
+import InsideStack from './stacks/InsideStack';
+import MasterDetailStack from './stacks/MasterDetailStack';
+import { ThemeContext } from './theme';
+import { themes } from './constants/colors';
+import { setCurrentScreen } from './utils/log';
+
+// SetUsernameStack
+const SetUsername = createStackNavigator();
+const SetUsernameStack = () => (
+	<SetUsername.Navigator screenOptions={defaultHeader}>
+		<SetUsername.Screen
+			name='SetUsernameView'
+			component={SetUsernameView}
+		/>
+	</SetUsername.Navigator>
+);
+
+// App
+const Stack = createStackNavigator();
+const App = React.memo(({ root, isMasterDetail }) => {
+	if (!root || root === ROOT_BACKGROUND) {
+		return null;
+	}
+
+	const { theme } = React.useContext(ThemeContext);
+	const defaultNavTheme = theme === 'light' ? DefaultTheme : DarkTheme;
+
+	const navigationTheme = {
+		...defaultNavTheme,
+		colors: {
+			...defaultNavTheme.colors,
+			background: 'transparent',
+			border: themes[theme].borderColor
+		}
+	};
+
+	React.useEffect(() => {
+		const state = Navigation.navigationRef.current.getRootState();
+		const currentRouteName = getActiveRouteName(state);
+		Navigation.routeNameRef.current = currentRouteName;
+		setCurrentScreen(currentRouteName);
+	}, []);
+
+	return (
+		<SafeAreaProvider initialMetrics={initialWindowMetrics}>
+			<ActionSheetProvider>
+				<NavigationContainer
+					theme={navigationTheme}
+					ref={Navigation.navigationRef}
+					onStateChange={(state) => {
+						const previousRouteName = Navigation.routeNameRef.current;
+						const currentRouteName = getActiveRouteName(state);
+						if (previousRouteName !== currentRouteName) {
+							setCurrentScreen(currentRouteName);
+						}
+						Navigation.routeNameRef.current = currentRouteName;
+					}}
+				>
+					<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+						<>
+							{root === ROOT_LOADING ? (
+								<Stack.Screen
+									name='AuthLoading'
+									component={AuthLoadingView}
+								/>
+							) : null}
+							{root === ROOT_OUTSIDE || root === ROOT_NEW_SERVER ? (
+								<Stack.Screen
+									name='OutsideStack'
+									component={OutsideStack}
+								/>
+							) : null}
+							{root === ROOT_INSIDE && isMasterDetail ? (
+								<Stack.Screen
+									name='MasterDetailStack'
+									component={MasterDetailStack}
+								/>
+							) : null}
+							{root === ROOT_INSIDE && !isMasterDetail ? (
+								<Stack.Screen
+									name='InsideStack'
+									component={InsideStack}
+								/>
+							) : null}
+							{root === ROOT_SET_USERNAME ? (
+								<Stack.Screen
+									name='SetUsernameStack'
+									component={SetUsernameStack}
+								/>
+							) : null}
+						</>
+					</Stack.Navigator>
+				</NavigationContainer>
+			</ActionSheetProvider>
+		</SafeAreaProvider>
+	);
+});
+const mapStateToProps = state => ({
+	root: state.app.root,
+	isMasterDetail: state.app.isMasterDetail
+});
+
+App.propTypes = {
+	root: PropTypes.string,
+	isMasterDetail: PropTypes.bool
+};
+
+const AppContainer = connect(mapStateToProps)(App);
+export default AppContainer;

app/actionSheet.js

@@ -0,0 +1,53 @@
+import React, { useRef, useContext } from 'react';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import PropTypes from 'prop-types';
+
+import ActionSheet from './containers/ActionSheet';
+import { withTheme } from './theme';
+
+const context = React.createContext({
+	show: () => {},
+	hide: () => {}
+});
+
+export function useActionSheet() {
+	return useContext(context);
+}
+
+const { Provider, Consumer } = context;
+
+export function connectActionSheet(Component) {
+	const ConnectedActionSheet = props => (
+		<Consumer>
+			{contexts => <Component {...props} {...contexts} />}
+		</Consumer>
+	);
+	hoistNonReactStatics(ConnectedActionSheet, Component);
+	return ConnectedActionSheet;
+}
+
+const ActionSheetProvider = ({ children, theme }) => {
+	const ref = useRef();
+
+	const getContext = () => ({
+		show: (options) => {
+			ref.current?.show(options);
+		},
+		hide: () => {
+			ref.current?.hide();
+		}
+	});
+
+	return (
+		<Provider value={getContext()}>
+			<ActionSheet ref={ref} theme={theme}>
+				{children}
+			</ActionSheet>
+		</Provider>
+	);
+};
+ActionSheetProvider.propTypes = {
+	children: PropTypes.node,
+	theme: PropTypes.string
+};
+export default withTheme(ActionSheetProvider);

app/actions/actionsTypes.js

@@ -32,7 +32,7 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	'CLOSE_SEARCH_HEADER'
 ]);
 export const ROOM = createRequestTypes('ROOM', ['SUBSCRIBE', 'UNSUBSCRIBE', 'LEAVE', 'DELETE', 'REMOVED', 'CLOSE', 'FORWARD', 'USER_TYPING']);
-export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS']);
+export const APP = createRequestTypes('APP', ['START', 'READY', 'INIT', 'INIT_LOCAL_SETTINGS', 'SET_MASTER_DETAIL']);
 export const MESSAGES = createRequestTypes('MESSAGES', ['REPLY_BROADCAST']);
 export const CREATE_CHANNEL = createRequestTypes('CREATE_CHANNEL', [...defaultTypes]);
 export const CREATE_DISCUSSION = createRequestTypes('CREATE_DISCUSSION', [...defaultTypes]);

app/actions/app.js

@@ -0,0 +1,41 @@
+import { APP } from './actionsTypes';
+
+export const ROOT_OUTSIDE = 'outside';
+export const ROOT_INSIDE = 'inside';
+export const ROOT_LOADING = 'loading';
+export const ROOT_NEW_SERVER = 'newServer';
+export const ROOT_SET_USERNAME = 'setUsername';
+export const ROOT_BACKGROUND = 'background';
+
+export function appStart({ root, ...args }) {
+	return {
+		type: APP.START,
+		root,
+		...args
+	};
+}
+
+export function appReady() {
+	return {
+		type: APP.READY
+	};
+}
+
+export function appInit() {
+	return {
+		type: APP.INIT
+	};
+}
+
+export function appInitLocalSettings() {
+	return {
+		type: APP.INIT_LOCAL_SETTINGS
+	};
+}
+
+export function setMasterDetail(isMasterDetail) {
+	return {
+		type: APP.SET_MASTER_DETAIL,
+		isMasterDetail
+	};
+}

app/commands.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-bitwise */
-import { constants } from 'react-native-keycommands';
+import KeyCommands, { constants } from 'react-native-keycommands';
 
 import I18n from './i18n';
 
@@ -17,7 +17,7 @@ const KEY_ADD_SERVER = __DEV__ ? 'l' : 'n';
 const KEY_SEND_MESSAGE = '\r';
 const KEY_SELECT = '123456789';
 
-export const defaultCommands = [
+const keyCommands = [
 	{
 		// Focus messageBox
 		input: KEY_TYPING,
@@ -29,10 +29,7 @@ export const defaultCommands = [
 		input: KEY_SEND_MESSAGE,
 		modifierFlags: 0,
 		discoverabilityTitle: I18n.t('Send')
-	}
-];
-
-export const keyCommands = [
+	},
 	{
 		// Open Preferences Modal
 		input: KEY_PREFERENCES,
@@ -139,6 +136,10 @@ export const keyCommands = [
 	})))
 ];
 
+export const setKeyCommands = () => KeyCommands.setKeyCommands(keyCommands);
+
+export const deleteKeyCommands = () => KeyCommands.deleteKeyCommands(keyCommands);
+
 export const KEY_COMMAND = 'KEY_COMMAND';
 
 export const commandHandle = (event, key, flags = []) => {

app/constants/tablet.js

@@ -1,4 +1,3 @@
 export const MAX_SIDEBAR_WIDTH = 321;
-export const MAX_CONTENT_WIDTH = '90%';
 export const MAX_SCREEN_CONTENT_WIDTH = '50%';
-export const MIN_WIDTH_SPLIT_LAYOUT = 700;
+export const MIN_WIDTH_MASTER_DETAIL_LAYOUT = 700;

app/containers/ActionSheet/Handle.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from 'react-native';
+
+import styles from './styles';
+import { themes } from '../../constants/colors';
+
+const Handle = React.memo(({ theme }) => (
+	<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} testID='scroll-bottom-sheet-handle'>
+		<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
+	</View>
+));
+Handle.propTypes = {
+	theme: PropTypes.string
+};
+
+export default Handle;

app/containers/ActionSheet/Item.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from 'react-native';
+
+import { themes } from '../../constants/colors';
+import { CustomIcon } from '../../lib/Icons';
+import styles from './styles';
+import { Button } from './index';
+
+const Item = React.memo(({
+	item, hide, theme
+}) => {
+	const onPress = () => {
+		hide();
+		item?.onPress();
+	};
+
+	return (
+		<Button
+			onPress={onPress}
+			style={[styles.item, { backgroundColor: themes[theme].focusedBackground }]}
+			theme={theme}
+			testID={item.title}
+		>
+			<CustomIcon name={item.icon} size={20} color={item.danger ? themes[theme].dangerColor : themes[theme].bodyText} />
+			<Text
+				numberOfLines={1}
+				style={[styles.title, { color: item.danger ? themes[theme].dangerColor : themes[theme].bodyText }]}
+			>
+				{item.title}
+			</Text>
+		</Button>
+	);
+});
+Item.propTypes = {
+	item: PropTypes.shape({
+		title: PropTypes.string,
+		icon: PropTypes.string,
+		danger: PropTypes.bool,
+		onPress: PropTypes.func
+	}),
+	hide: PropTypes.func,
+	theme: PropTypes.string
+};
+
+export default Item;