web2019/static/js/shop/ImportJSON.jsx

import {useShopStore} from "./shop_store";
import {useClickAway} from "./options/useClickAway";
import {Modal} from "react-bootstrap";
import React from "react";
import {Validation} from "./validate";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";

const JSONExample = JSON.stringify({
    "crates": [
        {
            "items": [
                {
                    "pn": "1124",
                    "options": null
                },
                {
                    "pn": "2128",
                    "options": null
                },
                {
                    "pn": "2128",
                    "options": null
                },
                {
                    "pn": "2128",
                    "options": null
                }
            ],
            "type": "rack"
        },
        {
            "items": [],
            "type": "no_crate"
        }
    ]
});

export function ImportJSON() {
    // #!render_count
    const renderCount = useRenderCount();

    const shouldShow = useShopStore((state) => state.importShouldOpen);
    const data = useShopStore((state) => state.importValue);
    const loadDescription = useShopStore((state) => state.loadDescription);
    const updateImportDescription = useShopStore((state) => state.updateImportDescription);
    const closeImport = useShopStore((state) => state.closeImport);
    const showImport = useShopStore((state) => state.openImport);

    // #!render_count
    console.log("ImportJSON renders: ", renderCount)

    const ref = useClickAway((e) => {
            if (e.type === "mousedown") // ignore touchstart
                closeImport()
        }
    );

    return (<>
        <button
            className="btn btn-sm btn-outline-primary m-0 mb-2"
            style={{'cursor': 'pointer'}}
            onClick={showImport}>Import JSON
        </button>
        <Modal show={shouldShow} animation={true} centered className="rfqFeedback">
            <Modal.Body ref={ref}>
                <div className="form-group">
                    <p className="small">
                        Input the JSON description below. Should be something like:
                        <br/>
                        {JSONExample}
                    </p>
                </div>

                <div className="form-group w-100">
                          <textarea
                              onChange={(event) => {
                                  updateImportDescription(event.target.value)
                              }}
                              value={data.value}
                              className="form-control w-100"
                              rows="5"
                              placeholder="Input JSON description here."/>
                </div>
                {data.error !== Validation.OK ? (
                    <div className="form-group">
                        <p className="text-danger">{data.error === Validation.Empty ? "Empty input" : "Invalid JSON"}</p>
                    </div>
                ) : null}

                <div className="d-flex flex-column flex-sm-row justify-content-end">
                    <a type="button" onClick={closeImport}
                       className="btn btn-sm btn-outline-primary m-0 mb-2 mt-2  mb-sm-0 me-sm-2">Close</a>
                    <a type="button" onClick={loadDescription}
                       className={`btn btn-sm btn-primary m-0 ms-sm-2 mt-2 ${data.error ? 'disabled' : ''}`}>Load
                        configuration</a>
                </div>
            </Modal.Body>
        </Modal>
    </>)
}