Separate langauge to another page in settings screen (#944)

.eslintrc

@@ -109,8 +109,7 @@
         "denmark", "copenhagen", "unregister", "gcm", "unstarMessage", "Unstar", "wildcard_mentioned",
         "lightbox", "resize", "remobile", "multiline", "uniqby", "zoe", "localizable", "appid", "apns",
         "Entypo", "msup", "mrow", "webview", "js", "timerow", "reselect", "addons", "cancelable",
-        "gravatar_hash", "pms", "msgs",
-        "collapsable", "const", "wildcard",
+        "gravatar_hash", "pms", "msgs", "collapsable", "const", "wildcard",
       ],
       "skipIfMatch": [
         "http://[^s]*",

src/common/Icons.js

@@ -23,5 +23,6 @@ export const IconDownArrow = (props: Object) => <IoniconsIcon name="md-arrow-dow
 export const IconGoogle = (props: Object) => <IoniconsIcon name="logo-google" {...props} />;
 export const IconCross = (props: Object) => <EntypoIcon name="cross" {...props} />;
 export const IconSettings = (props: Object) => <IoniconsIcon name="md-settings" {...props} />;
-
+export const IconRightIcon = (props: Object) =>
+  <IoniconsIcon name="ios-arrow-forward" {...props} />;
 export default IoniconsIcon;

src/nav/AppNavigator.js

@@ -14,6 +14,7 @@ import SubscriptionsScreen from '../subscriptions/SubscriptionsScreen';
 import ChatScreen from '../chat/ChatScreen';
 import LoadingScreen from '../start/LoadingScreen';
 import SettingsScreen from '../settings/SettingsScreen';
+import SettingsDetailScreen from '../settings/SettingsDetailScreen';
 import LightboxScreen from '../lightbox/LightboxScreen';
 
 export default StackNavigator(
@@ -31,6 +32,7 @@ export default StackNavigator(
     subscriptions: { screen: SubscriptionsScreen },
     users: { screen: UsersScreen },
     settings: { screen: SettingsScreen },
+    'settings-detail': { screen: SettingsDetailScreen },
     lightbox: { screen: LightboxScreen },
   },
   {

src/nav/navActions.js

@@ -44,3 +44,6 @@ export const navigateToLightbox = (src: ImageResource, message: Message): Action
   NavigationActions.navigate({ routeName: 'lightbox', params: { src, message } });
 
 export const navigateToLoading = (): Action => NavigationActions.navigate({ routeName: 'loading' });
+
+export const navigateToSettingsDetail = (setting: string, title: string): Action =>
+  NavigationActions.navigate({ routeName: 'settings-detail', params: { setting, title } });

src/settings/SettingsCard.js

@@ -3,35 +3,42 @@ import React, { PureComponent } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Auth, Actions } from '../types';
-import { Label, ZulipSwitch } from '../common';
-import LanguagePicker from './LanguagePicker';
+import { Label, ZulipSwitch, Touchable } from '../common';
+import { IconRightIcon } from '../common/Icons';
 import toggleMobilePushSettings from '../api/toggleMobilePushSettings';
 
 const styles = StyleSheet.create({
   optionWrapper: {
     flex: 1,
+    backgroundColor: '#EFEEF3',
   },
   optionRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     padding: 8,
+    backgroundColor: 'white',
   },
   optionTitle: {
-    padding: 8,
-    fontWeight: 'bold',
+    padding: 6,
+    paddingLeft: 0,
   },
   optionList: {
     flex: 1,
   },
+  divider: {
+    height: 30,
+  },
+  rightIcon: {
+    marginRight: 6,
+  },
 });
 
 export default class SettingsCard extends PureComponent {
   props: {
     auth: Auth,
     actions: Actions,
     theme: string,
-    locale: string,
     offlineNotification: boolean,
     onlineNotification: boolean,
   };
@@ -40,10 +47,6 @@ export default class SettingsCard extends PureComponent {
     filter: string,
   };
 
-  handleLocaleChange = (value: string) => {
-    this.props.actions.settingsChange('locale', value);
-  };
-
   handleThemeChange = (value: boolean) => {
     this.props.actions.settingsChange('theme', value ? 'night' : 'default');
   };
@@ -59,7 +62,7 @@ export default class SettingsCard extends PureComponent {
   };
 
   render() {
-    const { offlineNotification, onlineNotification, theme, locale } = this.props;
+    const { offlineNotification, onlineNotification, theme, actions } = this.props;
 
     return (
       <View style={styles.optionWrapper}>
@@ -79,12 +82,18 @@ export default class SettingsCard extends PureComponent {
         </View>
         <View style={styles.optionRow}>
           <Label text="Night mode" />
-          <ZulipSwitch defaultValue={theme === 'night'} onValueChange={this.handleThemeChange} />
-        </View>
-        <View style={styles.optionList}>
-          <Label style={styles.optionTitle} text="Language" />
-          <LanguagePicker value={locale} onValueChange={this.handleLocaleChange} />
+          <ZulipSwitch
+            defaultValue={theme === 'night'}
+            onValueChange={actions.navigateToSettingsDetail}
+          />
         </View>
+        <View style={styles.divider} />
+        <Touchable onPress={() => actions.navigateToSettingsDetail('language', 'Language')}>
+          <View style={styles.optionRow}>
+            <Label style={styles.optionTitle} text="Language" />
+            <IconRightIcon size={18} style={styles.rightIcon} />
+          </View>
+        </Touchable>
       </View>
     );
   }

src/settings/SettingsDetailScreen.js

@@ -0,0 +1,81 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+
+import { Actions } from '../types';
+import { Screen } from '../common';
+import LanguagePicker from './LanguagePicker';
+import boundActions from '../boundActions';
+import { getAuth } from '../selectors';
+
+const styles = StyleSheet.create({
+  optionWrapper: {
+    flex: 1,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 8,
+  },
+  optionTitle: {
+    padding: 8,
+    fontWeight: 'bold',
+  },
+  optionList: {
+    flex: 1,
+  },
+});
+
+class SettingsDetailScreen extends PureComponent {
+  props: {
+    actions: Actions,
+    locale: string,
+    navigation: {
+      state: {
+        params: {
+          setting: string,
+          title: string,
+        },
+      },
+    },
+  };
+
+  handleLocaleChange = (value: string) => {
+    this.props.actions.settingsChange('locale', value);
+  };
+
+  renderSettings = (setting: string) => {
+    const { locale } = this.props;
+    switch (setting) {
+      case 'language': {
+        return <LanguagePicker value={locale} onValueChange={this.handleLocaleChange} />;
+      }
+      default:
+        return null;
+    }
+  };
+
+  render() {
+    const { title, setting } = this.props.navigation.state.params;
+    return (
+      <Screen title={title}>
+        <View style={styles.optionWrapper}>
+          {this.renderSettings(setting)}
+        </View>
+      </Screen>
+    );
+  }
+}
+
+export default connect(
+  state => ({
+    offlineNotification: state.settings.offlineNotification,
+    onlineNotification: state.settings.onlineNotification,
+    locale: state.settings.locale,
+    theme: state.settings.theme,
+    auth: getAuth(state),
+  }),
+  boundActions,
+)(SettingsDetailScreen);