@inwink-mcp/backoffice-extension-helpers 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inwink-mcp/backoffice-extension-helpers",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "inwink",
   "license": "ISC",
   "description": "CLI pour bootstrapper, packager et vérifier les extensions backoffice inwink.",

package/templates/vite-extension/src/App.tsx.tpl

@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import ProtectedRoute from './auth/ProtectedRoute';
+import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 // Pour appeler une API inwink, utilisez un hook dédié (jamais fetch directement) :
 //   import { useInwinkEventApi } from './hooks/useInwinkEventApi';
@@ -9,14 +10,16 @@ import HomePage from './pages/HomePage';
 export default function App() {
   return (
     <Routes>
-      <Route
-        path="/"
-        element={
-          <ProtectedRoute>
-            <HomePage />
-          </ProtectedRoute>
-        }
-      />
+      <Route element={<Layout title="__DISPLAY_NAME__" />}>
+        <Route
+          path="/"
+          element={
+            <ProtectedRoute>
+              <HomePage />
+            </ProtectedRoute>
+          }
+        />
+      </Route>
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   );

package/templates/vite-extension/src/hooks/useInwinkApi.ts

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useRef } from 'react';
 import { useAuth } from './useAuth';
 
 /** Erreur levée lorsqu'une réponse API n'est pas OK (hors 401 géré par renouvellement). */
@@ -36,66 +37,76 @@ async function safeBody(response: Response): Promise<unknown> {
  * sert aux hôtes externes déclarés ou à des bases d'URL spécifiques.
  */
 export function useInwinkApi(baseUrl: string): InwinkApi {
-  const { getAccessToken, renewToken, login } = useAuth();
+  // Les fonctions d'auth sont lues via une ref (motif « latest ref », cf. `userRef`
+  // dans AuthProvider) : l'objet API renvoyé reste ainsi stable (mémoïsé sur `baseUrl`,
+  // une constante) tout en utilisant toujours les callbacks frais au moment de l'appel.
+  const auth = useAuth();
+  const authRef = useRef(auth);
+  useEffect(() => {
+    authRef.current = auth;
+  }, [auth]);
 
-  async function doFetch(path: string, token: string, init?: RequestInit): Promise<Response> {
-    return fetch(`${baseUrl}${path}`, {
-      ...init,
-      headers: {
-        Authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json',
-        ...(init?.headers as Record<string, string> | undefined),
-      },
-    });
-  }
-
-  async function request<T = unknown>(path: string, init?: RequestInit): Promise<T> {
-    let token = getAccessToken();
-    if (!token) {
-      await login();
-      throw new InwinkApiError(401, 'Non authentifié.');
+  return useMemo<InwinkApi>(() => {
+    async function doFetch(path: string, token: string, init?: RequestInit): Promise<Response> {
+      return fetch(`${baseUrl}${path}`, {
+        ...init,
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          ...(init?.headers as Record<string, string> | undefined),
+        },
+      });
     }
 
-    let response = await doFetch(path, token, init);
-
-    if (response.status === 401) {
-      const renewed = await renewToken();
-      if (renewed) {
-        token = renewed;
-        response = await doFetch(path, token, init);
+    async function request<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+      const { getAccessToken, renewToken, login } = authRef.current;
+      let token = getAccessToken();
+      if (!token) {
+        await login();
+        throw new InwinkApiError(401, 'Non authentifié.');
       }
+
+      let response = await doFetch(path, token, init);
+
       if (response.status === 401) {
-        await login();
-        throw new InwinkApiError(401, 'Session expirée, reconnexion requise.');
+        const renewed = await renewToken();
+        if (renewed) {
+          token = renewed;
+          response = await doFetch(path, token, init);
+        }
+        if (response.status === 401) {
+          await login();
+          throw new InwinkApiError(401, 'Session expirée, reconnexion requise.');
+        }
       }
-    }
 
-    if (!response.ok) {
-      throw new InwinkApiError(response.status, await safeBody(response));
-    }
+      if (!response.ok) {
+        throw new InwinkApiError(response.status, await safeBody(response));
+      }
 
-    if (response.status === 204) {
-      return undefined as T;
+      if (response.status === 204) {
+        return undefined as T;
+      }
+      return (await response.json()) as T;
     }
-    return (await response.json()) as T;
-  }
 
-  const withBody =
-    (method: string) =>
-    <T = unknown>(path: string, body?: unknown, init?: RequestInit): Promise<T> =>
-      request<T>(path, {
-        ...init,
-        method,
-        body: body === undefined ? init?.body : JSON.stringify(body),
-      });
+    const withBody =
+      (method: string) =>
+      <T = unknown>(path: string, body?: unknown, init?: RequestInit): Promise<T> =>
+        request<T>(path, {
+          ...init,
+          method,
+          body: body === undefined ? init?.body : JSON.stringify(body),
+        });
 
-  return {
-    request,
-    get: <T = unknown>(path: string, init?: RequestInit) =>
-      request<T>(path, { ...init, method: 'GET' }),
-    post: withBody('POST'),
-    put: withBody('PUT'),
-    del: <T = unknown>(path: string, init?: RequestInit) =>
-      request<T>(path, { ...init, method: 'DELETE' }),
-  };
+    return {
+      request,
+      get: <T = unknown>(path: string, init?: RequestInit) =>
+        request<T>(path, { ...init, method: 'GET' }),
+      post: withBody('POST'),
+      put: withBody('PUT'),
+      del: <T = unknown>(path: string, init?: RequestInit) =>
+        request<T>(path, { ...init, method: 'DELETE' }),
+    };
+  }, [baseUrl]);
 }

package/templates/vite-extension/src/main.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom/client';
 import { HashRouter } from 'react-router-dom';
 import App from './App';
 import { AuthProvider } from './auth/AuthProvider';
+import { InwinkContextProvider } from './context/InwinkContextProvider';
 import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <HashRouter>
       <AuthProvider>
-        <App />
+        <InwinkContextProvider>
+          <App />
+        </InwinkContextProvider>
       </AuthProvider>
     </HashRouter>
   </React.StrictMode>,