Testar olika varianter på att hålla data up to date.

own-react-experiments/src/pages/UnitConverterPage/UnitConverterPage.tsx

@@ -3,10 +3,15 @@ import React, { useState } from "react";
 import WeightConverter from "./WeightConverter";
 import TimeConverter, { TimeConverterStateProvider } from "./TimeConverter";
 import NavBarRow from "../../components/NavBarRow";
+import WeightConverter2 from "./WeightConverter2";
 
 function UnitConverterPage() {
   const [currentPage, setCurrentPage] = useState("default_site");
-  const availablePages = ["Time Converter", "Weight Converter"];
+  const availablePages = [
+    "Time Converter",
+    "Weight Converter",
+    "Weight Converter2",
+  ];
   let subPage = <Typography>Pick a converter</Typography>;
 
   switch (currentPage) {
@@ -22,12 +27,15 @@ function UnitConverterPage() {
     case "Weight Converter":
       subPage = <WeightConverter />;
       break;
+    case "Weight Converter2":
+      subPage = <WeightConverter2 />;
+      break;
   }
 
   console.debug("UnitConverterPage rerender!");
 
   return (
-    <Box maxWidth={455} margin={15}>
+    <Box maxWidth={800} margin={15}>
       <Typography variant="h4">The miracle unit converter!</Typography>
       <Typography variant="body1">
         Use the controls to your advantage!

own-react-experiments/src/pages/UnitConverterPage/WeightConverter.tsx

@@ -1,9 +1,55 @@
-import React from "react";
+import { TextField, Typography } from "@mui/material";
+import React, { useState } from "react";
 
 function WeightConverter() {
-  console.debug("WeightConverter rerender!");
+  const [kg, setKg] = useState<number>(0);
+  const weight_kg = kg;
+  const weight_g = kg * 1000;
+  const weight_lbs = kg * 2.20462;
 
-  return <div>WeightConverter</div>;
+  console.debug("WeightConverter rerender! kg: " + kg);
+
+  function update_kg(val: string) {
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+    setKg(numval);
+  }
+
+  function updateG(val: string) {
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+    setKg(numval / 1000);
+  }
+
+  function update_lbs(val: string) {
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+    setKg(numval / 2.20462);
+  }
+
+  return (
+    <>
+      <Typography variant="h4">WeightConverter</Typography>
+      <TextField
+        label="kg"
+        helperText="Weight in kg"
+        value={weight_kg}
+        onChange={(e) => update_kg(e.target.value)}
+      />
+      <TextField
+        label="g"
+        helperText="Weight in g"
+        value={weight_g}
+        onChange={(e) => updateG(e.target.value)}
+      />
+      <TextField
+        label="lbs"
+        helperText="Weight in lbs"
+        value={weight_lbs}
+        onChange={(e) => update_lbs(e.target.value)}
+      />
+    </>
+  );
 }
 
 export default WeightConverter;

own-react-experiments/src/pages/UnitConverterPage/WeightConverter2.tsx

@@ -0,0 +1,55 @@
+import { TextField, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+function WeightConverter2() {
+  const [kg_str, setKg_str] = useState<string>("0");
+  const [g_str, setG_str] = useState<string>("0");
+  const [lbs_str, setLbs_str] = useState<string>("0");
+  const [kg, setKg] = useState<number>(0);
+
+  console.debug("WeightConverter rerender! kg: " + kg_str);
+
+  function update_kg(val: string) {
+    setKg_str(val);
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+  }
+
+  function updateG(val: string) {
+    setG_str(val);
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+  }
+
+  function update_lbs(val: string) {
+    setLbs_str(val);
+    const numval = Number(val);
+    if (isNaN(numval)) return;
+  }
+
+  return (
+    <>
+      <Typography variant="h4">WeightConverter</Typography>
+      <TextField
+        label="kg"
+        helperText="Weight in kg"
+        value={kg_str}
+        onChange={(e) => update_kg(e.target.value)}
+      />
+      <TextField
+        label="g"
+        helperText="Weight in g"
+        value={g_str}
+        onChange={(e) => updateG(e.target.value)}
+      />
+      <TextField
+        label="lbs"
+        helperText="Weight in lbs"
+        value={lbs_str}
+        onChange={(e) => update_lbs(e.target.value)}
+      />
+    </>
+  );
+}
+
+export default WeightConverter2;