fix: Flow URLs should re-compute on re-render of Sidebar

theopensystemslab · Sep 17, 2024 · 099a5b1 · 099a5b1
1 parent 3389060
commit 099a5b1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishFlowButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Publish/PublishFlowButton.tsx
@@ -12,9 +12,9 @@ import { useStore } from "pages/FlowEditor/lib/store";
 import { formatLastPublishMessage } from "pages/FlowEditor/utils";
 import React, { useState } from "react";
 import { useAsync } from "react-use";
+import { rootFlowPath } from "routes/utils";
 import Input from "ui/shared/Input";
 
-import { urls } from "..";
 import {
   AlteredNode,
   AlteredNodesSummaryContent,
@@ -107,6 +107,9 @@ export const PublishFlowButton = () => {
   // useStore.getState().getTeam().slug undefined here, use window instead
   const teamSlug = window.location.pathname.split("/")[1];
 
+  const baseURL = `${window.location.origin}${rootFlowPath(false)}`;
+  const previewURL = baseURL + "/preview";
+
   return (
     <Box width="100%" mt={2}>
       <Box display="flex" flexDirection="column" alignItems="flex-end">
@@ -147,7 +150,7 @@ export const PublishFlowButton = () => {
                 <Box pb={2}>
                   <Typography variant="body2">
                     {`Preview these content changes in-service before publishing `}
-                    <Link href={urls.preview} target="_blank">
+                    <Link href={previewURL} target="_blank">
                       {`here (opens in a new tab).`}
                     </Link>
                   </Typography>

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -24,14 +24,6 @@ import StyledTab from "./StyledTab";
 
 type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";
 
-const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
-
-export const urls = {
-  preview: baseUrl + "/preview",
-  draft: baseUrl + "/draft",
-  analytics: baseUrl + "/published" + "?analytics=false",
-};
-
 const Root = styled(Box)(({ theme }) => ({
   position: "relative",
   top: "0",
@@ -111,10 +103,21 @@ const Sidebar: React.FC = React.memo(() => {
 
   const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
 
-  const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => {
+  const handleChange = (
+    _event: React.SyntheticEvent,
+    newValue: SidebarTabs,
+  ) => {
     setActiveTab(newValue);
   };
 
+  const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
+
+  const urls = {
+    preview: baseUrl + "/preview",
+    draft: baseUrl + "/draft",
+    analytics: baseUrl + "/published" + "?analytics=false",
+  };
+
   return (
     <Root>
       <Header>