import React , { FunctionComponent , useMemo } from 'react' ; import { Route , RouteComponentProps , Router , Switch } from 'react-router-dom' ; import { History } from 'history' ; import { Observable } from 'rxjs' ; import useObservable from 'react-use/lib/useObservable' ; import type { MountPoint } from '../../types' ; import { AppLeaveHandler , AppStatus , Mounter } from '../types' ; import { AppContainer } from './app_container' ; import { ScopedHistory } from '../scoped_history' ; interface Props { mounters : Map < string , Mounter > ; history : History ; appStatuses$ : Observable < Map < string , AppStatus > > ; setAppLeaveHandler : ( appId : string , handler : AppLeaveHandler ) => void ; setAppActionMenu : ( appId : string , mount : MountPoint | undefined ) => void ; setIsMounting : ( isMounting : boolean ) => void ; } interface Params { appId : string ; } export const AppRouter = ( { history , mounters , setAppLeaveHandler , setAppActionMenu , appStatuses$ , setIsMounting , } ) => { const appStatuses = useObservable ( appStatuses$ , new Map ( ) ) ; const createScopedHistory = useMemo ( ( ) => ( appPath ) => new ScopedHistory ( history , appPath ) , [ history ] ) ; return ( < Router history = { history } > < Switch > { [ ... mounters ] . map ( ( [ appId , mounter ] ) => ( < Route key = { mounter . appRoute } path = { mounter . appRoute } exact = { mounter . exactRoute } render = { ( { match : { path } } ) => ( < AppContainer appPath = { path } appStatus = { appStatuses . get ( appId ) ?? AppStatus . inaccessible } createScopedHistory = { createScopedHistory } { ... { appId , mounter , setAppLeaveHandler , setAppActionMenu , setIsMounting } } />)}/ > ) ) } { } < Route path = "/app/:appId" render = { ( { match : { params : { appId } , url , } , } ) => { const [ id , mounter ] = mounters . has ( appId ) ? [ appId , mounters . get ( appId ) ] : [ ] ; return ( < AppContainer appPath = { url } appId = { id ?? appId } appStatus = { appStatuses . get ( appId ) ?? AppStatus . inaccessible } createScopedHistory = { createScopedHistory } { ... { mounter , setAppLeaveHandler , setAppActionMenu , setIsMounting } } />); } } /> < /Switch> < /Router>); } ;