@redocly/theme/src/ext/use-configure-replay.ts

Shared UI components lib

import { useEffect, useState, useCallback } from 'react';

import type {
  ConfigureRequestValues,
  ConfigureServerRequestValues,
} from '@redocly/theme/ext/configure';
import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '@redocly/theme/core/types';

type ContextProps = {
  operation: {
    name: string;
    path: string;
    operationId: string;
    href: string;
    method: string;
  };
  info: OpenAPIInfo;
  servers: OpenAPIServer[];
  userClaims: UserClaims;
};

async function getReplayConfiguration(
  _context: ContextProps,
): Promise<ConfigureRequestValues | ConfigureServerRequestValues | null> {
  // Customize this function to fetch replay configuration from your API endpoint
  // STEP 1: Uncomment the fetch code below and update the URL to your API endpoint

  // try {
  //   const response = await fetch(`/api/replay-config/${_context.operation.operationId}`, {
  //     method: 'GET',
  //     headers: {
  //       'Content-Type': 'application/json',
  //     },
  //   });

  //   if (!response.ok) {
  //     throw new Error(`HTTP error! status: ${response.status}`);
  //   }

  //   const { token } = await response.json();

  //   return {
  //     security: {
  //       default: {
  //         token: {
  //           access_token: token,
  //         }
  //       }
  //     }
  //   };
  // } catch (error) {
  //   console.warn('Failed to fetch replay configuration:', error);
  //   throw error;
  // }

  // STEP 2: Remove this return null statement once you've implemented the fetch above
  return null;
}

export function useConfigureReplay(context: ContextProps, isOpened: boolean) {
  const [config, setConfig] = useState<
    ConfigureRequestValues | ConfigureServerRequestValues | null
  >();

  const refresh = useCallback(async () => {
    try {
      const result = await getReplayConfiguration(context);
      setConfig(result);
    } catch (error) {
      console.warn(
        'Failed to configure replay for operation:',
        context.operation.operationId,
        error,
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (isOpened) {
      refresh();
    }
  }, [isOpened, refresh]);

  return { config, refresh };
}