Add comment

package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "konva": "^4.2.2",
+    "material-ui-popup-state": "^1.6.1",
     "qs": "^6.9.4",
     "react": "^16.13.1",
     "react-debounce-input": "^3.2.2",

src/components/CommentsPopper.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import {
+  Button,
+  Popper,
+  Fade,
+  Paper,
+  makeStyles,
+  TextField,
+  Badge,
+  IconButton,
+} from "@material-ui/core";
+import {
+  usePopupState,
+  bindToggle,
+  bindPopper,
+} from "material-ui-popup-state/hooks";
+import { Comment } from "@material-ui/icons";
+
+const useStyles = makeStyles((theme) => ({
+  popperContainer: {
+    zIndex: 1400,
+  },
+  contentContainer: {
+    padding: theme.spacing(2),
+  },
+}));
+
+interface IProps {
+  text: string | undefined;
+  onSave: (comment: string) => Promise<any>;
+}
+
+export const CommentsPopper: React.FunctionComponent<IProps> = ({
+  text,
+  onSave,
+}) => {
+  const classes = useStyles();
+  const popupState = usePopupState({
+    variant: "popper",
+    popupId: "commentPopper",
+  });
+  const [comment, setComment] = React.useState("");
+
+  React.useEffect(() => setComment(text ? text : ""), [text]);
+
+  return (
+    <React.Fragment>
+      <IconButton {...bindToggle(popupState)}>
+        <Badge
+          color="secondary"
+          variant="dot"
+          invisible={!comment || comment === ""}
+        >
+          <Comment />
+        </Badge>
+      </IconButton>
+      <Popper
+        {...bindPopper(popupState)}
+        transition
+        disablePortal
+        className={classes.popperContainer}
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper className={classes.contentContainer}>
+              <React.Fragment>
+                <TextField
+                  id="comment"
+                  name="comment"
+                  variant="outlined"
+                  value={comment}
+                  placeholder={"Add any additional data here"}
+                  multiline
+                  rows={4}
+                  rowsMax={10}
+                  fullWidth
+                  onChange={(event) =>
+                    setComment((event.target as HTMLInputElement).value)
+                  }
+                  inputProps={{
+                    "data-testid": "comment",
+                  }}
+                />
+                <Button
+                  onClick={() => {
+                    onSave(comment).then(() => popupState.close());
+                  }}
+                >
+                  Save
+                </Button>
+              </React.Fragment>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+    </React.Fragment>
+  );
+};

src/components/DrawArea.tsx

@@ -75,7 +75,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
 
   const [isDrawMode, setIsDrawMode] = drawModeState;
   const [isDrawing, setIsDrawing] = React.useState(isDrawMode);
