Modularized code

src/App.js

@@ -1,199 +1,62 @@
 import "./App.css";
 import React, {useState} from "react";
+import Header from './components/Header'
+import TaskList from "./components/TaskList";
+import AddTask from "./components/AddTask";
 
 function App() {
 
   document.title = 'Noti.io'
 
   const [tasks, setTasks] = useState([{
-    text: 'Test Task',
+      text: 'Test Task',
-    id: 616 
+      id: 616 
-  }])
+    }])
 
   const [text, setText] = useState('')
-  const [messageInvalidText, setMessageInvalidText] = useState('')
 
   const [counterInputs, setCounterInputs] = useState(1)
+
+  const [messageInvalidText, setMessageInvalidText] = useState('')
+
+
   const [formEditInput, setFormEditInput] = useState('')
 
-  const persistTasks = (modificatedTasks) => {
-    localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
-  }
-
-  const persistCounter = () => {
-    localStorage.setItem('counter', JSON.stringify(counterInputs))
-  }
-
-  const restoreTasks = () => {
-    let tasksCache = localStorage.getItem('tasks')
-
-    tasksCache = JSON.parse(tasksCache)
-
-    setTasks(tasksCache)
-    
-  }
-
-  const restoreCounter = () => {
-    let counterInputCache = localStorage.getItem('counter')
-
-    counterInputCache = JSON.parse(counterInputCache)
-
-    setCounterInputs(counterInputCache + 1)
-  }
-
-  const checkCache = () => {
-    if (localStorage.getItem('tasks')) {
-      restoreTasks()
-    }
-
-    if (localStorage.getItem('counter')) {
-      restoreCounter()
-    }
-    return
-  }
-
-  window.onload = () => {
-    checkCache()
-  }
-  
-
-  const validateInput = (e, id = 0 ) => {
-    e.preventDefault()
-
-    setMessageInvalidText('')
-
-    if (!text.trim()) {
-      setMessageInvalidText('Text empty, please send a new task')
-      return
-    }
-
-    setTasks([...tasks,
-        {
-          text: text,
-          id: counterInputs
-        }
-      ])
-
-      setCounterInputs(counterInputs + 1)
-      
-      setFormEditInput('')
-      
-      e.target.reset()
-      
-      persistTasks([...tasks,
-        {
-          text: text,
-          id: counterInputs
-        }
-      ])
-      
-      persistCounter()
-      //setText('')
-    }
-  
-
-  const deleteInput = (id) =>  {
-    const deleted_task = tasks.filter(task => task.id !== id)
-
-    setTasks(deleted_task)
-    persistTasks(deleted_task)
-
-  }
-
-  const modifyInput = (id) => {
-    setFormEditInput([true, id])
-  }
-
-  const modifyInputTwo = (e) => {
-
-    e.preventDefault()
-
-    if(!text.trim()) {
-      setFormEditInput('')
-      return
-    }
-
-    const taskID = tasks.findIndex(task => task.id === formEditInput[1])
-
-    tasks[taskID].text = text
-
-    setTasks(tasks)
-    setText('')
-    setFormEditInput('')
-
-    persistTasks()
-    
-  }
-
-
 
   return (
     <>
-      <header className="main-header"><h1>Noti.io</h1></header>
+      <Header />
       <div className="app">
-        <div className="task-list">
+        <TaskList
-          <div>
+          tasks={tasks}
-            {
+          setTasks={setTasks}
-              tasks.map (task => (
-                <div className="task" key= {task.id}>
-                  <div className="task-info">
-                    <div className="task-text">
-                      <h2> { task.text } </h2>
-                      <span> ({task.id}) </span>
-                    </div>
-                    <div className="task-buttons">
-                      <button onClick={ () => modifyInput(task.id)} className="mini-button edit-button">Edit</button>
-                      <button button onClick={ () => deleteInput(task.id)} className="mini-button delete-button">Remove</button>
-                    </div>
-                  </div>
 
-                  <div className="space-edit-task">
+          text={text}
+          setText={setText}
 
-                    { formEditInput[0] && task.id === formEditInput[1] ? 
+          formEditInput={formEditInput}
+          setFormEditInput={setFormEditInput}
+        />
 
-                      <form onSubmit={modifyInputTwo}>
+        <AddTask
-                        <input
+          tasks={tasks}
-                          type="text"
+          setTasks={setTasks}
-                          placeholder="Task"
-                          onChange={ (e) => setText(e.target.value) }
-                          className="input-edit-task"
-                          autoFocus
-                          autoComplete="off"
-                        />
-                        <input
-                          type="submit"
-                          value="Edit Task"
-                          className="mini-button edit-task"
-                        />
-                      </form>
           
-                      : <></>
+          text={text}
-                    }
+          setText={setText}
-                  </div>
+          
-                </div>
+          formEditInput={formEditInput}
-              ))
+          setFormEditInput={setFormEditInput}
-            }
+          
-          </div>
+          counterInputs={counterInputs}
-        </div>
+          setCounterInputs={setCounterInputs}
+          
+          messageInvalidText={messageInvalidText}
+          setMessageInvalidText={setMessageInvalidText}
+          
+        />
 
-        <div className="add-task">
-          <h3 className="invalidInput"> {messageInvalidText} </h3>
-          <form onSubmit={validateInput}>
-            <input
-              type="text"
-              placeholder="Task"
-              id="task-name"
-              onChange={(e) => setText(e.target.value)}
-              autoComplete="off"
-              />
-            <input
-              type="submit"
-              value="Add Task"
-              className="button-task submit-task"
-            />
-          </form>
 
-        </div>
       </div>
       <footer>Made with 💓 by <a href="https://www.upwork.com/freelancers/~01d6fc06b8da216c2b">Francisco Pessano</a></footer>
     </>

src/components/AddList.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AddList = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default AddList

src/components/AddTask.jsx

@@ -0,0 +1,105 @@
+import React, {useState} from 'react'
+
+const AddTask = (props) => {
+
+
+
+    const validateInput = (e, id = 0 ) => {
+        e.preventDefault()
+    
+        props.setMessageInvalidText('')
+    
+        if (!props.text.trim()) {
+          props.setMessageInvalidText('Text empty, please send a new task')
+          return
+        }
+    
+        props.setTasks([...props.tasks,
+            {
+              text: props.text,
+              id: props.counterInputs
+            }
+          ])
+    
+          props.setCounterInputs(props.counterInputs + 1)
+          
+          props.setFormEditInput('')
+          
+          e.target.reset()
+          
+          persistTasks([...props.tasks,
+            {
+              text: props.text,
+              id: props.counterInputs
+            }
+          ])
+          
+          persistCounter()
+          //props.setText('')
+        }
+
+    const persistTasks = (modificatedTasks) => {
+        localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
+    }
+
+    const persistCounter = () => {
+        localStorage.setItem('counter', JSON.stringify(props.counterInputs))
+    }
+
+    const restoreTasks = () => {
+        let tasksCache = localStorage.getItem('tasks')
+    
+        tasksCache = JSON.parse(tasksCache)
+    
+        props.setTasks(tasksCache)
+        
+      }
+    
+      const restoreCounter = () => {
+        let counterInputCache = localStorage.getItem('counter')
+    
+        counterInputCache = JSON.parse(counterInputCache)
+    
+        props.setCounterInputs(counterInputCache + 1)
+      }
+    
+      const checkCache = () => {
+        if (localStorage.getItem('tasks')) {
+          restoreTasks()
+        }
+    
+        if (localStorage.getItem('counter')) {
+          restoreCounter()
+        }
+        return
+      }
+    
+      window.onload = () => {
+        checkCache()
+      }
+
+    return (
+        <>
+            <div className="add-task">
+                <h3 className="invalidInput"> {props.messageInvalidText} </h3>
+                <form onSubmit={validateInput}>
+                    <input
+                        type="text"
+                        placeholder="Task"
+                        id="task-name"
+                        onChange={(e) => props.setText(e.target.value)}
+                        autoComplete="off"
+                        />
+                    <input
+                        type="submit"
+                        value="Add Task"
+                        className="button-task submit-task"
+                    />
+                </form>
+
+            </div>
+        </>
+    )
+}
+
+export default AddTask

src/components/Header.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Header = () => {
+    return (
+        <header className="main-header"><h1>Noti.io</h1></header>
+    )
+}
+
+export default Header

src/components/States.jsx.txt

@@ -0,0 +1,26 @@
+import React, {useState} from 'react'
+
+export function States() {
+
+    const [messageInvalidText, setMessageInvalidText] = useState('')
+
+    const [tasks, setTasks] = useState([{
+        text: 'Test Task',
+        id: 616 
+      }])
+
+    const [formEditInput, setFormEditInput] = useState('')
+
+    const [text, setText] = useState('')
+    
+    return (
+        <>
+        {
+        const [messageInvalidText, setMessageInvalidText] = useState('')
+            
+        }
+        </>
+    )
+}
+
+export default States

src/components/TaskList.jsx

@@ -0,0 +1,94 @@
+import React, {useState} from 'react'
+
+const TaskList = (props) => {
+
+    const persistTasks = (modificatedTasks) => {
+        localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
+    }
+
+    const deleteInput = (id) =>  {
+        const deleted_task = props.tasks.filter(task => task.id !== id)
+    
+        props.setTasks(deleted_task)
+        persistTasks(deleted_task)
+    
+      }
+    
+      const modifyInput = (id) => {
+        props.setFormEditInput([true, id])
+      }
+    
+      const modifyInputTwo = (e) => {
+    
+        e.preventDefault()
+    
+        if(!props.text.trim()) {
+          props.setFormEditInput('')
+          return
+        }
+    
+        const taskID = props.tasks.findIndex(task => task.id === props.formEditInput[1])
+    
+        props.tasks[taskID].text = props.text
+    
+        props.setTasks(props.tasks)
+        props.setText('')
+        props.setFormEditInput('')
+    
+        persistTasks()
+        
+      }
+    
+    
+
+    return (
+        <>
+         <div className="task-list">
+          <div>
+            {
+              props.tasks.map (task => (
+                <div className="task" key= {task.id}>
+                  <div className="task-info">
+                    <div className="task-text">
+                      <h2> { task.text } </h2>
+                      <span> ({task.id}) </span>
+                    </div>
+                    <div className="task-buttons">
+                      <button onClick={ () => modifyInput(task.id)} className="mini-button edit-button">Edit</button>
+                      <button button onClick={ () => deleteInput(task.id)} className="mini-button delete-button">Remove</button>
+                    </div>
+                  </div>
+
+                  <div className="space-edit-task">
+
+                    { props.formEditInput[0] && task.id === props.formEditInput[1] ? 
+
+                      <form onSubmit={modifyInputTwo}>
+                        <input
+                          type="text"
+                          placeholder="Task"
+                          onChange={ (e) => props.setText(e.target.value) }
+                          className="input-edit-task"
+                          autoFocus
+                          autoComplete="off"
+                        />
+                        <input
+                          type="submit"
+                          value="Edit Task"
+                          className="mini-button edit-task"
+                        />
+                      </form>
+
+                      : <></>
+                    }
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>   
+        </>
+    )
+}
+
+export default TaskList