Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

React loadable #701

Merged
merged 2 commits into from
Mar 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,11 @@
"autoprefixer": "6.6.1",
"autoprefixer-loader": "3.2.0",
"babel-cli": "6.11.4",
"babel-core": "6.13.2",
"babel-loader": "6.2.4",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-add-module-exports": "0.1.4",
"babel-plugin-system-import-transformer": "2.2.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-system-import-transformer": "^3.1.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-display-name": "6.8.0",
Expand All @@ -41,7 +42,7 @@
"babel-plugin-transform-runtime": "6.12.0",
"babel-plugin-typecheck": "3.9.0",
"babel-polyfill": "6.13.0",
"babel-preset-es2015": "6.13.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "6.11.1",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-2": "6.13.0",
Expand Down Expand Up @@ -99,6 +100,7 @@
"react-hot-loader": "3.0.0-beta.6",
"react-inlinesvg": "0.5.4",
"react-intl": "2.1.5",
"react-loadable": "^3.0.1",
"react-metrics": "1.2.1",
"react-paginate": "4.1.0",
"react-redux": "5.0.1",
Expand Down
8 changes: 7 additions & 1 deletion src/components/Audioplayer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { camelize } from 'humps';
import Loadable from 'react-loadable';

import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

Expand All @@ -15,13 +16,18 @@ import { surahType, segmentType } from 'types';
// Redux
import * as AudioActions from 'redux/actions/audioplayer';

import ComponentLoader from 'components/ComponentLoader';
import Track from './Track';
import Segments from './Segments';
import ScrollButton from './ScrollButton';
import RepeatDropdown from './RepeatDropdown';

const style = require('./style.scss');

const RepeatDropdown = Loadable({
loader: () => import('./RepeatDropdown'),
LoadingComponent: ComponentLoader
});

