51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { useApi } from './useApi';
|
|
|
|
interface UseSecureImageReturn {
|
|
imageUrl: string | null;
|
|
loading: boolean;
|
|
error: Error | null;
|
|
}
|
|
|
|
export function useSecureImage(url: string): UseSecureImageReturn {
|
|
const [imageUrl, setImageUrl] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<Error | null>(null);
|
|
|
|
const { getSecureImage } = useApi();
|
|
|
|
const fetchImage = useCallback(async () => {
|
|
if (!url) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
// Fetch image with authentication
|
|
const blob = await getSecureImage(url);
|
|
|
|
// Create blob URL
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
setImageUrl(blobUrl);
|
|
} catch (err) {
|
|
console.error('Error fetching image:', err);
|
|
const errorMessage = err instanceof Error ? err.message : 'Failed to load image';
|
|
setError(new Error(errorMessage));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [url, getSecureImage]);
|
|
|
|
useEffect(() => {
|
|
fetchImage();
|
|
}, [fetchImage]);
|
|
|
|
return {
|
|
imageUrl,
|
|
loading,
|
|
error, // For debugging
|
|
};
|
|
}
|