Update App.js

react-redux-master/src/actions/index.js

@@ -1 +1,9 @@
 //actions
+const increment = (val) => {
+    return {
+        type : 'INCREMENT',
+        inc : val
+    }
+}
+
+export default increment;

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;

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;

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;

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();

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;

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;