/**
* Test Page for Variable Inspection
*
* This Next.js page demonstrates variable inspection in a real application
* with server-side rendering, client-side state, and complex data flows.
*/
import React, { useState, useEffect } from 'react';
import { GetServerSideProps } from 'next';
import { VariableTestComponent } from '../components/VariableTestComponent';
interface User {
id: number;
name: string;
email: string;
isActive: boolean;
}
interface PageProps {
initialUsers: User[];
serverTimestamp: string;
environment: string;
}
const VariableTestPage: React.FC<PageProps> = ({
initialUsers,
serverTimestamp,
environment
}) => {
// Page-level state
const [users, setUsers] = useState<User[]>(initialUsers);
const [globalCount, setGlobalCount] = useState<number>(0);
const [pageMetadata, setPageMetadata] = useState({
loadTime: Date.now(),
interactions: 0,
lastUpdate: serverTimestamp
});
// Page-level variables
const pageTitle = 'Variable Inspection Test Page';
const debugMode = environment === 'development';
const maxUsers = 100;
const defaultUser: User = {
id: 0,
name: 'Default User',
email: 'default@example.com',
isActive: true
};
// Complex page-level data
const pageConfig = {
features: {
variableInspection: true,
realTimeUpdates: true,
debugMode,
analytics: false
},
limits: {
maxUsers,
maxCount: 1000,
sessionTimeout: 3600000
},
api: {
baseUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
version: 'v1',
endpoints: {
users: '/api/users',
analytics: '/api/analytics',
debug: '/api/debug'
}
}
};
// Effect for page-level logic
useEffect(() => {
console.log('Variable test page mounted');
const mountData = {
timestamp: Date.now(),
userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : 'SSR',
initialUserCount: initialUsers.length,
environment
};
console.log('Page mount data:', mountData);
// Simulate some page-level processing
const processPageData = () => {
const processedUsers = initialUsers.map(user => ({
...user,
processedAt: Date.now(),
pageContext: 'variable-test'
}));
const pageStats = {
totalUsers: processedUsers.length,
activeUsers: processedUsers.filter(u => u.isActive).length,
processingTime: Date.now() - mountData.timestamp
};
console.log('Page processing completed:', { processedUsers, pageStats });
return { processedUsers, pageStats };
};
const { processedUsers, pageStats } = processPageData();
setPageMetadata(prev => ({
...prev,
processingStats: pageStats,
processedUserCount: processedUsers.length
}));
}, [initialUsers, environment]);
// Page-level handlers
const handleCountChange = (newCount: number) => {
setGlobalCount(newCount);
const updateData = {
previousCount: globalCount,
newCount,
timestamp: Date.now(),
source: 'component'
};
setPageMetadata(prev => ({
...prev,
interactions: prev.interactions + 1,
lastUpdate: new Date().toISOString(),
lastCountUpdate: updateData
}));
console.log('Global count updated:', updateData);
};
const handleAddUser = () => {
const newUser: User = {
id: Date.now(),
name: `User ${users.length + 1}`,
email: `user${users.length + 1}@example.com`,
isActive: Math.random() > 0.3
};
const addUserOperation = {
operation: 'add-user',
timestamp: Date.now(),
newUser,
previousCount: users.length
};
setUsers(prev => [...prev, newUser]);
setPageMetadata(prev => ({
...prev,
interactions: prev.interactions + 1,
lastUserOperation: addUserOperation
}));
console.log('User added:', addUserOperation);
};
const handleRemoveUser = (userId: number) => {
const userToRemove = users.find(u => u.id === userId);
const removeUserOperation = {
operation: 'remove-user',
timestamp: Date.now(),
removedUser: userToRemove,
previousCount: users.length
};
setUsers(prev => prev.filter(u => u.id !== userId));
setPageMetadata(prev => ({
...prev,
interactions: prev.interactions + 1,
lastUserOperation: removeUserOperation
}));
console.log('User removed:', removeUserOperation);
};
const handleResetData = () => {
const resetOperation = {
operation: 'reset-data',
timestamp: Date.now(),
previousState: {
userCount: users.length,
globalCount,
interactions: pageMetadata.interactions
}
};
setUsers(initialUsers);
setGlobalCount(0);
setPageMetadata(prev => ({
...prev,
interactions: 0,
lastUpdate: new Date().toISOString(),
resetOperation
}));
console.log('Data reset:', resetOperation);
};
// Complex data processing function
const generateAnalytics = () => {
const analyticsData = {
page: {
title: pageTitle,
url: typeof window !== 'undefined' ? window.location.href : 'SSR',
loadTime: pageMetadata.loadTime,
interactions: pageMetadata.interactions
},
users: {
total: users.length,
active: users.filter(u => u.isActive).length,
inactive: users.filter(u => !u.isActive).length,
averageId: users.reduce((sum, u) => sum + u.id, 0) / users.length
},
state: {
globalCount,
hasUsers: users.length > 0,
isDebugMode: debugMode
},
performance: {
renderTime: Date.now() - pageMetadata.loadTime,
memoryUsage: typeof window !== 'undefined' && (window as any).performance?.memory ? {
used: (window as any).performance.memory.usedJSHeapSize,
total: (window as any).performance.memory.totalJSHeapSize,
limit: (window as any).performance.memory.jsHeapSizeLimit
} : null
}
};
console.log('Analytics generated:', analyticsData);
return analyticsData;
};
return (
<div className="variable-test-page">
<h1>{pageTitle}</h1>
<div className="page-info">
<h2>Page Information</h2>
<p>Environment: {environment}</p>
<p>Server Timestamp: {serverTimestamp}</p>
<p>Global Count: {globalCount}</p>
<p>Total Users: {users.length}</p>
<p>Page Interactions: {pageMetadata.interactions}</p>
<p>Debug Mode: {debugMode ? 'Enabled' : 'Disabled'}</p>
</div>
<div className="page-controls">
<h2>Page Controls</h2>
<button onClick={handleAddUser}>Add User</button>
<button onClick={handleResetData}>Reset Data</button>
<button onClick={generateAnalytics}>Generate Analytics</button>
</div>
<div className="users-management">
<h2>Users Management</h2>
{users.map(user => (
<div key={user.id} className="user-item">
<span>{user.name} - {user.email} ({user.isActive ? 'Active' : 'Inactive'})</span>
<button onClick={() => handleRemoveUser(user.id)}>Remove</button>
</div>
))}
</div>
<div className="component-section">
<h2>Variable Test Component</h2>
<VariableTestComponent
initialCount={globalCount}
users={users}
onCountChange={handleCountChange}
/>
</div>
<div className="debug-section">
<h2>Debug Information</h2>
<details>
<summary>Page Configuration</summary>
<pre>{JSON.stringify(pageConfig, null, 2)}</pre>
</details>
<details>
<summary>Page Metadata</summary>
<pre>{JSON.stringify(pageMetadata, null, 2)}</pre>
</details>
<details>
<summary>Current Users</summary>
<pre>{JSON.stringify(users, null, 2)}</pre>
</details>
</div>
</div>
);
};
export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {
// Server-side variables for testing
const serverStartTime = Date.now();
const environment = process.env.NODE_ENV || 'development';
const requestInfo = {
url: context.req.url,
userAgent: context.req.headers['user-agent'],
timestamp: serverStartTime
};
// Simulate server-side data fetching
const fetchUsers = async (): Promise<User[]> => {
const serverUsers: User[] = [
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', isActive: true },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', isActive: false },
{ id: 3, name: 'Charlie Brown', email: 'charlie@example.com', isActive: true },
{ id: 4, name: 'Diana Prince', email: 'diana@example.com', isActive: true },
{ id: 5, name: 'Edward Norton', email: 'edward@example.com', isActive: false }
];
// Simulate async processing
await new Promise(resolve => setTimeout(resolve, 100));
const processedUsers = serverUsers.map(user => ({
...user,
serverProcessedAt: Date.now(),
requestId: Math.random().toString(36).substring(2, 11)
}));
console.log('Server-side users fetched:', { requestInfo, processedUsers });
return processedUsers;
};
const initialUsers = await fetchUsers();
const serverEndTime = Date.now();
const serverProcessingTime = serverEndTime - serverStartTime;
const serverMetadata = {
processingTime: serverProcessingTime,
userCount: initialUsers.length,
environment,
timestamp: new Date().toISOString()
};
console.log('Server-side props generated:', serverMetadata);
return {
props: {
initialUsers,
serverTimestamp: new Date().toISOString(),
environment
}
};
};
export default VariableTestPage;
