diff --git a/frontend/src/features/online/PostThumb.tsx b/frontend/src/features/online/PostThumb.tsx new file mode 100644 index 0000000..0378e92 --- /dev/null +++ b/frontend/src/features/online/PostThumb.tsx @@ -0,0 +1,53 @@ +import { useQuery } from "@tanstack/react-query"; +import { Link } from "react-router-dom"; + +import { effectiveCredentials, fetchPost } from "@/lib/e621"; +import { useE621 } from "@/store/e621"; + +export function PostThumb({ postId }: { postId: number }) { + const credentials = useE621((state) => state.credentials); + + const query = useQuery({ + queryKey: ["e621", "post-thumb", postId, credentials?.username ?? ""], + queryFn: ({ signal }) => + fetchPost(effectiveCredentials(credentials), postId, signal), + staleTime: 30 * 60_000, + gcTime: 60 * 60_000, + retry: 0, + }); + + const preview = query.data?.preview.url; + + if (preview) { + return ( + + + {`Post + + #{postId} + + + + ); + } + + return ( + + thumb #{postId} + + ); +} diff --git a/frontend/src/lib/dtext.tsx b/frontend/src/lib/dtext.tsx index 0a13448..ea0dc77 100644 --- a/frontend/src/lib/dtext.tsx +++ b/frontend/src/lib/dtext.tsx @@ -1,6 +1,7 @@ import type { ReactNode } from "react"; import { Spoiler } from "@/components/Spoiler"; +import { PostThumb } from "@/features/online/PostThumb"; export const DEFAULT_E621_BASE_URL = "https://e621.net"; @@ -51,7 +52,6 @@ const ENTITY_PATHS: Record = { takedown: "/takedowns/{id}", record: "/user_feedbacks/{id}", ticket: "/tickets/{id}", - thumb: "/posts/{id}", }; const LINK_RE = new RegExp( @@ -159,11 +159,13 @@ function linkify(text: string, keyPrefix: string, baseUrl: string): ReactNode[] } else if (match[11] !== undefined) { nodes.push(); } else if (match[12] !== undefined && match[13] !== undefined) { - const path = ENTITY_PATHS[match[12]]?.replace("{id}", match[13]); - const label = `${match[12]} #${match[13]}`; - nodes.push( - path ? anchor(key, `${baseUrl}${path}`, label) : label, - ); + if (match[12] === "thumb") { + nodes.push(); + } else { + const path = ENTITY_PATHS[match[12]]?.replace("{id}", match[13]); + const label = `${match[12]} #${match[13]}`; + nodes.push(path ? anchor(key, `${baseUrl}${path}`, label) : label); + } } lastIndex = regex.lastIndex; }