Quran frontend v2

.circleci/config.yml

@@ -8,9 +8,6 @@ jobs:
     - run:
         name: install
         command: npm install
-    - run:
-        name: test
-        command: npm run test
     - run:
         name: rebuildSass
         command: npm rebuild node-sass
@@ -20,8 +17,26 @@ jobs:
     - run:
         name: bundlesize
         command: npm run bundlesize
+  test:
+    docker:
+      - image: circleci/node:latest
+    steps:
+    - checkout
+    - run:
+        name: install
+        command: npm install
+    - run:
+        name: lint
+        command: npm run lint
+    - run:
+        name: jest
+        command: npm run jest -- --forceExit --detectOpenHandles --runInBand
+    - run:
+        name: typescript
+        command: npm run type
 workflows:
   version: 2
   test_and_build:
     jobs:
       - build
+      - test

.eslintrc.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const paths = [path.join(__dirname, './config/eslint/base.js')];
+
+paths.push(path.join(__dirname, './config/eslint/typescript.js'));
+
+paths.push(path.join(__dirname, './config/eslint/prettier.js'));
+
+module.exports = {
+  extends: paths,
+};

.github/CONTRIBUTING.md

@@ -1,12 +1,13 @@
 # Contributing
 
-You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else.
+Thank you very much for your interest to help. We could use as much help as possible from our community.
 
 ## Reporting Issues
 
 Found a problem? Want a new feature?
 
 - See if your issue or idea has [already been reported].
+- File a new issue in Github.
 
 
 ## Submitting Pull Requests

.gitignore

@@ -15,4 +15,5 @@ selenium-debug.log
 webpack-stats.debug.json
 *.DS_Store
 .vscode
-coverage/
+coverage/
+.awcache

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  useTabs: false,
+  printWidth: 80,
+  tabWidth: 2,
+  singleQuote: true,
+  trailingComma: 'es5',
+  jsxBracketSameLine: false,
+};

.stylelintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  rules: {
+    'unit-no-unknown': true,
+    'no-duplicate-selectors': true,
+    'block-no-empty': true,
+  },
+};

README.md

@@ -15,16 +15,16 @@ Read the [contributing] section before creating an issue.
 - Ensure you have [nodejs] installed
 - Get the source by running `git clone https://github.com/quran/quran.com-frontend/` or creating a [fork]
 - Run `npm install` to do first time installation of all dependencies
-- Run `npm run dev` to start the dev server. Make sure you have pm2 installed globally! `npm install -g pm2`
+- Run `npm run dev` to start the dev server. 
 - Open `http://localhost:8000` in your browser to see the app.
 
 ## Staging
 To see the app with the latest changes, see the [staging] site. Production releases are made periodically when staging is stable and well tested.
 
 ## Backend
-The API source is at https://github.com/quran/quran-api-rails
+The API source is at https://github.com/quran/quran.com-api
 
-DB is private, message @mmahalwy for access.
+DB is private. Message on Slack to requrest access.
 
 The dev server uses the staging API by default. If you want to use a local API server, follow the instructions in the API repo and run the server locally then update the API_URL field in app.json to point to the local address.
 
@@ -34,13 +34,6 @@ Create an issue with your email for us to add you to the Slack group
 ## Design
 We currently use InvisionApp. Again, contact me if you'd like access to it.
 
-## Making sure main.js is small
-Follow: https://www.npmjs.com/package/webpack-bundle-size-analyzer
-```
-env NODE_ENV=development webpack --json > bundle-stats.json
-subl bundle-stats.json #so that you can the output
-analyze-bundle-size bundle-stats.json
-```
 
 [Reactjs]: https://facebook.github.io/react/docs/getting-started.html
 [Redux]: http://redux.js.org/

config/components/ClientConfig.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import serialize from 'serialize-javascript';
+import filterWithRules from '../../shared/utils/objects/filterWithRules';
+import values from '../values';
+
+// Filter the config down to the properties that are allowed to be included
+// in the HTML response.
+const clientConfig = filterWithRules(
+  // These are the rules used to filter the config.
+  values.clientConfigFilter,
+  // The config values to filter.
+  values
+);
+
+const serializedClientConfig = serialize(clientConfig);
+
+type Props = {
+  nonce: string;
+};
+/**
+ * A react component that generates a script tag that binds the allowed
+ * values to the window so that config values can be read within the
+ * browser.
+ *
+ * They get bound to window.__CLIENT_CONFIG__
+ */
+const ClientConfig: React.SFC<Props> = ({ nonce }: Props) => (
+  <script
+    type="text/javascript"
+    nonce={nonce}
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML={{
+      __html: `window.__CLIENT_CONFIG__=${serializedClientConfig}`,
+    }}
+  />
+);
+
+ClientConfig.propTypes = {
+  nonce: PropTypes.string.isRequired,
+};
+
+export default ClientConfig;

config/components/ClientConfig.js → config/components/ServiceWorkerClientConfig.js

@@ -22,21 +22,20 @@ const serializedClientConfig = serialize(clientConfig);
  *
  * They get bound to window.__CLIENT_CONFIG__
  */
-function ClientConfig({ nonce }) {
-  return (
-    <script
-      type="text/javascript"
-      nonce={nonce}
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: `window.__CLIENT_CONFIG__=${serializedClientConfig}`
-      }}
-    />
-  );
-}
+// TODO: Combine with tsx
+const ClientConfig = ({ nonce }) => (
+  <script
+    type="text/javascript"
+    nonce={nonce}
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML={{
+      __html: `window.__CLIENT_CONFIG__=${serializedClientConfig}`,
+    }}
+  />
+);
 
 ClientConfig.propTypes = {
-  nonce: PropTypes.string.isRequired
+  nonce: PropTypes.string.isRequired,
 };
 
 export default ClientConfig;