Add useHttp.js Custom Hook

Author: zntb

package-lock.json

@@ -1,6 +1,7 @@
 {
   "name": "react-complete-guide",
   "version": "0.1.0",
+  "homepage": "https://gitname.github.io/react-gh-pages",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.6",
@@ -12,6 +13,8 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -34,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.1.0"
   }
 }

package.json

@@ -13,7 +13,7 @@ function App() {
     setError(null);
     try {
       const response = await fetch(
-        'https://react-http-89353-default-rtdb.europe-west1.firebasedatabase.app//tasks.json'
+        'https://react-http-89353-default-rtdb.europe-west1.firebasedatabase.app/tasks.json'
       );
 
       if (!response.ok) {

src/App.js

@@ -12,7 +12,7 @@ const NewTask = (props) => {
     setError(null);
     try {
       const response = await fetch(
-        'https://react-http-6b4a6.firebaseio.com/tasks.json',
+        'https://react-http-89353-default-rtdb.europe-west1.firebasedatabase.app/tasks.json',
         {
           method: 'POST',
           body: JSON.stringify({ text: taskText }),

src/components/NewTask/NewTask.js

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+const useHttp = (requestConfig, applyData) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const sendRequest = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(requestConfig.url, {
+        method: requestConfig.method,
+        headers: requestConfig.headers,
+        body: JSON.stringify(requestConfig.body),
+      });
+
+      if (!response.ok) {
+        throw new Error('Request failed!');
+      }
+
+      const data = await response.json();
+      applyData(data);
+    } catch (err) {
+      setError(err.message || 'Something went wrong!');
+    }
+    setIsLoading(false);
+  };
+
+  return {
+    isLoading,
+    error,
+    sendRequest,
+  };
+};
+export default useHttp;