Merge pull request #4556 from thornbill/routes-cleanup

Cleanup routes

src/components/AsyncPage.tsx

@@ -1,17 +0,0 @@
-import loadable from '@loadable/component';
-
-interface AsyncPageProps {
-    /** The relative path to the page component in the routes directory. */
-    page: string
-}
-
-/**
- * Page component that uses the loadable component library to load pages defined in the routes directory asynchronously
- * with code splitting.
- */
-const AsyncPage = loadable(
-    (props: AsyncPageProps) => import(/* webpackChunkName: "[request]" */ `../routes/${props.page}`),
-    { cacheKey: (props: AsyncPageProps) => props.page }
-);
-
-export default AsyncPage;

src/components/ConnectionRequired.tsx

@@ -3,7 +3,7 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import type { ConnectResponse } from 'jellyfin-apiclient';
 
 import alert from './alert';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import Loading from './loading/LoadingComponent';
 import ServerConnections from './ServerConnections';
 import globalize from '../scripts/globalize';

src/components/alert.js

@@ -1,4 +1,4 @@
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import browser from '../scripts/browser';
 import dialog from './dialog/dialog';
 import globalize from '../scripts/globalize';

src/components/cardbuilder/cardBuilder.js

@@ -22,7 +22,7 @@ import './card.scss';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../guide/programs.scss';
 import ServerConnections from '../ServerConnections';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 
 const enableFocusTransform = !browser.slow && !browser.edge;
 

src/components/collectionEditor/collectionEditor.js

@@ -3,7 +3,7 @@ import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import layoutManager from '../layoutManager';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import globalize from '../../scripts/globalize';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';

src/components/common/GenresItemsContainer.tsx

@@ -5,7 +5,7 @@ import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client'
 import escapeHTML from 'escape-html';
 import React, { FC, useCallback, useEffect, useRef } from 'react';
 
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import cardBuilder from '../cardbuilder/cardBuilder';
 import layoutManager from '../layoutManager';
 import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';

src/components/confirm/confirm.js

@@ -1,4 +1,4 @@
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import browser from '../../scripts/browser';
 import dialog from '../dialog/dialog';
 import globalize from '../../scripts/globalize';

src/components/dialogHelper/dialogHelper.js

@@ -1,4 +1,4 @@
-import { history } from '../appRouter';
+import { history } from '../router/appRouter';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';

src/components/groupedcards.js

@@ -1,5 +1,5 @@
 import dom from '../scripts/dom';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import Dashboard from '../utils/dashboard';
 import ServerConnections from './ServerConnections';
 

src/components/homesections/homesections.js

@@ -3,7 +3,7 @@ import cardBuilder from '../cardbuilder/cardBuilder';
 import layoutManager from '../layoutManager';
 import imageLoader from '../images/imageLoader';
 import globalize from '../../scripts/globalize';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import imageHelper from '../../scripts/imagehelper';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-itemscontainer/emby-itemscontainer';

src/components/itemContextMenu.js

@@ -4,7 +4,7 @@ import dom from '../scripts/dom';
 import globalize from '../scripts/globalize';
 import actionsheet from './actionSheet/actionSheet';
 import { appHost } from './apphost';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import itemHelper from './itemHelper';
 import { playbackManager } from './playback/playbackmanager';
 import ServerConnections from './ServerConnections';

src/components/mediainfo/mediainfo.js

@@ -1,7 +1,7 @@
 import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import itemHelper from '../itemHelper';
 import indicators from '../indicators/indicators';
 import 'material-design-icons-iconfont';

src/components/metadataEditor/metadataEditor.js

@@ -20,7 +20,7 @@ import '../../styles/flexstyles.scss';
 import './style.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import template from './metadataEditor.template.html';
 
 let currentContext;

src/components/nowPlayingBar/nowPlayingBar.js

@@ -15,7 +15,7 @@ import appFooter from '../appFooter/appFooter';
 import itemShortcuts from '../shortcuts';
 import './nowPlayingBar.scss';
 import '../../elements/emby-slider/emby-slider';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 
 let currentPlayer;
 let currentPlayerSupportedCommands = [];

src/components/playback/playerSelectionMenu.js

@@ -4,7 +4,7 @@ import browser from '../../scripts/browser';
 import loading from '../loading/loading';
 import { playbackManager } from '../playback/playbackmanager';
 import { pluginManager } from '../pluginManager';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import globalize from '../../scripts/globalize';
 import { appHost } from '../apphost';
 import { enable, isEnabled, supported } from '../../scripts/autocast';

src/components/playlisteditor/playlisteditor.js

@@ -6,7 +6,7 @@ import layoutManager from '../layoutManager';
 import { playbackManager } from '../playback/playbackmanager';
 import { pluginManager } from '../pluginManager';
 import * as userSettings from '../../scripts/settings/userSettings';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import globalize from '../../scripts/globalize';
 import { PluginType } from '../../types/plugin.ts';
 

