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.
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.
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.
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.
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.
After the changes arer applied on the client they are also updated on the server as well.
These methods are executed along with couple of other method which handle respective changes.
- 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