From 4496b4d907c8cbce1b9057ab4e0be4267e306361 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Tue, 12 Sep 2023 06:07:58 +0400
Subject: [PATCH] fix: download image

---
 src/components/HomePage/index.tsx | 10 ++++++++--
 src/services/download/index.ts    | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/services/download/index.ts

diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
index e85194e..4eeb44f 100644
--- a/src/components/HomePage/index.tsx
+++ b/src/components/HomePage/index.tsx
@@ -14,6 +14,7 @@ import { selectors } from "@/store";
 import { getRandomArbitrary } from "@/services/random-value";
 import Title from "../Title";
 import { UserDailyForecast } from "@/api/resources/UserDailyForecasts";
+import { download } from "@/services/download";
 
 const buttonTextFormatter = (text: string): JSX.Element => {
   const sentences = text.split(".");
@@ -83,6 +84,11 @@ function HomePage(): JSX.Element {
     // isPending
   } = useApiCall<UserDailyForecast>(dailyForecastData);
 
+  const downloadImg = () => {
+    if( !asset ) return;
+    download(asset.url.replace('http://', 'https://'), 'image.png');
+  }
+
   return (
     <section
       className={`${styles.page} page`}
@@ -100,8 +106,8 @@ function HomePage(): JSX.Element {
             {aura && <EnergyValues values={aura.stats} />}
           </div>
         </BlurringSubstrate>
-        <div className={styles["header__save"]}>
-          <a href={asset?.url.replace('http://', 'https://')} download></a>
+        <div className={styles["header__save"]} onClick={downloadImg}>
+          {/* <a href={asset?.url.replace('http://', 'https://')} download></a> */}
         </div>
       </div>
       <div className={styles.content}>
diff --git a/src/services/download/index.ts b/src/services/download/index.ts
new file mode 100644
index 0000000..3d082d3
--- /dev/null
+++ b/src/services/download/index.ts
@@ -0,0 +1,18 @@
+export const download = (url: string, name: string) => {
+  if (!url) {
+    throw new Error("Resource URL not provided! You need to provide one");
+  }
+  fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const blobURL = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = blobURL;
+      a.style.cssText = "display: none";
+
+      if (name && name.length) a.download = name;
+      document.body.appendChild(a);
+      a.click();
+    })
+    .catch((e) => console.error(e));
+};