Using The Custom Hook In More Components

Author: zntb

src/components/NewTask/NewTask.js

@@ -1,41 +1,29 @@
-import { useState } from 'react';
-
 import Section from '../UI/Section';
 import TaskForm from './TaskForm';
+import useHttp from '../../hooks/useHttp';
 
 const NewTask = (props) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  const enterTaskHandler = async (taskText) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const response = await fetch(
-        'https://react-http-89353-default-rtdb.europe-west1.firebasedatabase.app/tasks.json',
-        {
-          method: 'POST',
-          body: JSON.stringify({ text: taskText }),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        }
-      );
+  const { isLoading, error, sendRequest: sendTaskRequest } = useHttp();
 
-      if (!response.ok) {
-        throw new Error('Request failed!');
-      }
+  const createTask = (taskText, taskData) => {
+    const generatedId = taskData.name; // firebase-specific => "name" contains generated id
+    const createdTask = { id: generatedId, text: taskText };
 
-      const data = await response.json();
-
-      const generatedId = data.name; // firebase-specific => "name" contains generated id
-      const createdTask = { id: generatedId, text: taskText };
+    props.onAddTask(createdTask);
+  };
 
-      props.onAddTask(createdTask);
-    } catch (err) {
-      setError(err.message || 'Something went wrong!');
-    }
-    setIsLoading(false);
+  const enterTaskHandler = async (taskText) => {
+    sendTaskRequest(
+      {
+        url: 'https://react-http-89353-default-rtdb.europe-west1.firebasedatabase.app/tasks.json',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: { text: taskText },
+      },
+      createTask.bind(null, taskText)
+    );
   };
 
   return (