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; 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 ( +
+ The present value of counter is {counterVal} +
+ ); +} + +export default DivPanel; 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 ( +
+ This is main panel + +
+ ); +} +export default MainPanel; 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 ( + + ); +} + +export default MyButton; 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(, 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(); 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; 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( -
-

Todo List

-
- - -
-
+
+

Todo List

+
+ + +
+ {todos.map((todo) => ( + +
+
+ {/* Add checkbox for toggle complete */} + toggleComplete(todo.id)} + /> + {/* if it is edit mode, display input box, else display text */} + {todo.id === todoEditing ? + () : + (
{todo.text}
) + } +
+
+ {/* if it is edit mode, allow submit edit, else allow edit */} + {todo.id === todoEditing ? + ( + + ) : + ( + + )} + + +
+
+ ))} +
); }; export default App;