feat: add routing support for view artwork page

src/Router.tsx

@@ -15,7 +15,8 @@ const router = createBrowserRouter([
       { path: "/toodle", Component: MyFurinaPage },
       {
         path: "/treasures",
-        children: [{ index: true, Component: ArtworksPage }],
+        Component: ArtworksPage,
+        children: [{ index: true }, { path: ":id" }],
       },
     ],
     ErrorBoundary: () => (

src/pages/artworks/page.tsx

@@ -1,11 +1,10 @@
 import pb from "@/utility/api";
 import { Howl } from "howler";
 import { useInfiniteQuery } from "react-query";
-import { Link } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import playIcon from "@/assets/icons/play-outline.svg";
 import openingSfx from "@/assets/audio/VO_JA_Furina_Opening_Treasure_Chest_02.ogg";
 import ViewSheet from "./viewSheet";
-import useModal from "@/hooks/useModal";
 import LazyImage from "@/components/ui/LazyImage";
 import PageMetadata from "@/components/containers/PageMetadata";
 import { useMemo } from "react";
@@ -19,6 +18,9 @@ const openingChestSfx = new Howl({
 });
 
 const ArtworksPage = () => {
+  const { id: viewArtId } = useParams();
+  const navigate = useNavigate();
+
   const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
     useInfiniteQuery({
       queryKey: ["artworks"],
@@ -38,7 +40,6 @@ const ArtworksPage = () => {
     },
     { offset: 100 }
   );
-  const viewItemModal = useModal<string>();
 
   const items = useMemo(
     () => data?.pages.flatMap((i) => i.items) || [],
@@ -47,7 +48,7 @@ const ArtworksPage = () => {
 
   return (
     <div className="container py-16">
-      <PageMetadata title="Treasures" />
+      <PageMetadata title={viewArtId ? "View Artwork" : "Treasures"} />
 
       <h1 className="text-2xl">Treasures</h1>
       <div>
@@ -69,13 +70,8 @@ const ArtworksPage = () => {
         {items.map((item) => (
           <Link
             key={item.id}
-            // to={`/treasures/${item.id}`}
-            to="#"
+            to={`/treasures/${item.id}`}
             className="bg-white rounded-lg shadow border border-gray-300 overflow-hidden hover:scale-105 transition-all relative"
-            onClick={(e) => {
-              e.preventDefault();
-              viewItemModal.onOpen(item.id);
-            }}
           >
             <LazyImage
               lazySrc={pb.files.getUrl(item, item.image, { thumb: "32x48" })}
@@ -111,7 +107,11 @@ const ArtworksPage = () => {
         </div>
       ) : null}
 
-      <ViewSheet modal={viewItemModal} />
+      <ViewSheet
+        isOpen={viewArtId != null}
+        id={viewArtId}
+        onClose={() => navigate("/treasures")}
+      />
     </div>
   );
 };

src/pages/artworks/viewSheet.tsx

@@ -1,5 +1,4 @@
 import Sheet from "@/components/ui/Sheet";
-import useModal from "@/hooks/useModal";
 import pb from "@/utility/api";
 import { useQuery } from "react-query";
 import loadingIllust from "@/assets/images/l9fsdoa2j7vb1.gif";
@@ -8,11 +7,12 @@ import Button from "@/components/ui/Button";
 import { ChevronLeft } from "lucide-react";
 
 type Props = {
-  modal: ReturnType<typeof useModal<string>>;
+  id?: string | null;
+  isOpen?: boolean;
+  onClose: () => void;
 };
 
-const ViewSheet = ({ modal }: Props) => {
-  const id = modal.data;
+const ViewSheet = ({ id, isOpen, onClose }: Props) => {
   const { data, isLoading, isError } = useQuery({
     queryKey: ["artwork", id],
     queryFn: () => pb.collection("artworks").getOne(id || ""),
@@ -21,7 +21,12 @@ const ViewSheet = ({ modal }: Props) => {
 
   return (
     <Sheet
-      {...modal}
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
       title="View Item"
       position="bottom"
       className="md:rounded-t-none h-[90vh] md:h-screen"
@@ -48,7 +53,7 @@ const ViewSheet = ({ modal }: Props) => {
           </div>
 
           <div className="md:w-1/3 border-t md:border-l md:border-t-0 py-4 md:pt-0 px-4 lg:px-8 overflow-y-auto">
-            <Button className="flex pl-2 mb-6" onClick={modal.onClose}>
+            <Button className="flex pl-2 mb-6" onClick={onClose}>
               <ChevronLeft /> Back
             </Button>