catch lint errors and improve readability

src/attachments-types.ts

@@ -5,9 +5,7 @@ export interface UploadedFile {
   fileType: string;
   fileDescription: string;
   status?: "uploading" | "complete";
-
 }
-
 export interface Attachment {
   id: string;
   src: string;
@@ -16,13 +14,11 @@ export interface Attachment {
   dateTime: string;
   bytesMimeType: string;
   bytesContentFamily: string;
-
 }
 export interface AttachmentResponse {
   bytesContentFamily: string;
   bytesMimeType: string;
   comment: string;
   dateTime: string;
   uuid: string;
-
 }

src/attachments/attachments.resource.tsx

@@ -71,7 +71,7 @@ export async function createAttachment(
     );
     formData.append("base64Content", fileToUpload.base64Content);
   }
-  return openmrsFetch(`${attachmentUrl}`, {
+  return openmrsFetch(attachmentUrl, {
     method: "POST",
     body: formData,
   });
@@ -85,4 +85,4 @@ export function deleteAttachmentPermanently(
     method: "DELETE",
     signal: abortController.signal,
   });
-};
+}

src/components/drawing-widget/drawing-widget.component.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useCallback } from "react";
 import ReactImageAnnotate, { Annotation } from "react-image-annotate";
-import { Add, Crop } from "@carbon/react/icons";
+import { Add } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
 import { CardHeader } from "@openmrs/esm-patient-common-lib";
 import { Button } from "@carbon/react";
