From 58bc01cf06220c759d3811fe5fefa33e4ba4b19e Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Tue, 19 Sep 2023 14:31:14 +0800
Subject: [PATCH] Small duplication removal

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/js/shop_components.jsx | 94 +++++++++++------------------------
 1 file changed, 29 insertions(+), 65 deletions(-)

diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx
index 8826632..c5142ea 100644
--- a/static/js/shop_components.jsx
+++ b/static/js/shop_components.jsx
@@ -7,9 +7,22 @@ import {useClickAway} from "@uidotdev/usehooks";
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
 
 // https://stackoverflow.com/a/70511311
-const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+const true_type_of = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
 
 
+function Tip({id, tip}) {
+    return (
+        <OverlayTrigger
+            placement="auto"
+            trigger={['click', 'hover', 'focus']}
+            style={{display: 'inline'}}
+            overlay={<Tooltip id={id}>{tip}</Tooltip>}
+        >
+            <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
+        </OverlayTrigger>
+    );
+}
+
 class Radio extends Component {
     constructor(props) {
         super(props);
@@ -37,22 +50,10 @@ class Radio extends Component {
         return (
             <div className="shop-radio" key={this.props.id}>
                 <div style={{"display": "inline"}}>
-                    {this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null}
+                    {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                     {this.props.title}
                 </div>
-                {
-                    this.props.tip ?
-                        (<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
-                                         style={{"display": "inline"}} overlay={
-                            <Tooltip id={this.props.id + "tooltip"}>
-                                {this.props.tip}
-                            </Tooltip>
-                        }>
-                            <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
-                        </OverlayTrigger>)
-                        :
-                        null
-                }
+                {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                 {this.props.variants.map((variant, _) => (
                     <div className="form-check" key={key + variant}>
                         <input
@@ -117,22 +118,10 @@ class Switch extends Component {
                         onChange={this.handleClick}
                     />
                     <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}>
-                        {this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null}
+                        {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                         {this.props.title}
                     </label>
-                    {
-                        this.props.tip ?
-                            (<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
-                                             style={{"display": "inline"}} overlay={
-                                <Tooltip id={this.props.id + "tooltip"}>
-                                    {this.props.tip}
-                                </Tooltip>
-                            }>
-                                <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
-                            </OverlayTrigger>)
-                            :
-                            null
-                    }
+                    {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                 </div>
             </div>
         );
@@ -169,24 +158,11 @@ class Line extends Component {
         let key = this.props.id + this.props.outvar;
         return (
             <div className="shop-line" key={this.props.id}>
-
                 <label htmlFor={key} className="form-label">
-                    {this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null}
+                    {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                     {this.props.title}:
                 </label>
-                {
-                    this.props.tip ?
-                        (<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
-                                         style={{"display": "inline"}} overlay={
-                            <Tooltip id={this.props.id + "tooltip"}>
-                                {this.props.tip}
-                            </Tooltip>
-                        }>
-                            <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
-                        </OverlayTrigger>)
-                        :
-                        null
-                }
+                {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                 <input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
                        value={this.state.text}/>
             </div>
@@ -247,22 +223,10 @@ class SwitchLine extends Component {
                         onChange={this.handleCheck}
                     />
                     <label className="form-check-label" htmlFor={key + "switch"}>
-                        {this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null}
+                        {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
                         {this.props.title}
                     </label>
-                    {
-                        this.props.tip ?
-                            (<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
-                                             style={{"display": "inline"}} overlay={
-                                <Tooltip id={this.props.id + "tooltip"}>
-                                    {this.props.tip}
-                                </Tooltip>
-                            }>
-                                <img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
-                            </OverlayTrigger>)
-                            :
-                            null
-                    }
+                    {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
                 </div>
                 <input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
                        value={this.state.text} disabled={!this.state.checked}/>
@@ -292,7 +256,7 @@ const componentsList = {
 
 
 export function ProcessOptions({options, data, target, id}) {
-    let options_t = trueTypeOf(options);
+    let options_t = true_type_of(options);
 
     if (options_t === "array") {
         return Array.from(
@@ -305,8 +269,8 @@ export function ProcessOptions({options, data, target, id}) {
         );
     } else if (options_t === "object") {
         if (
-            trueTypeOf(options.type) === "string" &&
-            (trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
+            true_type_of(options.type) === "string" &&
+            (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
         ) {
             if (options.type in componentsList) {
                 return componentsList[options.type](target, id + options.type, data, options.args);
@@ -330,7 +294,7 @@ export function ProcessOptions({options, data, target, id}) {
 }
 
 export function FilterOptions(options, data) {
-    let options_t = trueTypeOf(options);
+    let options_t = true_type_of(options);
     let target = {};
 
     if (options_t === "array") {
@@ -339,8 +303,8 @@ export function FilterOptions(options, data) {
         });
     } else if (options_t === "object") {
         if (
-            trueTypeOf(options.type) === "string" &&
-            (trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
+            true_type_of(options.type) === "string" &&
+            (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
         ) {
             if (options.type in componentsList) {
                 target[options.args.outvar] = data[options.args.outvar];
@@ -443,7 +407,7 @@ export function OptionsSummaryPopup({id, options, data}) {
     };
 
     const stringify = (value) => {
-        let value_type = trueTypeOf(value);
+        let value_type = true_type_of(value);
         if (value_type === "string") {
             return value;
         } else if (value_type === "object") {