GalleryItem img now acts as a link to full file when clicked

package.json

@@ -47,6 +47,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "prettier": "^3.0.3",
-    "typescript": "^5.2.2"
+    "react-router-dom": "^6.20.0",
+    "typescript": "4.9.5"
   }
 }

src/App.css

@@ -38,7 +38,12 @@ body {
   overflow: clip;
 }
 
-.GalleryItem > img,
+.GalleryItem > .ImgLink {
+  margin: 0;
+  padding: 0;
+}
+
+.GalleryItem > .ImgLink > img,
 .GalleryItem > video {
   object-fit: contain;
   max-height: 80vh;

src/App.tsx

@@ -1,12 +1,14 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import './App.css';
-
 import Gallery from './Gallery/index';
 
 function App() {
   return (
-    <div className="App">
+    <BrowserRouter>
-      <Gallery />
+      <Routes>
-    </div>
+        <Route path="/photos/*" element={<Gallery />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/Gallery/index.tsx

@@ -1,21 +1,34 @@
-import React from 'react';
 import '../App.css';
 import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 
 function Gallery() {
+  const params = useParams<string>()['*'];
+  const location = useLocation();
+  const navigate = useNavigate();
+
   const [data, setData] = useState<galleryItemInfo[]>([]);
-  const [category, setCategory] = useState('');
+  const [category, setCategory] = useState(params === undefined ? '' : params);
 
   useEffect(() => {
     post(category, (data: galleryItemInfo[]) => {
+      if (data.length === 0) {
+        updateCategory('');
+      }
       setData(data);
     });
   }, [category]);
 
+  useEffect(() => {
+    setData(getPlaceholderData());
+    setCategory(params as string);
+  }, [location]);
+
   const updateCategory = (category: string) => {
-    setData(getPlaceholderData);
+    setData(getPlaceholderData());
     setCategory(category);
+    navigate(`/photos/${category}`);
   };
 
   return (
@@ -103,7 +116,9 @@ function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
-      <img src={thumbnail_url} loading="lazy" />
+      <a href={url} target="_blank" className="ImgLink">
+        <img src={thumbnail_url} loading="lazy" />
+      </a>
     </div>
   );
 }