Merge pull request #1093 from lightninglabs/path-prefix-custom-session

app: fix custom session routes with path prefix

Author: ViktorTigerstrom

app/src/components/connect/CustomSessionPage.tsx

@@ -1,20 +1,20 @@
 import React, { FormEvent, useCallback } from 'react';
+import { Collapse } from 'react-collapse';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
-import { useStore } from 'store';
 import { usePrefixedTranslation } from 'hooks';
-import { Collapse } from 'react-collapse';
-import { Column, Row, ChevronUp, ChevronDown } from 'components/base';
-import { Paragraph, Small, Label } from 'components/common/v2/Text';
-import OverlayFormWrap from 'components/common/OverlayFormWrap';
+import { useStore } from 'store';
+import { PermissionTypeValues } from 'store/views/addSessionView';
+import { ChevronDown, ChevronUp, Column, Row } from 'components/base';
+import FormDate from 'components/common/FormDate';
 import FormField from 'components/common/FormField';
 import FormInput from 'components/common/FormInput';
 import FormInputNumber from 'components/common/FormInputNumber';
 import FormSelect from 'components/common/FormSelect';
-import FormDate from 'components/common/FormDate';
+import OverlayFormWrap from 'components/common/OverlayFormWrap';
 import FormSwitch from 'components/common/v2/FormSwitch';
+import { Label, Paragraph, Small } from 'components/common/v2/Text';
 import PurpleButton from './PurpleButton';
-import { PermissionTypeValues } from 'store/views/addSessionView';
 
 const Styled = {
   Wrapper: styled.div`
@@ -101,7 +101,7 @@ const CustomSessionPage: React.FC = () => {
 
   const handleBack = useCallback(() => {
     addSessionView.cancel();
-    appView.goTo('/connect');
+    appView.goToConnect();
   }, [appView]);
 
   const handleSubmit = useCallback(async (event: FormEvent<HTMLFormElement>) => {

app/src/store/views/addSessionView.ts

@@ -1,7 +1,7 @@
 import { makeAutoObservable, observable } from 'mobx';
-import { Store } from 'store';
 import * as LIT from 'types/generated/lit-sessions_pb';
 import { MAX_DATE, PermissionUriMap } from 'util/constants';
+import { Store } from 'store';
 
 export enum PermissionTypeValues {
   Admin = 'admin',
@@ -216,8 +216,7 @@ export default class AddSessionView {
 
   async handleSubmit() {
     if (this.permissionType === PermissionTypeValues.Custom) {
-      this._store.settingsStore.sidebarVisible = false;
-      this._store.router.push('/connect/custom');
+      this._store.appView.goToConnectCustom();
     } else {
       const session = await this._store.sessionStore.addSession(
         this.label,
@@ -264,7 +263,7 @@ export default class AddSessionView {
 
     if (session) {
       this.cancel();
-      this._store.router.push('/connect');
+      this._store.appView.goToConnect();
     }
   }
 

app/src/store/views/appView.ts

@@ -34,27 +34,28 @@ export default class AppView {
 
   /** navigate to the specified route */
   goTo(route: string) {
-    if (this._store.router.location.pathname !== route) {
-      this._store.router.push(route);
+    const path = `${PUBLIC_URL}${route}`;
+    if (this._store.router.location.pathname !== path) {
+      this._store.router.push(path);
     }
   }
 
   /** Change to the Auth page */
   gotoAuth() {
-    this.goTo(`${PUBLIC_URL}/`);
+    this.goTo(`/`);
     this._store.log.info('Go to the Auth page');
   }
 
   /** Change to the Home page */
   goToHome() {
-    this.goTo(`${PUBLIC_URL}/home`);
+    this.goTo(`/home`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the Home page');
   }
 
   /** Change to the Loop page */
   goToLoop() {
-    this.goTo(`${PUBLIC_URL}/loop`);
+    this.goTo(`/loop`);
     this._store.settingsStore.autoCollapseSidebar();
     if (!this._store.settingsStore.tourAutoShown) {
       this.showTour();
@@ -65,33 +66,40 @@ export default class AppView {
 
   /** Change to the History page */
   goToHistory() {
-    this.goTo(`${PUBLIC_URL}/history`);
+    this.goTo(`/history`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the History page');
   }
 
   /** Change to the Pool page */
   goToPool() {
-    this.goTo(`${PUBLIC_URL}/pool`);
+    this.goTo(`/pool`);
     // always collapse the sidebar to make room for the Pool sidebar
     this._store.settingsStore.sidebarVisible = false;
     this._store.log.info('Go to the Pool page');
   }
 
   /** Change to the Settings page */
   goToSettings() {
-    this.goTo(`${PUBLIC_URL}/settings`);
+    this.goTo(`/settings`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the Settings page');
   }
 
   /** Change to the Connect page */
   goToConnect() {
-    this.goTo(`${PUBLIC_URL}/connect`);
+    this.goTo(`/connect`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the Connect page');
   }
 
+  /** Change to the Connect Custom page */
+  goToConnectCustom() {
+    this.goTo(`/connect/custom`);
+    this._store.settingsStore.autoCollapseSidebar();
+    this._store.log.info('Go to the Connect Custom page');
+  }
+
   /** Toggle displaying of the Processing Loops section */
   toggleProcessingSwaps() {
     this.processingSwapsVisible = !this.processingSwapsVisible;
@@ -178,7 +186,7 @@ export default class AppView {
   /** sets the selected setting to display */
   showSettings(name: SettingName) {
     const path = name === '' ? '' : `/${name}`;
-    this.goTo(`${PUBLIC_URL}/settings${path}`);
+    this.goTo(`/settings${path}`);
     this._store.log.info('Switch to Setting screen', name);
   }
 

docs/release-notes/release-notes-0.15.0.md

@@ -15,6 +15,9 @@
 
 ### Bug Fixes
 
+* [Fixed navigation issues](https://github.com/lightninglabs/lightning-terminal/pull/1093) 
+  when creating a custom Lightning Node Connect session via the UI.
+
 ### Functional Changes/Additions
 
 * [`litcli`: global flags to allow overrides via environment