photo-viewer-react/src/Gallery/index.tsx

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 [category, setCategory] = useState('');

  useEffect(() => {
    post(category, (data: galleryItemInfo[]) => {
      setData(data);
    });
  }, [category]);

  const updateCategory = (category: string) => {
    setData(getPlaceholderData);
    setCategory(category);
  };

  return (
    <div className="Gallery">
      <div className="Header">
        {Contents(data, true, category, updateCategory)}
      </div>
      <div className="Contents">
        {Contents(data, false, category, updateCategory)}
      </div>
    </div>
  );
}

interface galleryItemInfo {
  is_dir: boolean;
  url: string;
  thumbnail_url: string;

  isPlaceholder: boolean;
}

function Contents(
  data: galleryItemInfo[],
  getDir: boolean,
  category: string,
  setCategory: (category: string) => void
) {
  if (data === null) return;

  return data
    .sort((a: galleryItemInfo, b: galleryItemInfo): number => {
      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;
    })
    .map((item: galleryItemInfo, index: number) => {
      const itemProps = {
        key: index,
        url: item.url,
        thumbnail_url:
          item.thumbnail_url === null ? item.url : item.thumbnail_url,
        onClick: () => {},
        isPlaceholder: item.isPlaceholder,
      };

      if (item.is_dir) {
        itemProps.onClick = () => {
          const subCategory = getFileName(itemProps.url);

          if (category !== '') category = `${category}/${subCategory}`;
          else category = subCategory;
          if (subCategory === '..')
            category = category.split('/').slice(0, -2).join('/');

          setCategory(category);
        };
        return <DirectoryItem {...itemProps} />;
      }
      if (itemProps.url.endsWith('.mp4')) {
        return <VideoItem {...itemProps} />;
      }
      return <ImageItem {...itemProps} />;
    });
}

interface galleryItem {
  url: string;
  thumbnail_url: string;
  onClick: () => void;
  isPlaceholder: boolean;
}

function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
  return (
    <div className={`GalleryItem ${placeholderClass}`}>
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <img src={thumbnail_url} loading="lazy" />
    </div>
  );
}

function VideoItem({ url }: galleryItem) {
  return (
    <div className="GalleryItem">
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <video controls>
        <source src={url} type="video/mp4" />
      </video>
    </div>
  );
}

function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) {
  let buttonText = getFileName(url);
  const isBackButton = buttonText === '..';
  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
  buttonText = isBackButton ? 'Back' : `${buttonText}`;
  const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
  return (
    <div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}>
      <button onClick={onClick}>{buttonText}</button>
    </div>
  );
}

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',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          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,
      },
    ]);
  }
}

export default Gallery;