renderRoute.jsx

import React from 'react'
import { renderToString } from 'react-redux-epic'
import { JssProvider, SheetsRegistry } from 'react-jss'
import { Provider as StoreProvider } from 'react-redux'
import Helmet from 'react-helmet'
import { GridSystemProvider } from '@frankmoney/grid'
import StaticReduxRouter from 'app/components/routing/StaticReduxRouter'
import GraphqlProvider from 'app/components/GraphqlProvider'
import ThemeProvider from 'app/components/ThemeProvider'
import HttpClientProvider from 'app/components/HttpClientProvider'
import App from '../../client/createReactApp'
import createJSS from '../../app/createJss'

export default async function renderRouteAsync({
  url,
  frankTheme,
  muiTheme,
  store,
  httpClient,
  graphqlClient,
  wrappedEpic,
}) {
  const jss = createJSS()
  const sheets = new SheetsRegistry()
  const routerContext = {}

  const html = await new Promise(resolve => {
    renderToString(
      <JssProvider jss={jss} registry={sheets}>
        <ThemeProvider frankTheme={frankTheme} muiTheme={muiTheme}>
          <GraphqlProvider graphql={graphqlClient}>
            <HttpClientProvider httpClient={httpClient}>
              <GridSystemProvider>
                <StoreProvider store={store}>
                  <StaticReduxRouter url={url} context={routerContext}>
                    <App />
                  </StaticReduxRouter>
                </StoreProvider>
              </GridSystemProvider>
            </HttpClientProvider>
          </GraphqlProvider>
        </ThemeProvider>
      </JssProvider>,
      wrappedEpic
    ).subscribe(({ markup }) => {
      resolve(markup)
    })
  })

  const helmet = Helmet.renderStatic()

  return {
    markup: html,
    helmet,
    sheets,
    context: routerContext,
    criticalPathCSS: sheets.toString(),
  }
}