378 lines
13 KiB
TypeScript
378 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
|
|
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
|
|
import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
|
|
import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';
|
|
|
|
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
|
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
|
|
const IMAGES_PER_PAGE = 30;
|
|
|
|
type ImageItem = {
|
|
name: string;
|
|
url: string;
|
|
size: number;
|
|
contentType: string;
|
|
lastModified: string;
|
|
};
|
|
|
|
type ImagesResponse = {
|
|
success: boolean;
|
|
data?: {
|
|
images: ImageItem[];
|
|
total: number;
|
|
offset: number;
|
|
limit: number;
|
|
hasMore: boolean;
|
|
};
|
|
error?: string;
|
|
message?: string;
|
|
};
|
|
|
|
type ApiKeyInfo = {
|
|
organizationSlug?: string;
|
|
projectSlug?: string;
|
|
};
|
|
|
|
type DownloadTimeMap = {
|
|
[imageId: string]: number;
|
|
};
|
|
|
|
export default function GalleryPage() {
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [apiKeyVisible, setApiKeyVisible] = useState(false);
|
|
const [apiKeyValidated, setApiKeyValidated] = useState(false);
|
|
const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
|
|
const [apiKeyError, setApiKeyError] = useState('');
|
|
const [validatingKey, setValidatingKey] = useState(false);
|
|
|
|
const [images, setImages] = useState<ImageItem[]>([]);
|
|
const [offset, setOffset] = useState(0);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
|
|
const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
|
|
|
|
useEffect(() => {
|
|
const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
|
|
if (storedApiKey) {
|
|
setApiKey(storedApiKey);
|
|
validateStoredApiKey(storedApiKey);
|
|
}
|
|
}, []);
|
|
|
|
const validateStoredApiKey = async (keyToValidate: string) => {
|
|
setValidatingKey(true);
|
|
setApiKeyError('');
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/api/info`, {
|
|
headers: {
|
|
'X-API-Key': keyToValidate,
|
|
},
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setApiKeyValidated(true);
|
|
if (data.keyInfo) {
|
|
setApiKeyInfo({
|
|
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
|
|
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
|
|
});
|
|
} else {
|
|
setApiKeyInfo({
|
|
organizationSlug: 'Unknown',
|
|
projectSlug: 'Unknown',
|
|
});
|
|
}
|
|
await fetchImages(keyToValidate, 0);
|
|
} else {
|
|
localStorage.removeItem(API_KEY_STORAGE_KEY);
|
|
setApiKeyError('Stored API key is invalid or expired');
|
|
setApiKeyValidated(false);
|
|
}
|
|
} catch (error) {
|
|
setApiKeyError('Failed to validate stored API key');
|
|
setApiKeyValidated(false);
|
|
} finally {
|
|
setValidatingKey(false);
|
|
}
|
|
};
|
|
|
|
const validateApiKey = async () => {
|
|
if (!apiKey.trim()) {
|
|
setApiKeyError('Please enter an API key');
|
|
return;
|
|
}
|
|
|
|
setValidatingKey(true);
|
|
setApiKeyError('');
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/api/info`, {
|
|
headers: {
|
|
'X-API-Key': apiKey,
|
|
},
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setApiKeyValidated(true);
|
|
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
|
|
|
|
if (data.keyInfo) {
|
|
setApiKeyInfo({
|
|
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
|
|
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
|
|
});
|
|
} else {
|
|
setApiKeyInfo({
|
|
organizationSlug: 'Unknown',
|
|
projectSlug: 'Unknown',
|
|
});
|
|
}
|
|
|
|
await fetchImages(apiKey, 0);
|
|
} else {
|
|
const error = await response.json();
|
|
setApiKeyError(error.message || 'Invalid API key');
|
|
setApiKeyValidated(false);
|
|
}
|
|
} catch (error) {
|
|
setApiKeyError('Failed to validate API key. Please check your connection.');
|
|
setApiKeyValidated(false);
|
|
} finally {
|
|
setValidatingKey(false);
|
|
}
|
|
};
|
|
|
|
const revokeApiKey = () => {
|
|
localStorage.removeItem(API_KEY_STORAGE_KEY);
|
|
setApiKey('');
|
|
setApiKeyValidated(false);
|
|
setApiKeyInfo(null);
|
|
setApiKeyError('');
|
|
setImages([]);
|
|
setOffset(0);
|
|
setHasMore(false);
|
|
setError('');
|
|
};
|
|
|
|
const fetchImages = async (keyToUse: string, fetchOffset: number) => {
|
|
if (fetchOffset === 0) {
|
|
setLoading(true);
|
|
} else {
|
|
setLoadingMore(true);
|
|
}
|
|
setError('');
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`${API_BASE_URL}/api/images/generated?limit=${IMAGES_PER_PAGE}&offset=${fetchOffset}`,
|
|
{
|
|
headers: {
|
|
'X-API-Key': keyToUse,
|
|
},
|
|
}
|
|
);
|
|
|
|
if (!response.ok) {
|
|
const errorData: ImagesResponse = await response.json();
|
|
throw new Error(errorData.error || errorData.message || 'Failed to fetch images');
|
|
}
|
|
|
|
const result: ImagesResponse = await response.json();
|
|
|
|
if (result.success && result.data) {
|
|
const { images: newImages, offset: newOffset, hasMore: newHasMore } = result.data;
|
|
|
|
if (fetchOffset === 0) {
|
|
setImages(newImages);
|
|
} else {
|
|
setImages((prev) => [...prev, ...newImages]);
|
|
}
|
|
setOffset(newOffset);
|
|
setHasMore(newHasMore);
|
|
} else {
|
|
throw new Error(result.error || 'Failed to fetch images');
|
|
}
|
|
} catch (error) {
|
|
setError(error instanceof Error ? error.message : 'Failed to load images');
|
|
} finally {
|
|
setLoading(false);
|
|
setLoadingMore(false);
|
|
}
|
|
};
|
|
|
|
const handleLoadMore = () => {
|
|
const newOffset = offset + IMAGES_PER_PAGE;
|
|
fetchImages(apiKey, newOffset);
|
|
};
|
|
|
|
const handleDownloadMeasured = useCallback((imageId: string, downloadMs: number) => {
|
|
setDownloadTimes((prev) => ({
|
|
...prev,
|
|
[imageId]: downloadMs,
|
|
}));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
|
|
{apiKeyValidated && apiKeyInfo && (
|
|
<MinimizedApiKey
|
|
organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
|
|
projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
|
|
apiKey={apiKey}
|
|
onRevoke={revokeApiKey}
|
|
/>
|
|
)}
|
|
|
|
<header className="mb-8 md:mb-12">
|
|
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
|
|
Image Gallery
|
|
</h1>
|
|
<p className="text-gray-400 text-base md:text-lg">
|
|
Browse your AI-generated images
|
|
</p>
|
|
</header>
|
|
|
|
{!apiKeyValidated && (
|
|
<section
|
|
className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
|
|
aria-label="API Key Validation"
|
|
>
|
|
<h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
|
|
<div className="flex gap-3">
|
|
<div className="flex-1 relative">
|
|
<input
|
|
type={apiKeyVisible ? 'text' : 'password'}
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
validateApiKey();
|
|
}
|
|
}}
|
|
placeholder="Enter your API key"
|
|
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
|
|
aria-label="API key input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setApiKeyVisible(!apiKeyVisible)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
|
|
aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
|
|
>
|
|
{apiKeyVisible ? (
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={validateApiKey}
|
|
disabled={validatingKey}
|
|
className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
|
aria-busy={validatingKey}
|
|
>
|
|
{validatingKey ? 'Validating...' : 'Validate'}
|
|
</button>
|
|
</div>
|
|
|
|
{apiKeyError && (
|
|
<div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
|
|
<p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
|
|
<p className="text-xs text-red-300/80">
|
|
{apiKeyError.includes('Invalid')
|
|
? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
|
|
: 'Please check your internet connection and try again.'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{apiKeyValidated && (
|
|
<section aria-label="Image Gallery">
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center py-16" role="status" aria-live="polite">
|
|
<div className="animate-spin w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full mb-4" aria-hidden="true"></div>
|
|
<p className="text-gray-400">Loading images...</p>
|
|
</div>
|
|
) : error ? (
|
|
<div className="p-6 bg-red-900/20 border border-red-700/50 rounded-2xl" role="alert" aria-live="assertive">
|
|
<p className="text-red-400 font-medium mb-2">{error}</p>
|
|
<p className="text-sm text-red-300/80">
|
|
{error.includes('fetch') || error.includes('load')
|
|
? 'Unable to load images. Please check your connection and try refreshing the page.'
|
|
: 'An error occurred while fetching your images. Please try again later.'}
|
|
</p>
|
|
</div>
|
|
) : images.length === 0 ? (
|
|
<EmptyGalleryState />
|
|
) : (
|
|
<>
|
|
<ImageGrid
|
|
images={images}
|
|
onImageZoom={setZoomedImageUrl}
|
|
onDownloadMeasured={handleDownloadMeasured}
|
|
/>
|
|
|
|
{hasMore && (
|
|
<div className="flex justify-center mt-8">
|
|
<button
|
|
onClick={handleLoadMore}
|
|
disabled={loadingMore}
|
|
className="px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
|
aria-busy={loadingMore}
|
|
aria-live="polite"
|
|
>
|
|
{loadingMore ? (
|
|
<span className="flex items-center gap-2">
|
|
<div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" aria-hidden="true"></div>
|
|
Loading more images...
|
|
</span>
|
|
) : (
|
|
'Load More Images'
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
<ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
|
|
</div>
|
|
);
|
|
}
|