Added generic react hook for http requests

Author: svwoodhouse

Sections/Section 15/04-onwards-to-a-more-realistic-example/src/App.js

@@ -1,10 +1,36 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Tasks from './components/Tasks/Tasks';
 import NewTask from './components/NewTask/NewTask';
-import useData from './hooks/use-data';
+// import useData from './hooks/use-data';
+import useHttp from './hooks/use-http';
 
 function App() {
-  const { isLoading, taskAddHandler, tasks, fetchTasks, error } = useData()
+  // For the useData customer React Hook example
+  // const { isLoading, taskAddHandler, tasks, fetchTasks, error } = useData()
+  const [tasks, setTasks] = useState([]);
+
+  const { isLoading, error, sendRequest: fetchTasks } = useHttp();
+
+  useEffect(() => {
+    const transformTasks = (tasksObj) => {
+      const loadedTasks = [];
+
+      for (const taskKey in tasksObj) {
+        loadedTasks.push({ id: taskKey, text: tasksObj[taskKey].text });
+      }
+
+      setTasks(loadedTasks);
+    };
+
+    fetchTasks(
+      { url: 'https://react-http-e4c37-default-rtdb.firebaseio.com/tasks.json' },
+      transformTasks
+    );
+  }, [fetchTasks]);
+
+  const taskAddHandler = (task) => {
+    setTasks((prevTasks) => prevTasks.concat(task));
+  };
 
   return (
     <React.Fragment>
@@ -19,4 +45,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

Sections/Section 15/04-onwards-to-a-more-realistic-example/src/components/NewTask/NewTask.js

@@ -1,10 +1,33 @@
-import useData from '../../hooks/use-data';
-
+// import useData from '../../hooks/use-data';
 import Section from '../UI/Section';
 import TaskForm from './TaskForm';
+import useHttp from '../../hooks/use-http';
 
 const NewTask = (props) => {
-  const { isLoading, enterTaskHandler, error } = useData(props)
+// const { isLoading, enterTaskHandler, error } = useData(props)
+
+  const { isLoading, error, sendRequest: sendTaskRequest } = useHttp();
+
+  const createTask = (taskText, taskData) => {
+    const generatedId = taskData.name; // firebase-specific => "name" contains generated id
+    const createdTask = { id: generatedId, text: taskText };
+
+    props.onAddTask(createdTask);
+  };
+
+  const enterTaskHandler = async (taskText) => {
+    sendTaskRequest(
+      {
+        url: 'https://react-http-e4c37-default-rtdb.firebaseio.com//tasks.json',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: { text: taskText },
+      },
+      createTask.bind(null, taskText)
+    );
+  };
 
   return (
     <Section>

Sections/Section 15/04-onwards-to-a-more-realistic-example/src/hooks/use-http.js

@@ -0,0 +1,36 @@
+import { useState, useCallback } from 'react';
+
+const useHttp = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const sendRequest = useCallback(async (requestConfig, applyData) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(requestConfig.url, {
+        method: requestConfig.method ? requestConfig.method : 'GET',
+        headers: requestConfig.headers ? requestConfig.headers : {},
+        body: requestConfig.body ? JSON.stringify(requestConfig.body) : null,
+      });
+
+      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;