multi_image / src /contexts /api-keys-context.tsx
mrbeniwal's picture
Initial commit
b24a0b1
'use client';
import * as React from 'react';
import { type ImageProvider, PROVIDER_CONFIGS } from '@/lib/api-config';
// Storage key for localStorage
const STORAGE_KEY = 'imageforge-api-keys';
// Map provider to their storage key names
const PROVIDER_STORAGE_KEYS: Record<ImageProvider, string> = {
openai: 'openai',
google: 'google',
qwen: 'qwen',
};
export interface ApiKeysState {
openai: string;
google: string;
qwen: string;
}
interface ApiKeysContextType {
apiKeys: ApiKeysState;
setApiKey: (provider: ImageProvider, key: string) => void;
getApiKey: (provider: ImageProvider) => string;
clearApiKey: (provider: ImageProvider) => void;
clearAllKeys: () => void;
hasKey: (provider: ImageProvider) => boolean;
isOpen: boolean;
setIsOpen: (open: boolean) => void;
}
const defaultState: ApiKeysState = {
openai: '',
google: '',
qwen: '',
};
const ApiKeysContext = React.createContext<ApiKeysContextType | undefined>(undefined);
export function ApiKeysProvider({ children }: { children: React.ReactNode }) {
const [apiKeys, setApiKeys] = React.useState<ApiKeysState>(defaultState);
const [isOpen, setIsOpen] = React.useState(false);
const [isInitialized, setIsInitialized] = React.useState(false);
// Load keys from localStorage on mount
React.useEffect(() => {
try {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
const parsed = JSON.parse(stored) as Partial<ApiKeysState>;
setApiKeys({
openai: parsed.openai || '',
google: parsed.google || '',
qwen: parsed.qwen || '',
});
}
} catch (error) {
console.error('Failed to load API keys from localStorage:', error);
}
setIsInitialized(true);
}, []);
// Save keys to localStorage whenever they change
React.useEffect(() => {
if (isInitialized) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(apiKeys));
} catch (error) {
console.error('Failed to save API keys to localStorage:', error);
}
}
}, [apiKeys, isInitialized]);
const setApiKey = React.useCallback((provider: ImageProvider, key: string) => {
const storageKey = PROVIDER_STORAGE_KEYS[provider];
setApiKeys(prev => ({
...prev,
[storageKey]: key,
}));
}, []);
const getApiKey = React.useCallback((provider: ImageProvider) => {
const storageKey = PROVIDER_STORAGE_KEYS[provider];
return apiKeys[storageKey as keyof ApiKeysState] || '';
}, [apiKeys]);
const clearApiKey = React.useCallback((provider: ImageProvider) => {
const storageKey = PROVIDER_STORAGE_KEYS[provider];
setApiKeys(prev => ({
...prev,
[storageKey]: '',
}));
}, []);
const clearAllKeys = React.useCallback(() => {
setApiKeys(defaultState);
}, []);
const hasKey = React.useCallback((provider: ImageProvider) => {
const key = getApiKey(provider);
return key.trim().length > 0;
}, [getApiKey]);
const value = React.useMemo(() => ({
apiKeys,
setApiKey,
getApiKey,
clearApiKey,
clearAllKeys,
hasKey,
isOpen,
setIsOpen,
}), [apiKeys, setApiKey, getApiKey, clearApiKey, clearAllKeys, hasKey, isOpen]);
return (
<ApiKeysContext.Provider value={value}>
{children}
</ApiKeysContext.Provider>
);
}
export function useApiKeys() {
const context = React.useContext(ApiKeysContext);
if (context === undefined) {
throw new Error('useApiKeys must be used within an ApiKeysProvider');
}
return context;
}