From 7175b7d3a7c0e5adbdeecd6a6647c4c248f61ab5 Mon Sep 17 00:00:00 2001
From: Zain Sra <m.zain.ul.islam@gmail.com>
Date: Sun, 23 Jan 2022 20:43:21 +0000
Subject: [PATCH] Todo Example (Add Todo)

---
 src/index.js | 57 +++++++++++++++++++++++++++++++---------------------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/index.js b/src/index.js
index 39abe30..ca88c5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import {useRef} from 'react';
 import { combineReducers } from './combinedReducers';
 import {  createStore   } from './createStore';
 import ReactDOM from 'react-dom';
@@ -51,24 +52,40 @@ const visibilityFilter = (state = "SHOW_ALL", action) => {
   }
 }
 
-const todoAppReducer = combineReducers({todos,visibilityFilter});
+const todoApp = combineReducers({todos,visibilityFilter});
 
-const TodoApp = ({todos, visibilityFilter, addTodoHandler, toggleTodoHandler}) => (
-  <div>
-    <ul>
-      {todos.map(todo => 
-      <div>
-        <li key={todo.id}>
-          {todo.completed? <strike>{todo.text}</strike> : todo.text}
-        </li>
-      </div>
-      )}
-    </ul>
-    <button onClick={addTodoHandler}>ADD_TODO</button>
-  </div>
-) 
+const store = createStore(todoApp);
+
+let nextTodoId = 0;
+
+const TodoApp = ({todos}) => {
+  const inputEl = useRef(null);
+  return(
+    <div>
+      <input ref={inputEl} type="text" />
+      <ul>
+        {todos.map(todo => 
+        <div>
+          <li key={todo.id}>
+            {todo.completed? <strike>{todo.text}</strike> : todo.text}
+          </li>
+        </div>
+        )}
+      </ul>
+      <button onClick={() => {
+        if(inputEl.current.value !== ''){
+          store.dispatch({
+            type: ADD_TODO,
+            id: nextTodoId++,
+            text: inputEl.current.value
+          })
+          inputEl.current.value = '';
+        }
+      }}>
+      ADD TODO</button>
+    </div>
+)};
 
-const store = createStore(todoAppReducer);
 
 let todoId = 0;
 
@@ -76,13 +93,7 @@ const render = () => ReactDOM.render(
   <React.StrictMode>
     <TodoApp 
     todos={store.getState().todos} 
-    visibilityFilter={store.getState().visibilityFilter} 
-    addTodoHandler={()=> store.dispatch({
-      type: ADD_TODO,
-      id: todoId++,
-      text: 'New_TODO'
-    })}
-     />
+    />
   </React.StrictMode>,
   document.getElementById('root')
 );