useConfirm

PHOTO EMBED

Tue Jul 19 2022 11:20:54 GMT+0000 (Coordinated Universal Time)

Saved by @avivdaniel #javascript #react.js

import { useEffect, useState } from 'react';

interface ConfirmState {
  isOpen: boolean;
  proceed: any;
  cancel: any;
}

interface UseConfirmReturnType extends ConfirmState {
  isConfirm: () => Promise<boolean>;
}

export const useConfirm = (): UseConfirmReturnType => {
  const [confirm, setConfirm] = useState<ConfirmState>({} as ConfirmState);
  const [needsCleanup, setNeedsCleanup] = useState(false);

  const isConfirm = () => {
    setNeedsCleanup(true);
    const promise = new Promise((resolve, reject) => {
      setConfirm({
        isOpen: true,
        proceed: resolve,
        cancel: reject,
      });
    });

    return promise.then(
      () => {
        setConfirm({ ...confirm, isOpen: false });
        return true;
      },
      () => {
        setConfirm({ ...confirm, isOpen: false });
        return false;
      }
    );
  };

  useEffect(() => {
    return () => {
      if (confirm.cancel && needsCleanup) {
        confirm.cancel();
      }
    };
  }, [confirm, needsCleanup]);

  return {
    ...confirm,
    isConfirm,
  };
};
content_copyCOPY