From 6c2728228eb863fcc20ef15be6e50789a584e8d4 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Wed, 13 Mar 2019 19:07:49 +0500
Subject: [PATCH] Add render to comments-client

---
 .../client/src/renderer/ClientRenderer.tsx    | 35 +++++++++++--------
 packages/client/src/renderer/IStoreFactory.ts |  5 +--
 .../client/src/renderer/ServerRenderer.tsx    |  5 +--
 packages/client/src/store/createStore.ts      |  4 +--
 packages/client/src/test-utils/TestUtils.tsx  |  3 +-
 5 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/renderer/ClientRenderer.tsx b/packages/client/src/renderer/ClientRenderer.tsx
index 0d3d33d..25621be 100644
--- a/packages/client/src/renderer/ClientRenderer.tsx
+++ b/packages/client/src/renderer/ClientRenderer.tsx
@@ -1,34 +1,41 @@
-import ReactDOM from 'react-dom'
 import React from 'react'
-import {Provider} from 'react-redux'
-import {IStoreFactory} from './IStoreFactory'
+import ReactDOM from 'react-dom'
+import {Action} from 'redux'
 import {IRenderer} from './IRenderer'
+import {IStoreFactory} from './IStoreFactory'
+import {Provider} from 'react-redux'
 
-export class ClientRenderer implements IRenderer {
-  constructor(
-    readonly createStore: IStoreFactory,
-    readonly RootComponent: React.ComponentType,
-    readonly target = document.body,
-  ) {}
+export interface IClientRendererParams<State, A extends Action> {
+  readonly createStore: IStoreFactory<State, A | any>,
+  readonly RootComponent: React.ComponentType,
+  readonly target?: HTMLElement
+}
+
+export class ClientRenderer<State, A extends Action> implements IRenderer {
+  constructor(readonly params: IClientRendererParams<State, A>) {}
 
   render(state = (window as any).__PRELOADED_STATE__) {
-    const {RootComponent} = this
+    const {
+      RootComponent,
+      createStore,
+      target = document.body,
+    } = this.params
 
     if (state) {
-      const store = this.createStore(state)
+      const store = createStore(state)
       ReactDOM.hydrate(
         <Provider store={store}>
           <RootComponent />
         </Provider>,
-        this.target,
+        target,
       )
     } else {
-      const store = this.createStore()
+      const store = createStore()
       ReactDOM.render(
         <Provider store={store}>
           <RootComponent />
         </Provider>,
-        this.target,
+        target,
       )
     }
   }
diff --git a/packages/client/src/renderer/IStoreFactory.ts b/packages/client/src/renderer/IStoreFactory.ts
index 8860572..d0f9e10 100644
--- a/packages/client/src/renderer/IStoreFactory.ts
+++ b/packages/client/src/renderer/IStoreFactory.ts
@@ -1,4 +1,5 @@
-import {Store} from 'redux'
+import {Action, Store} from 'redux'
 
 // TODO maybe Store should also be typed
-export type IStoreFactory = (state?: any) => Store
+export type IStoreFactory<State, A extends Action> =
+  (state?: State) => Store<State, A | any>
diff --git a/packages/client/src/renderer/ServerRenderer.tsx b/packages/client/src/renderer/ServerRenderer.tsx
index 0922804..4ea7e61 100644
--- a/packages/client/src/renderer/ServerRenderer.tsx
+++ b/packages/client/src/renderer/ServerRenderer.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
+import {Action} from 'redux'
 import {IRenderer} from './IRenderer'
 import {IStoreFactory} from './IStoreFactory'
 import {Provider} from 'react-redux'
 import {renderToNodeStream} from 'react-dom/server'
 
-export class ServerRenderer implements IRenderer {
+export class ServerRenderer<State, A extends Action> implements IRenderer {
   constructor(
-    readonly createStore: IStoreFactory,
+    readonly createStore: IStoreFactory<State, A | any>,
     readonly RootComponent: React.ComponentType,
   ) {}
   render(state?: any) {
diff --git a/packages/client/src/store/createStore.ts b/packages/client/src/store/createStore.ts
index 7e097c2..4181deb 100644
--- a/packages/client/src/store/createStore.ts
+++ b/packages/client/src/store/createStore.ts
@@ -24,9 +24,9 @@ export function createStore<State, A extends Action>(
   params: ICreateStoreParams<State, A>,
 ) {
   const middleware = params.middleware || [new PromiseMiddleware().handle]
-  return create(
+  return (state?: DeepPartial<State>) => create(
     combineReducers(params.reducers),
-    params.state,
+    state,
     applyMiddleware(...middleware),
   )
 }
diff --git a/packages/client/src/test-utils/TestUtils.tsx b/packages/client/src/test-utils/TestUtils.tsx
index 13176d2..45b1501 100644
--- a/packages/client/src/test-utils/TestUtils.tsx
+++ b/packages/client/src/test-utils/TestUtils.tsx
@@ -48,8 +48,7 @@ export class TestUtils {
   ) {
     const store = this.createStore({
       reducers: params.reducers,
-      state: params.state,
-    })
+    })(params.state)
     const Component = params.connector.connect(params.select)
 
     const render = (additionalProps: {[key: string]: any} = {}) => {