fix: download button on cards opens the post page
On compact cards the user cannot see which file is attached, especially for multi-attachment posts. Make the small download button on PopularRankRow, RecommendedCard, and LatestUpdateCard navigate to the post detail page instead of triggering an immediate download, so the user lands in the full post and picks the exact attachment to download.
This commit is contained in:
@@ -1,17 +1,10 @@
|
||||
import { LoaderCircle, Play } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Play } from "lucide-react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { FavoriteButton } from "../favorites/FavoriteButton";
|
||||
import { useI18n } from "../i18n";
|
||||
import { useLocalizedPath } from "../useLocalizedPath";
|
||||
import type { Attachment, Post } from "../types/post";
|
||||
import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
|
||||
import {
|
||||
mediaSaveKindFromAttachment,
|
||||
useSaveToAlbumGuide,
|
||||
} from "./SaveToAlbumGuide";
|
||||
import { useToast } from "./Toast";
|
||||
import { downloadAttachment } from "./messageStream/utils/downloadFile";
|
||||
import { fileIcon } from "./messageStream/utils/fileIcon";
|
||||
import {
|
||||
filenameWithExtension,
|
||||
@@ -30,24 +23,11 @@ function LatestActions({
|
||||
attachment?: Attachment;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { showToast } = useToast();
|
||||
const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
|
||||
const [isDownloading, setIsDownloading] = useState(false);
|
||||
const lp = useLocalizedPath();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!attachment || isDownloading) return;
|
||||
setIsDownloading(true);
|
||||
try {
|
||||
await downloadAttachment(post.id, attachment.id, attachment.filename, {
|
||||
sizeBytes: attachment.sizeBytes,
|
||||
});
|
||||
const mediaKind = mediaSaveKindFromAttachment(attachment);
|
||||
if (mediaKind) showSaveToAlbumGuide(mediaKind);
|
||||
} catch {
|
||||
showToast(t("downloadFail"), "error");
|
||||
} finally {
|
||||
setIsDownloading(false);
|
||||
}
|
||||
const goToPost = () => {
|
||||
navigate(lp(`/browse?post=${encodeURIComponent(post.id)}`));
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -59,23 +39,13 @@ function LatestActions({
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
void handleDownload();
|
||||
goToPost();
|
||||
}}
|
||||
disabled={isDownloading}
|
||||
aria-label={
|
||||
isDownloading ? t("downloading") : `Download ${attachment.filename}`
|
||||
}
|
||||
aria-busy={isDownloading}
|
||||
className="relative z-20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
|
||||
aria-label={t("download")}
|
||||
title={t("download")}
|
||||
className="relative z-20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70"
|
||||
>
|
||||
{isDownloading ? (
|
||||
<LoaderCircle
|
||||
className="h-4 w-4 animate-spin text-[#A8A9AE]"
|
||||
strokeWidth={2.3}
|
||||
/>
|
||||
) : (
|
||||
<DownloadCloudIcon className="h-5 w-5" />
|
||||
)}
|
||||
<DownloadCloudIcon className="h-5 w-5" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user