Merge pull request #16 from michaela9/7-persisted-history

create persisted items with custom useLocalStorage hook

src/app/hooks/useItemsStore.ts

@@ -1,21 +1,21 @@
 'use client';
 
-import { useState } from 'react';
+import { useLocalStorage } from './useLocalStorage';
 
 export type TodoItem = {
 	content: string;
 	isDone: boolean;
 	id: number;
 };
 
-const defaultItems = [
+export const defaultItems = [
 	{ content: 'Feed a dog', id: 1, isDone: true },
 	{ content: 'Pick up kids from school', id: 2, isDone: false },
 	{ content: 'Water plants', id: 3, isDone: false },
 ];
 
 export function useItemsStore() {
-	const [items, setItems] = useState<TodoItem[]>(defaultItems);
+	const [items, setItems] = useLocalStorage('items', defaultItems);
 
 	const addItem = (content: string) => {
 		setItems(

src/app/hooks/useLocalStorage.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
+import { TodoItem } from './useItemsStore';
+
+function getInitialValue(key: string, defaultItems: TodoItem[]) {
+	try {
+		const item = localStorage.getItem(key);
+
+		return item ? JSON.parse(item) : defaultItems;
+	} catch {
+		return [];
+	}
+}
+
+export function useLocalStorage(key: string, defaultItems: TodoItem[]) {
+	const [value, setValue] = useState<TodoItem[]>(
+		getInitialValue(key, defaultItems),
+	);
+
+	const storeValue = (items: TodoItem[]) => {
+		setValue(items);
+		localStorage.setItem(key, JSON.stringify(items));
+	};
+
+	return [value, storeValue] as const;
+}

src/app/page.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { Background } from './branding/background';
 import { AddItem } from './components/add-item';
-import { useItemsStore } from './hooks/useItemsStore';
 import { Header } from './components/header';
 import { ItemsList } from './components/items-list';
-import { Background } from './branding/background';
+import { useItemsStore } from './hooks/useItemsStore';
 
 export default function TodoList() {
 	const { items, addItem, toggleItem, deleteItem } = useItemsStore();

test/todo-list.test.tsx

@@ -5,6 +5,10 @@ import userEvent from '@testing-library/user-event';
 import TodoList from '../src/app/page';
 import { useItemsStore } from '../src/app/hooks/useItemsStore';
 
+afterEach(() => {
+	localStorage.clear();
+});
+
 it('should append new item at the end of the list by clicking the button', async () => {
 	render(<TodoList />);