/**
* Test React Component for Variable Inspection
*
* This component contains various types of variables, state, and hooks
* to test the variable inspection system with real React code.
*/
import React, { useState, useEffect, useCallback, useMemo } from 'react';
interface User {
id: number;
name: string;
email: string;
isActive: boolean;
}
interface ComponentProps {
initialCount?: number;
users?: User[];
onCountChange?: (count: number) => void;
}
export const VariableTestComponent: React.FC<ComponentProps> = ({
initialCount = 0,
users = [],
onCountChange
}) => {
// State variables for testing
const [count, setCount] = useState<number>(initialCount);
const [message, setMessage] = useState<string>('Hello, Variable Inspector!');
const [isLoading, setIsLoading] = useState<boolean>(false);
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [formData, setFormData] = useState({
name: '',
email: '',
preferences: {
theme: 'light',
notifications: true,
language: 'en'
}
});
// Local variables for testing
const localString = 'This is a local string variable';
const localNumber = 42;
const localBoolean = true;
const localArray = [1, 2, 3, 'four', { five: 5 }];
const localObject = {
nested: {
deeply: {
value: 'deep value',
count: 123
}
},
array: ['a', 'b', 'c'],
nullValue: null,
undefinedValue: undefined
};
// Computed values using useMemo
const expensiveCalculation = useMemo(() => {
console.log('Performing expensive calculation...');
let result = 0;
for (let i = 0; i < count * 1000; i++) {
result += Math.random();
}
return result;
}, [count]);
const filteredUsers = useMemo(() => {
return users.filter(user => user.isActive);
}, [users]);
// Callback functions using useCallback
const handleIncrement = useCallback(() => {
const newCount = count + 1;
setCount(newCount);
onCountChange?.(newCount);
// Local variables inside callback
const incrementMessage = `Count incremented to ${newCount}`;
console.log(incrementMessage);
}, [count, onCountChange]);
const handleDecrement = useCallback(() => {
const newCount = Math.max(0, count - 1);
setCount(newCount);
onCountChange?.(newCount);
// Local variables inside callback
const decrementMessage = `Count decremented to ${newCount}`;
console.log(decrementMessage);
}, [count, onCountChange]);
const handleUserSelect = useCallback((user: User) => {
setSelectedUser(user);
// Complex local processing
const userInfo = {
...user,
displayName: `${user.name} (${user.email})`,
isSelected: true,
timestamp: new Date().toISOString()
};
console.log('User selected:', userInfo);
}, []);
// Effect hooks for testing
useEffect(() => {
console.log('Component mounted');
// Local variables in effect
const mountMessage = 'VariableTestComponent has been mounted';
const mountTime = Date.now();
return () => {
console.log('Component will unmount');
const unmountMessage = 'VariableTestComponent is unmounting';
const unmountTime = Date.now();
console.log(unmountMessage, { mountTime, unmountTime });
};
}, []);
useEffect(() => {
if (count > 10) {
setMessage('Count is getting high!');
} else if (count > 5) {
setMessage('Count is moderate');
} else {
setMessage('Count is low');
}
// Local variables in effect
const countCategory = count > 10 ? 'high' : count > 5 ? 'moderate' : 'low';
const effectMessage = `Count effect triggered: ${count} (${countCategory})`;
console.log(effectMessage);
}, [count]);
// Async function for testing
const handleAsyncOperation = async () => {
setIsLoading(true);
try {
// Local variables in async function
const operationId = Math.random().toString(36).substring(2, 11);
const startTime = Date.now();
// Simulate async operation
await new Promise(resolve => setTimeout(resolve, 1000));
const endTime = Date.now();
const duration = endTime - startTime;
const result = {
operationId,
duration,
success: true,
data: `Operation completed in ${duration}ms`
};
console.log('Async operation completed:', result);
setMessage(`Async operation ${operationId} completed!`);
} catch (error) {
const errorInfo = {
message: error instanceof Error ? error.message : 'Unknown error',
timestamp: new Date().toISOString(),
operationType: 'async-test'
};
console.error('Async operation failed:', errorInfo);
setMessage('Async operation failed');
} finally {
setIsLoading(false);
}
};
// Complex nested function for testing
const processComplexData = () => {
const data = {
users: filteredUsers,
count,
metadata: {
timestamp: Date.now(),
version: '1.0.0',
environment: 'test'
}
};
const processedData = data.users.map((user, index) => {
const userWithIndex = {
...user,
index,
isEven: index % 2 === 0,
category: user.id > 5 ? 'premium' : 'standard'
};
// Nested processing
const enrichedUser = {
...userWithIndex,
stats: {
loginCount: Math.floor(Math.random() * 100),
lastActive: new Date(Date.now() - Math.random() * 86400000).toISOString(),
preferences: {
...formData.preferences,
userId: user.id
}
}
};
return enrichedUser;
});
const result = {
...data,
users: processedData,
summary: {
totalUsers: processedData.length,
premiumUsers: processedData.filter(u => u.category === 'premium').length,
activeUsers: processedData.filter(u => u.isActive).length
}
};
console.log('Complex data processed:', result);
return result;
};
return (
<div className="variable-test-component">
<h2>Variable Inspection Test Component</h2>
<div className="state-section">
<h3>State Variables</h3>
<p>Count: {count}</p>
<p>Message: {message}</p>
<p>Loading: {isLoading ? 'Yes' : 'No'}</p>
<p>Selected User: {selectedUser?.name || 'None'}</p>
</div>
<div className="controls-section">
<h3>Controls</h3>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
<button onClick={handleAsyncOperation} disabled={isLoading}>
{isLoading ? 'Processing...' : 'Start Async Operation'}
</button>
<button onClick={processComplexData}>Process Complex Data</button>
</div>
<div className="computed-section">
<h3>Computed Values</h3>
<p>Expensive Calculation: {expensiveCalculation.toFixed(2)}</p>
<p>Filtered Users: {filteredUsers.length}</p>
</div>
<div className="users-section">
<h3>Users</h3>
{filteredUsers.map(user => (
<div key={user.id} onClick={() => handleUserSelect(user)}>
{user.name} - {user.email}
</div>
))}
</div>
<div className="form-section">
<h3>Form Data</h3>
<input
value={formData.name}
onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
placeholder="Name"
/>
<input
value={formData.email}
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
placeholder="Email"
/>
</div>
<div className="debug-section">
<h3>Debug Info</h3>
<pre>{JSON.stringify({
localString,
localNumber,
localBoolean,
localArray,
localObject
}, null, 2)}</pre>
</div>
</div>
);
};
