a bunch more fixes to making things observable. fixed calling super.componentDidUpdate on subsclasses

1 files changed, 12 insertions, 25 deletions

diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 5f20bc745..acf0ecff4 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -35,13 +35,11 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps>
         const val = this._props.value;
         const proto = Object.getPrototypeOf(val);
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
-        const title = this._props.name ? (
+        const title = (
             <>
-                <b>{this._props.name} : </b>
+                {this.props.name ? <b>{this._props.name} : </b> : <></>}
                 {name}
             </>
-        ) : (
-            name
         );
         if (this.collapsed) {
             return (
@@ -86,31 +84,19 @@ export class ScriptingValueDisplay extends ObservableReactComponent<replValuePro
 
     render() {
         const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
+        const title = (name: string) => (
+            <>
+                {this._props.name ? <b>{this._props.name} : </b> : <> </>}
+                {name}
+            </>
+        );
         if (typeof val === 'object') {
             return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
         } else if (typeof val === 'function') {
             const name = '[Function]';
-            const title = this._props.name ? (
-                <>
-                    <b>{this._props.name} : </b>
-                    {name}
-                </>
-            ) : (
-                name
-            );
-            return <div className="scriptingObject-leaf">{title}</div>;
-        } else {
-            const name = String(val);
-            const title = this._props.name ? (
-                <>
-                    <b>{this._props.name} : </b>
-                    {name}
-                </>
-            ) : (
-                name
-            );
-            return <div className="scriptingObject-leaf">{title}</div>;
+            return <div className="scriptingObject-leaf">{title('[Function]')}</div>;
         }
+        return <div className="scriptingObject-leaf">{title(String(val))}</div>;
     }
 }
 
@@ -254,7 +240,8 @@ export class ScriptingRepl extends ObservableReactComponent<{}> {
         ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight });
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps: Readonly<{}>) {
+        super.componentDidUpdate(prevProps);
         if (this.shouldScroll) {
             this.shouldScroll = false;
             this.scrollToBottom();