From 0087b956ef2e6e40964d29980cb618c83e7d1f72 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Mon, 10 Aug 2020 19:41:42 -0400
Subject: [PATCH] update: admin/components/BasicsPage

- Not tested: locale selector, homepage selector, display name driver selector
---
 js/src/admin/components/BasicsPage.js | 131 ++++++++++++++------------
 1 file changed, 69 insertions(+), 62 deletions(-)

diff --git a/js/src/admin/components/BasicsPage.js b/js/src/admin/components/BasicsPage.js
index 68f9ba142..d68527ccd 100644
--- a/js/src/admin/components/BasicsPage.js
+++ b/js/src/admin/components/BasicsPage.js
@@ -5,10 +5,11 @@ import Button from '../../common/components/Button';
 import saveSettings from '../utils/saveSettings';
 import ItemList from '../../common/utils/ItemList';
 import Switch from '../../common/components/Switch';
+import withAttr from '../../common/utils/withAttr';
 
 export default class BasicsPage extends Page {
-  init() {
-    super.init();
+  oninit(vnode) {
+    super.oninit(vnode);
 
     this.loading = false;
 
@@ -25,7 +26,7 @@ export default class BasicsPage extends Page {
     this.values = {};
 
     const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = m.prop(settings[key])));
+    this.fields.forEach((key) => (this.values[key] = m.stream(settings[key])));
 
     this.localeOptions = {};
     const locales = app.data.locales;
@@ -49,45 +50,51 @@ export default class BasicsPage extends Page {
       <div className="BasicsPage">
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_title_heading'),
-              children: [<input className="FormControl" value={this.values.forum_title()} oninput={m.withAttr('value', this.values.forum_title)} />],
-            })}
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.forum_title_heading'),
+              },
+              [<input className="FormControl" bidi={this.values.forum_title} />]
+            )}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.forum_description_heading'),
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.forum_description_heading'),
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.forum_description_text')}</div>,
-                <textarea
-                  className="FormControl"
-                  value={this.values.forum_description()}
-                  oninput={m.withAttr('value', this.values.forum_description)}
-                />,
-              ],
-            })}
+                <textarea className="FormControl" bidi={this.values.forum_description} />,
+              ]
+            )}
 
             {Object.keys(this.localeOptions).length > 1
-              ? FieldSet.component({
-                  label: app.translator.trans('core.admin.basics.default_language_heading'),
-                  children: [
+              ? FieldSet.component(
+                  {
+                    label: app.translator.trans('core.admin.basics.default_language_heading'),
+                  },
+                  [
                     Select.component({
                       options: this.localeOptions,
                       value: this.values.default_locale(),
                       onchange: this.values.default_locale,
                     }),
-                    Switch.component({
-                      state: this.values.show_language_selector(),
-                      onchange: this.values.show_language_selector,
-                      children: app.translator.trans('core.admin.basics.show_language_selector_label'),
-                    }),
-                  ],
-                })
+                    Switch.component(
+                      {
+                        state: this.values.show_language_selector(),
+                        onchange: this.values.show_language_selector,
+                      },
+                      app.translator.trans('core.admin.basics.show_language_selector_label')
+                    ),
+                  ]
+                )
               : ''}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.home_page_heading'),
-              className: 'BasicsPage-homePage',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.home_page_heading'),
+                className: 'BasicsPage-homePage',
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.home_page_text')}</div>,
                 this.homePageItems()
                   .toArray()
@@ -98,51 +105,52 @@ export default class BasicsPage extends Page {
                         name="homePage"
                         value={path}
                         checked={this.values.default_route() === path}
-                        onclick={m.withAttr('value', this.values.default_route)}
+                        onclick={withAttr('value', this.values.default_route)}
                       />
                       {label}
                     </label>
                   )),
-              ],
-            })}
+              ]
+            )}
 
-            {FieldSet.component({
-              label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
-              className: 'BasicsPage-welcomeBanner',
-              children: [
+            {FieldSet.component(
+              {
+                label: app.translator.trans('core.admin.basics.welcome_banner_heading'),
+                className: 'BasicsPage-welcomeBanner',
+              },
+              [
                 <div className="helpText">{app.translator.trans('core.admin.basics.welcome_banner_text')}</div>,
                 <div className="BasicsPage-welcomeBanner-input">
-                  <input className="FormControl" value={this.values.welcome_title()} oninput={m.withAttr('value', this.values.welcome_title)} />
-                  <textarea
-                    className="FormControl"
-                    value={this.values.welcome_message()}
-                    oninput={m.withAttr('value', this.values.welcome_message)}
-                  />
+                  <input className="FormControl" bidi={this.values.welcome_title} />
+                  <textarea className="FormControl" bidi={this.values.welcome_message} />
                 </div>,
-              ],
-            })}
+              ]
+            )}
 
             {Object.keys(this.displayNameOptions).length > 1
-              ? FieldSet.component({
-                  label: app.translator.trans('core.admin.basics.display_name_heading'),
-                  children: [
+              ? FieldSet.component(
+                  {
+                    label: app.translator.trans('core.admin.basics.display_name_heading'),
+                  },
+                  [
                     <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>,
                     Select.component({
                       options: this.displayNameOptions,
-                      value: this.values.display_name_driver(),
-                      onchange: this.values.display_name_driver,
+                      bidi: this.values.display_name_driver,
                     }),
-                  ],
-                })
+                  ]
+                )
               : ''}
 
-            {Button.component({
-              type: 'submit',
-              className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.basics.submit_button'),
-              loading: this.loading,
-              disabled: !this.changed(),
-            })}
+            {Button.component(
+              {
+                type: 'submit',
+                className: 'Button Button--primary',
+                loading: this.loading,
+                disabled: !this.changed(),
+              },
+              app.translator.trans('core.admin.basics.submit_button')
+            )}
           </form>
         </div>
       </div>
@@ -185,9 +193,8 @@ export default class BasicsPage extends Page {
 
     saveSettings(settings)
       .then(() => {
-        this.successAlert = app.alerts.show({
+        this.successAlert = app.alerts.show(app.translator.trans('core.admin.basics.saved_message'), {
           type: 'success',
-          children: app.translator.trans('core.admin.basics.saved_message'),
         });
       })
       .catch(() => {})