Like any other accounting services SUSI.AI also provides a lot of account preferences. Users can select their language, timezone, themes, speech settings etc. This data helps users to customize their experience when using SUSI.AI.
In the web client these user preferences are fetch from the server by UserPreferencesStore.js and the user identity is fetched by UserIdentityStore.js. These settings are then exported to the settings.react.js file. This file is responsible for the settings page and takes care of all user settings. Whenever a user changes a setting, it identifies the changes and show an option to save these changes. These changes are then updated on the server using the accounting model of SUSI.AI. Let’s take a look at each file discussed above in detail.
UserPreferenceStore.js
let _defaults = { Theme: 'light', PreviewTheme: 'light', Server: 'https://api.susi.ai', StandardServer: 'https://api.susi.ai', EnterAsSend: true, };
Above codeblock sets the default values for each settings. These are the default values and are set automatically for new users or if a particular settings in not updated on the server.
let UserPreferencesStore = { ...EventEmitter.prototype, emitChange() { this.emit(CHANGE_EVENT); }, getPreferences() { return _defaults; }, getThemeValues() { return _defaults.ThemeValues; }, getEnterAsSend() { return _defaults.EnterAsSend; },
The UserPreferencesStore method returns values of these preferences whenever its called. Whenever the action type SETTINGS_CHANGED is called snippet of code below is executed.
UserPreferencesStore.dispatchToken = ChatAppDispatcher.register(action => {
switch (action.type) {
case ActionTypes.SERVER_CHANGED:
{
_defaults.Server = action.server;
UserPreferencesStore.emitChange();
break;
}
case ActionTypes.SETTINGS_CHANGED:
{
let settings = action.settings;
if (settings.hasOwnProperty('theme')) {
_defaults.Theme = settings.theme;
}
if (settings.hasOwnProperty('previewTheme')) {
_defaults.PreviewTheme = settings.previewTheme;
}
if (settings.hasOwnProperty('enterAsSend')) {
_defaults.EnterAsSend = checkForFalse(settings.enterAsSend);
}
Settings.react.js
Settings.react.js file makes an api call to the ./aaa/listUserSettings.hson?access_token=<your access token>
This api endpoint of susi server list all the user settings applied by the user and is a part of the accounting model.
setInitialSettings = () => {
defaults = UserPreferencesStore.getPreferences();
let identity = UserIdentityStore.getIdentity();
let defaultServer = defaults.Server;
}
setDefaultsSettings = () => {
defaults = UserPreferencesStore.getPreferences();
let defaultServer = defaults.Server;
}
This method sets the initial(previous) values of our settings from the UserPreferencesStore and set the default values first.
The state of settings.react.js consists of all the settings available and are initially set to the default values.
Whenever a setting is changed at any point of time the _onChangeSettings method is called and whenever the settings are saved these values are changed in the state.
_onChangeSettings() {
this.setInitialSettings();
this.setDefaultsSettings();
}
// Submit selected Settings
handleSubmit = () => {
let newDefaultServer = this.state.server;
let newEnterAsSend = this.state.enterAsSend;
let newMicInput = this.state.micInput;
let newSpeechOutput = this.state.speechOutput;
let newSpeechOutputAlways = this.state.speechOutputAlways;
let newSpeechRate = this.state.speechRate;
let newSpeechPitch = this.state.speechPitch;
let newTTSLanguage = this.state.ttsLanguage;
let newPrefLanguage = this.state.PrefLanguage;
let newTimeZone = this.state.TimeZone;
let checked = this.state.checked;
let serverUrl = this.state.serverUrl;
let newCountryCode = !this.state.countryCode ?
this.intialSettings.countryCode : this.state.countryCode;
let newCountryDialCode = !this.state.countryDialCode ?
this.intialSettings.countryDialCode : this.state.countryDialCode;
}
After the changes arer applied on the client they are also updated on the server as well.
// Store the settings in stores and serverimplementSettings = (values) => { let currSettings = UserPreferencesStore.getPreferences(); let resetVoice = false; if (currSettings.SpeechOutput !== values.speechOutput) { resetVoice = true; } if (currSettings.SpeechOutputAlways !== values.speechOutputAlways) { resetVoice = true; } Actions.settingsChanged(values); if (resetVoice) { Actions.resetVoice(); } this.props.history.push(`/settings?tab=${this.state.selectedSetting}`); }
These methods are executed along with couple of other method which handle respective changes.
Resources
- prop types – https://www.npmjs.com/package/prop-types
- Settings.react.js – https://github.com/fossasia/chat.susi.ai/blob/master/src/components/ChatApp/Settings/Settings.react.js
- UserPreferencesStore.js – https://github.com/fossasia/chat.susi.ai/blob/master/src/stores/UserPreferencesStore.js