export class Audioplayer extends Component {
static propTypes = {
className: PropTypes.string,
Expand Down
19 changes: 19 additions & 0 deletions src/components/ComponentLoader/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React, { PropTypes } from 'react';

const ComponentLoader = ({ isLoading, error, pastDelay }) => {
if (isLoading) {
return pastDelay ? <div>Loading...</div> : null;
} else if (error) {
return <div>Error! Component failed to load</div>;
}

return null;
};

ComponentLoader.propTypes = {
isLoading: PropTypes.bool,
error: PropTypes.any, // eslint-disable-line
pastDelay: PropTypes.bool
};

export default ComponentLoader;
53 changes: 53 additions & 0 deletions src/components/PageView/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React, { PropTypes } from 'react';

import Line from 'components/Line';
import PageBreak from 'components/PageBreak';

const PageView = ({ lines, keys, currentVerse, options, isPlaying, audioActions }) => {
const elements = keys.map((lineNum, index) => {
const nextNum = keys[index + 1];
const pageNum = lineNum.split('-')[0];
const line = lines[lineNum];

if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
return [
<Line
line={line}
key={lineNum}
currentVerse={currentVerse}
tooltip={options.tooltip}
audioActions={audioActions}
isPlaying={isPlaying}
/>,
<PageBreak pageNum={parseInt(pageNum, 10) + 1} />
];
}

return (
<Line
line={line}
key={lineNum}
currentVerse={currentVerse}
tooltip={options.tooltip}
audioActions={audioActions}
isPlaying={isPlaying}
/>
);
});

return (
<div>{elements}</div>
);
};

PageView.propTypes = {
keys: PropTypes.array, // eslint-disable-line
lines: PropTypes.object.isRequired, // eslint-disable-line
audioActions: PropTypes.object.isRequired, // eslint-disable-line
currentVerse: PropTypes.string,
bookmarks: PropTypes.object.isRequired, // eslint-disable-line
options: PropTypes.object.isRequired, // eslint-disable-line
isPlaying: PropTypes.bool
};

export default PageView;
6 changes: 2 additions & 4 deletions src/components/TopOptions/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React from 'react';
import Title from 'quran-components/lib/SurahTitle';
import Share from 'components/Share';
import { surahType } from 'types';

const styles = require('./style.scss');

const TopOptions = ({ chapter }) => (
<div className="row">
<div className="col-md-4 hidden-xs hidden-sm">
<Title chapterNumber={chapter.id} className={styles.title} color={'#2CA4AB'} />
{/* NOTE: Caused about 7000 lines of code to accept all titles SVG */}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does static assets ( svg ) count in LOC ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOC?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry, line of code :)

{/* <Title chapterNumber={chapter.id} className={styles.title} color={'#2CA4AB'} /> */}
</div>
<div className="col-md-8 text-right">
<ul className="list-inline">
Expand Down
16 changes: 13 additions & 3 deletions src/components/Verse/index.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import React, { Component, PropTypes } from 'react';
import Link from 'react-router/lib/Link';
import { Element } from 'react-scroll';
import Element from 'react-scroll/lib/components/Element';
import { connect } from 'react-redux';
import Loadable from 'react-loadable';

import { verseType, matchType, surahType } from 'types';
import Share from 'components/Share';
import Copy from 'components/Copy';
import ComponentLoader from 'components/ComponentLoader';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
import Word from 'components/Word';
import Translation from 'components/Translation';
import debug from 'helpers/debug';

const styles = require('./style.scss');

const Copy = Loadable({
loader: () => import('components/Copy'),
LoadingComponent: ComponentLoader
});

const Share = Loadable({
loader: () => import('components/Share'),
LoadingComponent: ComponentLoader
});

class Verse extends Component {
static propTypes = {
isSearched: PropTypes.bool,
Expand Down
65 changes: 30 additions & 35 deletions src/containers/Surah/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,14 @@ import { asyncConnect } from 'redux-connect';
import { push } from 'react-router-redux';

import Helmet from 'react-helmet';
import Loadable from 'react-loadable';

// components
import Loader from 'quran-components/lib/Loader';
import LazyLoad from 'components/LazyLoad';
import PageBreak from 'components/PageBreak';
import Audioplayer from 'components/Audioplayer';
import SurahInfo from 'components/SurahInfo';
import Verse from 'components/Verse';
import Line from 'components/Line';
import ComponentLoader from 'components/ComponentLoader';
import Bismillah from 'components/Bismillah';
import TopOptions from 'components/TopOptions';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

// utils
Expand All @@ -42,6 +39,24 @@ const LoaderStyle = { width: '10em', height: '10em' };

const style = require('./style.scss');

const PageView = Loadable({
loader: () => import('components/PageView'),
LoadingComponent: ComponentLoader
});

const Audioplayer = Loadable({
loader: () => import('components/Audioplayer'),
LoadingComponent: ComponentLoader
});
const SurahInfo = Loadable({
loader: () => import('components/SurahInfo'),
LoadingComponent: ComponentLoader
});
const TopOptions = Loadable({
loader: () => import('components/TopOptions'),
LoadingComponent: ComponentLoader
});

class Surah extends Component {
static propTypes = {
chapter: surahType.isRequired,
Expand Down Expand Up @@ -310,36 +325,16 @@ class Surah extends Component {
const { lines, options, currentVerse, isPlaying, actions } = this.props;
const keys = Object.keys(lines);

return keys.map((lineNum, index) => {
const nextNum = keys[index + 1];
const pageNum = lineNum.split('-')[0];
const line = lines[lineNum];

if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
return [
<Line
line={line}
key={lineNum}
currentVerse={currentVerse}
tooltip={options.tooltip}
audioActions={actions.audio}
isPlaying={isPlaying}
/>,
<PageBreak pageNum={parseInt(pageNum, 10) + 1} />
];
}

return (
<Line
line={line}
key={lineNum}
currentVerse={currentVerse}
tooltip={options.tooltip}
audioActions={actions.audio}
isPlaying={isPlaying}
/>
);
});
return (
<PageView
lines={lines}
keys={keys}
options={options}
currentVerse={currentVerse}
audioActions={actions.audio}
isPlaying={isPlaying}
/>
);
}

render() {
Expand Down
28 changes: 14 additions & 14 deletions src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,25 @@ export default (store) => {
return (
<Route path="/" component={App} onEnter={shouldAuth}>
<IndexRoute components={Home} />
<Route path="/donations" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/contributions" getComponent={(nextState, cb) => System.import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/donations" getComponent={(nextState, cb) => import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/contributions" getComponent={(nextState, cb) => import('./containers/Donations').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/about" getComponent={(nextState, cb) => System.import('./containers/About').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/about" getComponent={(nextState, cb) => import('./containers/About').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/contact" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/contactus" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/contact" getComponent={(nextState, cb) => import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/contactus" getComponent={(nextState, cb) => import('./containers/Contact').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/mobile" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/apps" getComponent={(nextState, cb) => System.import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/mobile" getComponent={(nextState, cb) => import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/apps" getComponent={(nextState, cb) => import('./containers/MobileLanding').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/error/:errorKey" getComponent={(nextState, cb) => System.import('./containers/Error').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/error/:errorKey" getComponent={(nextState, cb) => import('./containers/Error').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/search" getComponent={(nextState, cb) => System.import('./containers/Search').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/search" getComponent={(nextState, cb) => import('./containers/Search').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route path="/login" getComponent={(nextState, cb) => System.import('./containers/Login').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/login" getComponent={(nextState, cb) => import('./containers/Login').then(module => cb(null, module.default)).catch(err => console.trace(err))} />

<Route onEnter={requireLogin}>
<Route path="/profile" getComponent={(nextState, cb) => System.import('./containers/Profile').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
<Route path="/profile" getComponent={(nextState, cb) => import('./containers/Profile').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
</Route>

<Redirect from="/:chapterId:(:range)" to="/:chapterId(/:range)" />
Expand All @@ -66,9 +66,9 @@ export default (store) => {
path="/:chapterId(/:range)"
getComponents={(nextState, cb) =>
Promise.all([
System.import('./containers/Surah'),
System.import('./components/GlobalNav/Surah'),
System.import('./components/GlobalSidebar/Surah'),
import('./containers/Surah'),
import('./components/GlobalNav/Surah'),
import('./components/GlobalSidebar/Surah'),
])
.then(modules => cb(
null,
Expand Down
Loading