Merge pull request #1472 from ecency/bugfix/entry-item-image

Fixed different images downloading in entry list item
ecency · Oct 3, 2023 · a6abc5e · a6abc5e
2 parents b95b973 + 917390a
commit a6abc5e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/common/api/queries.ts b/src/common/api/queries.ts
@@ -39,7 +39,13 @@ export function usePointsQuery(username: string, filter = 0) {
   );
 }
 
-export function useImageDownloader(entry: Entry, noImage: string, width: number, height: number) {
+export function useImageDownloader(
+  entry: Entry,
+  noImage: string,
+  width: number,
+  height: number,
+  enabled: boolean
+) {
   const { global } = useMappedStore();
 
   const blobToBase64 = (blob: Blob) => {
@@ -77,6 +83,7 @@ export function useImageDownloader(entry: Entry, noImage: string, width: number,
       }
     },
     {
+      enabled,
       retryDelay: 3000
     }
   );

diff --git a/src/common/components/entry-list-item/entry-list-item-thumbnail.tsx b/src/common/components/entry-list-item/entry-list-item-thumbnail.tsx
@@ -16,8 +16,20 @@ interface Props {
 export function EntryListItemThumbnail({ entry, noImage, isCrossPost, entryProp, history }: Props) {
   const { global } = useMappedStore();
 
-  const { data: imgGrid } = useImageDownloader(entry, noImage, 600, 500);
-  const { data: imgRow } = useImageDownloader(entry, noImage, 260, 200);
+  const { data: imgGrid } = useImageDownloader(
+    entry,
+    noImage,
+    600,
+    500,
+    global.listStyle === "grid"
+  );
+  const { data: imgRow } = useImageDownloader(
+    entry,
+    noImage,
+    260,
+    200,
+    global.listStyle !== "grid"
+  );
 
   return (
     <div className={"item-image " + (imgRow === noImage ? "noImage" : "")}>

diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx
@@ -26,7 +26,6 @@ import { getPost } from "../../api/bridge";
 import "./_index.scss";
 import useMountedState from "react-use/lib/useMountedState";
 import { useMappedStore } from "../../store/use-mapped-store";
-import { useLocation } from "react-router";
 import useMount from "react-use/lib/useMount";
 import { useUnmount } from "react-use";
 import { Community } from "../../store/communities";
@@ -67,7 +66,6 @@ export function EntryListItem({
   const [showMuted, setShowMuted] = useState(mutedProp);
   const [showModMuted, setShowModMuted] = useState(false);
 
-  const location = useLocation();
   const { global, activeUser, addAccount, updateEntry } = useMappedStore();
 
   const isMounted = useMountedState();