From 0a3f68388f096f4c9f9b7a668ea357987436f831 Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:14:34 -0400
Subject: [PATCH 1/8] Update App.js

updated code
---
 todo_list/src/App.js | 116 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 103 insertions(+), 13 deletions(-)

diff --git a/todo_list/src/App.js b/todo_list/src/App.js
index 220a997d1c..76ed97e434 100644
--- a/todo_list/src/App.js
+++ b/todo_list/src/App.js
@@ -1,28 +1,118 @@
-import React, {useState} from "react";
+import React, {useState,useEffect} from "react";
 import "./App.css";
 const App = () => {
-  const [todos, setTodos] = useState([]);
+  const [todos, setTodos] = useState([])
+  const [todoEditing, setTodoEditing] = useState(null);
+
+  useEffect(() => {
+    const json = localStorage.getItem("todos");
+    const loadedTodos = JSON.parse(json);
+    if (loadedTodos) {
+      setTodos(loadedTodos);
+    }
+  }, []);
+
+useEffect(() => {
+    if(todos.length > 0) {
+        const json = JSON.stringify(todos);
+        localStorage.setItem("todos", json);
+    }
+  }, [todos]);
   
   // Add the handlesubmit code here
-  
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    let todo = document.getElementById('todoAdd').value
+    const newTodo = {
+      id: new Date().getTime(),
+      text: todo.trim(),
+      completed: false,
+    };
+    if (newTodo.text.length > 0 ) {
+        setTodos([...todos].concat(newTodo));
+    } else {
+
+        alert("Enter Valid Task");
+    }
+    document.getElementById('todoAdd').value = ""
+  }
   
   // Add the deleteToDo code here
-
+  function deleteTodo(id) {
+    let updatedTodos = [...todos].filter((todo) => todo.id !== id);
+    setTodos(updatedTodos);
+  }
   
   // Add the toggleComplete code here
-
+  function toggleComplete(id) {
+    let updatedTodos = [...todos].map((todo) => {
+      if (todo.id === id) {
+        todo.completed = !todo.completed;
+      }
+      return todo;
+    });
+    setTodos(updatedTodos);
+  }
   
   // Add the submitEdits code here
-
+  function submitEdits(newtodo) {
+    const updatedTodos = [...todos].map((todo) => {
+      if (todo.id === newtodo.id) {
+        todo.text = document.getElementById(newtodo.id).value;
+        }
+        return todo;
+      });
+      setTodos(updatedTodos);
+      setTodoEditing(null);
+    }
   
 return(
-<div className ="App">
-<h1>Todo List</h1>
-<form>
-<input type ="text" align ="right" id= 'todoAdd'/>
-<button type ="submit">Add Todo</button>
-</form>
-</div>
+    <div id="todo-list">
+    <h1>Todo List</h1>
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        id = 'todoAdd'
+      />
+      <button type="submit">Add Todo</button>
+    </form>
+  {todos.map((todo) => (
+
+    <div key={todo.id} className="todo">
+      <div className="todo-text">
+        {/* Add checkbox for toggle complete */}
+        <input
+          type="checkbox"
+          id="completed"
+          checked={todo.completed}
+          onChange={() => toggleComplete(todo.id)}
+        />
+        {/* if it is edit mode, display input box, else display text */}
+        {todo.id === todoEditing ?
+          (<input
+            type="text"
+            id = {todo.id}
+            defaultValue={todo.text}
+          />) :
+          (<div>{todo.text}</div>)
+        }
+      </div>
+      <div className="todo-actions">
+        {/* if it is edit mode, allow submit edit, else allow edit */}
+        {todo.id === todoEditing ?
+        (
+          <button onClick={() => submitEdits(todo)}>Submit Edits</button>
+        ) :
+        (
+          <button onClick={() => setTodoEditing(todo.id)}>Edit</button>
+        )}
+
+        <button onClick={() => deleteTodo(todo.id)}>Delete</button>
+       </div>
+    </div>
+  ))}
+  </div>
 );
 };
 export default App;

From 4dfedd803f435bd8b8844998a723f4d7c54a5282 Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:23:05 -0400
Subject: [PATCH 2/8] Update index.js

---
 react-redux-master/src/index.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/react-redux-master/src/index.js b/react-redux-master/src/index.js
index 204055290e..68af812a47 100644
--- a/react-redux-master/src/index.js
+++ b/react-redux-master/src/index.js
@@ -1,12 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-// import * as serviceWorker from './serviceWorker';
-
-import {createStore} from 'redux';
 import {Provider} from 'react-redux'
 import myReducers from './reducers'
