Extract http into separate parameter

This commit is contained in:
Jerko Steiner 2019-05-08 10:54:05 +12:00
parent c44d605890
commit 798c4987f8
3 changed files with 38 additions and 13 deletions

View File

@ -1,21 +1,28 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import {Action} from 'redux' import {Action} from 'redux'
import {IAPIDef} from '@rondo/common'
import {IClientConfig} from './IClientConfig' import {IClientConfig} from './IClientConfig'
import {IHTTPClient, HTTPClient} from '../http'
import {IRenderer} from './IRenderer' import {IRenderer} from './IRenderer'
import {TStoreFactory} from './TStoreFactory'
import {Provider} from 'react-redux' import {Provider} from 'react-redux'
import {Router} from 'react-router-dom' import {Router} from 'react-router-dom'
import {TStoreFactory} from './TStoreFactory'
import {createBrowserHistory} from 'history' import {createBrowserHistory} from 'history'
export interface IClientRendererParams<State, A extends Action> { export interface IClientRendererParams<
State, A extends Action, D extends IAPIDef> {
readonly createStore: TStoreFactory<State, A | any>, readonly createStore: TStoreFactory<State, A | any>,
readonly RootComponent: React.ComponentType<{config: IClientConfig}>, readonly RootComponent: React.ComponentType<{
config: IClientConfig,
http: IHTTPClient<D>
}>,
readonly target?: HTMLElement readonly target?: HTMLElement
} }
export class ClientRenderer<State, A extends Action> implements IRenderer { export class ClientRenderer<State, A extends Action, D extends IAPIDef>
constructor(readonly params: IClientRendererParams<State, A>) {} implements IRenderer {
constructor(readonly params: IClientRendererParams<State, A, D>) {}
render( render(
url: string, url: string,
@ -28,6 +35,8 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
target = document.getElementById('container'), target = document.getElementById('container'),
} = this.params } = this.params
const http = new HTTPClient<D>(config.baseUrl)
const history = createBrowserHistory({ const history = createBrowserHistory({
basename: config.baseUrl, basename: config.baseUrl,
}) })
@ -37,7 +46,7 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
ReactDOM.hydrate( ReactDOM.hydrate(
<Provider store={store}> <Provider store={store}>
<Router history={history}> <Router history={history}>
<RootComponent config={config} /> <RootComponent config={config} http={http} />
</Router> </Router>
</Provider>, </Provider>,
target, target,
@ -47,7 +56,7 @@ export class ClientRenderer<State, A extends Action> implements IRenderer {
ReactDOM.render( ReactDOM.render(
<Provider store={store}> <Provider store={store}>
<Router history={history}> <Router history={history}>
<RootComponent config={config} /> <RootComponent config={config} http={http} />
</Router> </Router>
</Provider>, </Provider>,
target, target,

View File

@ -1,5 +1,10 @@
import {IAPIDef} from '@rondo/common'
import {IClientConfig} from './IClientConfig' import {IClientConfig} from './IClientConfig'
export interface IRenderer { export interface IRenderer {
render(url: string, config: IClientConfig, state?: any): any render(
url: string,
config: IClientConfig,
state?: any,
): any
} }

View File

@ -1,21 +1,32 @@
import React from 'react' import React from 'react'
import {Action} from 'redux' import {Action} from 'redux'
import {IAPIDef} from '@rondo/common'
import {IClientConfig} from './IClientConfig' import {IClientConfig} from './IClientConfig'
import {IHTTPClient, HTTPClient} from '../http'
import {IRenderer} from './IRenderer' import {IRenderer} from './IRenderer'
import {TStoreFactory} from './TStoreFactory'
import {Provider} from 'react-redux' import {Provider} from 'react-redux'
import {StaticRouterContext} from 'react-router' import {StaticRouterContext} from 'react-router'
import {StaticRouter} from 'react-router-dom' import {StaticRouter} from 'react-router-dom'
import {TStoreFactory} from './TStoreFactory'
import {renderToNodeStream} from 'react-dom/server' import {renderToNodeStream} from 'react-dom/server'
export class ServerRenderer<State, A extends Action> implements IRenderer { export class ServerRenderer<State, A extends Action, D extends IAPIDef>
implements IRenderer {
constructor( constructor(
readonly createStore: TStoreFactory<State, A | any>, readonly createStore: TStoreFactory<State, A | any>,
readonly RootComponent: React.ComponentType<{config: IClientConfig}>, readonly RootComponent: React.ComponentType<{
config: IClientConfig,
http: IHTTPClient<D>
}>,
) {} ) {}
render(url: string, config: IClientConfig, state?: any) { render(
url: string,
config: IClientConfig,
state?: any,
) {
const {RootComponent} = this const {RootComponent} = this
const store = this.createStore(state) const store = this.createStore(state)
const http = new HTTPClient<D>(config.baseUrl)
const context: StaticRouterContext = {} const context: StaticRouterContext = {}
const stream = renderToNodeStream( const stream = renderToNodeStream(
@ -25,7 +36,7 @@ export class ServerRenderer<State, A extends Action> implements IRenderer {
location={url} location={url}
context={context} context={context}
> >
<RootComponent config={config} /> <RootComponent config={config} http={http} />
</StaticRouter> </StaticRouter>
</Provider>, </Provider>,
) )