src/App.css

@@ -38,8 +38,7 @@ body {
   overflow: clip;
 }
 
-.GalleryItem > img,
-.GalleryItem > video {
+.GalleryItem > img, video {
   object-fit: contain;
   max-height: 80vh;
 }
@@ -63,16 +62,7 @@ body {
   background-color: #0056b3;
 }
 
-.PlaceholderItem > button,
 .ParentDirectoryItem > button {
 	background-color: #4D4F5D;
 }
 
-.PlaceholderItem > a {
-  height: 1em;
-}
-
-.PlaceholderItem > button {
-  height: calc(16px + 10px * 2);
-  width: 6em;
-}

src/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import './App.css';
 
 import Gallery from './Gallery/index';

src/Gallery/index.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import '../App.css';
-import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
 
 function Gallery() {
-  const [data, setData] = useState<galleryItemInfo[]>([]);
+  const [data, setData] = useState('');
   const [category, setCategory] = useState('');
 
   useEffect(() => {
-    post(category, (data: galleryItemInfo[]) => {
-      setData(data);
+    post(category, (json: string) => {
+      setData(json);
+    });
   });
-  }, [category]);
-
-  const updateCategory = (category: string) => {
-    setData(getPlaceholderData);
-    setCategory(category);
-  };
 
   return (
     <div className="Gallery">
       <div className="Header">
-        {Contents(data, true, category, updateCategory)}
+        {getContents(data, true, category, setCategory)}
       </div>
       <div className="Contents">
-        {Contents(data, false, category, updateCategory)}
+        {getContents(data, false, category, setCategory)}
       </div>
     </div>
   );
@@ -34,25 +28,32 @@ interface galleryItemInfo {
   is_dir: boolean;
   url: string;
   thumbnail_url: string;
-
-  isPlaceholder: boolean;
 }
 
-function Contents(
-  data: galleryItemInfo[],
+function getContents(
+  data: string,
   getDir: boolean,
   category: string,
   setCategory: (category: string) => void
 ) {
-  if (data === null) return;
+  if (data === '') return;
 
-  return data
-    .sort((a: galleryItemInfo, b: galleryItemInfo): number => {
+  let obj = null;
+  try {
+    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;
@@ -64,7 +65,6 @@ function Contents(
         thumbnail_url:
           item.thumbnail_url === null ? item.url : item.thumbnail_url,
         onClick: () => {},
-        isPlaceholder: item.isPlaceholder,
       };
 
       if (item.is_dir) {
@@ -91,13 +91,11 @@ interface galleryItem {
   url: string;
   thumbnail_url: string;
   onClick: () => void;
-  isPlaceholder: boolean;
 }
 
-function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
-  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
+function ImageItem({ thumbnail_url, url }: galleryItem) {
   return (
-    <div className={`GalleryItem ${placeholderClass}`}>
+    <div className="GalleryItem">
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
@@ -119,15 +117,16 @@ function VideoItem({ url }: galleryItem) {
   );
 }
 
-function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) {
+function DirectoryItem({ url, onClick }: galleryItem) {
   let buttonText = getFileName(url);
   const isBackButton = buttonText === '..';
-  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
-  buttonText = isBackButton ? 'Back' : `${buttonText}`;
+  buttonText = isBackButton ? 'Back' : `Category: ${buttonText}`;
   const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
   return (
-    <div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}>
-      <button onClick={onClick}>{buttonText}</button>
+    <div className={`DirectoryItem ${backButtonClass}`}>
+      <button className="DirectoryItem" onClick={onClick}>
+        {buttonText}
+      </button>
     </div>
   );
 }
@@ -136,40 +135,10 @@ function getFileName(string: string): string {
   return string.split('/').at(-1) as unknown as string;
 }
 
-function getPlaceholderData(): galleryItemInfo[] {
-  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 [
-    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',
+function post(category: string, callback: (text: string) => void) {
+  fetch(
+    'http://localhost/photo-viewer-backend/php/get.php',
+    //'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
     {
       method: 'POST',
       headers: {
@@ -179,19 +148,20 @@ async function post(
         category: category,
       }),
     }
-    );
-    setDataCallback(await response.json());
-  } catch (error) {
-    console.error('Error fetching data: ', error);
-    setDataCallback([
-      {
-        is_dir: false,
-        url: 'error_fetching',
-        thumbnail_url: '',
-        isPlaceholder: false,
-      },
-    ]);
+  )
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
       }
+      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;