variable injection -> cookies (#81)

* switched from injecting variables in templates to using cookies
* fixed linter errors, removed unused code

Author: mldangelo

app/components/Routes/AdminRoute.js

@@ -3,20 +3,22 @@ import PropTypes from 'prop-types';
 import cookie from 'js-cookie';
 import { Route, Redirect } from 'react-router-dom';
 
+const { id, admin } = cookie.get();
+
 const AdminRoute = ({ component, ...rest }) => (
   <Route
     {...rest}
     render={(props) => {
-      if (!window.id) { // checks for non authenticated accounts
+      if (!id) { // checks for non authenticated accounts
         cookie.set('target', props.location.pathname);
       }
       return (
-        window.admin ? (
+        admin ? (
           React.createElement(component, props)
         ) : (
           <Redirect
             to={{
-              pathname: window.id ? '/unauthorized' : '/login',
+              pathname: id ? '/unauthorized' : '/login',
               state: { from: props.location },
             }}
           />

app/components/Routes/PrivateRoute.js

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 import cookie from 'js-cookie';
 import { Route, Redirect } from 'react-router-dom';
 
+const { id } = cookie.get();
 const PrivateRoute = ({ component, ...rest }) => (
   <Route
     {...rest}
     render={(props) => {
-      if (!window.id) { // checks for non authenticated accounts
+      if (!id) { // checks for non authenticated accounts
         cookie.set('target', props.location.pathname);
       }
       return (
-        window.id ? (
+        id ? (
           React.createElement(component, props)
         ) : (
           <Redirect

app/components/Template/Hamburger.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 
 import Menus from 'react-burger-menu';
+import cookie from 'js-cookie';
 
 import routes from '../../data/routes';
 
@@ -39,6 +40,7 @@ class Hamburger extends Component {
   }
 
   render() {
+    const { id, admin } = cookie.get();
     return (
       <div className="hamburger-container">
         <nav className="main" id="hambuger-nav">
@@ -55,8 +57,8 @@ class Hamburger extends Component {
                 </Link>
               </li>
             ))}
-            {window.admin ? <li><a href="/admin"><h3>Admin</h3></a></li> : null}
-            {window.id ? <li><a href="/logout"><h3>Logout</h3></a></li> : null}
+            {admin ? <li><a href="/admin"><h3>Admin</h3></a></li> : null}
+            {id ? <li><a href="/logout"><h3>Logout</h3></a></li> : null}
           </ul>
         </Menu>
       </div>

app/components/Template/Header.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import cookie from 'js-cookie';
 
 import Hamburger from './Hamburger';
 import routes from '../../data/routes';
 
+const { id, admin } = cookie.get();
+
 const Header = () => (
   <header id="header">
     <h1 className="index-link">
@@ -18,8 +21,8 @@ const Header = () => (
             <Link to={l.path}>{l.label}</Link>
           </li>
         ))}
-        {window.admin ? <li><a href="/admin">Admin</a></li> : null}
-        {window.id ? <li><a href="/logout">Logout</a></li> : null}
+        {admin ? <li><a href="/admin">Admin</a></li> : null}
+        {id ? <li><a href="/logout">Logout</a></li> : null}
       </ul>
     </nav>
     <Hamburger />

app/layouts/Main.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 
 import ReactGA from 'react-ga';
+import cookie from 'js-cookie';
 
 import Header from '../components/Template/Header';
 import Nav from '../components/Template/Nav';
@@ -18,9 +19,10 @@ class Main extends Component {
 
   componentDidMount() {
     if (process.env.NODE_ENV === 'production') {
+      const { id } = cookie.get();
       ReactGA.set({
         page: window.location.pathname,
-        userId: window.id,
+        userId: id,
       });
       ReactGA.pageview(window.location.pathname);
     }

package.json

@@ -6,7 +6,8 @@
     "build": "node -r babel-register ./node_modules/webpack/bin/webpack --config ./webpack/webpack.production.config.js --progress --profile --colors && rimraf ./dist && mv ./tmp ./dist",
     "build-dev": "rimraf ./dist && babel-node ./node_modules/webpack/bin/webpack --config ./webpack/webpack.config.js --progress --profile --colors",
     "clean": "rimraf ./dist && rimraf ./tmp",
-    "deploy": "yarn && npm run build && npm run forever-stop || true && npm run forever-start",
+    "predeploy": "yarn && npm run build",
+    "deploy": "npm run forever-stop || true && npm run forever-start",
     "dev": "nodemon server/server.js --ignore app/ --ignore test/ --exec babel-node",
     "forever-start": "forever start --minUptime 1000ms --spinSleepTime 1000ms -a -l forever.log -o out.log -e err.log -c 'nodemon server/server.js --exitcrash --exec babel-node' server/server.js",
     "forever-stop": "forever stop server/server.js",

server/routes/views/app.js

@@ -38,20 +38,36 @@ const routes = (app) => {
 
     app.get('/*', (req, res) => {
       const content = middleware.fileSystem.readFileSync(path.join(__dirname, '../../../dist/index.html'));
-      const key = '<div id="root"></div>';
-      const index = content.indexOf(key) + key.length;
-      const inject = req.user ? `<script type="text/javascript">window.id="${req.user._id}";window.admin=${req.user.isAdmin};</script>` : '';
-      res.send(content.slice(0, index) + inject + content.slice(index));
+
+      if (req.user) {
+        res.cookie('id', req.user._id.toString(), { path: '/' });
+        if (req.user.isAdmin) {
+          res.cookie('admin', req.user.isAdmin, { path: '/' });
+        }
+      } else {
+        res.clearCookie('admin', { path: '/' });
+        res.clearCookie('id', { path: '/' });
+      }
+
+      res.set('Content-Type', 'text/html');
+      res.send(content);
     });
   } else {
     app.use('/dist', express.static(path.join(__dirname, '../../../dist')));
     const content = fs.readFileSync(path.join(__dirname, '../../../dist/index.html'), 'utf8');
-    const key = '<div id=root></div>';
-    const index = content.indexOf(key) + key.length;
 
     app.get('/*', (req, res) => {
-      const inject = req.user ? `<script type="text/javascript">window.id="${req.user._id}";window.admin=${req.user.isAdmin};</script>` : '';
-      res.send(content.slice(0, index) + inject + content.slice(index));
+      if (req.user) {
+        res.cookie('id', req.user._id.toString(), { path: '/' });
+        if (req.user.isAdmin) {
+          res.cookie('admin', req.user.isAdmin, { path: '/' });
+        }
+      } else {
+        res.clearCookie('admin', { path: '/' });
+        res.clearCookie('id', { path: '/' });
+      }
+      res.set('Content-Type', 'text/html');
+      res.send(content);
     });
   }
 };

server/routes/views/logout.js

@@ -1,4 +1,7 @@
 export default (req, res) => {
   if (req.user) req.logout();
+  res.clearCookie('admin', { path: '/' });
+  res.clearCookie('id', { path: '/' });
+
   res.redirect('/');
 };