if (this.props.isReadingMode) { return ( <h1 className="word-font text-right"> {this.list()} </h1> ); } return ( <div> {this.list()} </div> ); } } AyahsList.displayName = 'AyahsList'; AyahsList.contextTypes = { getStore: React.PropTypes.func.isRequired }; AyahsList = connectToStores(AyahsList, [AyahsStore], (stores, props) => { return { ayahs: stores.AyahsStore.getAyahs(), isReadingMode: stores.AyahsStore.isReadingMode() } }); export default AyahsList;
// is not defined in the routes.js config) content = <NotFoundPage />; } else { // Here you go with the actual page content const params = currentRoute.get('params').toJS(); content = <Handler {...params} />; } return ( <Page footer={isNavigateComplete}> { content } </Page> ); } } Application = connectToStores(Application, ['HtmlHeadStore'], (stores) => ({ documentTitle: stores.HtmlHeadStore.getTitle() }) ); // Wrap with fluxible-router's history handler (required for routing) // It also pass `currentRoute` as prop to the component Application = handleHistory(Application); // Wrap Application with the fluxible context (required) Application = provideContext(Application); export default Application;
import Photo from "../components/Photo"; import PhotoMeta from "../components/PhotoMeta"; class PhotoPage extends Component { static propTypes = { photo: PropTypes.object.isRequired, id: PropTypes.string.isRequired } render() { const { photo } = this.props; return ( <div> <h1>{ photo.name }</h1> <PhotoMeta photo={ photo } /> <Photo imageSize={4} photo={photo} /> </div> ); } } PhotoPage = connectToStores(PhotoPage, ["PhotoStore"], (stores, props) => ({ photo: stores.PhotoStore.get(props.id) }) ); export default PhotoPage;
require('../style/Animate.scss') } class PhotoPage extends React.Component { static propTypes = { photo: PropTypes.object.isRequired, id: PropTypes.string.isRequired } render() { const { photo } = this.props; return ( <DocumentTitle title={photo.name}> <div> <h1>{ photo.name }</h1> <PhotoAttribution user={ photo.user } /> <Photo imageSize={4} photo={photo} /> </div> </DocumentTitle> ); } } PhotoPage = connectToStores(PhotoPage, ["PhotoStore"], { PhotoStore: (store, props) => ({ photo: store.get(props.id) }) }) export default PhotoPage;
import PhotoMeta from "../components/PhotoMeta"; class PhotoPage extends Component { static propTypes = { photo: PropTypes.object.isRequired, id: PropTypes.string.isRequired } render() { const { photo } = this.props; return ( <div> <h1>{ photo.name }</h1> <PhotoMeta photo={ photo } /> <Photo imageSize={4} photo={photo} /> </div> ); } } PhotoPage = connectToStores(PhotoPage, ["PhotoStore"], (stores, props) => { return { photo: stores.PhotoStore.get(props.id) }; }); export default PhotoPage;
} render() { var Handler = this.props.currentRoute.get('handler'); //render content return ( <div> <Nav /> <Handler /> <Timestamp /> </div> ); } } Application.contextTypes = { getStore: React.PropTypes.func, executeAction: React.PropTypes.func }; Application = connectToStores(Application, [ApplicationStore], function (stores, props) { return { ApplicationStore: stores.ApplicationStore.getState() }; }); Application = handleHistory(Application, {enableScroll: false}); Application = provideContext(Application); export default Application;
<div className="container surah-list"> <div className="row"> <div className="col-md-10 col-md-offset-1"> <h4 className="text-muted text-center title">SURAHS (CHAPTERS)</h4> <div className="row"> <ul className="col-md-4"> {this.renderColumn(this.props.surahs.slice(0, 38))} </ul> <ul className="col-md-4"> {this.renderColumn(this.props.surahs.slice(38, 76))} </ul> <ul className="col-md-4"> {this.renderColumn(this.props.surahs.slice(76, 114))} </ul> </div> </div> </div> </div> </div> ); } } Index = connectToStores(Index, [SurahsStore], (stores, props) => { return { surahs: stores.SurahsStore.getSurahs() } }); export default Index;
case "home": RouteHandler = <FeaturedPage />; break; case "photo": RouteHandler = <PhotoPage id={route.params.id} />; break; default: console.warn(`Missing handler for route with name ${route.name}`); RouteHandler = <NotFoundPage />; break; } return RouteHandler; } }); Application = connectToStores(Application, ["RouteStore"], { RouteStore: (store) => ({ pageName: store.getCurrentPageName(), route: store.getCurrentRoute(), err: store.getNavigationError(), isLoading: store.isLoading() }) }); // wrap application in the fluxible context Application = provideContext(Application); export default Application;