fix: add console warning for corrupt sessionStorage data

Author: dil-asomlai

src/__tests__/TodoContext.test.tsx

@@ -33,6 +33,9 @@ const TestComponent = () => {
 };
 
 describe('TodoContext', () => {
+  afterEach(() => {
+    window.sessionStorage.clear();
+  });
   it('provides empty todos array initially', () => {
     render(
       <TodoProvider>

src/__tests__/sessionStorage.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TodoProvider } from '../contexts/TodoContext';
+import { useTodo } from '../hooks/useTodo';
+
+const STORAGE_KEY = 'todos';
+
+afterEach(() => {
+  window.sessionStorage.clear();
+});
+
+const TestComponent = () => {
+  const { todos, addTodo } = useTodo();
+  return (
+    <div>
+      <button data-testid="add" onClick={() => addTodo('Persisted', 'desc')}>
+        add
+      </button>
+      <div data-testid="count">{todos.length}</div>
+    </div>
+  );
+};
+
+describe('sessionStorage integration', () => {
+  it('hydrates from sessionStorage when valid data present', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify([
+        {
+          id: '1',
+          title: 'stored',
+          description: 'desc',
+          completed: false,
+          createdAt: new Date().toISOString(),
+        },
+      ])
+    );
+
+    render(
+      <TodoProvider>
+        <TestComponent />
+      </TodoProvider>
+    );
+
+    expect(screen.getByTestId('count').textContent).toBe('1');
+  });
+
+  it('falls back to empty array when corrupt JSON', () => {
+    window.sessionStorage.setItem(STORAGE_KEY, 'not-json');
+    render(
+      <TodoProvider>
+        <TestComponent />
+      </TodoProvider>
+    );
+
+    expect(screen.getByTestId('count').textContent).toBe('0');
+  });
+
+  it('persists todos on change', async () => {
+    const user = userEvent.setup();
+    render(
+      <TodoProvider>
+        <TestComponent />
+      </TodoProvider>
+    );
+
+    await user.click(screen.getByTestId('add'));
+
+    await waitFor(() => {
+      const stored = JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '[]');
+      expect(stored.length).toBe(1);
+    });
+  });
+});

src/contexts/TodoContext.tsx

@@ -1,11 +1,58 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { Todo } from '../types/Todo';
 import { v4 as uuidv4 } from 'uuid';
 import { TodoContext } from './TodoContextType';
+import { loadTodos, saveTodos } from '../utils/sessionStorage';
 
+/**
+ * Provider responsible for Todo state management.
+ * Adds sessionStorage hydration / persistence with basic error handling.
+ */
 export const TodoProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [todos, setTodos] = useState<Todo[]>([]);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
 
+  // -----------------------
+  // Hydrate from sessionStorage on mount
+  // -----------------------
+  useEffect(() => {
+    const initial = loadTodos();
+    if (initial.length) {
+      setTodos(initial);
+    }
+  }, []);
+
+  // -----------------------
+  // Persist to sessionStorage on every change
+  // -----------------------
+  useEffect(() => {
+    const { ok, error } = saveTodos(todos);
+    if (!ok && error) {
+      /* eslint-disable-next-line no-console */
+      console.warn('Failed to persist todos to sessionStorage:', error);
+      if (
+        (error as { name?: string; code?: number })?.name === 'QuotaExceededError' ||
+        (error as { name?: string; code?: number })?.code === 22 ||
+        (error as { name?: string; code?: number })?.code === 1014 // Firefox
+      ) {
+        triggerToast('Storage quota exceeded – your latest changes may not be saved.');
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [todos]);
+
+  // -----------------------
+  // Toast helpers
+  // -----------------------
+  const triggerToast = (message: string) => {
+    setToastMessage(message);
+    // Auto-dismiss after 4s
+    setTimeout(() => setToastMessage(null), 4000);
+  };
+
+  // -----------------------
+  // CRUD helpers
+  // -----------------------
   const addTodo = (title: string, description: string) => {
     const newTodo: Todo = {
       id: uuidv4(),
@@ -14,24 +61,44 @@ export const TodoProvider: React.FC<{ children: React.ReactNode }> = ({ children
       completed: false,
       createdAt: new Date(),
     };
-    setTodos([...todos, newTodo]);
+    setTodos(prev => [...prev, newTodo]);
   };
 
   const editTodo = (id: string, updates: Partial<Todo>) => {
-    setTodos(todos.map(todo => (todo.id === id ? { ...todo, ...updates } : todo)));
+    setTodos(prev => prev.map(todo => (todo.id === id ? { ...todo, ...updates } : todo)));
   };
 
   const toggleTodoCompletion = (id: string) => {
-    setTodos(todos.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo)));
+    setTodos(prev =>
+      prev.map(todo => (todo.id === id ? { ...todo, completed: !todo.completed } : todo))
+    );
   };
 
   const deleteTodo = (id: string) => {
-    setTodos(todos.filter(todo => todo.id !== id));
+    setTodos(prev => prev.filter(todo => todo.id !== id));
   };
 
   return (
     <TodoContext.Provider value={{ todos, addTodo, editTodo, toggleTodoCompletion, deleteTodo }}>
       {children}
+      {toastMessage && (
+        <div
+          role="alert"
+          style={{
+            position: 'fixed',
+            bottom: '1rem',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: '#333',
+            color: '#fff',
+            padding: '0.75rem 1rem',
+            borderRadius: '4px',
+            zIndex: 9999,
+          }}
+        >
+          {toastMessage}
+        </div>
+      )}
     </TodoContext.Provider>
   );
 };

src/utils/sessionStorage.ts

@@ -0,0 +1,51 @@
+import type { Todo } from '../types/Todo';
+
+const STORAGE_KEY = 'todos';
+
+export const isValidTodos = (data: unknown): data is Todo[] => {
+  if (!Array.isArray(data)) return false;
+  return data.every(
+    item =>
+      item &&
+      typeof item.id === 'string' &&
+      typeof item.title === 'string' &&
+      typeof item.description === 'string' &&
+      typeof item.completed === 'boolean' &&
+      // createdAt may be Date object or ISO string
+      (item.createdAt instanceof Date || typeof item.createdAt === 'string')
+  );
+};
+
+export const loadTodos = (): Todo[] => {
+  if (typeof window === 'undefined') return [];
+  try {
+    const raw = window.sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!isValidTodos(parsed)) {
+      window.sessionStorage.removeItem(STORAGE_KEY);
+      return [];
+    }
+    // Map createdAt strings to Date objects
+    return parsed.map(item => ({
+      ...item,
+      createdAt: item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt),
+    }));
+  } catch (error) {
+    /* eslint-disable-next-line no-console */
+    console.warn('Failed to parse todos from sessionStorage:', error);
+    // Corrupt JSON, clear storage
+    window.sessionStorage.removeItem(STORAGE_KEY);
+    return [];
+  }
+};
+
+export const saveTodos = (todos: Todo[]): { ok: boolean; error?: Error } => {
+  if (typeof window === 'undefined') return { ok: true };
+  try {
+    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+    return { ok: true };
+  } catch (err: unknown) {
+    return { ok: false, error: err as Error };
+  }
+};