app: fix custom session routes with path prefix

When running litd using a path-prefix (ex: PUBLIC_URL=/lit), the route
navigation was not working properly. It would navigate to `/connect`
instead of `/lit/connect`. The fix was simply to ensure the new route
was always prefixed with the `PUBLIC_URL` env var.

Author: jamaljsr

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

@@ -92,6 +92,13 @@ export default class AppView {
     this._store.log.info('Go to the Connect page');
   }
 
+  /** Change to the Connect Custom page */
+  goToConnectCustom() {
+    this.goTo(`${PUBLIC_URL}/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;