React UI Improvements

[brio50]

React UI Improvements

[brio50]

math.js is the way to perform calculations, it can parse the expression for validity and then evaluate it. There are problems though:

1. on mobile keyboards for iphone, only a decimal is available in the numeric keypad.

2. validateMeasurement will have to return a validity flag, along with the validated measurement value. The onChange*

   import { parse, evaluate } from 'mathjs';
   
   ...
   
   // TODO: mathematical expressions (only allow +, -, *, / symbols) keyed on = as input?
   function validateMeasurement(event) {
   
   var valid = true; // output 1
   var value = event.target.value; // output 2
   
   function parseValue(value) {
     
     ...
     
     // do math if string contains math operations
     if (value.match(/\d+\+$/)) {      // e.g.  2+
       valid = false;
       value = value;
       console.log("plus");
       return { valid, value };
     }
   
     try {
         parse(value);
         valid = true;
         value = evaluate(value);
         return { valid, value };
     }
     catch (ex) {
         console.log("Not a mathematical expression.");
     }
   

   const onChangeMM = (event) => {
   
   let {valid, value} = validateMeasurement(event)
   
   if (!valid) {
     setMM({
       ...millimeters,
       input: value,
       output: "",
       error: ""
     });
     return;
   }
   

3. once we detect a mathematical expression is being input, we have to provide a calculate button to let the user tell us when they're done formatting the equation. A good example expression would be adding three measurements : 1 + 1.5 + 3+(5/8)