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;
@@ -63,16 +68,30 @@ body {
   background-color: #0056b3;
 }
 
+.PlaceholderItem {
+  animation: loading 1.5s infinite;
+}
+
 .PlaceholderItem > button,
 .ParentDirectoryItem > button {
 	background-color: #4D4F5D;
 }
 
+.PlaceholderItem > button,
+.DirectoryItem > button {
+  height: 2.5em;
+  min-width: 6em;
+}
+
 .PlaceholderItem > a {
   height: 1em;
 }
 
-.PlaceholderItem > button {
-  height: calc(16px + 10px * 2);
-  width: 6em;
+@keyframes loading {
+  0%, 100% {
+    filter: brightness(80%);
+  }
+  50% {
+    filter: brightness(100%);
+  }
 }

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">
-      <Gallery />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <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 (
@@ -68,7 +81,9 @@ function Contents(
       };
 
       if (item.is_dir) {
-        itemProps.onClick = () => {
+        itemProps.onClick = item.isPlaceholder
+          ? () => {}
+          : () => {
               const subCategory = getFileName(itemProps.url);
 
               if (category !== '') category = `${category}/${subCategory}`;
@@ -101,7 +116,9 @@ function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
+      <a href={url} target="_blank" className="ImgLink">
         <img src={thumbnail_url} loading="lazy" />
+      </a>
     </div>
   );
 }
@@ -137,6 +154,14 @@ function getFileName(string: string): string {
 }
 
 function getPlaceholderData(): galleryItemInfo[] {
+  const backDir = (): galleryItemInfo => {
+    return {
+      is_dir: true,
+      url: '..',
+      thumbnail_url: '',
+      isPlaceholder: true,
+    };
+  };
   const placeholderDir = (): galleryItemInfo => {
     return {
       is_dir: true,
@@ -155,6 +180,7 @@ function getPlaceholderData(): galleryItemInfo[] {
   };
 
   return [
+    backDir(),
     placeholderDir(),
     placeholderDir(),
     placeholderImg(),