src/components/pluginManager.js

@@ -4,7 +4,7 @@ import loading from './loading/loading';
 import appSettings from '../scripts/settings/appSettings';
 import { playbackManager } from './playback/playbackmanager';
 import { appHost } from '../components/apphost';
-import { appRouter } from '../components/appRouter';
+import { appRouter } from './router/appRouter';
 import * as inputManager from '../scripts/inputManager';
 import toast from '../components/toast/toast';
 import confirm from '../components/confirm/confirm';

src/components/remotecontrol/remotecontrol.js

@@ -18,7 +18,7 @@ import './remotecontrol.scss';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 
 let showMuteButton = true;
 let showVolumeSlider = true;

src/components/router/AsyncRoute.tsx

@@ -1,19 +1,44 @@
+import loadable from '@loadable/component';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import AsyncPage from '../AsyncPage';
+export enum AsyncRouteType {
+    Stable,
+    Experimental
+}
 
 export interface AsyncRoute {
     /** The URL path for this route. */
     path: string
     /** The relative path to the page component in the routes directory. */
     page: string
+    /** The route should use the page component from the experimental app. */
+    type?: AsyncRouteType
 }
 
-export const toAsyncPageRoute = (route: AsyncRoute) => (
+interface AsyncPageProps {
+    /** The relative path to the page component in the routes directory. */
+    page: string
+}
+
+const ExperimentalAsyncPage = loadable(
+    (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/experimental/routes/${props.page}`),
+    { cacheKey: (props: AsyncPageProps) => props.page }
+);
+
+const StableAsyncPage = loadable(
+    (props: { page: string }) => import(/* webpackChunkName: "[request]" */ `../../apps/stable/routes/${props.page}`),
+    { cacheKey: (props: AsyncPageProps) => props.page }
+);
+
+export const toAsyncPageRoute = ({ path, page, type = AsyncRouteType.Stable }: AsyncRoute) => (
     <Route
-        key={route.path}
-        path={route.path}
-        element={<AsyncPage page={route.page} />}
+        key={path}
+        path={path}
+        element={(
+            type === AsyncRouteType.Experimental ?
+                <ExperimentalAsyncPage page={page} /> :
+                <StableAsyncPage page={page} />
+        )}
     />
 );

src/components/router/appRouter.js

@@ -1,15 +1,15 @@
 import { Action, createHashHistory } from 'history';
 
-import { appHost } from './apphost';
-import { clearBackdrop, setBackdropTransparency } from './backdrop/backdrop';
-import globalize from '../scripts/globalize';
-import Events from '../utils/events.ts';
-import itemHelper from './itemHelper';
-import loading from './loading/loading';
-import viewManager from './viewManager/viewManager';
-import ServerConnections from './ServerConnections';
-import alert from './alert';
-import { ConnectionState } from '../utils/jellyfin-apiclient/ConnectionState.ts';
+import { appHost } from '../apphost';
+import { clearBackdrop, setBackdropTransparency } from '../backdrop/backdrop';
+import globalize from '../../scripts/globalize';
+import Events from '../../utils/events.ts';
+import itemHelper from '../itemHelper';
+import loading from '../loading/loading';
+import viewManager from '../viewManager/viewManager';
+import ServerConnections from '../ServerConnections';
+import alert from '../alert';
+import { ConnectionState } from '../../utils/jellyfin-apiclient/ConnectionState.ts';
 
 export const history = createHashHistory();
 
@@ -247,7 +247,7 @@ class AppRouter {
             url = apiClient.getUrl(`/web${url}`);
             promise = apiClient.get(url);
         } else {
-            promise = import(/* webpackChunkName: "[request]" */ `../controllers/${url}`);
+            promise = import(/* webpackChunkName: "[request]" */ `../../controllers/${url}`);
         }
 
         promise.then((html) => {
@@ -267,7 +267,7 @@ class AppRouter {
         };
 
         if (route.controller) {
-            import(/* webpackChunkName: "[request]" */ '../controllers/' + route.controller).then(onInitComplete);
+            import(/* webpackChunkName: "[request]" */ '../../controllers/' + route.controller).then(onInitComplete);
         } else {
             onInitComplete();
         }

src/components/search/SearchSuggestions.tsx

@@ -5,7 +5,7 @@ import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
 import escapeHtml from 'escape-html';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
-import { appRouter } from '../appRouter';
+import { appRouter } from '../router/appRouter';
 import { useApi } from '../../hooks/useApi';
 import globalize from '../../scripts/globalize';
 

src/components/shortcuts.js

@@ -5,7 +5,7 @@
 
 import { playbackManager } from './playback/playbackmanager';
 import inputManager from '../scripts/inputManager';
-import { appRouter } from './appRouter';
+import { appRouter } from './router/appRouter';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
 import recordingHelper from './recordingcreator/recordinghelper';