Feature/realtime api violations

src/app/testPage/UserList.js

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+
+export default function UserList() {
+	const [users, setUsers] = useState([]);
+	const [selectedUser, setSelectedUser] = useState(null);
+	const [searchTerm, setSearchTerm] = useState('');
+	const [isVisible, setIsVisible] = useState(true);
+	const [timer, setTimer] = useState(null);
+
+	useEffect(() => {
+		fetchUsers();
+		const interval = setInterval(() => {
+			console.log('Component is still mounted');
+		}, 1000);
+		setTimer(interval);
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			if (timer) clearInterval(timer);
+		};
+	}, []);
+
+	const fetchUsers = async () => {
+		try {
+			const response = await fetch('https://jsonplaceholder.typicode.com/users');
+			const data = await response.json();
+			setUsers(data);
+		} catch (error) {
+			console.log('Failed to fetch users:', error);
+		}
+	};
+
+	const handleUserSelect = user => {
+		setSelectedUser(user);
+		document.title = `Selected: ${user.name}`;
+	};
+
+	const filteredUsers = users.filter(user =>
+		user.name.toLowerCase().includes(searchTerm.toLowerCase())
+	);
+
+	const toggleVisibility = () => {
+		setIsVisible(!isVisible);
+	};
+
+	const addUser = () => {
+		const newUser = {
+			id: users.length + 1,
+			name: 'New User',
+			email: '[email protected]',
+		};
+		setUsers([...users, newUser]);
+	};
+
+	if (!isVisible) return <button onClick={toggleVisibility}>Show Users</button>;
+
+	return (
+		<div>
+			<h2>Users List</h2>
+			<input
+				type='text'
+				placeholder='Search users...'
+				value={searchTerm}
+				onChange={e => setSearchTerm(e.target.value)}
+			/>
+			<button onClick={addUser}>Add User</button>
+			<button onClick={toggleVisibility}>Hide Users</button>
+
+			<div>
+				{filteredUsers.map(user => (
+					<div onClick={() => handleUserSelect(user)}>
+						<h3>{user.name}</h3>
+						<p>{user.email}</p>
+					</div>
+				))}
+			</div>
+
+			{selectedUser && (
+				<div>
+					<h3>Selected User Details</h3>
+					<p>Name: {selectedUser.name}</p>
+					<p>Email: {selectedUser.email}</p>
+					<p>Phone: {selectedUser.phone}</p>
+				</div>
+			)}
+		</div>
+	);
+}

src/app/testPage/anyPage.js

@@ -1,7 +1,100 @@
+import { useState, useEffect } from 'react';
+
 export default function AnyPage() {
-  return (
-    <div>
-      <h1>Any Page</h1>
-    </div>
-  );
+	const [posts, setPosts] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [selectedPost, setSelectedPost] = useState(null);
+	const [filter, setFilter] = useState('');
+	const unusedState = useState('');
+	const unusedVariable = 'never used';
+
+	useEffect(() => {
+		fetchPosts();
+	}, []);
+
+	const fetchPosts = async () => {
+		setLoading(true);
+		try {
+			const response = await fetch('https://jsonplaceholder.typicode.com/posts');
+			const data = await response.json();
+			setPosts(data);
+			document.getElementById('post-count').innerHTML = `Total Posts: ${data.length}`;
+		} catch (err) {
+			console.log('Error fetching posts:', err);
+			setError(err.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handlePostClick = post => {
+		setSelectedPost(post);
+		console.log('Post clicked:', post.title);
+	};
+
+	const handleDelete = id => {
+		const updatedPosts = posts.filter(post => post.id !== id);
+		setPosts(updatedPosts);
+		alert('Post deleted!');
+	};
+
+	const filteredPosts = posts.filter(post =>
+		post.title.toLowerCase().includes(filter.toLowerCase())
+	);
+
+	const renderPost = post => {
+		return (
+			<div onClick={() => handlePostClick(post)}>
+				<h3>{post.title}</h3>
+				<p>{post.body}</p>
+				<button
+					onClick={e => {
+						e.stopPropagation();
+						handleDelete(post.id);
+					}}
+				>
+					Delete
+				</button>
+			</div>
+		);
+	};
+
+	const addNewPost = () => {
+		const newPost = {
+			id: posts.length + 1,
+			title: 'New Post',
+			body: 'This is a new post',
+		};
+		setPosts([...posts, newPost]);
+	};
+
+	if (loading) return <div>Loading...</div>;
+	if (error) return <div>Error: {error}</div>;
+
+	return (
+		<div>
+			<h1>Posts from JSONPlaceholder</h1>
+			<div id='post-count'></div>
+
+			<input
+				type='text'
+				placeholder='Filter posts...'
+				value={filter}
+				onChange={e => setFilter(e.target.value)}
+			/>
+
+			<button onClick={addNewPost}>Add New Post</button>
+
+			<div>{filteredPosts.map(post => renderPost(post))}</div>
+
+			{selectedPost && (
+				<div>
+					<h2>Selected Post</h2>
+					<h3>{selectedPost.title}</h3>
+					<p>{selectedPost.body}</p>
+				</div>
+			)}
+		</div>
+	);
 }

src/app/testPage/page.js

@@ -1,7 +1,39 @@
+import AnyPage from './anyPage';
+import UserList from './UserList';
+import { useState } from 'react';
+
 export default function TestPage() {
-  return (
-    <div>
-      <h1>Test Page</h1>
-    </div>
-  );
+	const [activeTab, setActiveTab] = useState('posts');
+	const [theme, setTheme] = useState('light');
+	const unusedVar = 'not used';
+
+	const handleTabChange = tab => {
+		setActiveTab(tab);
+		console.log('Tab changed to:', tab);
+	};
+
+	const toggleTheme = () => {
+		setTheme(theme === 'light' ? 'dark' : 'light');
+		document.body.style.backgroundColor = theme === 'light' ? '#333' : '#fff';
+	};
+
+	const renderContent = () => {
+		if (activeTab === 'posts') {
+			return <AnyPage />;
+		} else if (activeTab === 'users') {
+			return <UserList />;
+		}
+	};
+
+	return (
+		<div>
+			<nav>
+				<button onClick={() => handleTabChange('posts')}>Posts</button>
+				<button onClick={() => handleTabChange('users')}>Users</button>
+				<button onClick={toggleTheme}>Toggle Theme</button>
+			</nav>
+
+			<main>{renderContent()}</main>
+		</div>
+	);
 }