Context example

Author: adaudon

src/screens/OavMover/OavControlHelper.tsx

@@ -1,14 +1,12 @@
 import { Box, Grid2, Stack, TextField, useTheme } from "@mui/material";
 import { CoordNumberInput } from "../../components/CoordNumberInput";
+import { useContext } from "react";
+import { crosshairContext } from "./OavMover";
 
-export function BeamCentre({
-  setCrosshairX,
-  setCrosshairY,
-}: {
-  setCrosshairX: React.Dispatch<React.SetStateAction<number>>;
-  setCrosshairY: React.Dispatch<React.SetStateAction<number>>;
-}) {
+export function BeamCentre() {
   const theme = useTheme();
+  const ctx = useContext(crosshairContext);
+  if (!ctx) throw new Error("BeamCentre must be used within OavMover");
   return (
     <Box
       bgcolor={theme.palette.background.paper}
@@ -24,16 +22,16 @@ export function BeamCentre({
           <Stack direction="row" spacing={2} padding={2}>
             <CoordNumberInput
               placeholder="x"
-              onChange={(_e, val) => setCrosshairX(val ? val : 0)}
-              defaultValue={200}
+              onChange={(_e, val) => ctx.setCrosshairX(val ? val : 0)}
+              defaultValue={ctx.crosshairX}
               min={0}
               max={1000}
               aria-label="X"
             />
             <CoordNumberInput
               placeholder="y"
-              onChange={(_e, val) => setCrosshairY(val ? val : 0)}
-              defaultValue={200}
+              onChange={(_e, val) => ctx.setCrosshairY(val ? val : 0)}
+              defaultValue={ctx.crosshairY}
               min={0}
               max={750}
               aria-label="Y"
@@ -65,7 +63,7 @@ export function PixelsToMicrons({
               label="Pixels per micron"
               onChange={(e) =>
                 setPixelsPerMicron(
-                  Number(e.target.value) ? Number(e.target.value) : 0,
+                  Number(e.target.value) ? Number(e.target.value) : 0
                 )
               }
               defaultValue={1.25}

src/screens/OavMover/OavMover.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid2, useTheme } from "@mui/material";
 import { OavVideoStream } from "../../components/OavVideoStream";
-import { useState } from "react";
+import { useState, createContext } from "react";
 
 import { submitAndRunPlanImmediately } from "../../blueapi/blueapi";
 import { parseInstrumentSession, readVisitFromPv } from "../../blueapi/visit";
@@ -9,6 +9,17 @@ import { CoordinateSystem } from "./CoordinateSystem";
 import { PresetPositionsSideDrawer } from "./PresetDrawer";
 import { BacklightControl, MoveArrows, ZoomControl } from "./OavSideBar";
 
+interface CrosshairContextType {
+  crosshairX: number;
+  crosshairY: number;
+  setCrosshairX: React.Dispatch<React.SetStateAction<number>>;
+  setCrosshairY: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export const crosshairContext = createContext<CrosshairContextType | null>(
+  null
+);
+
 export function OavMover() {
   const [crosshairX, setCrosshairX] = useState<number>(200);
   const [crosshairY, setCrosshairY] = useState<number>(200);
@@ -31,12 +42,12 @@ export function OavMover() {
               onCoordClick={(x: number, y: number) => {
                 const [x_um, y_um] = [x / pixelsPerMicron, y / pixelsPerMicron];
                 console.log(
-                  `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`,
+                  `Clicked on position (${x}, ${y}) (px relative to beam centre) in original stream. Relative position in um (${x_um}, ${y_um}). Submitting to BlueAPI...`
                 );
                 const [x_int, y_int] = [Math.round(x), Math.round(y)];
                 if (Number.isNaN(x_um) || Number.isNaN(y_um)) {
                   console.log(
-                    "Not submitting plan while disconnected from PVs!",
+                    "Not submitting plan while disconnected from PVs!"
                   );
                 } else {
                   // This is an example but not useful for actual production use.
@@ -46,7 +57,7 @@ export function OavMover() {
                     instrumentSession: parseInstrumentSession(fullVisit),
                   }).catch((error) => {
                     console.log(
-                      `Failed to run plan gui_gonio_move_on_click, see console and logs for full error. Reason: ${error}`,
+                      `Failed to run plan gui_gonio_move_on_click, see console and logs for full error. Reason: ${error}`
                     );
                   });
                 }
@@ -65,10 +76,11 @@ export function OavMover() {
         >
           <MoveArrows />
           <Grid2 size={3} padding={1} />
-          <BeamCentre
-            setCrosshairX={setCrosshairX}
-            setCrosshairY={setCrosshairY}
-          />
+          <crosshairContext.Provider
+            value={{ crosshairX, crosshairY, setCrosshairX, setCrosshairY }}
+          >
+            <BeamCentre />
+          </crosshairContext.Provider>
           <PixelsToMicrons setPixelsPerMicron={setPixelsPerMicron} />
           <BacklightControl
             label="backlight-pos"