113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
/**
|
|
* This is a debugging component that provides troubleshooting tools
|
|
* for the email loading process in the Courrier application.
|
|
*/
|
|
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';
|
|
|
|
interface LoadingFixProps {
|
|
loading: boolean;
|
|
isLoadingInitial: boolean;
|
|
setLoading: (value: boolean) => void;
|
|
setIsLoadingInitial: (value: boolean) => void;
|
|
setEmails: (emails: any[]) => void;
|
|
loadEmails: () => void;
|
|
emails: any[];
|
|
}
|
|
|
|
export function LoadingFix({
|
|
loading,
|
|
isLoadingInitial,
|
|
setLoading,
|
|
setIsLoadingInitial,
|
|
setEmails,
|
|
loadEmails,
|
|
emails
|
|
}: LoadingFixProps) {
|
|
const forceResetLoadingStates = () => {
|
|
console.log('[DEBUG] Force resetting loading states to false');
|
|
// Force both loading states to false
|
|
setLoading(false);
|
|
setIsLoadingInitial(false);
|
|
};
|
|
|
|
const forceTriggerLoad = () => {
|
|
console.log('[DEBUG] Force triggering a new email load');
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
loadEmails();
|
|
}, 100);
|
|
};
|
|
|
|
const resetEmailState = () => {
|
|
console.log('[DEBUG] Resetting email state to empty array');
|
|
setEmails([]);
|
|
setTimeout(() => {
|
|
forceTriggerLoad();
|
|
}, 100);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50 p-4 bg-white shadow-lg rounded-lg border border-gray-200">
|
|
<div className="text-sm font-medium mb-2">Debug Tools</div>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center text-xs">
|
|
<span className="inline-block w-28">Loading State:</span>
|
|
{loading ? (
|
|
<span className="text-yellow-500 flex items-center">
|
|
<AlertCircle className="h-3 w-3 mr-1" /> Active
|
|
</span>
|
|
) : (
|
|
<span className="text-green-500 flex items-center">
|
|
<CheckCircle className="h-3 w-3 mr-1" /> Inactive
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center text-xs">
|
|
<span className="inline-block w-28">Initial Loading:</span>
|
|
{isLoadingInitial ? (
|
|
<span className="text-yellow-500 flex items-center">
|
|
<AlertCircle className="h-3 w-3 mr-1" /> Active
|
|
</span>
|
|
) : (
|
|
<span className="text-green-500 flex items-center">
|
|
<CheckCircle className="h-3 w-3 mr-1" /> Inactive
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center text-xs">
|
|
<span className="inline-block w-28">Emails Loaded:</span>
|
|
<span className={emails.length > 0 ? "text-green-500" : "text-red-500"}>
|
|
{emails.length}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs h-8"
|
|
onClick={forceResetLoadingStates}
|
|
>
|
|
Reset Loading States
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs h-8"
|
|
onClick={forceTriggerLoad}
|
|
>
|
|
Force Reload Emails
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-xs h-8"
|
|
onClick={resetEmailState}
|
|
>
|
|
Reset Email State
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|