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

React loadable #701

Merged
mmahalwy merged 2 commits into from
Mar 20, 2017
Merged

React loadable #701

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3458e7
React Loadable for components
mmahalwy Mar 20, 2017
c36b594
Eslint happy
mmahalwy Mar 20, 2017
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
Next Next commit
React Loadable for components
  • Loading branch information
@mmahalwy
mmahalwy committed Mar 20, 2017
commit d3458e74d799fc7b9d083d52a70a66ce74418dcd
10 changes: 6 additions & 4 deletions package.json
View file
Open in desktop
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
View file
Open in desktop
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
13 changes: 13 additions & 0 deletions src/components/ComponentLoader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React 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;
};

export default ComponentLoader;
43 changes: 43 additions & 0 deletions src/components/PageView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React 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>
);
};

export default PageView;
6 changes: 2 additions & 4 deletions src/components/TopOptions/index.js
View file
Open in desktop
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

@naveed-ahmad naveed-ahmad Mar 23, 2017

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

@mmahalwy mmahalwy Mar 23, 2017

Choose a reason for hiding this comment

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

LOC?

Copy link
Contributor

@naveed-ahmad naveed-ahmad Mar 23, 2017

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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