bin sensors add the bins

src/bin/BinSensors.tsx

@@ -0,0 +1,145 @@
+import {
+  AppBar,
+  Box,
+  Button,
+  DialogActions,
+  DialogTitle,
+  Grid2 as Grid,
+  IconButton,
+  Toolbar,
+  Typography
+} from "@mui/material";
+import { Close } from "@mui/icons-material";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import { useMobile } from "hooks";
+import { Bin, Component } from "models";
+import { pond } from "protobuf-ts/pond";
+import React, { useEffect, useState } from "react";
+import BinComponents from "./BinComponents";
+
+type Mode = "add" | "update" | "remove";
+
+interface Props {
+  open: boolean;
+  onClose: (refresh?: boolean) => void;
+  mode?: Mode;
+  bin?: Bin;
+  canEdit: boolean;
+  openedBinYard?: string;
+  userID: string;
+  coords?: { longitude: number; latitude: number };
+  binYards?: pond.BinYardSettings[];
+  components?: Map<string, Component>;
+  setComponents?: React.Dispatch<React.SetStateAction<Map<string, Component>>>;
+  updateBinStatus?: (componentKeys: string[], removed?: boolean) => void;
+}
+
+export default function BinSensors(props: Props) {
+  const isMobile = useMobile();
+  const {
+    open,
+    bin,
+    onClose,
+    mode,
+    openedBinYard,
+    components,
+    setComponents,
+    updateBinStatus
+  } = props;
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setInitialized(true);
+    } else {
+      setInitialized(false);
+    }
+  }, [bin, open, mode, openedBinYard]);
+
+  const close = (refresh?: boolean) => {
+    onClose(refresh);
+  };
+
+  const titleText = () => {
+    return "Add Sensors to " + (bin ? bin.name() : "Bin");
+  };
+
+  const title = () => {
+    if (isMobile) {
+      return (
+        <AppBar position="relative">
+          <Toolbar>
+            <IconButton edge="start" color="inherit" onClick={() => close()} aria-label="close">
+              <Close />
+            </IconButton>
+            <Typography variant="h6" style={{ flex: 1 }}>
+              {titleText()}
+            </Typography>
+          </Toolbar>
+        </AppBar>
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <DialogTitle>{titleText()}</DialogTitle>
+      </React.Fragment>
+    );
+  };
+
+  const componentsForm = () => {
+    if (bin) {
+      return (
+        <Box padding={1}>
+          <BinComponents
+            components={components ? components : undefined}
+            setComponents={setComponents}
+            bin={bin.key()}
+            binGrain={bin.grain()}
+            updateBinStatus={updateBinStatus}
+          />
+        </Box>
+      );
+    }
+
+    return null;
+  };
+
+  const actions = () => {
+    return (
+      <DialogActions>
+        <Grid container justifyContent="space-between" direction="row">
+          <Grid size={{ xs: 7 }} container justifyContent="flex-end">
+            {!isMobile && (
+              <React.Fragment>
+                <Button onClick={() => close()} aria-label="Cancel">
+                  Done
+                </Button>
+              </React.Fragment>
+            )}
+          </Grid>
+        </Grid>
+      </DialogActions>
+    );
+  };
+
+  if (!open || !initialized) {
+    return null;
+  }
+
+  return (
+    <ResponsiveDialog
+      maxWidth={"xs"}
+      fullWidth
+      fullScreen={isMobile}
+      open={open}
+      scroll="paper"
+      onClose={() => {
+        onClose();
+      }}>
+      {title()}
+      {componentsForm()}
+      {actions()}
+    </ResponsiveDialog>
+  );
+}