Extracting Presentational Components from TodoApp

zainsra7 · Jan 24, 2022 · 208bf8c · 208bf8c
1 parent 191fdea
commit 208bf8c
Showing 1 changed file with 86 additions and 45 deletions.
diff --git a/src/index.js b/src/index.js
@@ -59,25 +59,38 @@ const visibilityFilter = (state = SHOW_ALL, action) => {
 const FilterLink = ({
   filter, 
   children,
-  currentFilter
+  currentFilter,
+  onClick
 }) => {
   if(filter === currentFilter) return <span>{children}</span>
   return (
     <a 
     href='_'
     onClick={e => {
       e.preventDefault();
-      store.dispatch({
-        type: SET_VISIBILITY_FILTER,
-        filter
-      })
+      onClick(filter)
     }}
     >
       {children}
     </a>
   )
 };
 
+const Footer = ({
+  visibilityFilter,
+  onFilterClick,
+}) => (
+  <p>
+    Show: 
+    <br />
+    <FilterLink filter={SHOW_ALL} currentFilter={visibilityFilter} onClick={onFilterClick}>{SHOW_ALL}</FilterLink>
+    <br />
+    <FilterLink filter={SHOW_ACTIVE} currentFilter={visibilityFilter} onClick={onFilterClick}>{SHOW_ACTIVE}</FilterLink>
+    <br />
+    <FilterLink filter={SHOW_COMPLETED} currentFilter={visibilityFilter} onClick={onFilterClick}>{SHOW_COMPLETED}</FilterLink>
+  </p>
+);
+
 const getVisibleTodos = (todos, filter) => {
   switch(filter){
     case SHOW_ACTIVE:
@@ -89,53 +102,81 @@ const getVisibleTodos = (todos, filter) => {
   }
 }
 
+const Todo = ({
+  onClick,
+  completed, 
+  text
+}) => (
+  <li 
+    onClick={onClick}
+  >
+    {completed? <strike>{text}</strike> : text}
+  </li>
+);
 
-let nextTodoId = 0;
+const TodoList = ({
+  todos,
+  onTodoClick,
+}) => (
+  <ul>
+    {todos.map(todo => 
+      <Todo 
+        key={todo.id}
+        {...todo}
+        onClick={() => onTodoClick(todo.id)}
+      />
+    )}
+  </ul>
+);
 
-const TodoApp = ({todos, visibilityFilter}) => {
+const AddTodo = ({
+  onAddClick
+}) => {
   const inputEl = useRef(null);
-  const visibileTodos = getVisibleTodos(todos,visibilityFilter);
-
-  return(
+  return (
     <div>
       <input ref={inputEl} type="text" />
-      <ul>
-        {visibileTodos.map(todo => 
-        <div>
-          <li key={todo.id}
-            onClick={() => {
-              store.dispatch({
-                type: TOGGLE_TODO,
-                id: 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 = '';
+        if(inputEl.current.value !== ""){
+          onAddClick(inputEl.current.value);
+          inputEl.current.value="";
         }
-      }}>
-        ADD TODO
+      }}
+      >
+        Add Todo
       </button>
-      <p>
-        Show: 
-        <br />
-        <FilterLink filter={SHOW_ALL} currentFilter={visibilityFilter}>{SHOW_ALL}</FilterLink>
-        <br />
-        <FilterLink filter={SHOW_ACTIVE} currentFilter={visibilityFilter}>{SHOW_ACTIVE}</FilterLink>
-        <br />
-        <FilterLink filter={SHOW_COMPLETED} currentFilter={visibilityFilter}>{SHOW_COMPLETED}</FilterLink>
-      </p>
+    </div>
+  );
+}
+
+
+let nextTodoId = 0;
+
+const TodoApp = ({todos, visibilityFilter}) => {
+  const visibileTodos = getVisibleTodos(todos,visibilityFilter);
+
+  return(
+    <div>
+      <AddTodo 
+        onAddClick={text => store.dispatch({
+          type: ADD_TODO,
+          id: nextTodoId++,
+          text
+        })}
+      />
+      <TodoList todos={visibileTodos}
+        onTodoClick={id => store.dispatch({
+          type: TOGGLE_TODO,
+          id
+        })}
+      />
+      <Footer 
+        visibilityFilter={visibilityFilter}
+        onFilterClick={filter => store.dispatch({
+          type: SET_VISIBILITY_FILTER,
+          filter
+        })}
+      />
     </div>
 )};
 
@@ -155,4 +196,4 @@ const render = () => ReactDOM.render(
 );
 
 store.subscribe(render);
-render();
+render();