feature: warn user (#163)

src/components/CodeAndPreview.tsx

@@ -16,7 +16,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
 import { PreviewContent } from "./PreviewContent"
-
+import useWarnUser from "@/hooks/use-warn-user"
 interface Props {
   snippet?: Snippet | null
 }
@@ -118,6 +118,7 @@ export function CodeAndPreview({ snippet }: Props) {
   }
 
   const hasUnsavedChanges = snippet?.code !== code
+  useWarnUser({ hasUnsavedChanges })
 
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (

src/hooks/use-warn-user.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react"
+export default function useWarnUser({
+  hasUnsavedChanges,
+}: {
+  hasUnsavedChanges: boolean
+}) {
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        event.preventDefault()
+        event.returnValue = "" // Shows the confirmation dialog on reload or close if there are unsaved changes
+      }
+    }
+
+    // Attach event listeners
+    window.addEventListener("beforeunload", handleBeforeUnload)
+
+    // Cleanup event listeners on component unmount
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+    }
+  }, [hasUnsavedChanges])
+}