From a1d6c406272371e6dfe43f7a803063139753af31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Lucas=20de=20Oliveira=20Lopes?=
<55464917+jlucaso1@users.noreply.github.com>
Date: Wed, 7 Feb 2024 08:40:44 -0300
Subject: [PATCH 02/12] fix: show window closing alert only when page is not
saved (#3577)
* fix: show window closing alert only when page is not saved
* chore: Refactor useReloadConfirmations hook
- Removed the `message` parameter, as it was not being used and not
supported in modern browsers
- Changed the `isActive` flag to a temporary flag and added a TODO comment to remove it later.
- Implemented the `handleRouteChangeStart` function to handle route change events and prompt the user with a confirmation dialog before leaving the page.
- Updated the dependencies of the `handleBeforeUnload` and `handleRouteChangeStart` callbacks.
- Added event listeners for `beforeunload` and `routeChangeStart` events in the `useEffect` hook.
- Cleaned up the event listeners in the cleanup function of the `useEffect` hook.
fix: Fix reload confirmations in PageDetailsPage
- Removed the TODO comment regarding fixing reload confirmations with MobX, as it has been resolved.
- Passed the `pageStore?.isSubmitting === "submitting"` flag to the `useReloadConfirmations` hook instead of an undefined message.
This commit refactors the `useReloadConfirmations` hook to improve its functionality and fixes the usage in the `PageDetailsPage` component.
---------
Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
---
web/hooks/use-reload-confirmation.tsx | 35 +++++++++++++------
.../projects/[projectId]/pages/[pageId].tsx | 5 ++-
2 files changed, 27 insertions(+), 13 deletions(-)
diff --git a/web/hooks/use-reload-confirmation.tsx b/web/hooks/use-reload-confirmation.tsx
index cdaff73652..8343ea78df 100644
--- a/web/hooks/use-reload-confirmation.tsx
+++ b/web/hooks/use-reload-confirmation.tsx
@@ -1,26 +1,41 @@
import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
-const useReloadConfirmations = (message?: string) => {
+//TODO: remove temp flag isActive later and use showAlert as the source of truth
+const useReloadConfirmations = (isActive = true) => {
const [showAlert, setShowAlert] = useState(false);
+ const router = useRouter();
const handleBeforeUnload = useCallback(
(event: BeforeUnloadEvent) => {
+ if (!isActive || !showAlert) return;
event.preventDefault();
event.returnValue = "";
- return message ?? "Are you sure you want to leave?";
},
- [message]
+ [isActive, showAlert]
+ );
+
+ const handleRouteChangeStart = useCallback(
+ (url: string) => {
+ if (!isActive || !showAlert) return;
+ const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
+ if (!leave) {
+ router.events.emit("routeChangeError");
+ throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
+ }
+ },
+ [isActive, showAlert, router.events]
);
useEffect(() => {
- if (!showAlert) {
- window.removeEventListener("beforeunload", handleBeforeUnload);
- return;
- }
-
window.addEventListener("beforeunload", handleBeforeUnload);
- return () => window.removeEventListener("beforeunload", handleBeforeUnload);
- }, [handleBeforeUnload, showAlert]);
+ router.events.on("routeChangeStart", handleRouteChangeStart);
+
+ return () => {
+ window.removeEventListener("beforeunload", handleBeforeUnload);
+ router.events.off("routeChangeStart", handleRouteChangeStart);
+ };
+ }, [handleBeforeUnload, handleRouteChangeStart, router.events]);
return { setShowAlert };
};
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index be512dda03..93a814d57e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -56,9 +56,6 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
// toast alert
const { setToastAlert } = useToast();
- //TODO:fix reload confirmations, with mobx
- const { setShowAlert } = useReloadConfirmations();
-
const { handleSubmit, setValue, watch, getValues, control, reset } = useForm({
defaultValues: { name: "", description_html: "" },
});
@@ -89,6 +86,8 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
const pageStore = usePage(pageId as string);
+ const { setShowAlert } = useReloadConfirmations(pageStore?.isSubmitting === "submitting");
+
useEffect(
() => () => {
if (pageStore) {
From 75b4c6e7d6d5c874830cd04d6d775dbbf9a6cf9b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Feb 2024 17:29:39 +0530
Subject: [PATCH 03/12] chore: posthog code refactor (#3586)
---
web/pages/_document.tsx | 6 ------
1 file changed, 6 deletions(-)
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
index 4258628391..cc0411068c 100644
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -50,12 +50,6 @@ class MyDocument extends Document {
src="https://plausible.io/js/script.js"
/>
)}
- {process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST && (
-
- )}