using the bear state management

package.json

@@ -26,7 +26,8 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.2",
     "redux": "^4.2.1",
-    "three": "^0.155.0"
+    "three": "^0.155.0",
+    "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@types/react-redux": "^7.1.26",

src/data-entry/beamstop.tsx

@@ -1,91 +1,119 @@
 import {
-    Stack,
-    Typography,
-    FormControl,
-    Select,
-    MenuItem,
-    InputLabel,
-    Input,
-    Button,
-    ButtonGroup,
-    TextField,
+  Stack,
+  Typography,
+  FormControl,
+  Select,
+  MenuItem,
+  InputLabel,
+  Button,
+  TextField,
 } from "@mui/material";
-import {
-    DistanceUnits,
-} from "../utils/units";
-import { useDispatch, useSelector } from "react-redux";
-import {
-    configSelector,
-    beamstopSelector,
-} from "./configSlice";
-import { editUnits, unitSelector } from "./unitSlice";
-import RemoveIcon from "@mui/icons-material/Remove";
-import AddIcon from "@mui/icons-material/Add";
-import { ChangeEvent } from "react";
+import { DistanceUnits } from "../utils/units";
+import { useBeamstopStore } from "./beamstopStore";
 
 export default function BeamStopDataEntry(): JSX.Element {
-    const beamstopDiameter = useSelector(beamstopSelector);
-    const units = useSelector(unitSelector);
-    const dispatch = useDispatch();
-    const config = useSelector(configSelector);
+  const centre = useBeamstopStore((state) => state.centre);
+  const updateCentre = useBeamstopStore((state) => state.updateCentre);
+  const handleX = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateCentre({
+      x: parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
+    });
+  };
+  const handleY = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateCentre({
+      y: parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
+    });
+  };
+
+  const diameter = useBeamstopStore((state) => {
+    if (state.diameterUnits === DistanceUnits.micrometre) {
+      return 1000 * state.diameter;
+    }
+    return state.diameter;
+  });
+
+  const diameterUnits = useBeamstopStore((state) => state.diameterUnits);
+  const updateUnits = useBeamstopStore((state) => state.updateUnits);
+
+  const clearance = useBeamstopStore((state) => state.clearance);
+  const updateClearance = useBeamstopStore((state) => state.updateClearance);
+  const handleClearance = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateClearance(
+      parseFloat(event.target.value) ? parseFloat(event.target.value) : null,
+    );
+  };
 
-    return (
-        <Stack spacing={2}>
-            <Typography variant="h6" > Beamstop </Typography>
-            < Stack direction={"row"} >
-                <Typography flexGrow={2}> Diameter: {beamstopDiameter} </Typography>
-                < FormControl >
-                    <InputLabel>units </InputLabel>
-                    < Select
-                        size="small"
-                        value={units.beamstopDiameterUnits}
-                        label="units"
-                        onChange={(event) =>
-                            dispatch(
-                                editUnits({
-                                    beamstopDiameterUnits: event.target
-                                        .value as DistanceUnits,
-                                }),
-                            )
-                        }
-                    >
-                        <MenuItem value={DistanceUnits.millimetre}>
-                            {DistanceUnits.millimetre}
-                        </MenuItem>
-                        < MenuItem value={DistanceUnits.micrometre} >
-                            {DistanceUnits.micrometre}
-                        </MenuItem>
-                    </Select>
-                </FormControl>
-            </Stack>
-            <Typography >Position:</Typography>
-            <Stack direction={"row"}>
-                <Typography flexGrow={2}>x: </Typography>
-                <TextField size="small" defaultValue={""}  />
-                <Typography flexGrow={2}> px</Typography>
-                <Button size="small">Centre detector</Button>
-            </Stack>
-            <Stack direction={"row"}>
-                <Typography flexGrow={2}>y: </Typography>
-                <Input size="small" value={config.cameraTube.centre.y} />
-                <Typography flexGrow={2}> px</Typography>
-                <Button size="small">Centre top edge</Button>
-            </Stack>
-            <Stack direction="row">
-                <Stack direction="row" spacing={2}>
-                    <Typography flexGrow={1}>Clearance: </Typography>
-                    <ButtonGroup>
-                        <Input size="small" value={config.clearance} />
-                        <Button size="small">
-                            <RemoveIcon fontSize="small" />
-                        </Button>
-                        <Button size="small">
-                            <AddIcon fontSize="small" />
-                        </Button>
-                    </ButtonGroup>
-                    <Typography flexGrow={1}>pixels</Typography>
-                </Stack>
-            </Stack>
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6"> Beamstop </Typography>
+      <Stack direction={"row"}>
+        <Typography flexGrow={2}> Diameter: {diameter} </Typography>
+        <FormControl>
+          <InputLabel>units </InputLabel>
+          <Select
+            size="small"
+            label="units"
+            value={diameterUnits}
+            onChange={(event) =>
+              updateUnits(event.target.value as DistanceUnits)
+            }
+          >
+            <MenuItem value={DistanceUnits.millimetre}>
+              {DistanceUnits.millimetre}
+            </MenuItem>
+            <MenuItem value={DistanceUnits.micrometre}>
+              {DistanceUnits.micrometre}
+            </MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
+      <Typography>Position:</Typography>
+      <Stack direction={"row"}>
+        <Typography flexGrow={2}>x: </Typography>
+        <TextField
+          type="number"
+          size="small"
+          defaultValue={""}
+          value={centre.x ?? ""}
+          onChange={handleX}
+        />
+        <Typography flexGrow={2} align="center">
+          {" "}
+          px
+        </Typography>
+        <Button size="small" variant="outlined">
+          Centre detector
+        </Button>
+      </Stack>
+      <Stack direction={"row"}>
+        <Typography flexGrow={2}>y: </Typography>
+        <TextField
+          type="number"
+          size="small"
+          defaultValue={""}
+          value={centre.y ?? ""}
+          onChange={handleY}
+        />
+        <Typography flexGrow={2} align="center">
+          {" "}
+          px
+        </Typography>
+        <Button size="small" variant="outlined">
+          Centre top edge
+        </Button>
+      </Stack>
+      <Stack direction="row">
+        <Stack direction="row" spacing={2}>
+          <Typography flexGrow={1}>Clearance: </Typography>
+          <TextField
+            type="number"
+            size="small"
+            defaultValue={""}
+            value={clearance}
+            onChange={handleClearance}
+          />
         </Stack>
-    )
+      </Stack>
+    </Stack>
+  );
 }