Merge pull request #1471 from ecency/feature/make-images-query

Fixed image downloading in entry list item

src/common/api/queries.ts

@@ -2,6 +2,9 @@ import { useQuery } from "@tanstack/react-query";
 import { QueryIdentifiers } from "../core";
 import { getPoints, getPointTransactions } from "./private-api";
 import { useMappedStore } from "../store/use-mapped-store";
+import axios from "axios";
+import { catchPostImage } from "@ecency/render-helper";
+import { Entry } from "../store/entries/types";
 
 const DEFAULT = {
   points: "0.000",
@@ -35,3 +38,46 @@ export function usePointsQuery(username: string, filter = 0) {
     }
   );
 }
+
+export function useImageDownloader(entry: Entry, noImage: string, width: number, height: number) {
+  const { global } = useMappedStore();
+
+  const blobToBase64 = (blob: Blob) => {
+    const reader = new FileReader();
+
+    reader.readAsDataURL(blob);
+
+    return new Promise((resolve, reject) => {
+      reader.onloadend = function () {
+        const base64data = reader.result;
+        resolve(base64data);
+      };
+      reader.onerror = function (e) {
+        reject(e);
+      };
+    });
+  };
+
+  return useQuery(
+    [QueryIdentifiers.ENTRY_THUMB, entry.author, entry.permlink, width, height],
+    async () => {
+      try {
+        const response = await axios.get(
+          global.canUseWebp
+            ? catchPostImage(entry, width, height, "webp")
+            : catchPostImage(entry, width, height) || noImage,
+          {
+            responseType: "blob"
+          }
+        );
+
+        return (await blobToBase64(response.data)) as string;
+      } catch (e) {
+        return "";
+      }
+    },
+    {
+      retryDelay: 3000
+    }
+  );
+}