@dashadmin/dash-axios-hook 1.0.0

package/README.md

@@ -0,0 +1,380 @@
+# dash-axios-hook
+
+A React hook package for making HTTP requests with axios in the DASH framework. This hook provides automatic API prefix handling and is designed to work seamlessly with DASH's authentication system.
+
+## Installation
+
+This package is part of the DASH monorepo and is installed automatically when you install the workspace dependencies.
+
+```bash
+pnpm install
+```
+
+## Features
+
+- 🔐 **Automatic authentication** - Integrates with DASH auth system
+- 🔄 **API prefix handling** - Automatically appends `/api` to all requests
+- 📦 **TypeScript support** - Full type definitions included
+- ⚡ **React hook interface** - Easy to use in functional components
+
+## Basic Usage
+
+### Simple GET Request
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function MyComponent() {
+    const { axios } = useAxios();
+    const [data, setData] = useState(null);
+    
+    useEffect(() => {
+        const fetchData = async () => {
+            // axios automatically appends "/api" prefix
+            // This calls: /api/tenancy/users
+            const response = await axios.get('tenancy/users');
+            setData(response.data);
+        };
+        
+        fetchData();
+    }, [axios]);
+    
+    return <div>{JSON.stringify(data)}</div>;
+}
+```
+
+### POST Request with Data
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function CreateUserForm() {
+    const { axios } = useAxios();
+    
+    const handleSubmit = async (formData) => {
+        try {
+            // This calls: /api/tenancy/users
+            const response = await axios.post('tenancy/users', {
+                name: formData.name,
+                email: formData.email,
+            });
+            
+            console.log('User created:', response.data);
+        } catch (error) {
+            console.error('Error creating user:', error);
+        }
+    };
+    
+    return <form onSubmit={handleSubmit}>...</form>;
+}
+```
+
+### PUT/PATCH Request
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function UpdateUserForm({ userId }) {
+    const { axios } = useAxios();
+    
+    const handleUpdate = async (formData) => {
+        // This calls: /api/tenancy/users/123
+        await axios.put(`tenancy/users/${userId}`, formData);
+    };
+    
+    return <form onSubmit={handleUpdate}>...</form>;
+}
+```
+
+### DELETE Request
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function DeleteUserButton({ userId }) {
+    const { axios } = useAxios();
+    
+    const handleDelete = async () => {
+        // This calls: /api/tenancy/users/123
+        await axios.delete(`tenancy/users/${userId}`);
+    };
+    
+    return <button onClick={handleDelete}>Delete</button>;
+}
+```
+
+## Advanced Usage
+
+### Custom Hook for Specific Resource
+
+Create reusable hooks for specific API endpoints:
+
+```tsx
+import { useState, useEffect } from 'react';
+import { useAxios } from 'dash-axios-hook';
+
+export interface PaymentGatewayCapabilities {
+    billing_cycles: string[];
+    supports_subscriptions: boolean;
+    supports_trials: boolean;
+}
+
+export interface PaymentGatewayCapabilitiesResponse {
+    gateway: string;
+    gateway_name: string;
+    capabilities: PaymentGatewayCapabilities;
+}
+
+/**
+ * Hook to fetch payment gateway capabilities for the current tenancy
+ */
+export const usePaymentGatewayCapabilities = () => {
+    const { axios } = useAxios();
+    const [data, setData] = useState<PaymentGatewayCapabilitiesResponse | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        const fetchCapabilities = async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                
+                // axios automatically appends "/api" prefix
+                // This calls: /api/tenancy/payment-gateway/capabilities
+                const response = await axios.get<PaymentGatewayCapabilitiesResponse>(
+                    'tenancy/payment-gateway/capabilities'
+                );
+                
+                setData(response.data);
+            } catch (err) {
+                console.error('Error fetching payment gateway capabilities:', err);
+                setError(err as Error);
+                
+                // Set fallback data on error
+                setData({
+                    gateway: 'unknown',
+                    gateway_name: 'Unknown Gateway',
+                    capabilities: {
+                        billing_cycles: ['monthly'],
+                        supports_subscriptions: false,
+                        supports_trials: false,
+                    }
+                });
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchCapabilities();
+    }, [axios]);
+
+    return {
+        data,
+        gateway: data?.gateway ?? null,
+        gatewayName: data?.gateway_name ?? null,
+        capabilities: data?.capabilities ?? {
+            billing_cycles: ['monthly'],
+            supports_subscriptions: false,
+            supports_trials: false,
+        },
+        supportedBillingCycles: data?.capabilities?.billing_cycles ?? ['monthly'],
+        isLoading,
+        error,
+    };
+};
+
+// Usage in component:
+function SubscriptionPlans() {
+    const { supportedBillingCycles, isLoading } = usePaymentGatewayCapabilities();
+    
+    if (isLoading) return <CircularProgress />;
+    
+    // Filter plans based on gateway capabilities
+    const filteredPlans = plans.filter(plan => 
+        supportedBillingCycles.includes(plan.billing_cycle)
+    );
+    
+    return <PlansList plans={filteredPlans} />;
+}
+```
+
+### With Loading States and Error Handling
+
+```tsx
+import { useState, useEffect } from 'react';
+import { useAxios } from 'dash-axios-hook';
+
+function UsersList() {
+    const { axios } = useAxios();
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                
+                const response = await axios.get('tenancy/users');
+                setUsers(response.data);
+            } catch (err) {
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+        
+        fetchUsers();
+    }, [axios]);
+    
+    if (loading) return <div>Loading...</div>;
+    if (error) return <div>Error: {error}</div>;
+    
+    return (
+        <ul>
+            {users.map(user => (
+                <li key={user.id}>{user.name}</li>
+            ))}
+        </ul>
+    );
+}
+```
+
+### Query Parameters
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function FilteredUsers() {
+    const { axios } = useAxios();
+    
+    const fetchUsers = async (filters) => {
+        // This calls: /api/tenancy/users?role=admin&status=active
+        const response = await axios.get('tenancy/users', {
+            params: {
+                role: filters.role,
+                status: filters.status,
+            }
+        });
+        
+        return response.data;
+    };
+    
+    return <div>...</div>;
+}
+```
+
+### File Upload
+
+```tsx
+import { useAxios } from 'dash-axios-hook';
+
+function FileUpload() {
+    const { axios } = useAxios();
+    
+    const handleFileUpload = async (file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('name', 'My Document');
+        
+        // This calls: /api/tenancy/documents
+        const response = await axios.post('tenancy/documents', formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+        
+        return response.data;
+    };
+    
+    return <input type="file" onChange={(e) => handleFileUpload(e.target.files[0])} />;
+}
+```
+
+## Important Notes
+
+### Automatic `/api` Prefix
+
+The `useAxios` hook **automatically prepends `/api`** to all requests. Do not include `/api` in your URLs:
+
+```tsx
+// ✅ Correct
+await axios.get('tenancy/users');  // Calls: /api/tenancy/users
+
+// ❌ Incorrect
+await axios.get('/api/tenancy/users');  // Calls: /api/api/tenancy/users
+```
+
+### Authentication
+
+The hook automatically includes authentication tokens from the DASH auth system. No additional configuration is needed.
+
+### Error Handling
+
+Always wrap axios calls in try-catch blocks:
+
+```tsx
+try {
+    const response = await axios.get('tenancy/users');
+    // Handle success
+} catch (error) {
+    // Handle error
+    if (error.response) {
+        // Server responded with error status
+        console.error('Server error:', error.response.data);
+    } else if (error.request) {
+        // Request made but no response
+        console.error('Network error');
+    } else {
+        // Error setting up request
+        console.error('Request error:', error.message);
+    }
+}
+```
+
+## TypeScript Support
+
+The hook supports TypeScript generics for type-safe responses:
+
+```tsx
+interface User {
+    id: number;
+    name: string;
+    email: string;
+}
+
+const { axios } = useAxios();
+
+// Type-safe response
+const response = await axios.get<User[]>('tenancy/users');
+// response.data is now typed as User[]
+```
+
+## API Reference
+
+### `useAxios()`
+
+Returns an object with an axios instance configured for the DASH API.
+
+**Returns:**
+- `axios`: Configured axios instance with automatic `/api` prefix
+
+**Example:**
+```tsx
+const { axios } = useAxios();
+```
+
+## Best Practices
+
+1. **Always use the hook at component level**, not in utility functions
+2. **Include error handling** for all requests
+3. **Use loading states** for better UX
+4. **Don't include `/api`** in your URLs - it's added automatically
+5. **Create custom hooks** for reusable API logic
+6. **Use TypeScript generics** for type safety
+
+## Contributing
+
+This package is part of the DASH monorepo. See the main repository README for contribution guidelines.

package/index.d.ts

@@ -0,0 +1,3 @@
+// Auto-generated permissive types for @dashadmin/dash-axios-hook.
+// Full typings can be regenerated with a tolerant tsc emit.
+export {};

package/index.js

@@ -0,0 +1,154 @@
+import k from "axios";
+import { DASHAdminSystemConstants as A } from "@dashadmin/dash-constants";
+import { dashStorage as l } from "@dashadmin/dash-utils";
+import { useState as y, useEffect as v } from "react";
+import { useStore as I } from "react-admin";
+const _ = (t, n, a = "update") => {
+  n || (n = "");
+  const s = {
+    update: "Actualizar",
+    create: "Crear",
+    delete: "Eliminar"
+  }, e = t.response?.data?.message || t.message || "Error al " + (s[a] || a) + " el recurso", r = t.response?.status || 500;
+  let i = {
+    errors: {}
+  };
+  if (t.response?.data?.errors) {
+    const c = t.response.data.errors;
+    Object.keys(c).forEach((u) => {
+      typeof c[u] == "string" ? i.errors[u] = c[u] : Array.isArray(c[u]) ? i.errors[u] = c[u].join(", ") : typeof c[u] == "object" && (i.errors[u] = c[u]);
+    }), e && (i.errors.root = {
+      serverError: e
+    });
+  }
+  const o = {
+    message: e,
+    status: r,
+    body: i,
+    resource: n,
+    originalError: t,
+    name: "Error"
+  };
+  return console.error("Update error:", {
+    resource: n,
+    errorMessage: e,
+    status: r,
+    validationErrors: i.errors,
+    originalError: t
+  }), o;
+};
+let d = !1, g = [];
+const p = (t, n = null) => {
+  g.forEach((a) => {
+    t ? a.reject(t) : a.resolve(n);
+  }), g = [];
+}, j = async (t) => {
+  const n = l.getItem("refreshToken");
+  if (!n)
+    return console.log("[Axios] No refresh token available"), null;
+  try {
+    console.log("[Axios] Attempting to refresh access token...");
+    const s = await k.create({
+      baseURL: A.system.ADMIN_API_URL,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json"
+      }
+    }).post("/auth/refresh", {
+      refresh_token: n
+    });
+    if (s.status === 200 && s.data.token) {
+      const e = s.data.token, r = s.data.refresh_token;
+      return l.setItem("token", e), r && l.setItem("refreshToken", r), console.log("[Axios] Token refresh successful"), e;
+    }
+    return null;
+  } catch (a) {
+    return console.error("[Axios] Token refresh failed:", a), null;
+  }
+}, E = () => {
+  console.log("[Axios] Logging out due to authentication failure");
+  debugger;
+  l.clear(), localStorage.clear(), window.dispatchEvent(new CustomEvent("auth:logout", {
+    detail: { reason: "token_refresh_failed" }
+  }));
+}, x = (t, n) => {
+  typeof navigator < "u" && navigator.language && navigator.language.split("-")[0];
+  const a = {
+    headers: {
+      "Content-Type": "application/json",
+      //'Accept-Language': browserLanguage || 'es', // fallback to 'es' if not available
+      "Accept-Language": "es",
+      Accept: "application/json"
+    },
+    ...t
+  }, s = k.create(a);
+  return s.interceptors.request.use(function(e) {
+    const r = l.getItem("token");
+    r !== void 0 && r !== "undefined" && (e.headers.Authorization = "Bearer " + r);
+    const i = l.getItem("active_tenant_id");
+    return i && (e.headers["X-Tenant-Id"] = i), e;
+  }), s.interceptors.response.use(
+    (e) => e,
+    async (e) => {
+      const r = e.config;
+      if (e.response?.status === 401 && !r._retry) {
+        if (r.url?.includes("/login") || r.url?.includes("/auth/refresh") || r.url?.includes("/logout"))
+          return Promise.reject(e);
+        if (d)
+          return new Promise((o, c) => {
+            g.push({ resolve: o, reject: c });
+          }).then((o) => (o && r.headers && (r.headers.Authorization = `Bearer ${o}`), s(r))).catch((o) => Promise.reject(o));
+        r._retry = !0, d = !0;
+        try {
+          const o = await j(s);
+          return o ? (r.headers && (r.headers.Authorization = `Bearer ${o}`), p(null, o), s(r)) : (p(e, null), E(), Promise.reject(e));
+        } catch (o) {
+          return p(o, null), E(), Promise.reject(o);
+        } finally {
+          d = !1;
+        }
+      }
+      return window.dispatchEvent(
+        new MessageEvent("DASHGlobalError", {
+          data: _(e, null, "list"),
+          origin: "AxiosInterceptor"
+        })
+      ), Promise.reject(e);
+    }
+  ), s;
+}, w = (t) => x({
+  baseURL: A.system.ADMIN_API_URL,
+  ...t && { ...t }
+}), U = (t) => x({
+  baseURL: A.system.ADMIN_API_URL,
+  ...t && { ...t }
+}), T = (t, n, a) => n.split(".").reduce((s, e) => s ? s[e] : a, t), C = (t) => {
+  const {
+    /*method = 'GET',
+    url,
+    payload = null,*/
+    storeKey: n,
+    dataPath: a = "data"
+  } = t, s = w(), [e, r] = y(null), [i, o] = y(!1), [c, u] = I(n, null), m = async (h) => {
+    try {
+      const f = await s({
+        method: h.method,
+        url: `${h.url}${h.payload ? "?" + h.payload : ""}`
+      });
+      (f.status >= 200 || f.status < 300) && u(T(f, a, null));
+    } catch (f) {
+      r(f);
+    } finally {
+      o(!0);
+    }
+  };
+  return v(() => {
+    c || m(t);
+  }, []), { request: m, results: c, error: e, loaded: i };
+};
+export {
+  U as createAxiosInstance,
+  _ as processAxiosError,
+  w as useAxios,
+  C as useAxiosGetWithStore
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@dashadmin/dash-axios-hook",
+  "version": "1.0.0",
+  "description": "dash-axios-hook — DASH framework package",
+  "license": "MIT",
+  "author": "Francisco Aranda <farandal@gmail.com>",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "files": [
+    "**/*"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@mui/material": "^7.3.10",
+    "@dashadmin/dash-constants": "^1.0.0",
+    "@dashadmin/dash-utils": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}