From 19478f245c9b29a8c73bf37b7cf79cfa9c2aa37a Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Tue, 12 Oct 2021 09:37:28 +0200
Subject: [PATCH] Refactor image context menu (#63)

---
 .../src/components/Form/ImageMenu.tsx         |  4 +--
 packages/react-chat/src/utils/copyImg.ts      | 24 ++------------
 packages/react-chat/src/utils/createImg.ts    |  8 -----
 packages/react-chat/src/utils/downloadImg.ts  | 31 +++++--------------
 4 files changed, 11 insertions(+), 56 deletions(-)
 delete mode 100644 packages/react-chat/src/utils/createImg.ts

diff --git a/packages/react-chat/src/components/Form/ImageMenu.tsx b/packages/react-chat/src/components/Form/ImageMenu.tsx
index 38028766..7b2400c1 100644
--- a/packages/react-chat/src/components/Form/ImageMenu.tsx
+++ b/packages/react-chat/src/components/Form/ImageMenu.tsx
@@ -19,11 +19,11 @@ export const ImageMenu = ({ imageId }: ImageMenuProps) => {
     <MenuBlock>
       <MenuList>
         <MenuItem onClick={() => copyImg(imageId)}>
-          <CopyIcon /> <MenuText>Copy imageId</MenuText>
+          <CopyIcon /> <MenuText>Copy image</MenuText>
         </MenuItem>
         <MenuItem onClick={() => downloadImg(imageId)}>
           <DownloadIcon />
-          <MenuText> Download imageId</MenuText>
+          <MenuText> Download image</MenuText>
         </MenuItem>
       </MenuList>
     </MenuBlock>
diff --git a/packages/react-chat/src/utils/copyImg.ts b/packages/react-chat/src/utils/copyImg.ts
index c8827cd3..89d66009 100644
--- a/packages/react-chat/src/utils/copyImg.ts
+++ b/packages/react-chat/src/utils/copyImg.ts
@@ -1,5 +1,3 @@
-import { createImg } from "./createImg";
-
 const copyToClipboard = async (pngBlob: any) => {
   try {
     await navigator.clipboard.write([
@@ -12,27 +10,9 @@ const copyToClipboard = async (pngBlob: any) => {
   }
 };
 
-const convertToPng = (imgBlob: any) => {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  const imageEl = createImg({ src: window.URL.createObjectURL(imgBlob) });
-  imageEl.onload = (e: any) => {
-    canvas.width = e.target.width;
-    canvas.height = e.target.height;
-    if (ctx) ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
-    canvas.toBlob(copyToClipboard, "image/png", 1);
-  };
-};
-
+//Images are already converted to png by useMessenger when received
 export const copyImg = async (image: string) => {
   const img = await fetch(image);
   const imgBlob = await img.blob();
-  const extension = image.split(".").pop();
-  const supportedToBeConverted = ["jpeg", "jpg", "gif"];
-  if (extension && supportedToBeConverted.indexOf(extension.toLowerCase())) {
-    return convertToPng(imgBlob);
-  } else if (extension && extension.toLowerCase() === "png") {
-    return copyToClipboard(imgBlob);
-  }
-  return;
+  return copyToClipboard(imgBlob);
 };
diff --git a/packages/react-chat/src/utils/createImg.ts b/packages/react-chat/src/utils/createImg.ts
deleted file mode 100644
index 893be2ff..00000000
--- a/packages/react-chat/src/utils/createImg.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const createImg = (options: any) => {
-  options = options || {};
-  const img = document.createElement("img");
-  if (options.src) {
-    img.src = options.src;
-  }
-  return img;
-};
diff --git a/packages/react-chat/src/utils/downloadImg.ts b/packages/react-chat/src/utils/downloadImg.ts
index 34691958..9b23f9f7 100644
--- a/packages/react-chat/src/utils/downloadImg.ts
+++ b/packages/react-chat/src/utils/downloadImg.ts
@@ -1,27 +1,10 @@
-import { createImg } from "./createImg";
-
-const createLink = (name: string, imgBlob: any) => {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  const imageEl = createImg({ src: window.URL.createObjectURL(imgBlob) });
-  imageEl.onload = (e: any) => {
-    canvas.width = e.target.width;
-    canvas.height = e.target.height;
-    if (ctx) ctx.drawImage(e.target, 0, 0, e.target.width, e.target.height);
-    const a = document.createElement("a");
-    a.download = `${name}.png`;
-    a.href = canvas.toDataURL("image/png");
-    a.click();
-  };
-};
-
 export const downloadImg = async (image: string) => {
-  const img = await fetch(image);
-  console.log(img);
-  const imgBlob = await img.blob();
-  const name = image.split("/").pop();
-  if (name) {
-    return createLink(name, imgBlob);
+  try {
+    const a = document.createElement("a");
+    a.download = `${image.split("/").pop()}.png`;
+    a.href = image;
+    a.click();
+  } catch {
+    return;
   }
-  return;
 };