'use client';
import { useState } from 'react';
import ProblematicComponent from '@/components/ProblematicComponent';
import PerformanceIssues from '@/components/PerformanceIssues';
import { useProblematicHook } from '@/hooks/useProblematicHook';
import { processData, complexCalculation } from '@/utils/complexUtils';
export default function Home() {
const [activeTab, setActiveTab] = useState<'problematic' | 'performance'>('problematic');
const [message, setMessage] = useState<string>('');
// Using the problematic hook
const { data, loading, error } = useProblematicHook(
{ value: 42, name: 'Test Data' },
{ autoFetch: true, id: 'test-data' }
);
// Generate test data for performance component
const generateTestData = () => {
const items = [];
for (let i = 0; i < 100; i++) {
items.push({
id: i,
name: `Item ${i}`,
description: `Description for item ${i}`,
value: Math.random() * 100,
category: i % 3 === 0 ? 'A' : i % 3 === 1 ? 'B' : 'C'
});
}
return items;
};
const testData = generateTestData();
const handleUpdate = (value: string) => {
setMessage(`Updated with: ${value}`);
// Using the complex utility function
const processed = processData(value, { decode: false, format: 'text' });
console.log('Processed data:', processed);
// Using the function with too many parameters
const calculation = complexCalculation(1, 2, 3, 4, 5, 6, 7, 8);
console.log('Complex calculation result:', calculation);
};
return (
<div className="min-h-screen p-8">
<header className="mb-8">
<h1 className="text-3xl font-bold mb-4">Debugger MCP Server Test Application</h1>
<p className="text-gray-600 mb-4">
This application contains intentional code quality issues, performance problems,
and various violations that our MCP debugger should detect.
</p>
{message && (
<div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
{message}
</div>
)}
{loading && (
<div className="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
Loading data from hook...
</div>
)}
{error && (
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
Hook error: {error}
</div>
)}
</header>
<nav className="mb-8">
<div className="flex space-x-4">
<button
onClick={() => setActiveTab('problematic')}
className={`px-4 py-2 rounded ${
activeTab === 'problematic'
? 'bg-blue-500 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Problematic Component
</button>
<button
onClick={() => setActiveTab('performance')}
className={`px-4 py-2 rounded ${
activeTab === 'performance'
? 'bg-blue-500 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Performance Issues
</button>
</div>
</nav>
<main>
{activeTab === 'problematic' && (
<ProblematicComponent
title="Test Component with Issues"
data={data}
count={42}
isVisible={true}
onUpdate={handleUpdate}
extraProp1="extra1"
extraProp2={123}
extraProp3={true}
extraProp4={{ test: 'object' }}
extraProp5="extra5"
/>
)}
{activeTab === 'performance' && (
<PerformanceIssues
items={testData}
threshold={50}
/>
)}
</main>
<footer className="mt-16 pt-8 border-t border-gray-200">
<div className="text-sm text-gray-500">
<h3 className="font-semibold mb-2">Issues this app should trigger:</h3>
<ul className="list-disc list-inside space-y-1">
<li>High cyclomatic complexity functions</li>
<li>Too many component props and function parameters</li>
<li>Missing useEffect dependencies</li>
<li>Memory leaks (missing cleanup)</li>
<li>Inline styles and performance issues</li>
<li>Bad naming conventions</li>
<li>TypeScript 'any' type usage</li>
<li>Expensive calculations in render</li>
<li>Network errors and unhandled promises</li>
</ul>
</div>
</footer>
</div>
);
}
