diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx index 940f96e00b..5958d6ea70 100644 --- a/frontend/src/App/App.jsx +++ b/frontend/src/App/App.jsx @@ -178,7 +178,7 @@ class AppComponent extends React.Component { /> diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 5da9d158a3..9f32a53a9a 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -79,8 +79,14 @@ const EditorComponent = (props) => { const { socket } = createWebsocketConnection(props?.params?.id); const mounted = useMounted(); - const { updateState, updateAppDefinitionDiff, updateAppVersion, setIsSaving, createAppVersionEventHandlers } = - useAppDataActions(); + const { + updateState, + updateAppDefinitionDiff, + updateAppVersion, + setIsSaving, + createAppVersionEventHandlers, + setAppPreviewLink, + } = useAppDataActions(); const { updateEditorState, updateQueryConfirmationList, setSelectedComponents, setCurrentPageId } = useEditorActions(); @@ -1580,9 +1586,18 @@ const EditorComponent = (props) => { }); }; - const appVersionPreviewLink = editingVersion - ? `/applications/${appId}/versions/${editingVersion.id}/${currentState.page.handle}` - : ''; + useEffect(() => { + const previewQuery = queryString.stringify({ version: editingVersion?.name }); + const appVersionPreviewLink = editingVersion + ? `/applications/${slug || appId}/${currentState.page.handle}${ + !_.isEmpty(previewQuery) ? `?${previewQuery}` : '' + }` + : ''; + + setAppPreviewLink(appVersionPreviewLink); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [slug]); + const deviceWindowWidth = 450; const editorRef = { @@ -1653,7 +1668,6 @@ const EditorComponent = (props) => { darkMode={props.darkMode} appDefinition={_.cloneDeep(appDefinition)} editingVersion={editingVersion} - appVersionPreviewLink={appVersionPreviewLink} canUndo={canUndo} canRedo={canRedo} handleUndo={handleUndo} diff --git a/frontend/src/Editor/Header/GlobalSettings.jsx b/frontend/src/Editor/Header/GlobalSettings.jsx index 5ff0d306b8..972f863f18 100644 --- a/frontend/src/Editor/Header/GlobalSettings.jsx +++ b/frontend/src/Editor/Header/GlobalSettings.jsx @@ -14,7 +14,7 @@ import ExportAppModal from '../../HomePage/ExportAppModal'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; import { ButtonSolid } from '@/_ui/AppButton/AppButton'; -import { useAppInfo } from '@/_stores/appDataStore'; +import { useAppDataActions, useAppInfo } from '@/_stores/appDataStore'; export const GlobalSettings = ({ globalSettings, @@ -35,6 +35,7 @@ export const GlobalSettings = ({ const [slug, setSlug] = useState({ value: null, error: '' }); const [slugProgress, setSlugProgress] = useState(false); const [isSlugUpdated, setSlugUpdatedState] = useState(false); + const { updateState } = useAppDataActions(); const { isVersionReleased } = useAppVersionStore( (state) => ({ isVersionReleased: state.isVersionReleased, @@ -80,8 +81,10 @@ export const GlobalSettings = ({ }); setSlugProgress(false); setSlugUpdatedState(true); - replaceEditorURL(value, realState?.page?.handle); + updateState({ + slug: value, + }); }) .catch(({ error }) => { setSlug({ diff --git a/frontend/src/Editor/Header/index.js b/frontend/src/Editor/Header/index.js index 794b009800..b322903d3d 100644 --- a/frontend/src/Editor/Header/index.js +++ b/frontend/src/Editor/Header/index.js @@ -14,13 +14,12 @@ import { useUpdatePresence } from '@y-presence/react'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useCurrentState } from '@/_stores/currentStateStore'; import { shallow } from 'zustand/shallow'; -import { useAppDataActions, useAppInfo, useCurrentUser } from '@/_stores/appDataStore'; +import { useAppInfo, useCurrentUser } from '@/_stores/appDataStore'; import SolidIcon from '@/_ui/Icon/SolidIcons'; import { redirectToDashboard } from '@/_helpers/routes'; export default function EditorHeader({ M, - appVersionPreviewLink, canUndo, canRedo, handleUndo, @@ -36,7 +35,7 @@ export default function EditorHeader({ }) { const currentUser = useCurrentUser(); - const { isSaving, appId, appName, app, isPublic } = useAppInfo(); + const { isSaving, appId, appName, app, isPublic, appVersionPreviewLink } = useAppInfo(); const { isVersionReleased, editingVersion } = useAppVersionStore( (state) => ({ @@ -63,6 +62,7 @@ export default function EditorHeader({ updatePresence(initialPresence); // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentUser]); + const handleLogoClick = (e) => { e.preventDefault(); // Force a reload for clearing interval triggers diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx index f1e431fa77..25945c112c 100644 --- a/frontend/src/Editor/Viewer.jsx +++ b/frontend/src/Editor/Viewer.jsx @@ -342,6 +342,7 @@ class ViewerComponent extends React.Component { userVars, versionId, }); + versionId ? this.loadApplicationByVersion(appId, versionId) : this.loadApplicationBySlug(slug); } else if (currentSession?.authentication_failed) { this.loadApplicationBySlug(slug, true); diff --git a/frontend/src/_stores/appDataStore.js b/frontend/src/_stores/appDataStore.js index 91ec391963..a4ebf29ba7 100644 --- a/frontend/src/_stores/appDataStore.js +++ b/frontend/src/_stores/appDataStore.js @@ -23,6 +23,7 @@ const initialState = { isSaving: false, appId: null, areOthersOnSameVersionAndPage: false, + appVersionPreviewLink: null, }; export const useAppDataStore = create( @@ -107,6 +108,7 @@ export const useAppDataStore = create( setIsSaving: (isSaving) => set(() => ({ isSaving })), setAppId: (appId) => set(() => ({ appId })), + setAppPreviewLink: (appVersionPreviewLink) => set(() => ({ appVersionPreviewLink })), }, }), { name: 'App Data Store' }