Add react-router

src/components/HistoryRouter.tsx

@@ -0,0 +1,22 @@
+import React, { useLayoutEffect } from 'react';
+import { HistoryRouterProps, Router } from 'react-router-dom';
+
+export function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
+    const [state, setState] = React.useState({
+        action: history.action,
+        location: history.location
+    });
+
+    useLayoutEffect(() => history.listen(setState), [history]);
+
+    return (
+        <Router
+            basename={basename}
+            // eslint-disable-next-line react/no-children-prop
+            children={children}
+            location={state.location}
+            navigationType={state.action}
+            navigator={history}
+        />
+    );
+}

src/components/Page.tsx

@@ -0,0 +1,50 @@
+import React, { FunctionComponent, useEffect, useRef } from 'react';
+
+import viewManager from './viewManager/viewManager';
+
+type PageProps = {
+    title?: string
+};
+
+/**
+ * Page component that handles hiding active non-react views, triggering the required events for
+ * navigation and appRouter state updates, and setting the correct classes and data attributes.
+ */
+const Page: FunctionComponent<PageProps> = ({ children, title }) => {
+    const element = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // hide active non-react views
+        viewManager.hideView();
+    }, []);
+
+    useEffect(() => {
+        const event = {
+            bubbles: true,
+            cancelable: false,
+            detail: {
+                isRestored: false
+            }
+        };
+        // pagebeforeshow - hides tabs on tabless pages in libraryMenu
+        element.current?.dispatchEvent(new CustomEvent('pagebeforeshow', event));
+        // viewshow - updates state of appRouter
+        element.current?.dispatchEvent(new CustomEvent('viewshow', event));
+        // pageshow - updates header/navigation in libraryMenu
+        element.current?.dispatchEvent(new CustomEvent('pageshow', event));
+    }, [ element ]);
+
+    return (
+        <div
+            ref={element}
+            data-role='page'
+            className='mainAnimatedPage page libraryPage allLibraryPage noSecondaryNavPage'
+            data-title={title}
+            data-backbutton='true'
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Page;

src/components/appRouter.js

@@ -122,7 +122,7 @@ class AppRouter {
                 isBack: action === Action.Pop
             });
         } else {
-            console.warn('[appRouter] "%s" route not found', normalizedPath, location);
+            console.info('[appRouter] "%s" route not found', normalizedPath, location);
         }
     }
 
@@ -139,7 +139,7 @@ class AppRouter {
             Events.on(apiClient, 'requestfail', this.onRequestFail);
         });
 
-        ServerConnections.connect().then(result => {
+        return ServerConnections.connect().then(result => {
             this.firstConnectionResult = result;
 
             // Handle the initial route

src/components/pages/SearchPage.tsx

@@ -1,42 +0,0 @@
-import React, { FunctionComponent, useState } from 'react';
-
-import SearchFields from '../search/SearchFields';
-import SearchResults from '../search/SearchResults';
-import SearchSuggestions from '../search/SearchSuggestions';
-import LiveTVSearchResults from '../search/LiveTVSearchResults';
-
-type SearchProps = {
-    serverId?: string,
-    parentId?: string,
-    collectionType?: string
-};
-
-const SearchPage: FunctionComponent<SearchProps> = ({ serverId, parentId, collectionType }: SearchProps) => {
-    const [ query, setQuery ] = useState<string>();
-
-    return (
-        <>
-            <SearchFields onSearch={setQuery} />
-            {!query &&
-                <SearchSuggestions
-                    serverId={serverId || window.ApiClient.serverId()}
-                    parentId={parentId}
-                />
-            }
-            <SearchResults
-                serverId={serverId || window.ApiClient.serverId()}
-                parentId={parentId}
-                collectionType={collectionType}
-                query={query}
-            />
-            <LiveTVSearchResults
-                serverId={serverId || window.ApiClient.serverId()}
-                parentId={parentId}
-                collectionType={collectionType}
-                query={query}
-            />
-        </>
-    );
-};
-
-export default SearchPage;

src/components/search/LiveTVSearchResults.tsx

@@ -21,8 +21,8 @@ const CARD_OPTIONS = {
 
 type LiveTVSearchResultsProps = {
     serverId?: string;
-    parentId?: string;
-    collectionType?: string;
+    parentId?: string | null;
+    collectionType?: string | null;
     query?: string;
 }
 

src/components/search/SearchResults.tsx

@@ -9,8 +9,8 @@ import SearchResultsRow from './SearchResultsRow';
 
 type SearchResultsProps = {
     serverId?: string;
-    parentId?: string;
-    collectionType?: string;
+    parentId?: string | null;
+    collectionType?: string | null;
     query?: string;
 }
 

src/components/search/SearchSuggestions.tsx

@@ -22,7 +22,7 @@ const createSuggestionLink = ({ name, href }: { name: string, href: string }) =>
 
 type SearchSuggestionsProps = {
     serverId?: string;
-    parentId?: string;
+    parentId?: string | null;
 }
 
 const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ serverId = window.ApiClient.serverId(), parentId }: SearchSuggestionsProps) => {

src/components/viewManager/viewManager.js

@@ -147,6 +147,15 @@ class ViewManager {
         });
     }
 
+    hideView() {
+        if (currentView) {
+            dispatchViewEvent(currentView, null, 'viewbeforehide');
+            dispatchViewEvent(currentView, null, 'viewhide');
+            currentView.classList.add('hide');
+            currentView = null;
+        }
+    }
+
     tryRestoreView(options, onViewChanging) {
         if (options.cancel) {
             return Promise.reject({ cancelled: true });