settings: Refactor settings_display.js code.

This commit refactors the code in settings_display.js
by modifying the functions to receive the container
element and settings object as parameter such that
we can use the same functions for realm-level
settings by passing appropriate container element
and settings object.

This change is needed as settings_display will be
used as a common module for user settings and realm
level settings.

We also rename the default_language_name variable in
settings_display to user_default_language_name as we
would add a separate variable for realm-level setting
in future.

static/js/server_events_dispatch.js

@@ -568,6 +568,8 @@ export function dispatch_normal_event(event) {
                 "translate_emoticons",
                 "starred_message_counts",
             ];
+
+            const container_elem = $("#user-display-settings");
             if (user_display_settings.includes(event.property)) {
                 user_settings[event.property] = event.value;
             }
@@ -632,7 +634,7 @@ export function dispatch_normal_event(event) {
                 // reload.
             }
             if (event.property === "emojiset") {
-                settings_display.report_emojiset_change();
+                settings_display.report_emojiset_change(container_elem, user_settings);
 
                 // Rerender the whole message list UI
                 message_lists.home.rerender();
@@ -648,7 +650,7 @@ export function dispatch_normal_event(event) {
                 compose.toggle_enter_sends_ui();
                 break;
             }
-            settings_display.update_page();
+            settings_display.update_page(container_elem, user_settings);
             break;
         }
 

static/js/settings.js

@@ -111,7 +111,7 @@ export function build_page() {
         user_can_change_name: settings_data.user_can_change_name(),
         user_can_change_avatar: settings_data.user_can_change_avatar(),
         user_role_text: people.get_user_type(page_params.user_id),
-        default_language_name: settings_display.default_language_name,
+        default_language_name: settings_display.user_default_language_name,
         language_list_dbl_col: get_language_list_columns(user_settings.default_language),
         settings_object: user_settings,
     });

static/js/settings_display.js

@@ -14,10 +14,10 @@ const meta = {
     loaded: false,
 };
 
-export let default_language_name;
+export let user_default_language_name;
 
 export function set_default_language_name(name) {
-    default_language_name = name;
+    user_default_language_name = name;
 }
 
 function change_display_setting(data, container, url, status_element, success_msg_html, sticky) {
@@ -38,12 +38,10 @@ function change_display_setting(data, container, url, status_element, success_ms
     settings_ui.do_settings_change(channel.patch, url, data, $status_el, opts);
 }
 
-export function set_up() {
+export function set_up(container, settings_object) {
     meta.loaded = true;
-    const container = $("#user-display-settings");
     const language_modal_elem = "#user_default_language_modal";
     const patch_url = "/json/settings";
-    const settings_object = user_settings;
 
     container.find(".display-settings-status").hide();
 
@@ -181,18 +179,16 @@ export function set_up() {
     });
 }
 
-export async function report_emojiset_change() {
+export async function report_emojiset_change(container, settings_object) {
     // TODO: Clean up how this works so we can use
     // change_display_setting.  The challenge is that we don't want to
     // report success before the server_events request returns that
     // causes the actual sprite sheet to change.  The current
     // implementation is wrong, though, in that it displays the UI
     // update in all active browser windows.
-
-    const settings_object = user_settings;
     await emojisets.select(settings_object.emojiset);
 
-    const spinner = $("#user-display-settings").find(".emoji-settings-status");
+    const spinner = container.find(".emoji-settings-status");
     if (spinner.length) {
         loading.destroy_indicator(spinner);
         ui_report.success(
@@ -204,9 +200,9 @@ export async function report_emojiset_change() {
     }
 }
 
-export function update_page() {
+export function update_page(container, settings_object) {
-    const container = $("#user-display-settings");
+    const default_language_name = user_default_language_name;
-    const settings_object = user_settings;
+
     container.find(".left_side_userlist").prop("checked", settings_object.left_side_userlist);
     container.find(".default_language_name").text(default_language_name);
     container.find(".translate_emoticons").prop("checked", settings_object.translate_emoticons);
@@ -221,6 +217,6 @@ export function update_page() {
 }
 
 export function initialize() {
-    const language_name = get_language_name(user_settings.default_language);
+    const user_language_name = get_language_name(user_settings.default_language);
-    set_default_language_name(language_name);
+    set_default_language_name(user_language_name);
 }

static/js/settings_sections.js

@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 import * as alert_words_ui from "./alert_words_ui";
 import * as attachments_ui from "./attachments_ui";
 import * as blueslip from "./blueslip";
@@ -17,6 +19,7 @@ import * as settings_profile_fields from "./settings_profile_fields";
 import * as settings_streams from "./settings_streams";
 import * as settings_user_groups from "./settings_user_groups";
 import * as settings_users from "./settings_users";
+import {user_settings} from "./user_settings";
 
 const load_func_dict = new Map(); // group -> function
 const loaded_groups = new Set();
@@ -50,7 +53,9 @@ export function get_group(section) {
 export function initialize() {
     // personal
     load_func_dict.set("your-account", settings_account.set_up);
-    load_func_dict.set("display-settings", settings_display.set_up);
+    load_func_dict.set("display-settings", () => {
+        settings_display.set_up($("#user-display-settings"), user_settings);
+    });
     load_func_dict.set("notifications", settings_notifications.set_up);
     load_func_dict.set("your-bots", settings_bots.set_up);
     load_func_dict.set("alert-words", alert_words_ui.set_up_alert_words);