How to Store Mobile Settings in the Server from SUSI Web Chat Settings Page
While we are adding new features and capabilities to SUSI Web Chat application, we wanted to provide settings changing capability to SUSI users. SUSI team decided to maintain a settings page to give that capability to users.
This is how it’s interface looks like now.
In this blog post I’m going to add another setting category to our setting page. This one is for saving mobile phone number and dial code in the server.
UI Development:
First we need to add new category to settings page and it should be invisible when user is not logged in. Anonymous users should not get mobile phone category in settings page.
let menuItems = cookies.get('loggedIn') ? <div> <div className="settings-list"> <Menu onItemTouchTap={this.loadSettings} selectedMenuItemStyle={blueThemeColor} style={{ width: '100%' }} value={this.state.selectedSetting} > <MenuItem value='Mobile' className="setting-item" leftIcon={<MobileIcon />}>Mobile<ChevronRight className="right-chevron" /></MenuItem> <hr className="break-line" /> </Menu> </div> </div>
Next we have to show settings UI when user clicks on the category name.
if (this.state.selectedSetting === 'Mobile' && cookies.get('loggedIn')) {} currentSetting = ( <Translate text="Country/region : " /> <DropDownMenu maxHeight={300} value={this.state.countryCode?this.state.countryCode:'US'}
Show US if the state does not deines the country code
onChange={this.handleCountryChange}> {countries} </DropDownMenu> <Translate text="Phone number : " /> <TextField name="selectedCountry" disabled={true} value={countryData.countries[this.state.countryCode?this.state.countryCode:'US'].countryCallingCodes[0] } /> <TextField name="serverUrl" onChange={this.handleTelephoneNoChange} value={this.state.phoneNo } /> )}
Then we need to get list of country names and country dial codes to show in the above drop down. We used country-data node module for that.
To install country-data module use this command.
npm install --save country-data
We have used it in the settings page as below.
import countryData from 'country-data'; countryData.countries.all.sort(function(a, b) { if(a.name < b.name){ return -1}; if(a.name > b.name){ return 1}; return 0; }); let countries = countryData.countries.all.map((country, i) => { return (<MenuItem value={countryData.countries.all[i].alpha2} key={i} primaryText={ countryData.countries.all[i].name+' '+ countryData.countries.all[i].countryCallingCodes[0] } />); });
First we sort the country data list from it’s name. After that we made a list of “”s from this list of data.
Then we have to check whether the user changed or added the phone number and region (dial code).
It handles by this function mentioned above. ( onChange={this.handleCountryChange}> and
onChange={this.handleTelephoneNoChange} )
handleCountryChange = (event, index, value) => { this.setState({'countryCode': value }); }
Then we have to get the phone number using below function.
handleTelephoneNoChange = (event, value) => { this.setState({'phoneNo': value}); }
Next we have to update the function that triggers when user clicks the save button.
handleSubmit = () => { let newCountryCode = !this.state.countryCode? this.intialSettings.countryCode:this.state.countryCode; let newCountryDialCode = !this.state.countryDialCode? this.intialSettings.countryDialCode:this.state.countryDialCode; let newPhoneNo = this.state.phoneNo; let vals = { countryCode: newCountryCode, countryDialCode: newCountryDialCode, phoneNo: newPhoneNo } let settings = Object.assign({}, vals); cookies.set('settings', settings); this.implementSettings(vals); }
This code snippet stores Country Code, Country Dial code and phone no in the server.
Now we have to update the Store. Here we are going to change UserPreferencesStore “UserPreferencesStore” .
First we have to setup default values for things we are going to store.
let _defaults = { CountryCode: 'US', CountryDialCode: '+1', PhoneNo: '' }
Finally we have to update the dispatchToken to change and get these new data
UserPreferencesStore.dispatchToken = ChatAppDispatcher.register(action => { switch (action.type) { case ActionTypes.SETTINGS_CHANGED: { let settings = action.settings; if(settings.hasOwnProperty('theme')){ _defaults.Theme = settings.theme; } if(settings.hasOwnProperty('countryDialCode')){ _defaults.countryDialCode = settings.countryDialCode; } if(settings.hasOwnProperty('phoneNo')){ _defaults.phoneNo = settings.phoneNo; } if(settings.hasOwnProperty('countryCode')){ _defaults.countryCode = settings.countryCode; } UserPreferencesStore.emitChange(); break; } }
Finally application is ready to store and update Mobile phone number and region code in the server.
Resources:
- Documentation of country-data: https://www.npmjs.com/package/country-data
- How to use flux architecture: https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
- SUSI Web Chat repository : https://github.com/fossasia/chat.susi.ai
You must be logged in to post a comment.