client/src/components/Nav/SettingsTabs/Data/DeleteCacheButton.tsx

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { useOnClickOutside } from '~/hooks';
import DangerButton from '../DangerButton';

export const DeleteCacheButton = ({
  showText = true,
  disabled = false,
}: {
  showText?: boolean;
  disabled?: boolean;
}) => {
  const [confirmClear, setConfirmClear] = useState(false);
  const [isCacheEmpty, setIsCacheEmpty] = useState(true);
  const contentRef = useRef(null);
  useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);

  const checkCache = useCallback(async () => {
    const cache = await caches.open('tts-responses');
    const keys = await cache.keys();
    setIsCacheEmpty(keys.length === 0);
  }, []);

  useEffect(() => {
    checkCache();
  }, [confirmClear]);

  const revokeAllUserKeys = useCallback(async () => {
    if (confirmClear) {
      const cache = await caches.open('tts-responses');
      await cache.keys().then((keys) => Promise.all(keys.map((key) => cache.delete(key))));

      setConfirmClear(false);
    } else {
      setConfirmClear(true);
    }
  }, [confirmClear]);

  return (
    <DangerButton
      ref={contentRef}
      showText={showText}
      onClick={revokeAllUserKeys}
      disabled={disabled || isCacheEmpty}
      confirmClear={confirmClear}
      id={'delete-cache'}
      actionTextCode={'com_ui_delete'}
      infoTextCode={'com_nav_delete_cache_storage'}
      infoDescriptionCode={'com_nav_info_delete_cache_storage'}
      dataTestIdInitial={'delete-cache-initial'}
      dataTestIdConfirm={'delete-cache-confirm'}
    />
  );
};