switch window.open with react-navi

theopensystemslab · Dec 19, 2024 · e1349ad · e1349ad
1 parent 8985c45
commit e1349ad
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx
@@ -15,7 +15,7 @@ import SaveResumeButton from "./SaveResumeButton";
 interface Props {
   children: React.ReactNode;
   isValid?: boolean;
-  isTestWrapper?: boolean;
+  isTestWarningWrapper?: boolean;
   handleSubmit?: (data?: any) => void;
 }
 
@@ -48,7 +48,6 @@ const Card: React.FC<Props> = ({
   children,
   isValid = true,
   handleSubmit,
-  isTestWrapper,
   ...props
 }) => {
   const theme = useTheme();
@@ -105,7 +104,7 @@ const Card: React.FC<Props> = ({
               </Button>
             )}
             {showSaveResumeButton && <SaveResumeButton />}
-            {isTestWrapper && <NavigateToPublishedButton />}
+            {props.isTestWarningWrapper && <NavigateToPublishedButton />}
           </Box>
         </InnerContainer>
       </Container>

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/NavigateToPublishedButton.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/NavigateToPublishedButton.tsx
@@ -1,10 +1,13 @@
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import React from "react";
+import { useNavigation } from "react-navi";
 
 import { InnerContainer } from "./SaveResumeButton";
 
 const NavigateToPublishedButton: React.FC = () => {
+  const navigation = useNavigation();
+
   const testEnvironment = window.location.pathname.endsWith("/draft")
     ? "/draft"
     : "/preview";
@@ -13,10 +16,9 @@ const NavigateToPublishedButton: React.FC = () => {
     testEnvironment,
     "/published",
   ) as `/${string}`;
-  const redirectLink = `${window.location.origin}${editorLink}`;
 
   const handleClick = () => {
-    window.open(redirectLink, "_blank");
+    navigation.navigate(editorLink);
   };
 
   return (

diff --git a/editor.planx.uk/src/pages/Preview/TestWarningPage.tsx b/editor.planx.uk/src/pages/Preview/TestWarningPage.tsx
@@ -11,7 +11,10 @@ export const TestWarningPage = ({ children }: PropsWithChildren) => {
         children
       ) : (
         <Box width="100%">
-          <Card handleSubmit={() => setShowChildren(true)} isTestWrapper={true}>
+          <Card
+            handleSubmit={() => setShowChildren(true)}
+            isTestWarningWrapper={true}
+          >
             <CardHeader
               title="This is a test environment"
               description="This version of the service is unpublished and for testing only. Do not use it to submit real applications"