custom hooks and context api added, refactored

pages/_app.js

@@ -1,5 +1,5 @@
-import "../styles/styles.css";
-import "../styles/Spinner.css";
+import "../src/styles/styles.css";
+import "../src/styles/Spinner.css";
 
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/index.js

@@ -1,6 +1,5 @@
-import Layout from "../components/Layout";
-import AuthorsSection from "../components/AuthorsSection";
-import LoginForm from "../components/LoginForm";
+import Layout from "../src/components/Layout";
+import AuthorsSection from "../src/components/AuthorsSection";
 
 const index = () => {
   return (

components/AuthorsSection/index.js → src/components/AuthorsSection/index.js

@@ -1,51 +1,24 @@
-import React, { useState, useEffect, useReducer } from "react";
+import React, { useState, useEffect, useReducer, useContext } from "react";
 import AuthorSearchBar from "./AuthorSearchBar";
 import Author from "./Author";
-import axios from "axios";
 import Spinner from "../shared/Spinner";
-import requestReducer, { REQUEST_STATUS } from "../../reducers/request";
+import { REQUEST_STATUS } from "../../reducers/request";
+import { DataContext, DataProvider } from "../../contexts/DataContexts";
 
-import {
-  GET_ALL_SUCCESS,
-  GET_ALL_FAILURE,
-  PUT_FAILURE,
-  PUT_SUCCESS,
-} from "../../actions/request";
-
-const AuthorsSection = () => {
+const AuthorsSectionComponent = () => {
   const [searchQuery, setSearchQuery] = useState("");
-  const [{ records: authors, status, error }, dispatch] = useReducer(
-    requestReducer,
-    {
-      status: REQUEST_STATUS.LOADING,
-      records: [],
-      error: null,
-    }
-  );
 
-  console.log("authors", authors);
+  const { records: authors, status, error, put } = useContext(DataContext);
 
   const onFavoriteToggleHandler = async (authorToToggle) => {
+    put({
+      ...authorToToggle,
+      isFavorite: !authorToToggle.isFavorite,
+    });
     const toggledAuthor = {
       ...authorToToggle,
       isFavorite: !authorToToggle.isFavorite,
     };
-    try {
-      await axios.put(
-        `http://localhost:4000/users/${toggledAuthor.id}`,
-        toggledAuthor
-      );
-
-      dispatch({
-        type: PUT_SUCCESS,
-        record: toggledAuthor,
-      });
-    } catch (e) {
-      dispatch({
-        type: PUT_FAILURE,
-        error: e,
-      });
-    }
   };
 
   const mapAPIDataToView = (authors) => {
@@ -60,26 +33,6 @@ const AuthorsSection = () => {
     });
   };
 
-  useEffect(() => {
-    console.log("Use Effec Hook");
-    const fetchData = async () => {
-      try {
-        const { data } = await axios.get(`http://localhost:4000/users`);
-        dispatch({
-          type: GET_ALL_SUCCESS,
-          records: data,
-        });
-      } catch (err) {
-        dispatch({
-          type: GET_ALL_FAILURE,
-          status: REQUEST_STATUS.ERROR,
-          error: err,
-        });
-      }
-    };
-    fetchData();
-  }, []);
-
   const isSuccess = status === REQUEST_STATUS.SUCCESS;
   const isLoading = status === REQUEST_STATUS.LOADING;
   const isError = status === REQUEST_STATUS.ERROR;
@@ -128,4 +81,12 @@ const AuthorsSection = () => {
   );
 };
 
-export default AuthorsSection;
+const AuthorSection = (props) => {
+  return (
+    <DataProvider baseUrl="http://localhost:4000" routeName="users">
+      <AuthorsSectionComponent {...props}></AuthorsSectionComponent>
+    </DataProvider>
+  );
+};
+
+export default AuthorSection;

src/contexts/DataContexts.js

@@ -0,0 +1,10 @@
+import React from "react";
+const DataContext = React.createContext();
+import useRequest from "../hooks/useRequest";
+
+const DataProvider = ({ children, baseUrl, routeName }) => {
+  const state = useRequest(baseUrl, routeName);
+  return <DataContext.Provider value={state}>{children}</DataContext.Provider>;
+};
+
+export { DataContext, DataProvider };

src/hooks/useRequest.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useReducer } from "react";
+import requestReducer, { REQUEST_STATUS } from "../reducers/request";
+import axios from "axios";
+import {
+  GET_ALL_FAILURE,
+  GET_ALL_SUCCESS,
+  PUT_FAILURE,
+  PUT_SUCCESS,
+} from "../actions/request";
+
+const useRequestSimple = (baseUrl, routeName) => {
+  const [{ records, status, error }, dispatch] = useReducer(requestReducer, {
+    status: REQUEST_STATUS.LOADING,
+    records: [],
+    error: null,
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(`${baseUrl}/${routeName}`);
+        dispatch({
+          type: GET_ALL_SUCCESS,
+          records: response.data,
+        });
+      } catch (e) {
+        console.log("Loading data error", e);
+
+        dispatch({
+          type: GET_ALL_FAILURE,
+          error: e,
+        });
+      }
+    };
+    fetchData();
+  }, [baseUrl, routeName]);
+
+  const propsLocal = {
+    records,
+    status,
+    error,
+    put: async (record) => {
+      try {
+        await axios.put(`${baseUrl}/${routeName}/${record.id}`, record);
+        dispatch({
+          type: PUT_SUCCESS,
+          record: record,
+        });
+      } catch (e) {
+        dispatch({
+          type: PUT_FAILURE,
+          error: e,
+        });
+      }
+    },
+  };
+  return propsLocal;
+};
+
+export default useRequestSimple;