From 080b2a9ab8e12aa248ed5cb265015aefede7018d Mon Sep 17 00:00:00 2001 From: Daniel Callaghan <84312595+xiaoniuniu89@users.noreply.github.com> Date: Sun, 10 Dec 2023 10:39:21 +0000 Subject: [PATCH 01/10] fix(prompt): update next towork with progress bar, update link to intercept route changes, update prompt for unsaved changes --- app/create/[[...paramsArr]]/_client.tsx | 8 ++++ app/layout.tsx | 19 +++++---- components/Link/Link.tsx | 51 +++++++++++++++++++++++++ components/Nav/MobileNav.tsx | 6 +-- components/Nav/Nav.tsx | 20 +++++----- components/ProgressBar/ProgressBar.tsx | 24 ++++++++++++ context/PromptContext.tsx | 21 ++++++++++ hooks/useCreatePage.ts | 29 +++++++------- markdoc/tags/index.ts | 2 + package-lock.json | 3 +- 10 files changed, 145 insertions(+), 38 deletions(-) create mode 100644 components/Link/Link.tsx create mode 100644 components/ProgressBar/ProgressBar.tsx create mode 100644 context/PromptContext.tsx diff --git a/app/create/[[...paramsArr]]/_client.tsx b/app/create/[[...paramsArr]]/_client.tsx index 0464a3c3..9a3ec822 100644 --- a/app/create/[[...paramsArr]]/_client.tsx +++ b/app/create/[[...paramsArr]]/_client.tsx @@ -19,6 +19,7 @@ import { useMarkdownShortcuts } from "../../../markdoc/editor/shortcuts/shortcut import { markdocComponents } from "../../../markdoc/components"; import { config } from "../../../markdoc/config"; import { redirect, useParams } from "next/navigation"; +import { usePrompt } from "@/context/PromptContext"; const Create = () => { const params = useParams(); @@ -35,6 +36,13 @@ const Create = () => { const [shouldRefetch, setShouldRefetch] = useState(true); const [unsavedChanges, setUnsavedChanges] = useState(false); + const { unsavedChanges: _unsaved, setUnsavedChanges: _setUnsaved } = + usePrompt(); + + useEffect(() => { + _setUnsaved(unsavedChanges); + }, [unsavedChanges, _setUnsaved]); + const allowUpdate = unsavedChanges; const textareaRef = useRef(null); diff --git a/app/layout.tsx b/app/layout.tsx index cce14aec..7a58ef1a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -8,9 +8,10 @@ import Nav from "@/components/Nav/Nav"; import { getServerAuthSession } from "@/server/auth"; import AuthProvider from "@/context/AuthProvider"; import { Toaster } from "sonner"; -import NextTopLoader from "nextjs-toploader"; +import ProgressBar from "@/components/ProgressBar/ProgressBar"; import React from "react"; import A11yProvider from "@/components/A11yProvider/A11yProvider"; +import { PromptProvider } from "@/context/PromptContext"; // @TODO layout app in way that doesn't need to use client session check export const metadata = { @@ -55,18 +56,16 @@ export default async function RootLayout({ - + - -