refactor: extract fetching to useApi hook (freeCodeCamp-2025-Summer-Hackathon#81)

Author: gikf

frontend/src/components/IdeaFormSection.jsx

@@ -1,34 +1,15 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { useApi } from '../hooks/useApi';
 import { Link } from 'react-router';
 
 const IdeaFormSection = ({ count }) => {
-  let [isLoading, setLoading] = useState(true);
-  let [error, setError] = useState(null);
-  let [data, setData] = useState([]);
-
-  const fetchIdeas = useCallback(async () => {
-    setError(null);
-    setLoading(true);
-    try {
-      const response = await fetch(
-        import.meta.env.VITE_API_LOCATION + `/ideas/?limit=${count}`
-      );
-
-      if (!response.ok) {
-        throw new Error(response.statusText);
-      }
-
-      setLoading(false);
-      setData((await response?.json())?.data);
-    } catch (e) {
-      console.error(e);
-      setError(e);
-    }
-  }, [count]);
+  const { isLoading, error, data, fetchFromApi } = useApi({
+    loadingInitially: true,
+  });
 
   useEffect(() => {
-    fetchIdeas();
-  }, [fetchIdeas]);
+    fetchFromApi(`/ideas/?limit=${count}`);
+  }, [count, fetchFromApi]);
 
   return (
     <section className='idea-form-section'>
@@ -40,9 +21,9 @@ const IdeaFormSection = ({ count }) => {
           'Loading...'
         ) : (
           <ul className='idea-list'>
-            {data.length === 0
+            {data?.data?.length === 0
               ? "There's no ideas, add yours!"
-              : data.map(({ id, name, upvoted_by }) => {
+              : data?.data.map(({ id, name, upvoted_by }) => {
                   return (
                     <Link to={`/ideas/${id}`} key={id}>
                       <li className='idea-item'>
@@ -72,4 +53,4 @@ const IdeaFormSection = ({ count }) => {
   );
 };
 
-export default IdeaFormSection; //
+export default IdeaFormSection;

frontend/src/hooks/useApi.js

@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'react';
+
+const getCrsfToken = async () => {
+  const token = sessionStorage.getItem('csrf_token');
+  if (token) {
+    return token;
+  }
+
+  try {
+    const response = await fetch(
+      import.meta.env.VITE_API_LOCATION + '/csrf/get-token'
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    const fresh_token = await response.json()?.csrf_token;
+    sessionStorage.setItem('csrf_token', fresh_token);
+    return fresh_token;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export const useApi = ({ method = 'GET', loadingInitially = false }) => {
+  let [isLoading, setLoading] = useState(loadingInitially);
+  let [error, setError] = useState(null);
+  let [data, setData] = useState(null);
+  let [response, setResponse] = useState(null);
+
+  const attachDefaultHeaders = useCallback(async options => {
+    if (!['GET', 'HEAD', 'OPTIONS'].includes(options?.method)) {
+      const csrf_token = await getCrsfToken();
+      if (csrf_token) {
+        options['headers'] = {
+          'X-CSRF-TOKEN': csrf_token,
+          ...options?.headers,
+        };
+      }
+    }
+
+    const access_token = sessionStorage.getItem('access_token');
+    if (access_token) {
+      options['headers'] = {
+        Authorization: `Bearer ${access_token}`,
+        ...options?.headers,
+      };
+    }
+
+    return options;
+  }, []);
+
+  // TODO handle responses when access_token is no longer valid -> refreshing it with refresh_token
+  const fetchFromApi = useCallback(
+    async (path = '', extraFetchOptions = {}) => {
+      setError(null);
+      setLoading(true);
+      setResponse(null);
+      setData(null);
+      try {
+        const res = await fetch(
+          import.meta.env.VITE_API_LOCATION + path,
+          attachDefaultHeaders({
+            method,
+            ...extraFetchOptions,
+          })
+        );
+
+        setResponse(res);
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        setData(await res?.json());
+      } catch (e) {
+        console.error('error');
+        setError(e);
+      }
+      setLoading(false);
+    },
+    [attachDefaultHeaders, method]
+  );
+
+  return {
+    isLoading,
+    error,
+    data,
+    response,
+    fetchFromApi,
+  };
+};