docs/src/shared/components/DocHandler.js
import React from 'react';
import Flux from 'flummox/component';
import View from './View';
import Doc from './Doc';
class DocHandler extends React.Component {
static willTransitionTo(transition, params) {
const { splat: docPath } = params;
const canonicalPath = DocHandler.canonicalDocPath(docPath);
if (docPath !== canonicalPath) transition.redirect(`/flummox/docs/${canonicalPath}`);
}
// Redundant since docs have already been fetched, but included for illustration
static async routerWillRun({ flux, state }) {
const docActions = flux.getActions('docs');
const { params: { splat: path } } = state;
const canonicalPath = DocHandler.canonicalDocPath(path);
return await docActions.getDoc(canonicalPath);
}
static canonicalDocPath(docPath) {
docPath = docPath.replace(/\.md$/, '');
docPath = docPath.replace(/\/index\/?$/, '');
return docPath;
}
getDocPath() {
const { params: { splat: docPath } } = this.props;
return DocHandler.canonicalDocPath(docPath);
}
render() {
const docPath = this.getDocPath();
return (
<div>
<Flux
docPath={docPath}
connectToStores={{
docs: (store, props) => ({
doc: store.getDoc(props.docPath)
})
}}
render={({ doc }) => <Doc doc={doc} />}
/>
</div>
);
}
}
export default DocHandler;