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 (<>

Input the JSON description below. Should be something like:
{JSONExample}