diff --git a/.babelrc b/.babelrc index 91ce420eb..9224ca318 100644 --- a/.babelrc +++ b/.babelrc @@ -14,14 +14,7 @@ }, "development": { "plugins": [ - "typecheck", - ["react-transform", { - "transforms": [{ - "transform": "react-transform-catch-errors", - "imports": ["react", "redbox-react"] - } - ] - }] + "typecheck" ] } } diff --git a/.env b/.env index 9f7a279b0..e291f298f 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ NODE_ENV=development PORT=8000 API_URL=http://quran.com:3000 -SEGMENTS_KEY="¯\_(ツ)_/¯" +SEGMENTS_KEY= diff --git a/Dockerfile b/Dockerfile index 7c39555b8..49514ae29 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,8 @@ FROM node:5.10.0 ENV NODE_ENV production +ENV API_URL http://api.quran.com:3000 +ENV PORT 8000 RUN apt-get -y update && apt-get -y install supervisor ssh rsync diff --git a/README.md b/README.md index fa8747cd9..211d0a445 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,9 @@ Unless you have the backend API running locally, you will need to update the `AP To start the app, run `npm run dev` which will run both the server and the client (webpack) to compile upon edits. Go to http://localhost:8001 in your browser, not 8000 (that is just the express server). -## Tests -Run `npm run test:watch` to run the tests locally and watching. Otherwise use `npm run test` for CI level tests. + +#### Tests +Run `npm run test` to run the tests locally and watching. Otherwise use `npm run test:ci:unit` for CI level tests. We also have nightwatch function tests. You can install nightwatch globally and can run tests like this: ``` diff --git a/bootstrap-sass.config.js b/bootstrap-sass.config.js deleted file mode 100644 index e6b742a3c..000000000 --- a/bootstrap-sass.config.js +++ /dev/null @@ -1,83 +0,0 @@ -var ExtractTextPlugin = require("extract-text-webpack-plugin"); -// Example file. Copy this to your project -module.exports = { - verbose: false, // Set to true to show diagnostic information - debug: false, - - // IMPORTANT: Set next two configuration so you can customize - // bootstrapCustomizations: gets loaded before bootstrap so you can configure the variables used by bootstrap - // mainSass: gets loaded after bootstrap, so you can override a bootstrap style. - // NOTE, these are optional. - - preBootstrapCustomizations: "src/styles/_bootstrap-config.scss", - mainSass: "src/styles/_main.scss", - - // Default for the style loading - // styleLoader: "style-loader!css-loader!sass-loader", - // - // If you want to use the ExtractTextPlugin - // and you want compressed - // styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"), - // - // If you want expanded CSS - styleLoader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer!sass?outputStyle=expanded"), - - scripts: { - 'transition': false, - 'alert': false, - 'button': false, - 'carousel': false, - 'collapse': false, - 'dropdown': true, - 'modal': true, - 'tooltip': true, - 'popover': true, - 'scrollspy': false, - 'tab': false, - 'affix': false - }, - styles: { - "mixins": true, - - "normalize": true, - "print": false, - - "scaffolding": true, - "type": true, - "code": true, - "grid": true, - "tables": true, - "forms": true, - "buttons": true, - - "component-animations": true, - "glyphicons": false, - "dropdowns": true, - "button-groups": false, - "input-groups": false, - "navs": true, - "navbar": true, - "breadcrumbs": false, - "pagination": true, - "pager": true, - "labels": true, - "badges": true, - "jumbotron": false, - "thumbnails": false, - "alerts": false, - "progress-bars": false, - "media": false, - "list-group": false, - "panels": true, - "wells": false, - "close": true, - - "modals": true, - "tooltip": true, - "popovers": true, - "carousel": false, - - "utilities": true, - "responsive-utilities": true - } -}; diff --git a/bootstrap.config.js b/bootstrap.config.js new file mode 100644 index 000000000..f7569489d --- /dev/null +++ b/bootstrap.config.js @@ -0,0 +1,64 @@ +module.exports = { + "verbose": false, + "debug": false, + "preBootstrapCustomizations": "./src/styles/variables.scss", + "mainSass": "./src/styles/main.scss", + "scripts": { + "transition": false, + "alert": false, + "button": false, + "carousel": false, + "collapse": false, + "dropdown": true, + "modal": true, + "tooltip": true, + "popover": true, + "scrollspy": false, + "tab": false, + "affix": false + }, + "styles": { + "mixins": true, + + "normalize": true, + "print": false, + + "scaffolding": true, + "type": true, + "code": true, + "grid": true, + "tables": true, + "forms": true, + "buttons": true, + + "component-animations": true, + "glyphicons": false, + "dropdowns": true, + "button-groups": false, + "input-groups": false, + "navs": true, + "navbar": true, + "breadcrumbs": false, + "pagination": true, + "pager": true, + "labels": true, + "badges": true, + "jumbotron": false, + "thumbnails": false, + "alerts": false, + "progress-bars": false, + "media": false, + "list-group": false, + "panels": true, + "wells": false, + "close": true, + + "modals": true, + "tooltip": true, + "popovers": true, + "carousel": false, + + "utilities": true, + "responsive-utilities": true + } +}; diff --git a/bootstrap.config.prod.js b/bootstrap.config.prod.js new file mode 100644 index 000000000..e8ef41741 --- /dev/null +++ b/bootstrap.config.prod.js @@ -0,0 +1,4 @@ +const bootstrapConfig = require('./bootstrap.config.js'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +bootstrapConfig.styleLoader = ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'); +module.exports = bootstrapConfig; diff --git a/client.js b/client.js index f4e8bebb4..013e045e7 100644 --- a/client.js +++ b/client.js @@ -6,6 +6,7 @@ import ReactDOM from 'react-dom'; import reactCookie from 'react-cookie'; import Provider from 'react-redux/lib/components/Provider'; import Router from 'react-router/lib/Router'; +import match from 'react-router/lib/match'; import browserHistory from 'react-router/lib/browserHistory'; import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware'; import useScroll from 'react-router-scroll'; @@ -42,31 +43,29 @@ if (typeof window !== 'undefined') { }); } -const component = ( - ( - !item.deferred} - render={applyRouterMiddleware(useScroll())} - /> - )} - > - {routes()} - -); +match({ history, routes: routes() }, (error, redirectLocation, renderProps) => { + const component = ( + ( + !item.deferred} + render={applyRouterMiddleware(useScroll())} + /> + )} + /> + ); -debug('client', 'rehydrating app'); + const mountNode = document.getElementById('app'); -const mountNode = document.getElementById('app'); + debug('client', 'React Rendering'); -debug('client', 'React Rendering'); - -ReactDOM.render( - - {component} - , mountNode, () => { - debug('client', 'React Rendered'); + ReactDOM.render( + + {component} + , mountNode, () => { + debug('client', 'React Rendered'); + }); }); diff --git a/karma.conf.js b/karma.conf.js index a3bb5280a..d21d97f4a 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -56,7 +56,7 @@ module.exports = function(config) { 'react/lib/ReactContext': true }, resolve: { - modulesDirectories: [ + modules: [ 'src', 'node_modules' ], diff --git a/package.json b/package.json index f06a27759..3de0e44da 100644 --- a/package.json +++ b/package.json @@ -3,23 +3,22 @@ "version": "0.0.0", "private": true, "scripts": { - "test": "npm build && npm start && npm run test:lint && npm run test:unit && npm run test:functional", + "test": "./node_modules/karma/bin/karma start", "test:ci:unit": "./node_modules/karma/bin/karma start --browsers PhantomJS --single-run", "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production", "test:ci:lint": "eslint ./src/scripts/**/*.js", "test:dev:unit": "./node_modules/karma/bin/karma start", "test:dev:functional": "node ./nightwatch.js -c ./nightwatch.json", "test:dev:lint": "eslint ./src/scripts/**/*.js", - "dev": "node webpack-dev-server.js & PORT=8000 node start.js", + "dev": "node webpack/dev-server.js & PORT=8000 node start.js", "start": "NODE_PATH=\"./src\" node ./start", - "build": "node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.prod.config.js", + "build": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js", "validate": "npm ls", - "analyze:build": "env NODE_ENV=development webpack --json --config webpack.config.js > bundle-stats.json", - "analyze:json": "analyze-bundle-size bundle-stats.json" + "analyze:build": "env NODE_ENV=production ./node_modules/webpack/bin/webpack.js --json --config webpack/prod.config.js > bundle-stats.json", + "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json" }, "engines": { - "node": ">= 0.10.0", - "iojs": ">= 1.0.3" + "node": ">= 5.1.0" }, "dependencies": { "app-module-path": "^1.0.2", @@ -27,22 +26,24 @@ "babel": "^6.5.2", "babel-loader": "^6.2.4", "babel-plugin-add-module-exports": "^0.1.4", + "babel-plugin-system-import-transformer": "^2.0.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-react-display-name": "^6.5.0", "babel-plugin-transform-runtime": "^6.7.5", "babel-plugin-typecheck": "^3.8.0", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", + "babel-preset-es2015-webpack": "^6.4.1", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "babel-register": "^6.7.2", "babel-runtime": "^6.6.1", "body-parser": "^1.14.1", + "bootstrap-loader": "^1.0.10", "bootstrap-sass": "~3.3.1", "bootstrap-sass-loader": "^1.0.9", "bundle-loader": "~0.5.0", "cache-manager": "^1.1.0", - "classnames": "^2.1.2", "clean-webpack-plugin": "^0.1.8", "compression": "^1.6.0", "cookie-parser": "^1.3.5", @@ -56,7 +57,7 @@ "express": "^4.3.2", "express-state": "^1.2.0", "express-useragent": "^0.2.0", - "extract-text-webpack-plugin": "^0.8.0", + "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.4", "html-webpack-plugin": "^1.4.0", "http-proxy": "^1.13.2", @@ -66,7 +67,6 @@ "js-yaml": "~3.6.0", "json-loader": "~0.5.1", "loopstacks": "0.0.3", - "moment": "^2.12.0", "morgan": "^1.6.1", "node-sass": "^3.2.0", "normalizr": "^2.0.0", @@ -90,17 +90,19 @@ "react-scroll": "^1.0.4", "redux": "^3.3.1", "redux-connect": "^2.4.0", + "resolve-url": "^0.2.1", "sass-loader": "2.0.1", "scroll-behavior": "^0.3.3", "serialize-javascript": "^1.0.0", "serve-favicon": "^2.2.1", "sitemap": "^1.5.0", "sjcl": "~1.0.3", + "strip-loader": "^0.1.2", "style-loader": "^0.13.1", "superagent": "^1.2.0", "url": "^0.11.0", "url-loader": "~0.5.5", - "webpack": "^1.10.3", + "webpack": "2.1.0-beta.7", "webpack-isomorphic-tools": "^2.2.41", "winston": "^1.1.2" }, @@ -108,6 +110,7 @@ "babel-core": "^6.7.7", "babel-eslint": "^6.0.4", "babel-plugin-react-transform": "^2.0.2", + "babel-preset-react-hmre": "^1.1.1", "chai": "^3.0.0", "chromedriver": "^2.19.0", "del": "^2.0.2", diff --git a/server.js b/server.js index 53f1775b1..20e540072 100644 --- a/server.js +++ b/server.js @@ -1,8 +1,5 @@ import express from 'express'; -import expressConfig from 'server/config/express'; -const server = express(); -expressConfig(server); - +import PrettyError from 'pretty-error'; import React from 'react'; import ReactDOM from 'react-dom/server'; import { match } from 'react-router'; @@ -11,12 +8,17 @@ import createHistory from 'react-router/lib/createMemoryHistory'; import { Provider } from 'react-redux'; import cookie from 'react-cookie'; -import debugLib from 'debug'; -const debug = debugLib('quran'); + +import expressConfig from 'server/config/express'; + +const pretty = new PrettyError(); +const server = express(); +expressConfig(server); import routes from './src/routes'; import ApiClient from './src/helpers/ApiClient'; import createStore from './src/redux/create'; +import debug from './src/helpers/debug'; import Html from './src/helpers/Html'; @@ -46,15 +48,15 @@ server.use((req, res, next) => { store.dispatch(setUserAgent(req.useragent)); store.dispatch(setOption(cookie.load('options') || {})); - - debug('Executing navigate action'); + debug('Server', 'Executing navigate action'); match({ history, routes: routes(), location: req.originalUrl }, (error, redirectLocation, renderProps) => { + debug('Server', 'Route match callback'); + if (redirectLocation) { res.redirect(redirectLocation.pathname + redirectLocation.search); } else if (error) { console.error('ROUTER ERROR:', pretty.render(error)); - res.status(500); - hydrateOnClient(); + res.status(500).send(error); } else if (renderProps) { loadOnServer({...renderProps, store, helpers: { client }}).then(() => { const component = ReactDOM.renderToString( @@ -63,8 +65,8 @@ server.use((req, res, next) => { ); - debug('Rendering Application component into html'); - debug('Sending markup'); + debug('Server', 'Rendering Application component into html'); + debug('Server', 'Sending markup'); res.type('html'); res.setHeader('Cache-Control', 'public, max-age=31557600'); res.status(200).send('\n' + ReactDOM.renderToString( diff --git a/src/components/Audioplayer/Segments/index.js b/src/components/Audioplayer/Segments/index.js index 91eee083f..557b284fd 100644 --- a/src/components/Audioplayer/Segments/index.js +++ b/src/components/Audioplayer/Segments/index.js @@ -29,7 +29,7 @@ export default class Segments extends Component { constructor() { super(...arguments); this.secret = process.env.SEGMENTS_KEY; - } // init + } componentWillMount() { this.buildSegments(this.props); diff --git a/src/components/Audioplayer/Segments/secret.js b/src/components/Audioplayer/Segments/secret.js deleted file mode 100644 index 9fd3fb082..000000000 --- a/src/components/Audioplayer/Segments/secret.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (function() { - var secret; - try { - secret = require('../../../../.shh/audio-segments.secret.js'); - } catch(e) { - secret = 'too-bad... :('; - } - return secret; -}()); diff --git a/src/components/Audioplayer/Track/Tracker/style.scss b/src/components/Audioplayer/Track/Tracker/style.scss index 73d640c47..ee4b4b3ff 100644 --- a/src/components/Audioplayer/Track/Tracker/style.scss +++ b/src/components/Audioplayer/Track/Tracker/style.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/_bootstrap-config.scss'; +@import '../../../../styles/variables.scss'; :local .tracker{ height: 100%; // This is optional if you'd like your tracker to fit nicely within the track. We don't right now. diff --git a/src/components/Audioplayer/Track/style.scss b/src/components/Audioplayer/Track/style.scss index ae09cce11..d6214649e 100644 --- a/src/components/Audioplayer/Track/style.scss +++ b/src/components/Audioplayer/Track/style.scss @@ -1,4 +1,4 @@ -@import '../../../styles/_bootstrap-config.scss'; +@import '../../../styles/variables.scss'; :local .track{ background: $track-bg; diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js index 296573f3d..6d7f1bbd2 100644 --- a/src/components/Audioplayer/index.js +++ b/src/components/Audioplayer/index.js @@ -1,6 +1,5 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; @@ -31,16 +30,16 @@ const style = require('./style.scss'); shouldRepeat: state.audioplayer.shouldRepeat, shouldScroll: state.audioplayer.shouldScroll }), - (dispatch) => ({ - play: bindActionCreators(play, dispatch), - pause: bindActionCreators(pause, dispatch), - repeat: bindActionCreators(repeat, dispatch), - toggleScroll: bindActionCreators(toggleScroll, dispatch), - setCurrentAyah: bindActionCreators(setCurrentAyah, dispatch), - setCurrentWord: bindActionCreators(setCurrentWord, dispatch), - clearCurrentWord: bindActionCreators(clearCurrentWord, dispatch), - buildOnClient: bindActionCreators(buildOnClient, dispatch) - }), + { + play, + pause, + repeat, + toggleScroll, + setCurrentAyah, + setCurrentWord, + clearCurrentWord, + buildOnClient + }, (stateProps, dispatchProps, ownProps) => { if (!stateProps.isSupported) { return { @@ -416,7 +415,7 @@ export default class Audioplayer extends Component { onPause={pause} onEnd={this.onNextAyah.bind(this)} /> : null} - {isLoadedOnClient && true ? + {isLoadedOnClient ? {return System.import('./1.html').then(module => callback(module));}, + html2: (callback) => {return System.import('./2.html').then(module => callback(module));}, + html3: (callback) => {return System.import('./3.html').then(module => callback(module));}, + html4: (callback) => {return System.import('./4.html').then(module => callback(module));}, + html5: (callback) => {return System.import('./5.html').then(module => callback(module));}, + html6: (callback) => {return System.import('./6.html').then(module => callback(module));}, + html7: (callback) => {return System.import('./7.html').then(module => callback(module));}, + html8: (callback) => {return System.import('./8.html').then(module => callback(module));}, + html9: (callback) => {return System.import('./9.html').then(module => callback(module));}, + html10: (callback) => {return System.import('./10.html').then(module => callback(module));}, + html11: (callback) => {return System.import('./11.html').then(module => callback(module));}, + html12: (callback) => {return System.import('./12.html').then(module => callback(module));}, + html13: (callback) => {return System.import('./13.html').then(module => callback(module));}, + html14: (callback) => {return System.import('./14.html').then(module => callback(module));}, + html15: (callback) => {return System.import('./15.html').then(module => callback(module));}, + html16: (callback) => {return System.import('./16.html').then(module => callback(module));}, + html17: (callback) => {return System.import('./17.html').then(module => callback(module));}, + html18: (callback) => {return System.import('./18.html').then(module => callback(module));}, + html19: (callback) => {return System.import('./19.html').then(module => callback(module));}, + html20: (callback) => {return System.import('./20.html').then(module => callback(module));}, + html21: (callback) => {return System.import('./21.html').then(module => callback(module));}, + html22: (callback) => {return System.import('./22.html').then(module => callback(module));}, + html23: (callback) => {return System.import('./23.html').then(module => callback(module));}, + html24: (callback) => {return System.import('./24.html').then(module => callback(module));}, + html25: (callback) => {return System.import('./25.html').then(module => callback(module));}, + html26: (callback) => {return System.import('./26.html').then(module => callback(module));}, + html27: (callback) => {return System.import('./27.html').then(module => callback(module));}, + html28: (callback) => {return System.import('./28.html').then(module => callback(module));}, + html29: (callback) => {return System.import('./29.html').then(module => callback(module));}, + html30: (callback) => {return System.import('./30.html').then(module => callback(module));}, + html31: (callback) => {return System.import('./31.html').then(module => callback(module));}, + html32: (callback) => {return System.import('./32.html').then(module => callback(module));}, + html33: (callback) => {return System.import('./33.html').then(module => callback(module));}, + html34: (callback) => {return System.import('./34.html').then(module => callback(module));}, + html35: (callback) => {return System.import('./35.html').then(module => callback(module));}, + html36: (callback) => {return System.import('./36.html').then(module => callback(module));}, + html37: (callback) => {return System.import('./37.html').then(module => callback(module));}, + html38: (callback) => {return System.import('./38.html').then(module => callback(module));}, + html39: (callback) => {return System.import('./39.html').then(module => callback(module));}, + html40: (callback) => {return System.import('./40.html').then(module => callback(module));}, + html41: (callback) => {return System.import('./41.html').then(module => callback(module));}, + html42: (callback) => {return System.import('./42.html').then(module => callback(module));}, + html43: (callback) => {return System.import('./43.html').then(module => callback(module));}, + html44: (callback) => {return System.import('./44.html').then(module => callback(module));}, + html45: (callback) => {return System.import('./45.html').then(module => callback(module));}, + html46: (callback) => {return System.import('./46.html').then(module => callback(module));}, + html47: (callback) => {return System.import('./47.html').then(module => callback(module));}, + html48: (callback) => {return System.import('./48.html').then(module => callback(module));}, + html49: (callback) => {return System.import('./49.html').then(module => callback(module));}, + html50: (callback) => {return System.import('./50.html').then(module => callback(module));}, + html51: (callback) => {return System.import('./51.html').then(module => callback(module));}, + html52: (callback) => {return System.import('./52.html').then(module => callback(module));}, + html53: (callback) => {return System.import('./53.html').then(module => callback(module));}, + html54: (callback) => {return System.import('./54.html').then(module => callback(module));}, + html55: (callback) => {return System.import('./55.html').then(module => callback(module));}, + html56: (callback) => {return System.import('./56.html').then(module => callback(module));}, + html57: (callback) => {return System.import('./57.html').then(module => callback(module));}, + html58: (callback) => {return System.import('./58.html').then(module => callback(module));}, + html59: (callback) => {return System.import('./59.html').then(module => callback(module));}, + html60: (callback) => {return System.import('./60.html').then(module => callback(module));}, + html61: (callback) => {return System.import('./61.html').then(module => callback(module));}, + html62: (callback) => {return System.import('./62.html').then(module => callback(module));}, + html63: (callback) => {return System.import('./63.html').then(module => callback(module));}, + html64: (callback) => {return System.import('./64.html').then(module => callback(module));}, + html65: (callback) => {return System.import('./65.html').then(module => callback(module));}, + html66: (callback) => {return System.import('./66.html').then(module => callback(module));}, + html67: (callback) => {return System.import('./67.html').then(module => callback(module));}, + html68: (callback) => {return System.import('./68.html').then(module => callback(module));}, + html69: (callback) => {return System.import('./69.html').then(module => callback(module));}, + html70: (callback) => {return System.import('./70.html').then(module => callback(module));}, + html71: (callback) => {return System.import('./71.html').then(module => callback(module));}, + html72: (callback) => {return System.import('./72.html').then(module => callback(module));}, + html73: (callback) => {return System.import('./73.html').then(module => callback(module));}, + html74: (callback) => {return System.import('./74.html').then(module => callback(module));}, + html75: (callback) => {return System.import('./75.html').then(module => callback(module));}, + html76: (callback) => {return System.import('./76.html').then(module => callback(module));}, + html77: (callback) => {return System.import('./77.html').then(module => callback(module));}, + html78: (callback) => {return System.import('./78.html').then(module => callback(module));}, + html79: (callback) => {return System.import('./79.html').then(module => callback(module));}, + html80: (callback) => {return System.import('./80.html').then(module => callback(module));}, + html81: (callback) => {return System.import('./81.html').then(module => callback(module));}, + html82: (callback) => {return System.import('./82.html').then(module => callback(module));}, + html83: (callback) => {return System.import('./83.html').then(module => callback(module));}, + html84: (callback) => {return System.import('./84.html').then(module => callback(module));}, + html85: (callback) => {return System.import('./85.html').then(module => callback(module));}, + html86: (callback) => {return System.import('./86.html').then(module => callback(module));}, + html87: (callback) => {return System.import('./87.html').then(module => callback(module));}, + html88: (callback) => {return System.import('./88.html').then(module => callback(module));}, + html89: (callback) => {return System.import('./89.html').then(module => callback(module));}, + html90: (callback) => {return System.import('./90.html').then(module => callback(module));}, + html91: (callback) => {return System.import('./91.html').then(module => callback(module));}, + html92: (callback) => {return System.import('./92.html').then(module => callback(module));}, + html93: (callback) => {return System.import('./93.html').then(module => callback(module));}, + html94: (callback) => {return System.import('./94.html').then(module => callback(module));}, + html95: (callback) => {return System.import('./95.html').then(module => callback(module));}, + html96: (callback) => {return System.import('./96.html').then(module => callback(module));}, + html97: (callback) => {return System.import('./97.html').then(module => callback(module));}, + html98: (callback) => {return System.import('./98.html').then(module => callback(module));}, + html99: (callback) => {return System.import('./99.html').then(module => callback(module));}, + html100: (callback) => {return System.import('./100.html').then(module => callback(module));}, + html101: (callback) => {return System.import('./101.html').then(module => callback(module));}, + html102: (callback) => {return System.import('./102.html').then(module => callback(module));}, + html103: (callback) => {return System.import('./103.html').then(module => callback(module));}, + html104: (callback) => {return System.import('./104.html').then(module => callback(module));}, + html105: (callback) => {return System.import('./105.html').then(module => callback(module));}, + html106: (callback) => {return System.import('./106.html').then(module => callback(module));}, + html107: (callback) => {return System.import('./107.html').then(module => callback(module));}, + html108: (callback) => {return System.import('./108.html').then(module => callback(module));}, + html109: (callback) => {return System.import('./109.html').then(module => callback(module));}, + html110: (callback) => {return System.import('./110.html').then(module => callback(module));}, + html111: (callback) => {return System.import('./111.html').then(module => callback(module));}, + html112: (callback) => {return System.import('./112.html').then(module => callback(module));}, + html113: (callback) => {return System.import('./113.html').then(module => callback(module));}, + html114: (callback) => {return System.import('./114.html').then(module => callback(module));} +} diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js index 61415f48e..5b75acd43 100644 --- a/src/components/SurahInfo/index.js +++ b/src/components/SurahInfo/index.js @@ -3,12 +3,23 @@ import React, { Component, PropTypes } from 'react'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; -const style = require('./style.scss'); +import html from './htmls'; +const style = require('./style.scss'); export default class SurahInfo extends Component { + + state = { + html: '' + } + + componentWillReceiveProps(nextProps) { + if (nextProps.isShowingSurahInfo && nextProps.surah && nextProps.surah.id) { + html[`html${nextProps.surah.id}`]((module) => this.setState({html: module})); + } + } + render() { const { surah, isShowingSurahInfo, onClose } = this.props; - const html = require(`./htmls/${surah.id}.html.js`); return ( @@ -29,7 +40,7 @@ export default class SurahInfo extends Component { -
+

