@djangocfg/ui-tools 2.1.270 → 2.1.271

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -2,7 +2,7 @@
 
 import consola from 'consola';
 import React, {
-    createContext, ReactNode, useCallback, useContext, useEffect, useState
+    createContext, ReactNode, useCallback, useContext, useEffect, useReducer, useRef
 } from 'react';
 
 import type {
@@ -12,18 +12,15 @@ import type {
 import { parseRequestHeaders, substituteUrlParameters } from '../utils';
 import { getDefaultVersion } from '../utils/versionManager';
 
+// ─── Initial state ────────────────────────────────────────────────────────────
+
 const createInitialState = (): PlaygroundState => ({
-  // Step management
   currentStep: 'endpoints',
   steps: ['endpoints', 'request', 'response'],
-
-  // Endpoint selection
   selectedEndpoint: null,
   selectedCategory: 'All',
   searchTerm: '',
   selectedVersion: getDefaultVersion().id,
-
-  // Request configuration
   requestUrl: '',
   requestMethod: 'GET',
   requestHeaders: '{\n  "Content-Type": "application/json"\n}',
@@ -31,197 +28,197 @@ const createInitialState = (): PlaygroundState => ({
   selectedApiKey: null,
   manualApiToken: '',
   parameters: {},
-
-  // Response
   response: null,
   loading: false,
-
-  // UI state
-  sidebarOpen: false, // kept for API compat
+  sidebarOpen: false,
 });
 
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+type Action =
+  | { type: 'SET_STEP'; step: PlaygroundStep }
+  | { type: 'NEXT_STEP' }
+  | { type: 'PREV_STEP' }
+  | { type: 'SELECT_ENDPOINT'; endpoint: ApiEndpoint | null }
+  | { type: 'SET_CATEGORY'; category: string }
+  | { type: 'SET_SEARCH'; term: string }
+  | { type: 'SET_VERSION'; version: string }
+  | { type: 'SET_REQUEST_URL'; url: string }
+  | { type: 'SET_REQUEST_METHOD'; method: string }
+  | { type: 'SET_REQUEST_HEADERS'; headers: string }
+  | { type: 'SET_REQUEST_BODY'; body: string }
+  | { type: 'SET_API_KEY'; apiKeyId: string | null }
+  | { type: 'SET_MANUAL_TOKEN'; token: string }
+  | { type: 'SET_PARAMETERS'; parameters: Record<string, string> }
+  | { type: 'SET_RESPONSE'; response: ApiResponse | null }
+  | { type: 'SET_LOADING'; loading: boolean }
+  // Batched: set loading + clear response atomically (avoids two renders on send)
+  | { type: 'REQUEST_START' }
+  // Batched: set response + loading=false + advance step atomically (avoids three renders)
+  | { type: 'REQUEST_SUCCESS'; response: ApiResponse }
+  // Batched: set error response + loading=false atomically
+  | { type: 'REQUEST_ERROR'; response: ApiResponse }
+  | { type: 'SET_SIDEBAR'; open: boolean }
+  | { type: 'SYNC_API_KEY_HEADER'; headers: string }
+  | { type: 'CLEAR_API_KEY_SELECTION' }
+  | { type: 'SYNC_URL'; url: string }
+  | { type: 'RESET' };
+
+// ─── Reducer ──────────────────────────────────────────────────────────────────
+
+function reducer(state: PlaygroundState, action: Action): PlaygroundState {
+  switch (action.type) {
+    case 'SET_STEP':
+      return { ...state, currentStep: action.step };
+
+    case 'NEXT_STEP': {
+      const i = state.steps.indexOf(state.currentStep);
+      return i < state.steps.length - 1
+        ? { ...state, currentStep: state.steps[i + 1]! }
+        : state;
+    }
+
+    case 'PREV_STEP': {
+      const i = state.steps.indexOf(state.currentStep);
+      return i > 0 ? { ...state, currentStep: state.steps[i - 1]! } : state;
+    }
+
+    case 'SELECT_ENDPOINT':
+      if (!action.endpoint) return { ...state, selectedEndpoint: null };
+      return {
+        ...state,
+        selectedEndpoint: action.endpoint,
+        requestMethod: action.endpoint.method,
+        requestUrl: action.endpoint.path,
+        parameters: {},
+        currentStep: 'request',
+      };
+
+    case 'SET_CATEGORY':    return { ...state, selectedCategory: action.category };
+    case 'SET_SEARCH':      return { ...state, searchTerm: action.term };
+    case 'SET_VERSION':     return { ...state, selectedVersion: action.version };
+    case 'SET_REQUEST_URL': return { ...state, requestUrl: action.url };
+    case 'SET_REQUEST_METHOD': return { ...state, requestMethod: action.method };
+    case 'SET_REQUEST_HEADERS': return { ...state, requestHeaders: action.headers };
+    case 'SET_REQUEST_BODY':    return { ...state, requestBody: action.body };
+    case 'SET_API_KEY':         return { ...state, selectedApiKey: action.apiKeyId };
+    case 'SET_MANUAL_TOKEN':    return { ...state, manualApiToken: action.token };
+    case 'SET_PARAMETERS':      return { ...state, parameters: action.parameters };
+    case 'SET_RESPONSE':        return { ...state, response: action.response };
+    case 'SET_LOADING':         return { ...state, loading: action.loading };
+
+    case 'REQUEST_START':
+      return { ...state, loading: true, response: null };
+
+    case 'REQUEST_SUCCESS':
+      return { ...state, loading: false, response: action.response, currentStep: 'response' };
+
+    case 'REQUEST_ERROR':
+      return { ...state, loading: false, response: action.response };
+
+    case 'SET_SIDEBAR':          return { ...state, sidebarOpen: action.open };
+    case 'SYNC_API_KEY_HEADER':  return { ...state, requestHeaders: action.headers };
+    case 'CLEAR_API_KEY_SELECTION': return { ...state, selectedApiKey: null };
+    case 'SYNC_URL':             return { ...state, requestUrl: action.url };
+    case 'RESET':                return createInitialState();
+
+    default: return state;
+  }
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
 const PlaygroundContext = createContext<PlaygroundContextType | undefined>(undefined);
 
 export const usePlaygroundContext = () => {
   const context = useContext(PlaygroundContext);
-  if (!context) {
-    throw new Error('usePlaygroundContext must be used within a PlaygroundProvider');
-  }
+  if (!context) throw new Error('usePlaygroundContext must be used within a PlaygroundProvider');
   return context;
 };
 
+// ─── Provider ─────────────────────────────────────────────────────────────────
+
 interface PlaygroundProviderProps {
   children: ReactNode;
   config: PlaygroundConfig;
 }
 
 export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children, config }) => {
-  const [state, setState] = useState<PlaygroundState>(() => createInitialState());
+  const [state, dispatch] = useReducer(reducer, undefined, createInitialState);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
-  // TODO: Get API keys from CFG context - temporarily disabled
-  // const { apiKeys: apiKeysResponse, isLoadingApiKeys } = useApiKeysContext();
-  // const apiKeys = (apiKeysResponse && apiKeysResponse.results) ? apiKeysResponse.results : [];
   const apiKeys = React.useMemo(() => [], []);
   const isLoadingApiKeys = false;
 
-  const updateState = (updates: Partial<PlaygroundState>) => {
-    setState((prev) => ({ ...prev, ...updates }));
-  };
-
-  // Auto-select first API key when available
+  // Auto-select first API key
   useEffect(() => {
     if (!isLoadingApiKeys && apiKeys.length > 0 && !state.selectedApiKey) {
-      updateState({ selectedApiKey: apiKeys[0]?.id || null });
+      dispatch({ type: 'SET_API_KEY', apiKeyId: apiKeys[0]?.id || null });
     }
   }, [apiKeys, isLoadingApiKeys, state.selectedApiKey]);
 
-  // Update headers when API key changes
+  // Sync X-API-Key header when selected key changes
   useEffect(() => {
     try {
-      setState(prev => {
-        const headers = parseRequestHeaders(prev.requestHeaders);
-        let hasChanged = false;
-
-        if (prev.selectedApiKey) {
-          const apiKey = apiKeys.find(k => k.id === prev.selectedApiKey);
-
-          if (apiKey) {
-            // Add API key to headers only if it changed
-            if (headers['X-API-Key'] !== apiKey.id) {
-              headers['X-API-Key'] = apiKey.id;
-              hasChanged = true;
-            }
-          } else {
-            // Selected API key no longer exists, clear selection
-            return { ...prev, selectedApiKey: null };
-          }
-        } else {
-          // Remove API key from headers if no key is selected
-          if (headers['X-API-Key']) {
-            delete headers['X-API-Key'];
-            hasChanged = true;
-          }
-        }
+      const headers = parseRequestHeaders(state.requestHeaders);
 
-        // Only update if headers actually changed
-        if (hasChanged) {
-          const updatedHeaders = JSON.stringify(headers, null, 2);
-          return { ...prev, requestHeaders: updatedHeaders };
+      if (state.selectedApiKey) {
+        const apiKey = apiKeys.find((k) => k.id === state.selectedApiKey);
+        if (!apiKey) {
+          dispatch({ type: 'CLEAR_API_KEY_SELECTION' });
+          return;
         }
-
-        return prev;
-      });
+        if (headers['X-API-Key'] !== apiKey.id) {
+          headers['X-API-Key'] = apiKey.id;
+          dispatch({ type: 'SYNC_API_KEY_HEADER', headers: JSON.stringify(headers, null, 2) });
+        }
+      } else if (headers['X-API-Key']) {
+        delete headers['X-API-Key'];
+        dispatch({ type: 'SYNC_API_KEY_HEADER', headers: JSON.stringify(headers, null, 2) });
+      }
     } catch (error) {
       consola.error('Error updating headers:', error);
     }
-  }, [state.selectedApiKey, apiKeys]); // Removed state.requestHeaders dependency
+  }, [state.selectedApiKey, apiKeys]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Update URL when parameters change
+  // Sync URL when path parameters change
   useEffect(() => {
-    if (state.selectedEndpoint && state.parameters) {
-      // Path is already a full URL from the endpoint
-      const updatedUrl = substituteUrlParameters(state.selectedEndpoint.path, state.parameters);
-
-      // Only update if URL actually changed to avoid infinite loop
-      if (updatedUrl !== state.requestUrl) {
-        updateState({ requestUrl: updatedUrl });
-      }
+    if (!state.selectedEndpoint) return;
+    const updated = substituteUrlParameters(state.selectedEndpoint.path, state.parameters);
+    if (updated !== state.requestUrl) {
+      dispatch({ type: 'SYNC_URL', url: updated });
     }
-  }, [state.parameters, state.selectedEndpoint, state.requestUrl]);
-
-  // Step management
-  const setCurrentStep = (step: PlaygroundStep) => {
-    updateState({ currentStep: step });
-  };
-
-  const goToNextStep = () => {
-    const currentIndex = state.steps.indexOf(state.currentStep);
-    if (currentIndex < state.steps.length - 1) {
-      updateState({ currentStep: state.steps[currentIndex + 1] });
-    }
-  };
-
-  const goToPreviousStep = () => {
-    const currentIndex = state.steps.indexOf(state.currentStep);
-    if (currentIndex > 0) {
-      updateState({ currentStep: state.steps[currentIndex - 1] });
-    }
-  };
-
-  // Endpoint management
-  const setSelectedEndpoint = (endpoint: ApiEndpoint | null) => {
-    if (endpoint) {
-      updateState({
-        selectedEndpoint: endpoint,
-        requestMethod: endpoint.method,
-        requestUrl: endpoint.path,
-        parameters: {}, // Reset parameters when endpoint changes
-        currentStep: 'request'
-      });
-    } else {
-      updateState({ selectedEndpoint: endpoint });
-    }
-  };
-
-  const setSelectedCategory = (category: string) => {
-    updateState({ selectedCategory: category });
-  };
-
-  const setSearchTerm = (term: string) => {
-    updateState({ searchTerm: term });
-  };
-
-  const setSelectedVersion = (version: string) => {
-    updateState({ selectedVersion: version });
-  };
-
-  // Request management
-  const setRequestUrl = (url: string) => {
-    updateState({ requestUrl: url });
-  };
-
-  const setRequestMethod = (method: string) => {
-    updateState({ requestMethod: method });
-  };
-
-  const setRequestHeaders = (headers: string) => {
-    updateState({ requestHeaders: headers });
-  };
-
-  const setRequestBody = (body: string) => {
-    updateState({ requestBody: body });
-  };
-
-  const setSelectedApiKey = (apiKeyId: string | null) => {
-    updateState({ selectedApiKey: apiKeyId });
-  };
-
-  const setManualApiToken = (manualApiToken: string) => {
-    updateState({ manualApiToken });
-  };
-
-  const setParameters = (parameters: Record<string, string>) => {
-    updateState({ parameters });
-  };
-
-  // Response management
-  const setResponse = (response: ApiResponse | null) => {
-    updateState({ response });
-  };
-
-  const setLoading = (loading: boolean) => {
-    updateState({ loading });
-  };
-
-  // UI management
-  const setSidebarOpen = (sidebarOpen: boolean) => {
-    updateState({ sidebarOpen });
-  };
-
-  // Actions
-  const clearAll = useCallback(() => {
-    setState(createInitialState());
-  }, []);
+  }, [state.parameters, state.selectedEndpoint]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Stable action dispatchers ─────────────────────────────────────────────
+
+  const setCurrentStep    = useCallback((step: PlaygroundStep) => dispatch({ type: 'SET_STEP', step }), []);
+  const goToNextStep      = useCallback(() => dispatch({ type: 'NEXT_STEP' }), []);
+  const goToPreviousStep  = useCallback(() => dispatch({ type: 'PREV_STEP' }), []);
+
+  const setSelectedEndpoint = useCallback((endpoint: ApiEndpoint | null) =>
+    dispatch({ type: 'SELECT_ENDPOINT', endpoint }), []);
+
+  const setSelectedCategory = useCallback((category: string) =>
+    dispatch({ type: 'SET_CATEGORY', category }), []);
+
+  const setSearchTerm    = useCallback((term: string)    => dispatch({ type: 'SET_SEARCH', term }), []);
+  const setSelectedVersion = useCallback((version: string) => dispatch({ type: 'SET_VERSION', version }), []);
+  const setRequestUrl    = useCallback((url: string)     => dispatch({ type: 'SET_REQUEST_URL', url }), []);
+  const setRequestMethod = useCallback((method: string)  => dispatch({ type: 'SET_REQUEST_METHOD', method }), []);
+  const setRequestHeaders = useCallback((headers: string) => dispatch({ type: 'SET_REQUEST_HEADERS', headers }), []);
+  const setRequestBody   = useCallback((body: string)    => dispatch({ type: 'SET_REQUEST_BODY', body }), []);
+  const setSelectedApiKey = useCallback((apiKeyId: string | null) => dispatch({ type: 'SET_API_KEY', apiKeyId }), []);
+  const setManualApiToken = useCallback((token: string)  => dispatch({ type: 'SET_MANUAL_TOKEN', token }), []);
+  const setParameters    = useCallback((parameters: Record<string, string>) =>
+    dispatch({ type: 'SET_PARAMETERS', parameters }), []);
+  const setResponse      = useCallback((response: ApiResponse | null) =>
+    dispatch({ type: 'SET_RESPONSE', response }), []);
+  const setLoading       = useCallback((loading: boolean) => dispatch({ type: 'SET_LOADING', loading }), []);
+  const setSidebarOpen   = useCallback((open: boolean)   => dispatch({ type: 'SET_SIDEBAR', open }), []);
+  const clearAll         = useCallback(() => dispatch({ type: 'RESET' }), []);
+
+  // ── Send request ──────────────────────────────────────────────────────────
 
   const sendRequest = useCallback(async () => {
     if (!state.requestUrl) {
@@ -229,32 +226,31 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
       return;
     }
 
-    setLoading(true);
-    setResponse(null);
+    abortControllerRef.current?.abort();
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+
+    // Single dispatch: loading=true + clear response
+    dispatch({ type: 'REQUEST_START' });
+
+    const startTime = Date.now();
 
     try {
       const headers = parseRequestHeaders(state.requestHeaders);
 
-      // Bearer token priority: manual token → JWT token from localStorage
       let bearerToken: string | null = null;
-
       if (state.manualApiToken) {
-        // Use manual token if provided
         bearerToken = state.manualApiToken;
-      } else {
-        // Try to get JWT token from localStorage
-        if (typeof window !== 'undefined') {
-          bearerToken = window.localStorage.getItem('auth_token');
-        }
+      } else if (typeof window !== 'undefined') {
+        bearerToken = window.localStorage.getItem('auth_token');
       }
 
-      if (bearerToken) {
-        headers['Authorization'] = `Bearer ${bearerToken}`;
-      }
+      if (bearerToken) headers['Authorization'] = `Bearer ${bearerToken}`;
 
       const requestOptions: RequestInit = {
         method: state.requestMethod,
         headers,
+        signal: controller.signal,
       };
 
       if (state.requestBody && state.requestMethod !== 'GET') {
@@ -262,55 +258,55 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
       }
 
       const response = await fetch(state.requestUrl, requestOptions);
+      const duration = Date.now() - startTime;
       const responseText = await response.text();
 
-      let responseData;
-      try {
-        responseData = JSON.parse(responseText);
-      } catch {
-        responseData = responseText;
-      }
-
-      setResponse({
-        status: response.status,
-        statusText: response.statusText,
-        headers: Object.fromEntries(response.headers.entries()),
-        data: responseData,
+      let responseData: unknown;
+      try { responseData = JSON.parse(responseText); }
+      catch { responseData = responseText; }
+
+      // Single dispatch: response + loading=false + step='response'
+      dispatch({
+        type: 'REQUEST_SUCCESS',
+        response: {
+          status: response.status,
+          statusText: response.statusText,
+          headers: Object.fromEntries(response.headers.entries()),
+          data: responseData,
+          duration,
+        },
       });
 
-      consola.success(`Request successful: ${state.requestMethod} ${state.requestUrl}`);
-
-      // Auto-advance to response step
-      updateState({ currentStep: 'response' });
+      consola.success(`${state.requestMethod} ${state.requestUrl} → ${response.status} (${duration}ms)`);
     } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') return;
       consola.error('Request failed:', error);
-      setResponse({
-        error: error instanceof Error ? error.message : 'Request failed',
+
+      // Single dispatch: error response + loading=false
+      dispatch({
+        type: 'REQUEST_ERROR',
+        response: {
+          error: error instanceof Error ? error.message : 'Request failed',
+          duration: Date.now() - startTime,
+        },
       });
-    } finally {
-      setLoading(false);
     }
-  }, [state, setLoading, setResponse]);
+  }, [state.requestUrl, state.requestHeaders, state.manualApiToken, state.requestMethod, state.requestBody]);
+
+  // ── Context value ─────────────────────────────────────────────────────────
 
   const contextValue: PlaygroundContextType = {
-    // State
     state,
     config,
     apiKeys,
     apiKeysLoading: isLoadingApiKeys,
-
-    // Step management
     setCurrentStep,
     goToNextStep,
     goToPreviousStep,
-
-    // Endpoint management
     setSelectedEndpoint,
     setSelectedCategory,
     setSearchTerm,
     setSelectedVersion,
-
-    // Request management
     setRequestUrl,
     setRequestMethod,
     setRequestHeaders,
@@ -318,18 +314,12 @@ export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children
     setSelectedApiKey,
     setManualApiToken,
     setParameters,
-
-    // Response management
     setResponse,
     setLoading,
-
-    // UI management
     setSidebarOpen,
-
-    // Actions
     clearAll,
     sendRequest,
   };
 
   return <PlaygroundContext.Provider value={contextValue}>{children}</PlaygroundContext.Provider>;
-}; 
+};

package/src/tools/OpenapiViewer/types.ts

@@ -96,6 +96,7 @@ export interface ApiResponse {
   headers?: any;
   data?: any;
   error?: string;
+  duration?: number; // ms
 }
 
 // Context types