Make it update state

Signed-off-by: Egor Savkin <es@m-labs.hk>

package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "m-labs-zola",
       "version": "1.0.0",
+      "dependencies": {
+        "json-logic-js": "^2.0.2"
+      },
       "devDependencies": {
         "@babel/cli": "^7.22.6",
         "@babel/core": "^7.22.8",
@@ -3655,6 +3658,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-logic-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/json-logic-js/-/json-logic-js-2.0.2.tgz",
+      "integrity": "sha512-ZBtBdMJieqQcH7IX/LaBsr5pX+Y5JIW+EhejtM3Ffg2jdN9Iwf+Ht6TbHnvAZ/YtwyuhPaCBlnvzrwVeWdvGDQ=="
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",

static/js/shop.jsx

@@ -706,7 +706,16 @@ class ProductCartItem extends React.PureComponent {
                       style={{'display': (model.showOverlayRemove && options) ? 'flex' : 'none'}}
                       className="overlayVariant">
 
-                    {ProcessOptions({options: options, data: options_data, target: options_data})}
+                    <ProcessOptions
+                      options={options}
+                      data={options_data}
+                      key={"processed_options" + index}
+                      id={"processed_options" + index}
+                      target={((outvar, value) => {
+                        options_data[outvar] = value;
+                        this.setState(options_data);
+                      })}
+                    />
                   </div>
               ) : null }
 
@@ -867,6 +876,7 @@ class Cart extends React.PureComponent {
             isTouch={isTouch}
             hovered={item.id === itemHovered}
             key={item.id}
+            id={item.id}
             index={index}
             data={itemData}
             onToggleOverlayRemove={onToggleOverlayRemove}

static/js/shop_components.jsx

@@ -1,60 +1,92 @@
 'use strict';
 
-import React, {useState} from "react";
+import React, {Component} from "react";
 import jsonLogic from 'json-logic-js';
-import { v4 as uuidv4 } from 'uuid';
+import {v4 as uuidv4} from 'uuid';
 
 // https://stackoverflow.com/a/70511311
 const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
 
-function Radio(target, {title, variants, outvar}) {
-    console.log(target)
-    function handleClick(variant) {
-        console.log(variant)
-        target[outvar] = variant;
-        //this.setState()
+class Radio extends Component {
+    constructor(props) {
+        super(props);
+        // Initialize the state object with the initial values from the props
+        this.state = {
+            target: props.target,
+            outvar: props.outvar,
+            variants: props.variants,
+            variant: props.variants[0],
+            id: props.id
+        };
+
+        // Bind the event handler to this
+        this.handleClick = this.handleClick.bind(this);
+        this.state.target(this.state.outvar, this.state.variant);
     }
 
-    return (
-        <div className="shop-radio" key={uuidv4()}>
-            {title}
-            {variants.map((variant, _) => (
-                <div className="form-check" key={outvar + variant}>
-                    <input
-                        className="form-check-input"
-                        type="radio"
-                        name={outvar}
-                        id={outvar + variant}
-                        checked={target[outvar] === variant}
-                        onClick={() => handleClick(variant)}
-                        onChange={() => handleClick(variant)}
-                    />
-                    <label className="form-check-label" htmlFor={outvar + variant}>
-                        {variant}
-                    </label>
-                </div>
-            ))}
-        </div>
-    );
+    handleClick(variant) {
+        console.log(variant);
+        // Update the state object with the new value for outvar
+        this.setState({
+            ...this.state,
+            variant: variant
+        });
+        this.state.target(this.state.outvar, variant);
+    }
+
+    render() {
+        let key = this.state.id + this.state.outvar;
+        return (
+            <div className="shop-radio" key={this.state.id}>
+                {this.props.title}
+                {this.props.variants.map((variant, _) => (
+                    <div className="form-check" key={key + variant}>
+                        <input
+                            className="form-check-input"
+                            type="radio"
+                            name={key}
+                            id={key + variant}
+                            checked={this.state.variant === variant}
+                            onClick={() => this.handleClick(variant)}
+                            onChange={() => this.handleClick(variant)}
+                        />
+                        <label className="form-check-label" htmlFor={key + variant}>
+                            {variant}
+                        </label>
+                    </div>
+                ))}
+            </div>
+        );
+    }
 }
 
-function MissingComponent(...args) {
-    console.error("Missing component with args:", args)
-    return <label style={{background: "red"}}>MISSING</label>
+function RadioWrapper(target, id, {title, variants, outvar}) {
+    return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id}/>;
+}
+
+
+function MissingComponent(type, id) {
+    //console.error("Missing component with type:", type)
+    return <div key={type + id} style={{background: "red"}}>MISSING</div>
 }
 
 const componentsList = {
-    "Radio": Radio,
+    "Radio": RadioWrapper,
     "Default": MissingComponent,
 };
 
 
-export default function ProcessOptions({options, data, target}) {
+export default function ProcessOptions({options, data, target, id}) {
     let options_t = trueTypeOf(options);
 
     if (options_t === "array") {
         return Array.from(
-            options.map((option_item, _) => ProcessOptions({options: option_item, data: data, target: target}))
+            options.map((option_item, i) => ProcessOptions({
+                options: option_item,
+                data: data,
+                target: target,
+                id: id + i
+            }))
         );
     } else if (options_t === "object") {
         if (
@@ -62,12 +94,12 @@ export default function ProcessOptions({options, data, target}) {
             trueTypeOf(options.args) === "object"
         ) {
             if (options.type in componentsList) {
-                return componentsList[options.type](target, options.args);
-            }else {
-                return componentsList["Default"](target, options.args);
+                return componentsList[options.type](target, id + options.type, options.args);
+            } else {
+                return componentsList["Default"](options.type, id + "missing");
             }
         } else {
-            return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target});
+            return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
         }
     }
 }