Merge pull request #23 from damjan1996/auto-claude/004-add-uselocalstorage-custom-hook
auto-claude: 004-add-uselocalstorage-custom-hook
This commit is contained in:
Damjan Savic
@@ -0,0 +1,186 @@
|
||||
'use client';
|
||||
|
||||
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface UserSettings {
|
||||
theme: 'light' | 'dark';
|
||||
notifications: boolean;
|
||||
language: string;
|
||||
}
|
||||
|
||||
export default function TestLocalStoragePage() {
|
||||
// Test 1: Simple string value
|
||||
const [name, setName, removeName] = useLocalStorage('test-name', 'Guest');
|
||||
|
||||
// Test 2: Complex object
|
||||
const [settings, setSettings, removeSettings] = useLocalStorage<UserSettings>(
|
||||
'test-settings',
|
||||
{
|
||||
theme: 'light',
|
||||
notifications: true,
|
||||
language: 'en',
|
||||
}
|
||||
);
|
||||
|
||||
// Test 3: Array
|
||||
const [items, setItems, removeItems] = useLocalStorage<string[]>('test-items', []);
|
||||
|
||||
// Test 4: Number
|
||||
const [count, setCount, removeCount] = useLocalStorage('test-count', 0);
|
||||
|
||||
const [newItem, setNewItem] = useState('');
|
||||
|
||||
return (
|
||||
<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1>useLocalStorage Hook Test Page</h1>
|
||||
<p style={{ color: '#666', marginBottom: '2rem' }}>
|
||||
Open DevTools (F12) → Application → Local Storage to see values update in real-time.
|
||||
Refresh the page to verify persistence.
|
||||
</p>
|
||||
|
||||
{/* Test 1: String */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 1: String Value</h2>
|
||||
<p>Current Name: <strong>{name}</strong></p>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter your name"
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
/>
|
||||
<button onClick={() => removeName()} style={{ padding: '0.5rem' }}>
|
||||
Reset
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-name</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 2: Complex Object */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 2: Complex Object</h2>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<p>Theme: <strong>{settings.theme}</strong></p>
|
||||
<button
|
||||
onClick={() => setSettings((prev) => ({ ...prev, theme: prev.theme === 'light' ? 'dark' : 'light' }))}
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
>
|
||||
Toggle Theme
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.notifications}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, notifications: e.target.checked }))}
|
||||
/>
|
||||
{' '}Enable Notifications
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<label>Language: </label>
|
||||
<select
|
||||
value={settings.language}
|
||||
onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
|
||||
style={{ padding: '0.5rem' }}
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="de">German</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
</div>
|
||||
<button onClick={() => removeSettings()} style={{ padding: '0.5rem' }}>
|
||||
Reset Settings
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-settings</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 3: Array */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 3: Array Value</h2>
|
||||
<p>Items ({items.length}):</p>
|
||||
<ul style={{ minHeight: '60px' }}>
|
||||
{items.map((item, index) => (
|
||||
<li key={index}>
|
||||
{item}{' '}
|
||||
<button
|
||||
onClick={() => setItems((prev) => prev.filter((_, i) => i !== index))}
|
||||
style={{ padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={newItem}
|
||||
onChange={(e) => setNewItem(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter' && newItem.trim()) {
|
||||
setItems((prev) => [...prev, newItem.trim()]);
|
||||
setNewItem('');
|
||||
}
|
||||
}}
|
||||
placeholder="Add new item"
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (newItem.trim()) {
|
||||
setItems((prev) => [...prev, newItem.trim()]);
|
||||
setNewItem('');
|
||||
}
|
||||
}}
|
||||
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||
>
|
||||
Add Item
|
||||
</button>
|
||||
<button onClick={() => removeItems()} style={{ padding: '0.5rem' }}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-items</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Test 4: Number */}
|
||||
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2>Test 4: Number Value</h2>
|
||||
<p>Count: <strong>{count}</strong></p>
|
||||
<button onClick={() => setCount((prev) => prev + 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||
Increment
|
||||
</button>
|
||||
<button onClick={() => setCount((prev) => prev - 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||
Decrement
|
||||
</button>
|
||||
<button onClick={() => removeCount()} style={{ padding: '0.5rem' }}>
|
||||
Reset
|
||||
</button>
|
||||
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||
localStorage key: <code>test-count</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
|
||||
<h3>Verification Checklist:</h3>
|
||||
<ul>
|
||||
<li>✓ Open DevTools → Application → Local Storage → http://localhost:3000</li>
|
||||
<li>✓ Interact with the controls above and watch localStorage update in real-time</li>
|
||||
<li>✓ Refresh the page (F5) - all values should persist</li>
|
||||
<li>✓ Check Console for hydration errors (there should be none)</li>
|
||||
<li>✓ Check Console for any errors (there should be none)</li>
|
||||
<li>✓ Verify TypeScript has no errors in your editor</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user