From 9c16c3fdb70425ac25e6fe64f61cbe28bbe1c72c Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:03:58 +0300
Subject: [PATCH] Fix navigation

---
 rsconcept/frontend/src/App.tsx                |  9 ++-
 .../src/context/NagivationContext.tsx         | 69 ++++++++++++-------
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  3 +-
 .../pages/UserProfilePage/EditorProfile.tsx   | 12 +---
 4 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index 2f0e2fdb..8a5abc9f 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -79,18 +79,17 @@ const router = createBrowserRouter([
         path: 'manuals',
         element: <ManualsPage />,
       },
-
       {
         path: 'library',
         element: <LibraryPage />,
       },
       {
-        path: 'rsforms/:id',
-        element: <RSFormPage />,
+        path: 'library/create',
+        element: <CreateRSFormPage />,
       },
       {
-        path: 'rsform-create',
-        element: <CreateRSFormPage />,
+        path: 'rsforms/:id',
+        element: <RSFormPage />,
       },
     ]
   },
diff --git a/rsconcept/frontend/src/context/NagivationContext.tsx b/rsconcept/frontend/src/context/NagivationContext.tsx
index 1ac9f60f..123c8da2 100644
--- a/rsconcept/frontend/src/context/NagivationContext.tsx
+++ b/rsconcept/frontend/src/context/NagivationContext.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { unstable_usePrompt, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { globalIDs } from '@/utils/constants';
 
@@ -33,17 +33,17 @@ interface NavigationStateProps {
 export const NavigationState = ({ children }: NavigationStateProps) => {
   const router = useNavigate();
   const { pathname } = useLocation();
-
+  
   const [isBlocked, setIsBlocked] = useState(false);
-  unstable_usePrompt({
-    when: isBlocked,
-    message: 'Изменения не сохранены. Вы уверены что хотите совершить переход?'
-  });
-
-  const canBack = useCallback(
+  const validate = useCallback(
   () => {
-    return (!!window.history && window.history?.length !== 0);
-  }, []);
+    return (
+      !isBlocked ||
+      confirm('Изменения не сохранены. Вы уверены что хотите совершить переход?')
+    );
+  }, [isBlocked]);
+
+  const canBack = useCallback(() => (!!window.history && window.history?.length !== 0), []);
 
   const scrollTop = useCallback(
   () => {
@@ -56,31 +56,39 @@ export const NavigationState = ({ children }: NavigationStateProps) => {
 
   const push = useCallback(
   (path: string) => {
-    scrollTop();
-    setIsBlocked(false);
-    router(path);
-  }, [router, scrollTop]);
+    if (validate()) {
+      scrollTop();
+      router(path);
+      setIsBlocked(false);
+    }
+  }, [router, validate, scrollTop]);
 
   const replace = useCallback(
   (path: string) => {
-    scrollTop();
-    setIsBlocked(false);
-    router(path, {replace: true});
-  }, [router, scrollTop]);
+    if (validate()) {
+      scrollTop();
+      router(path, {replace: true});
+      setIsBlocked(false);
+    }
+  }, [router, validate, scrollTop]);
 
   const back = useCallback(
   () => {
-    scrollTop();
-    setIsBlocked(false);
-    router(-1);
-  }, [router, scrollTop]);
+    if (validate()) {
+      scrollTop();
+      router(-1);
+      setIsBlocked(false);
+    }
+  }, [router, validate, scrollTop]);
 
   const forward = useCallback(
   () => {
-    scrollTop();
-    setIsBlocked(false);
-    router(1);
-  }, [router, scrollTop]);
+    if (validate()) {
+      scrollTop();
+      router(1);
+      setIsBlocked(false);
+    }
+  }, [router, validate, scrollTop]);
 
   useEffect(() => {
     scrollTop();
@@ -94,3 +102,12 @@ export const NavigationState = ({ children }: NavigationStateProps) => {
     {children}
   </NagivationContext.Provider>);
 }
+
+export function useBlockNavigation(isBlocked: boolean) {
+  const router = useConceptNavigation();
+  useEffect(
+  () => {
+    router.setIsBlocked(isBlocked);
+    return () => router.setIsBlocked(false);
+  }, [router, isBlocked]);
+}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 8be3a507..6017d031 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -11,7 +11,7 @@ import ConceptTab from '@/components/Common/ConceptTab';
 import TextURL from '@/components/Common/TextURL';
 import InfoError, { ErrorData } from '@/components/InfoError';
 import { useLibrary } from '@/context/LibraryContext';
-import { useConceptNavigation } from '@/context/NagivationContext';
+import { useBlockNavigation, useConceptNavigation } from '@/context/NagivationContext';
 import { useRSForm } from '@/context/RSFormContext';
 import { useConceptTheme } from '@/context/ThemeContext';
 import DlgCloneLibraryItem from '@/dialogs/DlgCloneLibraryItem';
@@ -66,6 +66,7 @@ function RSTabs() {
   const { setNoFooter, noNavigation } = useConceptTheme();
 
   const [isModified, setIsModified] = useState(false);
+  useBlockNavigation(isModified);
 
   const [activeTab, setActiveTab] = useState(RSTabID.CARD);
   const [activeID, setActiveID] = useState<number | undefined>(undefined);
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
index 65348df0..438a3e8b 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx
@@ -1,17 +1,16 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import SubmitButton from '@/components/Common/SubmitButton';
 import TextInput from '@/components/Common/TextInput';
-import { useConceptNavigation } from '@/context/NagivationContext';
+import { useBlockNavigation } from '@/context/NagivationContext';
 import { useUserProfile } from '@/context/UserProfileContext';
 import { IUserUpdateData } from '@/models/library';
 
 function EditorProfile() {
   const { updateUser, user, processing } = useUserProfile();
-  const router = useConceptNavigation();
   
   const [username, setUsername] = useState('');
   const [email, setEmail] = useState('');
@@ -29,12 +28,7 @@ function EditorProfile() {
       user.last_name !== last_name
     );
   }, [user, email, first_name, last_name]);
-
-  useEffect(
-  () => {
-    router.setIsBlocked(isModified);
-    return () => router.setIsBlocked(false);
-  }, [router, isModified]);
+  useBlockNavigation(isModified);
 
   useLayoutEffect(() => {
     if (user) {