-  const [image, loading] = useImage(staticService.getImage(imageName));
+  const [image, imageStatus] = useImage(staticService.getImage(imageName));
 
   const handleContentMousedown = (e: any) => {
     if (!isDrawMode) return;
@@ -126,124 +126,122 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
         <Grid item>
           <ImageDetails type={type} imageName={imageName} />
         </Grid>
-        {imageName ? (
-          loading === "loading" ? (
-            <Grid
-              container
-              direction="column"
-              alignItems="center"
-              justify="center"
-              className={classes.progressContainer}
-            >
-              <Grid item>
-                <CircularProgress />
-              </Grid>
+        {imageStatus === "loading" && (
+          <Grid
+            container
+            direction="column"
+            alignItems="center"
+            justify="center"
+            className={classes.progressContainer}
+          >
+            <Grid item>
+              <CircularProgress />
             </Grid>
-          ) : (
-            <Grid item className={classes.canvasBackground}>
+          </Grid>
+        )}
+        {(!imageName || imageStatus === "failed") && <NoImagePlaceholder />}
+        {imageName && imageStatus === "loaded" && (
+          <Grid item className={classes.canvasBackground}>
+            <div
+              className={classes.canvasContainer}
+              style={{
+                height: image && image?.height * stageScale,
+              }}
+            >
               <div
-                className={classes.canvasContainer}
                 style={{
-                  height: image && image?.height * stageScale,
+                  transform: `translate3d(${stagePos.x}px, ${stagePos.y}px, 0px)`,
+                }}
+                onMouseMove={(event) => {
+                  if (!isDrawMode && isDrag && !selectedRectId) {
+                    event.preventDefault();
+                    setStagePos({
+                      x: event.clientX - stageInitPos.x,
+                      y: event.clientY - stageInitPos.y,
+                    });
+                    setStageOffset(stagePos);
+                  }
+                }}
+                onMouseUp={(event) => {
+                  setIsDrag(false);
+                  setStageInitPos(stagePos);
+                }}
+                onMouseLeave={(event) => {
+                  setIsDrag(false);
+                  setStageInitPos(stagePos);
+                }}
+                onMouseDown={(event) => {
+                  setIsDrag(true);
+                  setStageInitPos({
+                    x: event.clientX - stageOffset.x,
+                    y: event.clientY - stageOffset.y,
+                  });
                 }}
               >
-                <div
+                <Stage
+                  width={image && image.width}
+                  height={image && image.height}
+                  onMouseDown={onStageClick}
                   style={{
-                    transform: `translate3d(${stagePos.x}px, ${stagePos.y}px, 0px)`,
-                  }}
-                  onMouseMove={(event) => {
-                    if (!isDrawMode && isDrag && !selectedRectId) {
-                      event.preventDefault();
-                      setStagePos({
-                        x: event.clientX - stageInitPos.x,
-                        y: event.clientY - stageInitPos.y,
-                      });
-                      setStageOffset(stagePos);
-                    }
-                  }}
-                  onMouseUp={(event) => {
-                    setIsDrag(false);
-                    setStageInitPos(stagePos);
-                  }}
-                  onMouseLeave={(event) => {
-                    setIsDrag(false);
-                    setStageInitPos(stagePos);
-                  }}
-                  onMouseDown={(event) => {
-                    setIsDrag(true);
-                    setStageInitPos({
-                      x: event.clientX - stageOffset.x,
-                      y: event.clientY - stageOffset.y,
-                    });
+                    transform: `scale(${stageScale})`,
+                    transformOrigin: "top left",
                   }}
+                  onContentMousedown={handleContentMousedown}
+                  onContentMouseup={handleContentMouseup}
+                  onContentMouseMove={handleContentMouseMove}
                 >
-                  <Stage
-                    width={image && image.width}
-                    height={image && image.height}
-                    onMouseDown={onStageClick}
-                    style={{
-                      transform: `scale(${stageScale})`,
-                      transformOrigin: "top left",
-                    }}
-                    onContentMousedown={handleContentMousedown}
-                    onContentMouseup={handleContentMouseup}
-                    onContentMouseMove={handleContentMouseMove}
-                  >
-                    <Layer>
-                      <Image
-                        image={image}
-                        onMouseOver={(event) => {
-                          document.body.style.cursor = isDrawMode
-                            ? "crosshair"
-                            : "grab";
-                        }}
-                        onMouseDown={(event) => {
-                          document.body.style.cursor = "grabbing";
-                        }}
-                        onMouseUp={(event) => {
-                          document.body.style.cursor = "grab";
-                        }}
-                        onMouseLeave={(event) => {
-                          document.body.style.cursor = "default";
-                        }}
-                      />
-                      {ignoreAreas.map((rect, i) => {
-                        return (
-                          <Rectangle
-                            key={rect.id}
-                            shapeProps={{
-                              x: rect.x,
-                              y: rect.y,
-                              width: rect.width,
-                              height: rect.height,
-                            }}
-                            isSelected={rect.id === selectedRectId}
-                            onSelect={() => setSelectedRectId(rect.id)}
-                            onChange={(newAttrs: RectConfig) => {
-                              const rects = ignoreAreas.slice();
+                  <Layer>
+                    <Image
+                      image={image}
+                      onMouseOver={(event) => {
+                        document.body.style.cursor = isDrawMode
+                          ? "crosshair"
+                          : "grab";
+                      }}
+                      onMouseDown={(event) => {
+                        document.body.style.cursor = "grabbing";
+                      }}
+                      onMouseUp={(event) => {
+                        document.body.style.cursor = "grab";
+                      }}
+                      onMouseLeave={(event) => {
+                        document.body.style.cursor = "default";
+                      }}
+                    />
+                    {ignoreAreas.map((rect, i) => {
+                      return (
+                        <Rectangle
+                          key={rect.id}
+                          shapeProps={{
+                            x: rect.x,
+                            y: rect.y,
+                            width: rect.width,
+                            height: rect.height,
+                          }}
+                          isSelected={rect.id === selectedRectId}
+                          onSelect={() => setSelectedRectId(rect.id)}
+                          onChange={(newAttrs: RectConfig) => {
+                            const rects = ignoreAreas.slice();
 
-                              rects[i].x = Math.round(newAttrs.x || 0);
-                              rects[i].y = Math.round(newAttrs.y || 0);
-                              rects[i].width = Math.round(
-                                newAttrs.width || MIN_RECT_SIDE_PIXEL
-                              );
-                              rects[i].height = Math.round(
-                                newAttrs.height || MIN_RECT_SIDE_PIXEL
-                              );
+                            rects[i].x = Math.round(newAttrs.x || 0);
+                            rects[i].y = Math.round(newAttrs.y || 0);
+                            rects[i].width = Math.round(
+                              newAttrs.width || MIN_RECT_SIDE_PIXEL
+                            );
+                            rects[i].height = Math.round(
+                              newAttrs.height || MIN_RECT_SIDE_PIXEL
+                            );
 
-                              setIgnoreAreas(rects);
-                            }}
-                          />
-                        );
-                      })}
-                    </Layer>
-                  </Stage>
-                </div>
+                            setIgnoreAreas(rects);
+                          }}
+                        />
+                      );
+                    })}
+                  </Layer>
+                </Stage>
               </div>
-            </Grid>
-          )
-        ) : (
-          <NoImagePlaceholder />
+            </div>
+          </Grid>
         )}
       </Grid>
     </React.Fragment>