streamline mini apps: add url auto nav; shortcut for registrator (#33)

Author: MykolaGolubyev

src/App.tsx

@@ -4,10 +4,11 @@ import { Registries } from './components';
 import { ComponentViewer } from './components';
 import { buttonsDemo } from './demos/buttons';
 import { linksDemo } from './demos/links';
-import { profileScreenDemo } from './demos/profileScreen';
+import { ProfileApp } from './demos/ProfileApp';
 import { sideBySideDemo } from './demos/sideBySide';
 import { inputsDemo } from './demos/inputs';
 import { WrapperProps } from './components/registry/componentWrapper';
+import { ProfileScreenDemo } from './demos/ProfileScreenDemo';
 
 const registries = new Registries({componentWrapper: DemoWrapper});
 registries.add('components')
@@ -19,8 +20,8 @@ registries.add('layouts')
     .registerAsRows('Side by Side', sideBySideDemo);
 
 registries.add('screens')
-    .registerSingle('Single Screen', profileScreenDemo)
-    .registerAsMiniApp('Single Screen mini app', '/app', profileScreenDemo);
+    .registerSingle('Single Screen', ProfileScreenDemo)
+    .registerAsMiniApp('Single Screen mini app', '/app', /\/app/, ProfileApp);
 
 export class App extends React.Component {
     render() {

src/components/registrators/NavigateToUrlWrapper.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export interface Props {
+    initialUrl: string;
+    urlRegexp: RegExp;
+    component: React.ComponentType;
+}
+
+export class NavigateToUrlWrapper extends React.Component<Props> {
+    render() {
+        const {component: Component} = this.props;
+        return (
+            <Component/>
+        );
+    }
+
+    componentDidMount() {
+        const {initialUrl, urlRegexp} = this.props;
+
+        if (urlRegexp.test(document.location.pathname +  document.location.search)) {
+            return;
+        }
+
+        document.location.href = initialUrl;
+    }
+}

src/components/registrators/registrators.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Registry } from '..';
+import { NavigateToUrlWrapper } from './NavigateToUrlWrapper';
+
+export function createRegistratorForMiniApp(initialUrl: string, urlRegexp: RegExp, miniApp: React.ComponentType) {
+    return function miniAppRegistrator(registry: Registry) {
+        registry.add(initialUrl, () => (
+            <NavigateToUrlWrapper
+                initialUrl={initialUrl}
+                urlRegexp={urlRegexp}
+                component={miniApp}
+            />)
+        );
+    };
+}
+
+export function createRegistratorForSingle(name: string, singleComponent: React.ComponentType) {
+    const SingleComponent = singleComponent;
+
+    return function singleComponentRegistrator(registry: Registry) {
+        registry.add(name, () => (<SingleComponent/>));
+    };
+}

src/components/registry/DemoEntry.ts

@@ -9,12 +9,15 @@ export class DemoEntry {
     layoutComponent: React.ComponentType<LayoutProps>;
     layoutOpts: object;
     demoInstances: DemoInstances;
-    urlPrefix: string;
+    urlRegexp?: RegExp;
 
-    constructor(name: string, layoutInstance: React.ComponentType<LayoutProps>, urlPrefix: string, layoutOpts: object) {
+    constructor(name: string,
+                layoutInstance: React.ComponentType<LayoutProps>,
+                urlRegexp: RegExp | undefined,
+                layoutOpts: object) {
         this.name = name;
         this.layoutComponent = layoutInstance;
-        this.urlPrefix = urlPrefix;
+        this.urlRegexp = urlRegexp;
         this.layoutOpts = layoutOpts;
         this.demoInstances = new DemoInstances();
     }
@@ -40,7 +43,7 @@ export class DemoEntry {
     }
 
     isMiniApp(): boolean {
-        return this.urlPrefix.length > 0;
+        return !!this.urlRegexp;
     }
 
     get firstEntryTitle(): string {

src/components/registry/Registry.ts

@@ -8,6 +8,7 @@ import { LabelInstanceTableLayout } from '../layouts/LabelInstanceTableLayout';
 import { SingleItemLayout } from '../layouts/SingleItemLayout';
 import { wrapComponent, WrapperProps } from './componentWrapper';
 import { findAndReturn } from './listUtils';
+import { createRegistratorForMiniApp, createRegistratorForSingle } from '../registrators/registrators';
 
 export interface RegistryConfig {
     componentWrapper?: React.ComponentType<WrapperProps>;
@@ -28,11 +29,11 @@ class Registry {
     }
 
     registerAsGrid(name: string, minWidth: number, componentRegistrator: (registry: Registry) => void) {
-        return this.register(name, GridLayout, componentRegistrator, '', {minWidth});
+        return this.register(name, GridLayout, componentRegistrator, undefined, {minWidth});
     }
 
     registerAsRows(name: string, componentRegistrator: (registry: Registry) => void) {
-        return this.register(name, GridLayout, componentRegistrator, '', {minWidth: 0});
+        return this.register(name, GridLayout, componentRegistrator, undefined, {minWidth: 0});
     }
 
     registerAsTabs(name: string, componentRegistrator: (registry: Registry) => void) {
@@ -43,26 +44,26 @@ class Registry {
         return this.register(name, LabelInstanceTableLayout, componentRegistrator);
     }
 
-    registerSingle(name: string, componentRegistrator: (registry: Registry) => void) {
-        this.register(name, SingleItemLayout, componentRegistrator);
-        return this;
+    registerSingle(name: string, singleComponent: React.ComponentType) {
+        return this.register(name, SingleItemLayout, createRegistratorForSingle(name, singleComponent));
     }
 
-    registerAsMiniApp(name: string, urlPrefix: string, componentRegistrator: (registry: Registry) => void) {
-        this.register(name, SingleItemLayout, componentRegistrator, urlPrefix);
+    registerAsMiniApp(name: string, initialUrl: string, urlRegexp: RegExp, appComponent: React.ComponentType) {
+        return this.register(name, SingleItemLayout,
+                             createRegistratorForMiniApp(initialUrl, urlRegexp, appComponent), urlRegexp);
     }
 
     register(name: string,
              layoutComponent: React.ComponentType<LayoutProps>,
              componentRegistrator: (registry: Registry) => void,
-             urlPrefix: string = '',
+             urlRegexp: RegExp | undefined = undefined,
              layoutOpts: object = {}) {
 
         if (this.usedNames.indexOf(name) !== -1) {
             throw new Error(`name ${name} was already used`);
         }
 
-        this.currentDemo = new DemoEntry(name, layoutComponent, urlPrefix, layoutOpts);
+        this.currentDemo = new DemoEntry(name, layoutComponent, urlRegexp, layoutOpts);
         this.demoEntries.push(this.currentDemo);
 
         this.usedNames.push(name);
@@ -102,7 +103,7 @@ class Registry {
 
     firstMiniAppByUrl(url: string): DemoEntry | null {
         const byUrl = this.demoEntries
-            .filter(entry => entry.isMiniApp() && url.startsWith(entry.urlPrefix));
+            .filter(entry => entry.isMiniApp() && entry.urlRegexp!.test(url));
 
         return byUrl.length > 0 ? byUrl[0] : null;
     }

src/components/viewer/ComponentViewer.tsx

@@ -163,7 +163,7 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
     }
 
     stateFromUrl() {
-        return this.stateCreator.stateFromUrl(document.location.search);
+        return this.stateCreator.stateFromUrl(document.location.pathname, document.location.search);
     }
 
     updateStateFromUrl = (callback?: () => void) => {

src/components/viewer/ComponentViewerStateCreator.test.tsx

@@ -9,20 +9,20 @@ describe('ComponentViewerStateCreator', () => {
     beforeAll(() => {
         registries = new Registries();
         registries.add('core')
-            .registerSingle('FirstC', (registry => registry.add('title-c-a', () => <div/>)));
+            .registerSingle('FirstC', () => <div/>);
         registries.add('widgets')
-            .registerSingle('FirstW', (registry => registry.add('title-w-a', () => <div/>)));
+            .registerSingle('FirstW', () => <div/>);
 
     });
 
     it('should pick the first registry, first demo and demo entry if url has no query params', () => {
         const stateCreator = new ComponentViewerStateCreator(registries);
-        const state = stateCreator.stateFromUrl('/path');
+        const state = stateCreator.stateFromUrl('/path', '');
 
         expect(state).toEqual({
             registryName: 'core',
             demoName: 'FirstC',
-            entryTitle: 'title-c-a',
+            entryTitle: 'FirstC',
             filterText: '',
             isFullScreen: false,
             isHelpOn: false,
@@ -32,7 +32,7 @@ describe('ComponentViewerStateCreator', () => {
 
     it('should take fullscreen state from url', () => {
         const stateCreator = new ComponentViewerStateCreator(registries);
-        const state = stateCreator.stateFromUrl('_rcv_fs=true');
+        const state = stateCreator.stateFromUrl('', '_rcv_fs=true');
 
         expect(state.isFullScreen).toEqual(true);
     });

src/components/viewer/ComponentViewerStateCreator.ts

@@ -29,12 +29,12 @@ export class ComponentViewerStateCreator {
         this._registries = registries;
     }
 
-    stateFromUrl(url: string): ComponentViewerState {
-        const searchParams = new URLSearchParams(url);
+    stateFromUrl(path: string, search: string): ComponentViewerState {
+        const searchParams = new URLSearchParams(search);
 
         const selectedToolbarItem = searchParams.get(queryParamNames.selectedToolbarItem) || '';
 
-        const miniAppByUrl = this.miniAppByUrl(url);
+        const miniAppByUrl = this.miniAppByUrl(path + search);
         if (miniAppByUrl) {
             return {
                 registryName: miniAppByUrl.registry.name,

src/demos/ProfileApp.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ProfileScreenDemo } from './ProfileScreenDemo';
+
+export function ProfileApp() {
+    return (
+        <ProfileScreenDemo/>
+    );
+}

src/demos/ProfileScreenDemo.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function ProfileScreenDemo() {
+    return (
+        <div>Profile Screen</div>
+    );
+}