import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-routing/lib/Router';
import NotFoundPage from './components/NotFoundPage';
import ErrorPage from './components/ErrorPage';
const router = new Router(on => {
on('*', async (state, next) => {
const Layout = require('./components/Layout');
const component = await next();
if (component === undefined) {
return undefined;
}
return <Layout context={state.context}>{component}</Layout>;
});
on('/', () => {
const HomePage = require('./components/HomePage');
return <HomePage />;
});
on('/products', async () => {
const [data, require] = await Promise.all([
http.get('/api/products'),
new Promise(resolve => require.ensure(['./components/ProductsPage'], resolve))
]);
const ProductsPage = require('./components/ProductsPage');
return data ? <ProductsPage products={data} /> : undefined;
});
on('/products/:name', async (state) => {
const [data, require] = await Promise.all([
http.get(`/api/products/${state.params.name}`),
new Promise(resolve => require.ensure(['./components/ProductInfoPage'], resolve))
]);
const ProductInfoPage = require('./components/ProductInfoPage');
return data ? <ProductInfoPage product={data} /> : undefined;
});
on('error', (state, error) => state.statusCode === 404 ?
<Layout context={state.context} error={error}><NotFoundPage /></Layout> :
<Layout context={state.context} error={error}><ErrorPage /></Layout>
);
});
await router.dispatch({ path: '/products/example' }, (state, component) => {
ReactDOM.render(component, document.getElementById('app'));
});