-
+import { RegionClass, RegionTag } from "../../constants";
 
 interface RegionData {
   type: string;
@@ -25,119 +25,113 @@ interface DrawingWidgetProps {
   regionClsList?: string[];
   enabledTools?: string[];
   onExit: (annotations: ImageData[]) => void;
+  drawingWidgetRef: React.RefObject<HTMLDivElement>;
 }
 
-const DrawingWidget: React.FC<DrawingWidgetProps> = ({ onExit }) => {
+const sendAnnotatedImageUrl = (
+  callbackName: string,
+  annotatedImageUrl: string
+): void => {
+  if (
+    callbackName &&
+    window.opener &&
+    typeof window.opener[callbackName] === "function"
+  ) {
+    window.opener[callbackName](annotatedImageUrl);
+  }
+};
+
+const DrawingWidget: React.FC<DrawingWidgetProps> = ({ drawingWidgetRef }) => {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [selectedImage] = useState<string | null>(null);
-  const [annotations, setAnnotations] = useState<ImageData[]>([]);
-  const [, setLoading] = useState<boolean>(true);
+  const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const [activeImage, setActiveImage] = useState<ImageData | null>(null);
   const { t } = useTranslation();
-
-
-  const CreatePointIcon = () => <Add />;
-  const CreateBoxIcon = () => <Crop />;
 
   useEffect(() => {
-    const selectedImageURLParam = new URLSearchParams(
-      window.location.search
-    ).get("image-url");
-    if (selectedImageURLParam) {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const imageUrl = urlSearchParams.get("imageUrl");
+
+    if (imageUrl) {
       const activeImage: ImageData = {
-        src: selectedImageURLParam,
+        src: imageUrl,
         name: "Image from URL",
         regions: [],
       };
       setActiveImage(activeImage);
-      setLoading(false);
-    } else {
-      setLoading(false);
     }
   }, []);
 
-  useEffect(() => {
-    if (activeImage) {
-      const initialAnnotations: ImageData[] = [
-        {
-          ...activeImage,
-          regions: activeImage.regions || [],
-        },
-      ];
-      setAnnotations(initialAnnotations);
-    }
-  }, [activeImage]);
-
   const handleExit = useCallback(() => {
-    onExit(annotations);
-  }, [onExit, annotations]);
-
-  const handleAnnotationChange = useCallback(
-    (newAnnotations: Annotation[]) => {
-      setAnnotations((prevAnnotations) =>
-        prevAnnotations.map((prevAnnotation, index) =>
-          index === 0
-            ? { ...prevAnnotation, regions: newAnnotations }
-            : prevAnnotation
-        )
-      );
-    },
-    []
-  );
-
-  useEffect(() => {
-    if (selectedImage) {
-      const image: ImageData = {
-        src: selectedImage,
-        name: "Selected Image",
-        regions: [],
-      };
-      setActiveImage(image);
+    if (drawingWidgetRef.current) {
+      const canvas = drawingWidgetRef.current.querySelector("canvas");
+      if (canvas) {
+        const annotatedImageUrl = canvas.toDataURL("image/png");
+        const callbackName = new URLSearchParams(window.location.search).get(
+          "callback"
+        );
+        sendAnnotatedImageUrl(callbackName, annotatedImageUrl);
+        window.close();
+      } else {
+        console.error("Canvas element not found.");
+      }
     }
-  }, [selectedImage]);
+  }, [drawingWidgetRef]);
+
+  const handleAnnotationChange = useCallback((newAnnotations: Annotation[]) => {
+    setAnnotations(newAnnotations);
+  }, []);
 
   const images: ImageData[] = selectedFile
     ? [
         {
           src: URL.createObjectURL(selectedFile),
           name: selectedFile.name,
-          regions: [
-            {  type: "point", x: 100, y: 150 },
-            {  type: "point", x: 200, y: 250 },
-          ],
+          regions: [],
         },
       ]
     : [];
 
+  const handleAddDiagram = () => {
+    if (selectedFile) {
+      const newDiagram: ImageData = {
+        src: URL.createObjectURL(selectedFile),
+        name: selectedFile.name,
+        regions: [],
+      };
+      setActiveImage(newDiagram);
+      setSelectedFile(null);
+    }
+  };
+
   return (
     <div className="drawing-widget">
       {activeImage || selectedFile ? (
         <ReactImageAnnotate
           labelImages
-          regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-          regionTagList={["tag1", "tag2", "tag3"]}
+          regionClsList={Object.values(RegionClass)} // Use enum values
+          regionTagList={Object.values(RegionTag)} // Use enum values
           images={images}
           onExit={handleExit}
           onChange={handleAnnotationChange}
           allowComments={true}
-          toolIcons={{
-            "create-point": CreatePointIcon,
-            "create-box": CreateBoxIcon,
-          }}
         />
       ) : (
         <div>No image to display.</div>
       )}
-        <CardHeader title={t('Add Diagram', 'add diagram')}>
-          <input
-            type="file"
-            onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
-          />
-
-        <Button kind="ghost" renderIcon={Add} iconDescription="Add attachment">
-                {t('add', 'Add')}
+      <CardHeader title={t("Add Diagram", "add diagram")}>
+        <input
+          type="file"
+          onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+        />
+        <Button
+          kind="ghost"
+          renderIcon={Add}
+          iconDescription="Add diagram"
+          onClick={handleAddDiagram}
+        >
+          {t("add", "Add")}
         </Button>
-        </CardHeader>
+      </CardHeader>
     </div>
   );
 };

src/constants.ts

@@ -0,0 +1,12 @@
+export enum RegionClass {
+  ALPHA = "Alpha",
+  BETA = "Beta",
+  CHARLIE = "Charlie",
+  DELTA = "Delta",
+}
+
+export enum RegionTag {
+  TAG1 = "tag1",
+  TAG2 = "tag2",
+  TAG3 = "tag3",
+}

src/draw-page.component.tsx

@@ -1,28 +1,25 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import DrawingWidget, {
   ImageData,
 } from "./components/drawing-widget/drawing-widget.component";
 import { createAttachment } from "./attachments/attachments.resource";
-import { useParams } from 'react-router-dom';
+import { useParams } from "react-router-dom";
 import html2canvas from "html2canvas";
 
 const DrawPage: React.FC = () => {
-
   const { patientUuid } = useParams();
-  useTranslation();
-  const [activeImage] = useState<ImageData | null>(null);
+  const { t } = useTranslation();
+  const [activeImage, setActiveImage] = useState<ImageData | null>(null);
   const drawingWidgetRef = useRef<HTMLDivElement>(null);
 
   const handleSaveAnnotations = async () => {
-
     // Convert SVG to PNG using html2canvas
     if (drawingWidgetRef.current) {
       const canvas = await html2canvas(drawingWidgetRef.current);
       const pngDataUrl = canvas.toDataURL("image/png");
 
       try {
-
         // const patientUuid = "ca111ca5-d285-47a4-a6ab-60918dcd44ab";
         // Make an API request to save the PNG image using the custom createAttachment function
         await createAttachment(patientUuid, {
@@ -43,15 +40,30 @@ const DrawPage: React.FC = () => {
     // Display the serialized SVG or PNG.
   };
 
+  useEffect(() => {
+    const selectedImageURLParam = new URLSearchParams(
+      window.location.search
+    ).get("imageUrl");
+
+    if (selectedImageURLParam) {
+      const activeImage: ImageData = {
+        src: selectedImageURLParam,
+        name: "Image from URL",
+        regions: [],
+      };
+      setActiveImage(activeImage);
+    }
+  }, []);
 
   return (
     <div>
       <div ref={drawingWidgetRef} id="drawing-widget">
         <DrawingWidget
           selectedImage={activeImage?.src || ""}
-          taskDescription="Annotate the image"
+          taskDescription={t("Annotate the image", "Annotate the image")}
           imagesData={activeImage ? [activeImage] : []}
           onExit={handleSaveAnnotations}
+          drawingWidgetRef={drawingWidgetRef}
         />
       </div>
     </div>

src/index.ts

@@ -22,4 +22,4 @@ export function startupApp() {
 export const DrawPage = getAsyncLifecycle(
   () => import("./draw-page.component"),
   options
-);
+);

src/routes.json

@@ -8,7 +8,7 @@
   "pages": [
     {
       "component": "DrawPage",
-      "route": "draw/:patientUuid",
+      "route": "draw",
       "online": true,
       "offline": true
     }