From 320ca19c49c4ddbedbd95ffdd481994892f263ff Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 20:31:26 +0200
Subject: Use env variables for logging and oauth control

---
 .gitignore                                |  3 +++
 README.md                                 | 16 +++++++++++++++-
 public/index.html                         |  3 +--
 src/api/socket.js                         | 10 ++++++++--
 src/containers/auth/Login.js              |  2 +-
 src/store/configure-store.js              | 23 +++++++++++++++--------
 src/store/middlewares/dummy-middleware.js |  3 +++
 7 files changed, 46 insertions(+), 14 deletions(-)
 create mode 100644 src/store/middlewares/dummy-middleware.js

diff --git a/.gitignore b/.gitignore
index 8d7ac584..db036d85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,5 +24,8 @@ yarn-error.log*
 # Yarn
 yarn.lock
 
+# Environment variables
+.env
+
 # Sass output
 *.css
diff --git a/README.md b/README.md
index ae90ee5a..8f2cdceb 100644
--- a/README.md
+++ b/README.md
@@ -6,10 +6,24 @@ The user-facing component of the OpenDC stack, allowing users to build and inter
 
 
 ## Get Up and Running
-To get started, you'll need the [Node.js environment](https://nodejs.org) and the [Yarn package manager](https://yarnpkg.com). 
+
+Looking for the entire stack? Check out [the main OpenDC repo](https://github.com/atlarge-research/opendc) for instructions on how to set up a Docker container with all of OpenDC, without the hassle of running each of the components manually.
+
+### Installation
+
+To get started, you'll need the [Node.js environment](https://nodejs.org) and the [Yarn package manager](https://yarnpkg.com).
 
 ```bash
 yarn
+```
+
+### Running the development server
+
+First, you need to have a Google OAuth client ID set up. Check the [documentation of the main OpenDC repo](https://github.com/atlarge-research/opendc) if you're not sure how to do this. Once you have such an ID, you need to set it as environment variable `REACT_APP_OAUTH_CLIENT_ID`. One way of doing this is to create an `.env` file with content `REACT_APP_OAUTH_CLIENT_ID=YOUR_ID` (`YOUR_ID` without quotes), in the root directory of this repo.
+
+Once you've set this variable, you're ready to start the development server:
+
+```bash
 yarn start
 ```
 
diff --git a/public/index.html b/public/index.html
index 9d4b4280..cf0ab795 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,8 +25,7 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="shortcut icon" href="/favicon.ico">
 
-    <meta name="google-signin-client_id"
-          content="311799954046-jv2inpg9nu7m0avcg6gulvkuvfgbtgb4.apps.googleusercontent.com">
+    <meta name="google-signin-client_id" content="%REACT_APP_OAUTH_CLIENT_ID%">
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
           integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
diff --git a/src/api/socket.js b/src/api/socket.js
index 298cf948..b5bb9b37 100644
--- a/src/api/socket.js
+++ b/src/api/socket.js
@@ -29,12 +29,18 @@ export function sendSocketRequest(request, callback) {
 
     socket.emit("request", request);
 
-    console.log("Sent socket request:", request);
+    if (process.env.NODE_ENV !== 'production') {
+        console.log("Sent socket request:", request);
+    }
 }
 
 function onSocketResponse(json) {
     const response = JSON.parse(json);
-    console.log("Received socket response:", response);
+
+    if (process.env.NODE_ENV !== 'production') {
+        console.log("Received socket response:", response);
+    }
+
     callbacks[response.id](response);
     delete callbacks[response.id];
 }
diff --git a/src/containers/auth/Login.js b/src/containers/auth/Login.js
index be4b07ee..4b008da4 100644
--- a/src/containers/auth/Login.js
+++ b/src/containers/auth/Login.js
@@ -28,7 +28,7 @@ class LoginContainer extends React.Component {
 
         return (
             <GoogleLogin
-                clientId="311799954046-jv2inpg9nu7m0avcg6gulvkuvfgbtgb4.apps.googleusercontent.com"
+                clientId={process.env.REACT_APP_OAUTH_CLIENT_ID}
                 onSuccess={this.onAuthResponse.bind(this)}
                 onFailure={this.onAuthResponse.bind(this)}
                 className="login btn btn-primary"
diff --git a/src/store/configure-store.js b/src/store/configure-store.js
index a7f3ec31..0c5baa0b 100644
--- a/src/store/configure-store.js
+++ b/src/store/configure-store.js
@@ -6,23 +6,30 @@ import thunk from "redux-thunk";
 import {authRedirectMiddleware} from "../auth/index";
 import rootReducer from "../reducers/index";
 import rootSaga from "../sagas/index";
+import {dummyMiddleware} from "./middlewares/dummy-middleware";
 import {viewportAdjustmentMiddleware} from "./middlewares/viewport-adjustment";
 
 const sagaMiddleware = createSagaMiddleware();
-const logger = createLogger();
+
+let logger;
+if (process.env.NODE_ENV !== 'production') {
+    logger = createLogger();
+}
+
+const middlewares = [
+    process.env.NODE_ENV === 'production' ? dummyMiddleware : logger,
+    thunk,
+    sagaMiddleware,
+    authRedirectMiddleware,
+    viewportAdjustmentMiddleware,
+];
 
 export default function configureStore() {
     const store = createStore(
         rootReducer,
         compose(
             persistState("auth"),
-            applyMiddleware(
-                logger,
-                thunk,
-                sagaMiddleware,
-                authRedirectMiddleware,
-                viewportAdjustmentMiddleware,
-            )
+            applyMiddleware(...middlewares)
         )
     );
     sagaMiddleware.run(rootSaga);
diff --git a/src/store/middlewares/dummy-middleware.js b/src/store/middlewares/dummy-middleware.js
new file mode 100644
index 00000000..eb87e713
--- /dev/null
+++ b/src/store/middlewares/dummy-middleware.js
@@ -0,0 +1,3 @@
+export const dummyMiddleware = store => next => action => {
+    next(action);
+};
-- 
cgit v1.2.3