fixes: slug app link (#8008)

frontend/src/App/App.jsx

@@ -178,7 +178,7 @@ class AppComponent extends React.Component {
               />
               <Route
                 exact
-                path="/applications/:slug/:pageHandle?/*"
+                path="/applications/:slug/:pageHandle?"
                 element={
                   <PrivateRoute>
                     <Viewer switchDarkMode={this.switchDarkMode} darkMode={darkMode} />

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}

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({

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

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);

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' }