Merge branch 'develop'

eren-the-coder · eren-the-coder · commit f36fc443afad · 2025-08-17T01:36:13.000+01:00
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo List TS</title>
+    <title>MyTodo</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/App.css b/src/App.css
@@ -86,10 +86,15 @@ hr {
   border-top: 1px solid #d1d5db;
 }
 
+hr+p {
+  font-style: italic;
+  text-align: center;
+}
+
 li {
   list-style-type: none;
   background: #f8f9fa;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.2rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   color: #222;
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,7 @@
-import { useReducer, useState } from 'react'
+import { useEffect, useReducer, useState } from 'react'
 import './App.css'
+
+const TODOS_STORAGE_KEY = 'todos'
 interface Task {
   id?: number;
   text: string;
@@ -12,9 +14,22 @@ const App = () => {
   const [text, setText] = useState('');
   const [todos, dispatch] = useReducer(reducer, initialState)
 
+  useEffect(() => {
+    const loadedTasks = loadTasks();
+    if (loadedTasks.length > 0) {
+      loadedTasks.forEach(task => {
+        dispatch({ type: "ADD_TASK", text: task.text, done: task.done, id: task.id })
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos))
+  }, [todos])
+
   const handleAddTask = () => {
     if (!text) return
-    dispatch({ type: 'ADD_TASK', value: text })
+    dispatch({ type: 'ADD_TASK', text: text })
     setText('');
   }
 
@@ -34,6 +49,7 @@ const App = () => {
 
       <hr />
 
+      {todos.length === 0 && <p>No tasks found</p>}
       <ul>
         {todos.map(task => (
           <li key={task.id} >
@@ -62,23 +78,36 @@ const App = () => {
 export default App
 
 type Action = 
-  | { type: 'ADD_TASK', value: string }
+  | { type: 'ADD_TASK', text: string, done?: boolean, id?: number }
   | { type: 'DELETE_TASK', id: number }
   | { type: 'TOGGLE_TASK', id: number }
 
 const reducer = (state: Task[], action: Action) => {
   switch (action.type) {
 
   case 'ADD_TASK':
-    return [...state, { id: Date.now(), text: action.value, done: false }]
+    return [...state, {
+      id: action.id ?? Date.now(),
+      text: action.text,
+      done: action.done ?? false
+    }]
 
   case 'DELETE_TASK':
     return state.filter(task => task.id !== action.id)
 
   case 'TOGGLE_TASK':
-    return state.map(task => (task.id === action.id) ? { ...task, done: !task.done } : task)
+    return state.map(task => (
+      task.id === action.id) ? { ...task, done: !task.done } : task)
 
   default:
     return state
   }
 }
+
+const loadTasks = (): Task[] => {
+  const savedTasks = localStorage.getItem(TODOS_STORAGE_KEY)
+  if (savedTasks) {
+    return JSON.parse(savedTasks)
+  }
+  return []
+}
