Merge f819ac5 into c299391

cofacts · Apr 5, 2018 · 7c57e09 · 7c57e09
2 parents c299391 + f819ac5
commit 7c57e09
Show file tree

Hide file tree

Showing 17 changed files with 6,662 additions and 3,789 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,39 +1,27 @@
 {
-  "presets": [
-    "next/babel",
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions"],
-        "node": "current"
-      }
-    }]
-  ],
+  "presets": ["next/babel"],
   "plugins": [
-    "styled-jsx/babel",
-    "transform-class-properties",
-    "transform-inline-environment-variables", // inline all process.env.XXX so that they are available in FE as well
-    [ // https://github.com/zeit/next.js/blob/master/examples/with-global-stylesheet/.babelrc
-      "wrap-in-js",
-      { "extensions": ["css$"] }
-    ],
-    [
-      "transform-assets", 
-      {
-        "extensions": ["txt", "svg", "png"],
-        "regExp": ".*/components/(.+)",
-        "name": "/static/[1]?[sha512:hash:base64:7]"
-      }
-    ],
     [
       "module-resolver",
       {
         "root": ["./"],
         "alias": {
           "components": "./components",
+          "constants": "./constants",
           "pages": "./pages",
-          "ducks": "./ducks"
+          "ducks": "./ducks",
+          "routes": "./routes"
         }
       }
     ]
-  ]
+  ],
+
+  // https://github.com/zeit/next.js/tree/master/examples/with-jest
+  "env": {
+    "test": {
+      "presets": [
+        ["next/babel", { "preset-env": { "modules": "commonjs" } }]
+      ]
+    }
+  }
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,5 @@
 module.exports = {
   parser: "babel-eslint",
-  extends: 'react-app',
   extends: [
     "eslint:recommended",
     "plugin:import/errors",

diff --git a/Dockerfile b/Dockerfile
@@ -14,12 +14,6 @@ RUN npm install
 ARG BUILD_TARGET
 ENV NODE_ENV=production BUILD_TARGET=${BUILD_TARGET}
 
-# server.js seldom changes, but requires to be built within docker
-# to make its path correct
-#
-COPY server.js .babelrc ./
-RUN npm run build:server
-
 # Other files, so that other files do not interfere with node_modules cache
 #
 COPY . .

diff --git a/components/App/App.css b/components/App/App.css
@@ -1,6 +1,3 @@
-@import 'normalize.css';
-@import 'nprogress/nprogress.css';
-
 html {
   font: 15px/1.6 思源黑體, "Source Han Sans", "Noto Sans CJK TC", 蘋方-繁, "PingFang TC", 微軟正黑體, "Microsoft JhengHei", sans-serif;
 }

diff --git a/components/App/App.js b/components/App/App.js
@@ -3,7 +3,6 @@
 // Ref: https://github.com/zeit/next.js/blob/master/examples/with-redux/pages/index.js
 //
 import React from 'react';
-import Head from 'next/head';
 import { Provider } from 'react-redux';
 import Router from 'next/router';
 import { fromJS } from 'immutable';
@@ -15,9 +14,11 @@ import AppFooter from './AppFooter';
 import LoginModal from '../Modal/LoginModal';
 import moment from 'moment';
 import 'moment/locale/zh-tw';
-import style from './App.css';
 import NProgress from 'nprogress';
-const { GA_TRACKER, AUTOTRACK_FILENAME } = require('../../config');
+
+import 'normalize.css';
+import 'nprogress/nprogress.css';
+import './App.css';
 
 let isBootstrapping = true;
 moment.locale('zh-tw');
@@ -29,14 +30,6 @@ Router.onRouteChangeComplete = () => {
   NProgress.done();
 };
 
-const SITE_STRUCTURED_DATA = JSON.stringify({
-  '@context': 'http://schema.org',
-  '@type': 'WebSite',
-  name: 'Cofacts',
-  alternateName: '真的假的——轉傳訊息查證',
-  url: 'https://cofacts.g0v.tw',
-});
-
 // Wraps the app with <Provider />, and invoke
 // initFn(dispatch, context passed in getInitialProps)
 // when getInitialProps() is invoked.
@@ -97,39 +90,10 @@ export default (initFn = () => {}, bootstrapFn = () => {}) => Component => {
       return (
         <Provider store={this.store}>
           <div>
-            <Head>
-              <style dangerouslySetInnerHTML={{ __html: style }} />
-              <meta
-                name="viewport"
-                content="width=device-width,initial-scale=1.0"
-              />
-              <script
-                dangerouslySetInnerHTML={{
-                  __html: `
-                window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-                ga('create', '${GA_TRACKER}', 'auto');
-                ga('require', 'eventTracker');
-                ga('require', 'outboundLinkTracker');
-                ga('require', 'urlChangeTracker');
-
-                ga('send', 'pageview');
-              `,
-                }}
-              />
-              <script
-                async
-                src="https://www.google-analytics.com/analytics.js"
-              />
-              <script async src={`/static/${AUTOTRACK_FILENAME}`} />
-            </Head>
             <AppHeader />
             <Component {...this.props} />
             <LoginModal />
             <AppFooter />
-            <script
-              type="application/ld+json"
-              dangerouslySetInnerHTML={{ __html: SITE_STRUCTURED_DATA }}
-            />
           </div>
         </Provider>
       );

diff --git a/components/App/AppHeader.js b/components/App/AppHeader.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { EDITOR_FACEBOOK_GROUP, PROJECT_HACKFOLDR } from '../../constants/urls';
-import { Link } from '../../routes';
+import { EDITOR_FACEBOOK_GROUP, PROJECT_HACKFOLDR } from 'constants/urls';
+import { Link } from 'routes';
 import { showDialog, logout } from 'ducks/auth';
 
 function AppHeader({ user, onLoginClick, onLogoutClick }) {

diff --git a/components/Modal/LoginModal.js b/components/Modal/LoginModal.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import getConfig from 'next/config';
 import Modal from './';
 import { hideDialog } from 'ducks/auth';
-const { API_URL } = require('../../config');
+
+const { publicRuntimeConfig: { API_URL } } = getConfig();
 
 function LoginModal({ isDialogShown, onModalClose }) {
   if (!isDialogShown) return null;

diff --git a/config.js b/config.js
diff --git a/ducks/__mocks__/next/config.js b/ducks/__mocks__/next/config.js
@@ -0,0 +1,9 @@
+/** In test environments, next.config.js is not used, thus we need to mock getConfig */
+
+function getConfig() {
+  return {
+    publicRuntimeConfig: { API_URL: 'API_URL', APP_ID: 'APP_ID' },
+  };
+}
+
+module.exports = getConfig;
diff --git a/next.config.js b/next.config.js
@@ -1,21 +1,45 @@
-// https://github.com/zeit/next.js/blob/master/examples/with-global-stylesheet/next.config.js
+// https://github.com/zeit/next-plugins/tree/master/packages/next-css
 //
+const { config } = require('./package.json');
+const withCSS = require('@zeit/next-css');
 
-module.exports = {
-  webpack: config => {
-    config.module.rules.push(
-      {
-        test: /\.css$/,
-        loader: 'emit-file-loader',
-        options: {
-          name: 'dist/[path][name].[ext]',
-        },
-      },
-      {
-        test: /\.css$/,
-        use: ['babel-loader', 'raw-loader', 'postcss-loader'],
-      }
-    );
-    return config;
+let envConfig = {};
+
+switch (process.env.BUILD_TARGET) {
+  case 'production':
+    envConfig = {
+      API_URL: 'https://cofacts-api.g0v.tw',
+      APP_ID: 'RUMORS_SITE',
+      GA_TRACKER: 'UA-98468513-1',
+    };
+    break;
+
+  case 'staging':
+    envConfig = {
+      API_URL: 'https://cofacts-api.hacktabl.org',
+      APP_ID: 'RUMORS_SITE',
+      GA_TRACKER: 'UA-98468513-5',
+    };
+    break;
+
+  case 'local':
+    // Own API server started using docker-compose in https://github.com/MrOrz/rumors-api
+    envConfig = {
+      API_URL: 'http://localhost:5000',
+      APP_ID: 'DEV',
+    };
+    break;
+
+  default:
+    envConfig = {
+      API_URL: 'https://cofacts-api.hacktabl.org', // Default to staging
+      APP_ID: 'DEV',
+    };
+}
+
+module.exports = withCSS({
+  publicRuntimeConfig: {
+    AUTOTRACK_FILENAME: config.autotrackFileName,
+    ...envConfig,
   },
-};
+});