Merge pull request #163 from devtron-labs/feat/use-prompt

feat: add use prompt for refresh

Author: AbhishekA1509

src/Shared/Hooks/UsePrompt/UsePrompt.tsx

@@ -0,0 +1,27 @@
+import { useCallback, useEffect } from 'react'
+import { UsePromptProps } from './types'
+
+/**
+ * Hook that shows a prompt when shouldPrompt is true and the user tries to leave the page through refresh
+ * Meant to be used alongside the Prompt component from react-router-dom
+ */
+const usePrompt = ({ shouldPrompt }: UsePromptProps) => {
+    const handlePageLeave = useCallback(
+        (e: BeforeUnloadEvent) => {
+            if (shouldPrompt) {
+                e.preventDefault()
+            }
+        },
+        [shouldPrompt],
+    )
+
+    useEffect(() => {
+        window.addEventListener('beforeunload', handlePageLeave)
+
+        return () => {
+            window.removeEventListener('beforeunload', handlePageLeave)
+        }
+    }, [handlePageLeave])
+}
+
+export default usePrompt

src/Shared/Hooks/UsePrompt/index.ts

@@ -0,0 +1 @@
+export { default as usePrompt } from './UsePrompt'

src/Shared/Hooks/UsePrompt/types.ts

@@ -0,0 +1,6 @@
+export interface UsePromptProps {
+    /**
+     * If true the prompt will be shown
+     */
+    shouldPrompt: boolean
+}

src/Shared/Hooks/index.ts

@@ -0,0 +1 @@
+export * from './UsePrompt'

src/Shared/index.ts

@@ -21,3 +21,4 @@ export * from './constants'
 export * from './types'
 export * from './Providers'
 export * from './constants'
+export * from './Hooks'