yaak/src-web/components/responseViewers/TextViewer.tsx

import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useCallback, useMemo } from 'react';
import { useDebouncedState } from '../../hooks/useDebouncedState';
import { useFilterResponse } from '../../hooks/useFilterResponse';
import { useResponseBodyText } from '../../hooks/useResponseBodyText';
import { useResponseContentType } from '../../hooks/useResponseContentType';
import { useToggle } from '../../hooks/useToggle';
import { tryFormatJson, tryFormatXml } from '../../lib/formatters';
import type { HttpResponse } from '../../lib/models';
import { Editor } from '../core/Editor';
import { IconButton } from '../core/IconButton';
import { Input } from '../core/Input';

interface Props {
  response: HttpResponse;
  pretty: boolean;
}

export function TextViewer({ response, pretty }: Props) {
  const [isSearching, toggleIsSearching] = useToggle();
  const [filterText, setDebouncedFilterText, setFilterText] = useDebouncedState<string>('', 400);

  const contentType = useResponseContentType(response);
  const rawBody = useResponseBodyText(response) ?? '';
  const formattedBody =
    pretty && contentType?.includes('json')
      ? tryFormatJson(rawBody)
      : pretty && contentType?.includes('xml')
      ? tryFormatXml(rawBody)
      : rawBody;
  const filteredResponse = useFilterResponse({ filter: filterText, responseId: response.id });

  const body = filteredResponse ?? formattedBody;
  const clearSearch = useCallback(() => {
    toggleIsSearching();
    setFilterText('');
  }, [setFilterText, toggleIsSearching]);

  const isJson = contentType?.includes('json');
  const isXml = contentType?.includes('xml') || contentType?.includes('html');
  const canFilter = isJson || isXml;

  const actions = useMemo<ReactNode[]>(() => {
    const result: ReactNode[] = [];

    if (!canFilter) return result;

    if (isSearching) {
      result.push(
        <div key="input" className="w-full !opacity-100">
          <Input
            hideLabel
            autoFocus
            containerClassName="bg-gray-100 dark:bg-gray-50"
            size="sm"
            placeholder={isJson ? 'JSONPath expression' : 'XPath expression'}
            label="Filter expression"
            name="filter"
            defaultValue={filterText}
            onKeyDown={(e) => e.key === 'Escape' && clearSearch()}
            onChange={setDebouncedFilterText}
          />
        </div>,
      );
    }

    result.push(
      <IconButton
        key="icon"
        size="sm"
        icon={isSearching ? 'x' : 'filter'}
        title={isSearching ? 'Close filter' : 'Filter response'}
        onClick={clearSearch}
        className={classNames(isSearching && '!opacity-100')}
      />,
    );

    return result;
  }, [canFilter, clearSearch, filterText, isJson, isSearching, setDebouncedFilterText]);

  return (
    <Editor
      readOnly
      className="bg-gray-50 dark:!bg-gray-100"
      forceUpdateKey={body}
      defaultValue={body}
      contentType={contentType}
      actions={actions}
    />
  );
}