Source: Sayyid Abul Ala Maududi - Tafhim al-Qur'an - The Meaning of the Quran diff --git a/src/components/SurahInfo/style.scss b/src/components/SurahInfo/style.scss index 1f4ba2c38..f00f1ca1f 100644 --- a/src/components/SurahInfo/style.scss +++ b/src/components/SurahInfo/style.scss @@ -1,4 +1,4 @@ -@import '../../styles/_bootstrap-config.scss'; +@import '../../styles/variables.scss'; $transition-speed: 0.75s; .container{ diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js index 600a3665b..aeff3657b 100644 --- a/src/components/SurahsDropdown/index.js +++ b/src/components/SurahsDropdown/index.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import { LinkContainer } from 'react-router-bootstrap'; +import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; diff --git a/src/components/SwitchToggle/style.scss b/src/components/SwitchToggle/style.scss index 0150625c6..8315a7b12 100644 --- a/src/components/SwitchToggle/style.scss +++ b/src/components/SwitchToggle/style.scss @@ -1,4 +1,4 @@ -@import '../../styles/_bootstrap-config.scss'; +@import '../../styles/variables.scss'; $old-color: #8ce196; $color: $brand-primary; $height: 25px; diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js index 9c9fb3058..78aa98da2 100644 --- a/src/containers/Home/index.js +++ b/src/containers/Home/index.js @@ -2,10 +2,9 @@ import React from 'react'; import Helmet from 'react-helmet'; import IndexHeader from '../../components/IndexHeader'; import Link from 'react-router/lib/Link'; -import { LinkContainer } from 'react-router-bootstrap'; +import LinkContainer from 'react-router-bootstrap/lib/LinkContainer'; import { asyncConnect } from 'redux-connect' import { connect } from 'react-redux'; -import moment from 'moment'; import debug from '../../helpers/debug'; @@ -99,7 +98,7 @@ class Home extends React.Component {

  • Quick links:
    • { - moment().isSame(moment().day('Friday')) && + new Date().getDay() === 5 &&
  • >>>>>> audio-segments componentWillUnmount() { if (__CLIENT__) { window.removeEventListener('scroll', this.handleNavbar, true); diff --git a/src/containers/Surah/style.scss b/src/containers/Surah/style.scss index 68368f117..398c6b7c8 100644 --- a/src/containers/Surah/style.scss +++ b/src/containers/Surah/style.scss @@ -1,4 +1,4 @@ -@import '../../styles/_bootstrap-config.scss'; +@import '../../styles/variables.scss'; :local .dropdown { padding-left: 0; diff --git a/src/helpers/Html.js b/src/helpers/Html.js index 7142a7cb8..1a2bb59f7 100644 --- a/src/helpers/Html.js +++ b/src/helpers/Html.js @@ -4,8 +4,9 @@ import serialize from 'serialize-javascript'; class Html extends React.Component { render() { - const { store, component } = this.props; + const { store, component, assets } = this.props; const head = Helmet.rewind(); + console.log(assets.styles); return ( @@ -16,9 +17,19 @@ class Html extends React.Component { {head.link.toComponent()} {head.script.toComponent()} - {Object.keys(this.props.assets.styles).map((style, i) => - )} + {Object.keys(assets.styles).map((style, i) => ( + + ))} + { + Object.keys(assets.styles).length === 0 ? +