hook test

frontend/src/hooks/useDataApi.js

+import axios from "axios";
+import React, { useEffect, useReducer, useState } from "react";
+
+
+
+//Reducer
+const dataFetchReducer = (state, action) => {
+    switch (action.type) {
+      case 'FETCH_INIT':
+        return {
+          ...state,
+          isLoading: true,
+          isError: false,
+        };
+      case 'FETCH_SUCCESS':
+        return {
+          ...state,
+          isLoading: false,
+          isError: false,
+          data: action.payload,
+        };
+      case 'FETCH_FAILURE':
+        return {
+          ...state,
+          isLoading: false,
+          isError: true,
+        };
+      default:
+        throw new Error();
+    }
+  };
+
+//hook
+const useDataApi = (initialUrl, initialData) => {
+    const [url, setUrl] = useState(initialUrl);
+  
+    const [state, dispatch] = useReducer(dataFetchReducer, {
+      isLoading: false,
+      isError: false,
+      data: initialData,
+    });
+
+    //getData
+    useEffect(() => {
+        const fetchData = async () => {
+          dispatch({ type: 'FETCH_INIT' });
+    
+          try {
+            const result = await axios(url);
+    
+            dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
+          } catch (error) {
+            dispatch({ type: 'FETCH_FAILURE' });
+          }
+        };
+    
+        fetchData();
+      }, [url]);
+  
+
+  
+    return [state, setUrl];
+  };
+
+  export default useDataApi;

frontend/src/hooks/useFetch.js

-import React, {useState, useEffect} from "react";
-import axios from "axios";
-
-const useFetch = (url) => {
-    const [loading, setLoading] = useState(false);
-    const [data, setData] = useState({});
-    const [error, setError] = useState();
-
-    useEffect(() => {
-        if (!url) return;
-        setLoading(true);
-
-        axios
-      .get(url)
-      .then(res => {
-        setData(res.data.data.attributes);
-        //console.log(res.data.data.attributes);
-        setLoading(false);
+// import React, {useState, useEffect} from "react";
+// import axios from "axios";
+
+// const useFetch = (url) => {
+//     const [loading, setLoading] = useState(false);
+//     const [data, setData] = useState({});
+//     const [error, setError] = useState();
+
+//     useEffect(() => {
+//         if (!url) return;
+//         setLoading(true);
+
+//         axios
+//       .get(url)
+//       .then(res => {
+//         setData(res.data.data.attributes);
+//         //console.log(res.data.data.attributes);
+//         setLoading(false);
+//       })
+//       .catch(err => {
+//         console.log(err);
+//         setError(err);
+//         setLoading(false);
+//       });
+//     }, [url]);
+
+//     return { data, loading, error };
+// };
+
+// export default useFetch;
+
+
+import axios from 'axios'
+import React, {useEffect, useReducer} from 'react'
+
+const initialState = {
+  loading: true,
+  post: {},
+  error: ''
+}
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'FETCH_DATA_SUCCESS':
+      return {
+        ...state,
+        loading: false,
+        post: action.payload.data,
+        error: ''
+      }      
+    case 'FETCH_DATA_FAILURE':
+      return {
+        ...state,
+        loading: false,
+        post: {},
+        error: action.payload.error
+      }
+  
+    default:
+      return {...state}
+  }
+}
+
+
+
+export default function useFetch() {
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const {loading, post, error} = state
+  useEffect(() => {
+    axios
+      .get('https://jsonplaceholder.typicode.com/posts/1')
+      .then(response => {
+        dispatch({
+          type: 'FETCH_DATA_SUCCESS',
+          payload: { data: response.data }
+        })
+      })
+      .catch(error => {
+        dispatch({
+          type: 'FETCH_DATA_FAILURE',
+          payload: { error: error.message }
+        })
       })
-      .catch(err => {
-        console.log(err);
-        setError(err);
-        setLoading(false);
-      });
-    }, [url]);
+  }, [])
 
-    return { data, loading, error };
-};
+  const renderPost = post => {
+    return (
+      <>
+        <b>Response: </b>
+        {post.title}
+      </>
+    )
+  }
 
-export default useFetch;
+  return (
+    <>
+      {loading ? 'Loading' : renderPost(post)}
+      {error ? error : null}
+    </>
+  )
+}

frontend/src/pages/ContactPage.jsx

-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Contact from '../components/shared/Contact';
 import PageLayout from '../layout/PageLayout';
 import Layout from '../layout/PageLayout';
+import axios from 'axios';
+import useDataApi from '../hooks/useDataApi';
+
+
 
 function ContactPage() {
+  const [data, setData] = useState('');
+  const [isLoaded, setIsLoaded] = useState('');
+
+  //const hookdata = useDataApi(`${api_url}/api/job-submissions`); 
+
+
   useEffect(() => {
     document.title = 'Contact Us';
   },[]);
+
+  // useEffect(() => {
+  //   console.log(hookdata);
+  // })
   return (
     <PageLayout>
       <section