// React Router routes
import loadPage from '@s-ui/react-initial-props/lib/loadPage'

// context factory has to return a promise and it will be passed to the context of your components
// as well as a param to the getInitialProps
const contextFactory = ({ cookies, isClient, pathName, req = {}, userAgent }) => {
  return Promise.resolve({
    isHome: pathName === 'es',
    isLogged: cookies['user-is-logged'],
    isMobile: userAgent.includes('Android')
  })
}

// use the loadPage from the sui-react-initial-props
const loadHomePage = loadPage(contextFactory,
  () => import(/* webpackChunkName: "HomePage" */ './pages/Home')
)

export default (
  <Route>
    <Route path='/:lang' component={loadHomePage}>
  </Route>
)

// universal - React Router routes
import loadPage from '@s-ui/react-initial-props/lib/loadPage'

// context factory has to return a promise and it will be passed to the context of your components
// as well as a param to the getInitialProps
const contextFactory = ({ cookies, isClient, pathName, req = {}, userAgent }) => {
  return Promise.resolve({
    isHome: pathName === 'es',
    isLogged: cookies['user-is-logged'],
    isMobile: userAgent.includes('Android')
  })
}

// use the loadPage from the sui-react-initial-props
const loadHomePage = loadPage(contextFactory,
  () => import(/* webpackChunkName: "HomePage" */ './pages/Home')
)

export default (
  <Route>
    <Route path='/:lang' component={loadHomePage}>
  </Route>
)

// server - isomorphic middleware

import {
  createServerContextFactoryParams,
  ssrComponentWithInitialProps
} from '@s-ui/react-initial-props'

function isomorphic (req, res, next) {
contextFactory(
  createServerContextFactoryParams(req) // pass the request to create the context
).then(context => {
  match({routes, location: req.url}, function (error, redirectLocation, renderProps = false) {
    const Target = (props) => <div>{props.fromInitialProps}</div>
    ssrComponentWithInitialProps({ context, renderProps, Target })
      .then(({ initialProps, reactString, performance }) => {
        // you have here the initialProps retrieved from the page in case you need it
        console.log('Time spent resolving the getInitialProps method', performance.getInitialProps)
        console.log('Time spent rendering the react tree', performance.renderToString)
        res.send(reactString)
      })
  }

universal - react page component

const Placeholder = () => <h1>Loading...</h1>
const Page = (props) => {
  useEffect(()=> {
    // If defined previously as seen below, access __HTTP__ object as follows:
    const {initialContent, __HTTP__} = props
    const {redirectTo} = __HTTP__
    window.location.href = redirectTo
  })

  return (
    <div>
      <h1>This is the page</h1>
      <p>{initialContent}</p>
    </div>
  )
}


Page.renderLoading = () => <Placeholder />
Page.getInitialProps = ({ context, routeInfo }) =>
  Promise.resolve({
    initialContent: 'This is the initial content',
    // Optional __HTTP__ object to perform 301 Redirects
    __HTTP__: {redirectTo: 'https://<301 Redirect Route>'}
  })