49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Debug component to show Redis connection status
|
|
* Only visible in development mode
|
|
*/
|
|
export function RedisCacheStatus() {
|
|
const [status, setStatus] = useState<'connected' | 'error' | 'loading'>('loading');
|
|
const [lastCheck, setLastCheck] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
async function checkRedis() {
|
|
try {
|
|
setStatus('loading');
|
|
const response = await fetch('/api/redis/status');
|
|
const data = await response.json();
|
|
setStatus(data.status);
|
|
setLastCheck(new Date().toLocaleTimeString());
|
|
} catch (e) {
|
|
setStatus('error');
|
|
setLastCheck(new Date().toLocaleTimeString());
|
|
}
|
|
}
|
|
|
|
checkRedis();
|
|
const interval = setInterval(checkRedis, 30000); // Check every 30 seconds
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// Only show in development mode
|
|
if (process.env.NODE_ENV !== 'development') {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-4 text-xs bg-gray-800/80 text-white p-2 rounded shadow-md z-50">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-2 h-2 rounded-full ${
|
|
status === 'connected' ? 'bg-green-500' :
|
|
status === 'loading' ? 'bg-yellow-500' : 'bg-red-500'
|
|
}`}></div>
|
|
<span>Redis: {status}</span>
|
|
<span className="opacity-60">({lastCheck})</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|