SUSI Web Chat

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…