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;