-
+import {legacy_createStore as createStore} from 'redux';;
 
 //Create the store
 const myStore = createStore(myReducers);
@@ -17,8 +14,3 @@ myStore.subscribe(()=>console.log(myStore.getState()));
 //Enveloping the App inside the Provider, ensures that the states in the store are available
 //throughout the application
 ReactDOM.render(<Provider store={myStore}><App/></Provider>, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-// serviceWorker.unregister();

From 487bcbe5d4ddbd40d6975bb9b2b322468a3807f9 Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:23:22 -0400
Subject: [PATCH 3/8] Update App.js


From 2c9602681f57db3a71ec6292e5f6bdb32b30dc32 Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:23:53 -0400
Subject: [PATCH 4/8] Update MainPanel.js

---
 react-redux-master/src/components/MainPanel.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/react-redux-master/src/components/MainPanel.js b/react-redux-master/src/components/MainPanel.js
index 8b13789179..dff43de7ff 100644
--- a/react-redux-master/src/components/MainPanel.js
+++ b/react-redux-master/src/components/MainPanel.js
@@ -1 +1,13 @@
+import React from 'react'
+import MyButton from './MyButton'
+import DivPanel from './DivPanel';
 
+const MainPanel = ()=>{
+    return (
+        <div>
+            This is main panel <MyButton></MyButton>
+            <DivPanel></DivPanel>
+        </div>
+    );
+}
+export default MainPanel;

From abfa93c17919c4deab81d464e67056d524b57dda Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:24:18 -0400
Subject: [PATCH 5/8] Update DivPanel.js

---
 react-redux-master/src/components/DivPanel.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/react-redux-master/src/components/DivPanel.js b/react-redux-master/src/components/DivPanel.js
index 8b13789179..253611c632 100644
--- a/react-redux-master/src/components/DivPanel.js
+++ b/react-redux-master/src/components/DivPanel.js
@@ -1 +1,13 @@
+import React from 'react'
+import { useSelector } from 'react-redux';
 
+const DivPanel = () =>{
+    let counterVal = useSelector(state => state.counter)
+    return (
+        <div>
+            The present value of counter is {counterVal}
+        </div>
+    );
+}
+
+export default DivPanel;

From 5debffa951ead0a11fcb19b1751df7434d146adb Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:25:14 -0400
Subject: [PATCH 6/8] Update MyButton.js

---
 react-redux-master/src/components/MyButton.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/react-redux-master/src/components/MyButton.js b/react-redux-master/src/components/MyButton.js
index 8b13789179..69fa68945b 100644
--- a/react-redux-master/src/components/MyButton.js
+++ b/react-redux-master/src/components/MyButton.js
@@ -1 +1,12 @@
+import React from 'react'
+import { useDispatch} from 'react-redux';
+import increment from '../actions'
 
+const MyButton = ()=>{
+    let dispatch = useDispatch();
+    return (
+        <button onClick={()=>dispatch(increment(1))}>Increase counter</button>
+    );
+}
+
+export default MyButton;

From 7c0187021b458ddd99f0812f3788e86511ffecfc Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:26:15 -0400
Subject: [PATCH 7/8] Update index.js

---
 react-redux-master/src/reducers/index.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/react-redux-master/src/reducers/index.js b/react-redux-master/src/reducers/index.js
index f30c2c56b8..de79eefab6 100644
--- a/react-redux-master/src/reducers/index.js
+++ b/react-redux-master/src/reducers/index.js
@@ -1 +1,15 @@
 //reducers
+import {combineReducers} from 'redux'
+
+const counter = (state=0,action)=>{
+    if(action.type === 'INCREMENT') {
+        //This will increase the value of counter by the value passed to the increment method
+        return state+action.inc;
+    }
+    //Returns the current value of the counter
+    return state;
+}
+
+const myReducers = combineReducers({counter});
+
+export default myReducers;

From e52e38b283d271f012def0bb7b49de4c44b7937e Mon Sep 17 00:00:00 2001
From: Mohammad Saad Baig <144740229+MSaadB@users.noreply.github.com>
Date: Mon, 10 Jun 2024 13:27:06 -0400
Subject: [PATCH 8/8] Update index.js

---
 react-redux-master/src/actions/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/react-redux-master/src/actions/index.js b/react-redux-master/src/actions/index.js
index 14420cb6c6..735ad00a70 100644
--- a/react-redux-master/src/actions/index.js
+++ b/react-redux-master/src/actions/index.js
@@ -1 +1,9 @@
 //actions
+const increment = (val) => {
+    return {
+        type : 'INCREMENT',
+        inc : val
+    }
+}
+
+export default increment;