From 015cedb29d956b31dd0b547ca1c3a6f635e5b9e6 Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Sat, 15 Aug 2020 19:07:13 -0400
Subject: [PATCH] Create new objects with spread when modifying vnode children
 instead of directly setting children when possible.

---
 js/src/admin/components/AdminLinkButton.js    |  6 +----
 js/src/admin/components/AppearancePage.js     | 14 ++---------
 js/src/admin/components/PermissionDropdown.js | 10 ++++----
 js/src/admin/components/SessionDropdown.js    |  4 +--
 js/src/admin/components/SettingDropdown.js    | 25 ++++++++++---------
 js/src/admin/components/UploadImageButton.js  |  6 ++---
 js/src/forum/components/SessionDropdown.js    |  4 +--
 js/src/forum/utils/alertEmailConfirmation.js  |  4 +--
 8 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/js/src/admin/components/AdminLinkButton.js b/js/src/admin/components/AdminLinkButton.js
index b09cbdef8..ff98f7130 100644
--- a/js/src/admin/components/AdminLinkButton.js
+++ b/js/src/admin/components/AdminLinkButton.js
@@ -11,10 +11,6 @@ import LinkButton from '../../common/components/LinkButton';
 
 export default class AdminLinkButton extends LinkButton {
   getButtonContent(children) {
-    const content = super.getButtonContent(children);
-
-    content.push(<div className="AdminLinkButton-description">{this.attrs.description}</div>);
-
-    return content;
+    return [...super.getButtonContent(children), <div className="AdminLinkButton-description">{this.attrs.description}</div>];
   }
 }
