Added tests with storybook and like API call with service interrupt test

client/src/hooks/useVdapApi.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+
+export default function useWidgetApi(endpoint) {
+    const [data, setData] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://web-api:8000';
+                // Strip leading slashes to prevent double slashes in the URL
+                const cleanEndpoint = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint;
+                const url = `${baseUrl}/${cleanEndpoint}`;
+
+                const response = await fetch(url);
+
+                if (!response.ok) {
+                    throw new Error(`API Error: ${response.status}`);
+                }
+
+                const json = await response.json();
+                const responseData = Array.isArray(json) ? json : json.data;
+                setData(responseData || []);
+
+            } catch (err) {
+                console.error(`Failed to fetch from ${endpoint}:`, err);
+                setError("Failed to load widget data. Is the Django API running?");
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        if (endpoint) {
+            fetchData();
+        }
+    }, [endpoint]); // Re-fetch if the endpoint changes
+
+    return { data, isLoading, error };
+}