Fixed config page

ReactNativeClient/lib/components/screens/config.js

@@ -48,64 +48,48 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		return { header: null };
 	}
 
-	constructor() {
+	settingToComponent(key, value) {
-		super();
-		this.state = {
-			values: {},
-		};
-	}
-
-	componentWillMount() {
-		const settings = Setting.publicSettings(Setting.value('appType'));
-
-		let values = {};
-		for (let key in settings) {
-			if (!settings.hasOwnProperty(key)) continue;
-			values[key] = settings[key].value;
-		}
-
-		this.setState({ values: values });
-	}
-
-	settingToComponent(key, setting) {
 		let output = null;
 
 		const updateSettingValue = (key, value) => {
-			let values = this.state.values;
+			Setting.setValue(key, value);
-			values[key] = value;
-			this.setState({ values: values });
-			this.saveSettings();
 		}
 
-		const value = this.state.values[key];
+		const md = Setting.settingMetadata(key);
+
+		if (md.isEnum) {
+			// The Picker component doesn't work properly with int values, so
+			// convert everything to string (Setting.setValue will convert
+			// back to the correct type.
+
+			value = value.toString();
 
-		if (setting.isEnum) {
 			let items = [];
-			const settingOptions = setting.options();
+			const settingOptions = md.options();
 			for (let k in settingOptions) {
 				if (!settingOptions.hasOwnProperty(k)) continue;
-				items.push(<Picker.Item label={settingOptions[k]} value={k} key={k}/>);
+				items.push(<Picker.Item label={settingOptions[k]} value={k.toString()} key={k}/>);
 			}
 
 			return (
 				<View key={key} style={styles.settingContainer}>
-					<Text key="label" style={styles.settingText}>{setting.label()}</Text>
+					<Text key="label" style={styles.settingText}>{md.label()}</Text>
 					<Picker key="control" style={styles.settingControl} selectedValue={value} onValueChange={(itemValue, itemIndex) => updateSettingValue(key, itemValue)} >
 						{ items }
 					</Picker>
 				</View>
 			);
-		} else if (setting.type == Setting.TYPE_BOOL) {
+		} else if (md.type == Setting.TYPE_BOOL) {
 			return (
 				<View key={key} style={styles.switchSettingContainer}>
-					<Text key="label" style={styles.switchSettingText}>{setting.label()}</Text>
+					<Text key="label" style={styles.switchSettingText}>{md.label()}</Text>
 					<Switch key="control" style={styles.switchSettingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
 				</View>
 			);
-		} else if (setting.type == Setting.TYPE_INT) {
+		} else if (md.type == Setting.TYPE_INT) {
 			return (
 				<View key={key} style={styles.settingContainer}>
-					<Text key="label" style={styles.settingText}>{setting.label()}</Text>
+					<Text key="label" style={styles.settingText}>{md.label()}</Text>
 					<Slider key="control" style={styles.settingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
 				</View>
 			);
@@ -116,25 +100,15 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		return output;
 	}
 
-	saveSettings() {
-		const values = this.state.values;
-		for (let key in values) {
-			if (!values.hasOwnProperty(key)) continue;
-			Setting.setValue(key, values[key]);
-		}
-		Setting.saveAll();
-
-		setLocale(Setting.value('locale'));
-	}
-
 	render() {
-		const settings = Setting.publicSettings(Setting.value('appType'));
+		const settings = this.props.settings;
 
 		let settingComps = [];
 		for (let key in settings) {
 			if (key == 'sync.target') continue;
-
 			if (!settings.hasOwnProperty(key)) continue;
+			if (!Setting.isPublic(key)) continue;
+
 			const comp = this.settingToComponent(key, settings[key]);
 			if (!comp) continue;
 			settingComps.push(comp);
@@ -154,7 +128,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 
 const ConfigScreen = connect(
 	(state) => {
-		return {};
+		return { settings: state.settings };
 	}
 )(ConfigScreenComponent)
 

ReactNativeClient/lib/models/setting.js

@@ -38,6 +38,10 @@ class Setting extends BaseModel {
 		return output;
 	}
 
+	static isPublic(key) {
+		return this.publicKeys().indexOf(key) >= 0;
+	}
+
 	static load() {
 		this.cancelScheduleSave();
 		this.cache_ = [];
@@ -79,6 +83,8 @@ class Setting extends BaseModel {
 
 	static setValue(key, value) {
 		if (!this.cache_) throw new Error('Settings have not been initialized!');
+
+		value = this.formatValue(key, value);
 		
 		for (let i = 0; i < this.cache_.length; i++) {
 			let c = this.cache_[i];
@@ -93,7 +99,7 @@ class Setting extends BaseModel {
 
 				if (c.value === value) return;
 
-				this.logger().info('Setting: ' + key + ' = ' + value);
+				this.logger().info('Setting: ' + key + ' = ' + c.value + ' => ' + value);
 
 				c.value = this.formatValue(key, value);
 
@@ -287,6 +293,9 @@ Setting.TYPE_INT = 1;
 Setting.TYPE_STRING = 2;
 Setting.TYPE_BOOL = 3;
 
+Setting.THEME_LIGHT = 1;
+Setting.THEME_DARK = 2;
+
 Setting.metadata_ = {
 	'activeFolderId': { value: '', type: Setting.TYPE_STRING, public: false },
 	'firstStart': { value: true, type: Setting.TYPE_BOOL, public: false },
@@ -322,6 +331,12 @@ Setting.metadata_ = {
 			86400: _('%d hours', 24),
 		};
 	}},
+	'theme': { value: Setting.THEME_LIGHT, type: Setting.TYPE_INT, public: true, appTypes: ['mobile'], isEnum: true, label: () => _('Theme'), options: () => {
+		let output = {};
+		output[Setting.THEME_LIGHT] = _('Light');
+		output[Setting.THEME_DARK] = _('Dark');
+		return output;
+	}},
 };
 
 // Contains constants that are set by the application and