Modularizated even more the application

src/App.js

@@ -4,6 +4,7 @@ import Header from './components/Header'
 import TaskList from "./components/TaskList";
 import AddTask from "./components/AddTask";
 import Footer from "./components/Footer";
+import { checkCache } from "./components/cacheFunctions";
 
 function App() {
 
@@ -23,7 +24,10 @@ function App() {
 
   const [formEditInput, setFormEditInput] = useState('')
 
-
+  window.onload = () => {
+    checkCache()
+  }
+  
   return (
     <>
       <Header />
@@ -60,6 +64,8 @@ function App() {
 
       </div>
       <Footer />
+
+      
     </>
   );
 }

src/components/AddList.jsx

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

src/components/AddTask.jsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react'
+import {persistTasks, persistCounter} from './cacheFunctions'
 
 const AddTask = (props) => {
 
@@ -30,52 +31,12 @@ const AddTask = (props) => {
               text: props.text,
               id: props.counterInputs
             }
-          ])
+          ], props)
           
-          persistCounter()
+          persistCounter(props)
           //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">

src/components/cacheFunctions.js

@@ -0,0 +1,39 @@
+const persistTasks = (modificatedTasks, props) => {
+    localStorage.setItem('tasks', JSON.stringify(modificatedTasks))
+}
+
+const persistCounter = (props) => {
+    localStorage.setItem('counter', JSON.stringify(props.counterInputs))
+}
+
+const restoreTasks = (props) => {
+    let tasksCache = localStorage.getItem('tasks')
+
+    tasksCache = JSON.parse(tasksCache)
+
+    props.setTasks(tasksCache)
+    
+  }
+
+const restoreCounter = (props) => {
+  let counterInputCache = localStorage.getItem('counter')
+
+  if (counterInputCache) {
+        counterInputCache = JSON.parse(counterInputCache)
+    }
+    
+  props.setCounterInputs(counterInputCache + 1)
+}
+
+const checkCache = () => {
+  if (localStorage.getItem('tasks')) {
+    restoreTasks()
+  }
+
+  if (localStorage.getItem('counter')) {
+    restoreCounter()
+  }
+  return
+}
+
+export {persistTasks, persistCounter, checkCache}