initState

The callback arrays can be persisted in a data storage (database, local storage, ...) and inserted to the corresponding initCalculableAccessories and initNonCalculableAccessories props when the AccessoryForm component is initialized.

Usage

import {AccessoryForm} from 'kampmann-calcgateway-frontend'

function App() {

    const [calcAccessoryCallback, setCalcAccessoryCallback] = useState<RequestAccessory[]>([]);
    const [initCalcAccessoriesState] = useState(() => {
        if(typeof window === "undefined") return;
    
        const initAccessoriesStateJson = localStorage.getItem("calcAccessoryCallback");
        if(initAccessoriesStateJson) {
          return JSON.parse(initAccessoriesStateJson);
        }
    })

    useEffect(() => {
        if(!calcAccessoryCallback) return;
    
        localStorage.setItem("calcAccessoryCallback", JSON.stringify(calcAccessoryCallback));
    }, [calcAccessoryCallback]);

    return (
        <AccessoryForm
            UIControls={data}
            callback={setCalcAccessoryCallback}
            initCalculableAccessories={initCalcAccessoriesState}
            ...
        />
    );
}

Selected category (categoryKey)

Each entry of inputCategories is keyed by key — the CategoryGroup.Key — and carries an optional categoryKey, the GroupKey of the category the values were taken from. A group can offer several categories (e.g. water / glycol) that the user picks with a select, and only categoryKey says which one the stored values belong to:

{
  "key": "medium",
  "categoryKey": "glycol",
  "inputFloats": [{ "key": "temperature", "value": 40, "unit": "°C", "unitType": "temperature" }],
  "inputStrings": []
}

On init the values are written into that category only and it is marked selected. An entry without categoryKey (saved before 0.0.39) is applied to every category of the group, and the default pick — the already selected category, otherwise the first one — stays in charge.