fix: asset-item, revalidation & skeleton (cl)

wanderer-moe · Sep 3, 2024 · a772806 · a772806
1 parent 1406f1e
commit a772806
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/src/app/[game]/[category]/page.tsx b/src/app/[game]/[category]/page.tsx
@@ -52,6 +52,7 @@ export default async function GameCategoryPage({ params }: Readonly<Props>) {
         game: game,
         category: category,
     });
+
     log.flush();
 
     return (
@@ -127,13 +128,13 @@ export default async function GameCategoryPage({ params }: Readonly<Props>) {
                                         <span className="text-primary">
                                             Single Click:
                                         </span>{" "}
-                                        View/Download Asset
+                                        Select Asset
                                     </p>
                                     <p>
                                         <span className="text-primary">
                                             Double Click:
                                         </span>{" "}
-                                        Select Asset
+                                        View Asset
                                     </p>
                                 </AlertDescription>
                             </div>

diff --git a/src/components/asset/asset-item.tsx b/src/components/asset/asset-item.tsx
@@ -32,9 +32,6 @@ export function AssetItem({
     category: string;
 }>) {
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-    const [clickTimeout, setClickTimeout] = useState<NodeJS.Timeout | null>(
-        null,
-    );
 
     const dispatch = useAppDispatch();
 
@@ -43,26 +40,16 @@ export function AssetItem({
         asset,
     );
 
-    const handleClick = () => {
-        if (clickTimeout) {
-            clearTimeout(clickTimeout);
-            setClickTimeout(null);
-            dispatch(toggleAssetSelection(asset));
-        } else {
-            const timeout = setTimeout(() => {
-                setDialogOpen(true);
-                setClickTimeout(null);
-            }, 250);
-            setClickTimeout(timeout);
-        }
-    };
-
     return (
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
             <div className="flex flex-col gap-2">
                 <Card
                     className={`group p-2 rounded-lg ring-2 ease-linear transition-all cursor-pointer ${isSelected ? "ring-primary" : "ring-transparent"} hover:ring-primary`}
-                    onClick={handleClick}
+                    onDoubleClick={() => setDialogOpen(true)}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        dispatch(toggleAssetSelection(asset));
+                    }}
                 >
                     <div className="flex items-center justify-center relative">
                         <img
@@ -72,6 +59,16 @@ export function AssetItem({
                             fetchPriority="high"
                         />
                         <div className="absolute inset-0" />
+                        <Button
+                            size="icon"
+                            className="rounded-full absolute bottom-1 right-1 transition-opacity opacity-100 md:opacity-0 md:group-hover:opacity-100"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setDialogOpen(true);
+                            }}
+                        >
+                            <DownloadIcon size={16} />
+                        </Button>
                     </div>
                 </Card>
                 <p className="line-clamp-1 text-ellipsis">{asset.name}</p>
@@ -98,7 +95,7 @@ export function AssetItem({
                             className="w-full"
                             download
                         >
-                            <Button variant={"secondary"} className="w-full">
+                            <Button className="w-full">
                                 <DownloadIcon
                                     size={16}
                                     className="inline mr-2"

diff --git a/src/components/changelog/changelog-handler.tsx b/src/components/changelog/changelog-handler.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 
 function ChangelogSkeleton() {
     return (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="flex flex-col gap-4">
             {[...Array(12)].map((_, i) => (
                 <Skeleton key={i} className="h-[150px]" />
             ))}

diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
@@ -8,13 +8,21 @@ import {
 } from "../types";
 
 export async function getGames(): Promise<{ response: GamesRoute }> {
-    const response = await fetch("https://api.wanderer.moe/games");
+    const response = await fetch("https://api.wanderer.moe/games", {
+        next: {
+            revalidate: 1800,
+        },
+    });
     const data = await response.json();
     return { response: data };
 }
 
 export async function getGame(game: string): Promise<{ response: GameRoute }> {
-    const response = await fetch(`https://api.wanderer.moe/game/${game}`);
+    const response = await fetch(`https://api.wanderer.moe/game/${game}`, {
+        next: {
+            revalidate: 1800,
+        },
+    });
     const data = await response.json();
     return { response: data };
 }
@@ -25,6 +33,11 @@ export async function getGameCategory(
 ): Promise<{ response: CategoryRoute }> {
     const response = await fetch(
         `https://api.wanderer.moe/game/${game}/${category}`,
+        {
+            next: {
+                revalidate: 1800,
+            },
+        },
     );
     const data = await response.json();
     return { response: data };
@@ -35,6 +48,11 @@ export async function getContributors(): Promise<{
 }> {
     const response = await fetch(
         "https://api.wanderer.moe/discord/contributors",
+        {
+            next: {
+                revalidate: 1800,
+            },
+        },
     );
     const data = await response.json();
     return { response: data };
@@ -55,7 +73,11 @@ export async function getDiscordUsers(): Promise<{
 export async function getChangeLog(): Promise<{
     response: ChangeLogRoute;
 }> {
-    const response = await fetch("https://api.wanderer.moe/discord/changelog");
+    const response = await fetch("https://api.wanderer.moe/discord/changelog", {
+        next: {
+            revalidate: 1800,
+        },
+    });
     const data = await response.json();
     return { response: data };
 }