diff --git a/js/src/admin/components/AppearancePage.js b/js/src/admin/components/AppearancePage.js
index fc55a55ac..f77d50d98 100644
--- a/js/src/admin/components/AppearancePage.js
+++ b/js/src/admin/components/AppearancePage.js
@@ -28,18 +28,8 @@ export default class AppearancePage extends Page {
               <div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div>
 
               <div className="AppearancePage-colors-input">
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  bidi={this.primaryColor}
-                />
-                <input
-                  className="FormControl"
-                  type="text"
-                  placeholder="#aaaaaa"
-                  bidi={this.secondaryColor}
-                />
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.primaryColor} />
+                <input className="FormControl" type="text" placeholder="#aaaaaa" bidi={this.secondaryColor} />
               </div>
 
               {Switch.component(
diff --git a/js/src/admin/components/PermissionDropdown.js b/js/src/admin/components/PermissionDropdown.js
index bd395bb57..f5e7990f0 100644
--- a/js/src/admin/components/PermissionDropdown.js
+++ b/js/src/admin/components/PermissionDropdown.js
@@ -40,7 +40,7 @@ export default class PermissionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = [];
+    const children = [];
 
     let groupIds = app.data.permissions[this.attrs.permission] || [];
 
@@ -60,7 +60,7 @@ export default class PermissionDropdown extends Dropdown {
 
     if (this.showing) {
       if (this.attrs.allowGuest) {
-        vnode.children.push(
+        children.push(
           Button.component(
             {
               icon: everyone ? 'fas fa-check' : true,
@@ -72,7 +72,7 @@ export default class PermissionDropdown extends Dropdown {
         );
       }
 
-      vnode.children.push(
+      children.push(
         Button.component(
           {
             icon: members ? 'fas fa-check' : true,
@@ -98,7 +98,7 @@ export default class PermissionDropdown extends Dropdown {
       );
 
       [].push.apply(
-        vnode.children,
+        children,
         app.store
           .all('groups')
           .filter((group) => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1)
@@ -118,7 +118,7 @@ export default class PermissionDropdown extends Dropdown {
       );
     }
 
-    return super.view(vnode);
+    return super.view({ ...vnode, children });
   }
 
   save(groupIds) {
diff --git a/js/src/admin/components/SessionDropdown.js b/js/src/admin/components/SessionDropdown.js
index 3f7d29a59..1c49119c4 100644
--- a/js/src/admin/components/SessionDropdown.js
+++ b/js/src/admin/components/SessionDropdown.js
@@ -18,9 +18,7 @@ export default class SessionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = this.items().toArray();
-
-    return super.view(vnode);
+    return super.view({ ...vnode, children: this.items().toArray() });
   }
 
   getButtonContent() {
diff --git a/js/src/admin/components/SettingDropdown.js b/js/src/admin/components/SettingDropdown.js
index 41c42b853..c8224169c 100644
--- a/js/src/admin/components/SettingDropdown.js
+++ b/js/src/admin/components/SettingDropdown.js
@@ -13,19 +13,20 @@ export default class SettingDropdown extends SelectDropdown {
   }
 
   view(vnode) {
-    vnode.children = this.attrs.options.map(({ value, label }) => {
-      const active = app.data.settings[this.attrs.key] === value;
+    return super.view({
+      ...vnode,
+      children: this.attrs.options.map(({ value, label }) => {
+        const active = app.data.settings[this.attrs.key] === value;
 
-      return Button.component(
-        {
-          icon: active ? 'fas fa-check' : true,
-          onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
-          active,
-        },
-        label
-      );
+        return Button.component(
+          {
+            icon: active ? 'fas fa-check' : true,
+            onclick: saveSettings.bind(this, { [this.attrs.key]: value }),
+            active,
+          },
+          label
+        );
+      }),
     });
-
-    return super.view(vnode);
   }
 }
diff --git a/js/src/admin/components/UploadImageButton.js b/js/src/admin/components/UploadImageButton.js
index 42d10c2f8..bc11f1035 100644
--- a/js/src/admin/components/UploadImageButton.js
+++ b/js/src/admin/components/UploadImageButton.js
@@ -9,22 +9,20 @@ export default class UploadImageButton extends Button {
 
     if (app.data.settings[this.attrs.name + '_path']) {
       this.attrs.onclick = this.remove.bind(this);
-      vnode.children = app.translator.trans('core.admin.upload_image.remove_button');
 
       return (
         <div>
           <p>
             <img src={app.forum.attribute(this.attrs.name + 'Url')} alt="" />
           </p>
-          <p>{super.view(vnode)}</p>
+          <p>{super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.remove_button') })}</p>
         </div>
       );
     } else {
       this.attrs.onclick = this.upload.bind(this);
-      vnode.children = app.translator.trans('core.admin.upload_image.upload_button');
     }
 
-    return super.view(vnode);
+    return super.view({ ...vnode, children: app.translator.trans('core.admin.upload_image.upload_button')});
   }
 
   /**
diff --git a/js/src/forum/components/SessionDropdown.js b/js/src/forum/components/SessionDropdown.js
index 9363e0ad8..f6426091f 100644
--- a/js/src/forum/components/SessionDropdown.js
+++ b/js/src/forum/components/SessionDropdown.js
@@ -20,9 +20,7 @@ export default class SessionDropdown extends Dropdown {
   }
 
   view(vnode) {
-    vnode.children = this.items().toArray();
-
-    return super.view(vnode);
+    return super.view({ ...vnode, children: this.items().toArray() });
   }
 
   getButtonContent() {
diff --git a/js/src/forum/utils/alertEmailConfirmation.js b/js/src/forum/utils/alertEmailConfirmation.js
index 5459b9813..75bd0d3cd 100644
--- a/js/src/forum/utils/alertEmailConfirmation.js
+++ b/js/src/forum/utils/alertEmailConfirmation.js
@@ -57,9 +57,7 @@ export default function alertEmailConfirmation(app) {
     view(vnode) {
       const vdom = super.view(vnode);
 
-      vdom.children = [<div className="container">{vdom.children}</div>];
-
-      return vdom;
+      return { ...vdom, children: [<div className="container">{vdom.children}</div>]};
     }
   }