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

the post() function now uses await syntax rather than .then()

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,13 @@ body {
   overflow: clip;
 }
 
-.GalleryItem > img, video {
+.GalleryItem > .ImgLink {
+  margin: 0;
+  padding: 0;
+}
+
+.GalleryItem > .ImgLink > img,
+.GalleryItem > video {
   object-fit: contain;
   max-height: 80vh;
 }
@@ -62,7 +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;
+}
+
+@keyframes loading {
+  0%, 100% {
+    filter: brightness(80%);
+  }
+  50% {
+    filter: brightness(100%);
+  }
+}

src/App.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+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,24 +1,43 @@
-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 [data, setData] = useState('');
+  const params = useParams<string>()['*'];
-  const [category, setCategory] = useState('');
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [data, setData] = useState<galleryItemInfo[]>([]);
+  const [category, setCategory] = useState(params === undefined ? '' : params);
 
   useEffect(() => {
-    post(category, (json: string) => {
+    post(category, (data: galleryItemInfo[]) => {
-      setData(json);
+      if (data.length === 0) {
-    });
+        updateCategory('');
+      }
+      setData(data);
     });
+  }, [category]);
+
+  useEffect(() => {
+    setData(getPlaceholderData());
+    setCategory(params as string);
+  }, [location]);
+
+  const updateCategory = (category: string) => {
+    setData(getPlaceholderData());
+    setCategory(category);
+    navigate(`/photos/${category}`);
+  };
 
   return (
     <div className="Gallery">
       <div className="Header">
-        {getContents(data, true, category, setCategory)}
+        {Contents(data, true, category, updateCategory)}
       </div>
       <div className="Contents">
-        {getContents(data, false, category, setCategory)}
+        {Contents(data, false, category, updateCategory)}
       </div>
     </div>
   );
@@ -28,32 +47,25 @@ interface galleryItemInfo {
   is_dir: boolean;
   url: string;
   thumbnail_url: string;
+
+  isPlaceholder: boolean;
 }
 
-function getContents(
+function Contents(
-  data: string,
+  data: galleryItemInfo[],
   getDir: boolean,
   category: string,
   setCategory: (category: string) => void
 ) {
-  if (data === '') return;
+  if (data === null) return;
 
-  let obj = null;
+  return data
-  try {
+    .sort((a: galleryItemInfo, b: galleryItemInfo): number => {
-    obj = JSON.parse(data);
-  } catch (error: unknown) {
-    if (!(error instanceof SyntaxError)) {
-      throw new Error(error as unknown as undefined);
-    }
-    return data;
-  }
-
-  return obj
-    .sort((a: galleryItemInfo, b: galleryItemInfo) => {
       if (a.is_dir && b.is_dir) return 0;
       if (a.is_dir && !b.is_dir) return -1;
       if (!a.is_dir && b.is_dir) return 1;
       if (!a.is_dir && !b.is_dir) return 0;
+      return 0;
     })
     .filter((item: galleryItemInfo) => {
       return getDir == item.is_dir;
@@ -65,10 +77,13 @@ function getContents(
         thumbnail_url:
           item.thumbnail_url === null ? item.url : item.thumbnail_url,
         onClick: () => {},
+        isPlaceholder: item.isPlaceholder,
       };
 
       if (item.is_dir) {
-        itemProps.onClick = () => {
+        itemProps.onClick = item.isPlaceholder
+          ? () => {}
+          : () => {
               const subCategory = getFileName(itemProps.url);
 
               if (category !== '') category = `${category}/${subCategory}`;
@@ -91,15 +106,19 @@ interface galleryItem {
   url: string;
   thumbnail_url: string;
   onClick: () => void;
+  isPlaceholder: boolean;
 }
 
-function ImageItem({ thumbnail_url, url }: galleryItem) {
+function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
+  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
   return (
-    <div className="GalleryItem">
+    <div className={`GalleryItem ${placeholderClass}`}>
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
+      <a href={url} target="_blank" className="ImgLink">
         <img src={thumbnail_url} loading="lazy" />
+      </a>
     </div>
   );
 }
@@ -117,16 +136,15 @@ function VideoItem({ url }: galleryItem) {
   );
 }
 
-function DirectoryItem({ url, onClick }: galleryItem) {
+function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) {
   let buttonText = getFileName(url);
   const isBackButton = buttonText === '..';
-  buttonText = isBackButton ? 'Back' : `Category: ${buttonText}`;
+  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
+  buttonText = isBackButton ? 'Back' : `${buttonText}`;
   const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
   return (
-    <div className={`DirectoryItem ${backButtonClass}`}>
+    <div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}>
-      <button className="DirectoryItem" onClick={onClick}>
+      <button onClick={onClick}>{buttonText}</button>
-        {buttonText}
-      </button>
     </div>
   );
 }
@@ -135,10 +153,49 @@ function getFileName(string: string): string {
   return string.split('/').at(-1) as unknown as string;
 }
 
-function post(category: string, callback: (text: string) => void) {
+function getPlaceholderData(): galleryItemInfo[] {
-  fetch(
+  const backDir = (): galleryItemInfo => {
-    'http://localhost/photo-viewer-backend/php/get.php',
+    return {
-    //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
+      is_dir: true,
+      url: '..',
+      thumbnail_url: '',
+      isPlaceholder: true,
+    };
+  };
+  const placeholderDir = (): galleryItemInfo => {
+    return {
+      is_dir: true,
+      url: '',
+      thumbnail_url: '',
+      isPlaceholder: true,
+    };
+  };
+  const placeholderImg = (): galleryItemInfo => {
+    return {
+      is_dir: false,
+      url: '',
+      thumbnail_url: `${placeholderPng}`,
+      isPlaceholder: true,
+    };
+  };
+
+  return [
+    backDir(),
+    placeholderDir(),
+    placeholderDir(),
+    placeholderImg(),
+    placeholderImg(),
+    placeholderImg(),
+  ];
+}
+async function post(
+  category: string,
+  setDataCallback: (data: galleryItemInfo[]) => void
+) {
+  try {
+    const response = await fetch(
+      //'http://localhost/photo-viewer-backend/php/get.php',
+      'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
       {
         method: 'POST',
         headers: {
@@ -148,20 +205,19 @@ function post(category: string, callback: (text: string) => void) {
           category: category,
         }),
       }
-  )
+    );
-    .then((response) => {
+    setDataCallback(await response.json());
-      if (!response.ok) {
+  } catch (error) {
-        throw new Error('Network response was not ok');
+    console.error('Error fetching data: ', error);
+    setDataCallback([
+      {
+        is_dir: false,
+        url: 'error_fetching',
+        thumbnail_url: '',
+        isPlaceholder: false,
+      },
+    ]);
   }
-      return response;
-    })
-    .then((response) => response.text())
-    .then((data) => {
-      callback(data as unknown as string);
-    })
-    .catch((error) => {
-      console.error('There was a problem with the fetch operation:', error);
-    });
 }
 
 export default Gallery;