added null state to html when loading, redirected logout to login screen

jonathontoon · Jan 27, 2018 · 0c6d248 · 0c6d248
1 parent 07bfa77
commit 0c6d248
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 143 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 - [Introduction](#introduction)
 - [Installation](#installation)
 - [Development](#development)
-- [Deployment](#deployment)
+- [Acknowledgements](#Acknowledgements)
 
 ## Introduction
 
@@ -30,6 +30,6 @@ For all new features or bug fixes please create pull requests directly into the
 
 Coming Soon
 
-## Other
+## Acknowledgements
 
 This project is based off [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate), all methodloligies still apply, expect for the removal of Flow and SASS.
diff --git a/app/app.global.css b/app/app.global.css
@@ -3,4 +3,8 @@
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
   user-select: none !important;
+}
+
+#root {
+  z-index: 99
 }
diff --git a/app/app.html b/app/app.html
@@ -16,6 +16,9 @@
     </script>
   </head>
   <body>
+    <div id="placeholder" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #ffffff;">
+        <img class="twitter-logo" style="position: absolute; margin-top: -31px; margin-left: -31px; top: 50%; left: 50%; width: 62px; height: 62px;" src="../resources/twitter-logo.svg" />
+    </div>
     <div id="root"></div>
     <script>
       {

diff --git a/app/components/Main.jsx b/app/components/Main.jsx
@@ -1,6 +1,18 @@
-import React, { Component, Fragment, } from 'react';
+import React, { Component, } from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider, } from 'styled-components';
+import Styled, { ThemeProvider, } from 'styled-components';
+import Theme from 'styled-theming';
+
+import * as constants from '../constants';
+
+const MainStyle = Styled.div`
+  overflow: hidden;
+  user-select: none;
+  width: ${window.innerWidth}px;
+  height: ${window.innerHeight}px;
+  background-color: ${Theme('mode', { day: constants.WHITE, night: constants.DARK_MODE_BACKGROUND, })};
+  position: relative;
+`;
 
 class Main extends Component {
   static propTypes = {
@@ -12,9 +24,9 @@ class Main extends Component {
     const { children, colorTheme, } = this.props;
     return (
       <ThemeProvider theme={{ mode: colorTheme, }}>
-        <Fragment>
+        <MainStyle>
           {children}
-        </Fragment>
+        </MainStyle>
       </ThemeProvider>
     );
   }

diff --git a/app/components/Settings.jsx b/app/components/Settings.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, } from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'styled-components';
 
@@ -24,68 +24,75 @@ const SettingsStyle = Styled.section`
     }
 `;
 
-const Settings = (props) => {
-  const {
-    showSettings,
-    onToggleSettingsVisibility,
-    colorTheme,
-    onToggleColorTheme,
-    shouldLogout,
-  } = props;
+class Settings extends Component {
+  static propTypes = {
+    showSettings: PropTypes.bool.isRequired,
+    onToggleSettingsVisibility: PropTypes.func.isRequired,
+    colorTheme: PropTypes.string.isRequired,
+    onToggleColorTheme: PropTypes.func.isRequired,
+    shouldLogout: PropTypes.func.isRequired,
+  };
 
-  return (
-    <SettingsStyle className={`${showSettings ? '' : 'hidden'}`}>
-      <InnerContent
-        style={{
-          position: 'relative',
-          top: '0px',
-          left: '0px',
-          padding: '0px',
-          minHeight: '100%',
-        }}
-      >
-        <ListView
-          dataSource={
-            [{
-              title: `${colorTheme === 'day' ? 'Enable' : 'Disable'} Night Mode`,
-              action: () => {
-                onToggleColorTheme(colorTheme === 'day' ? 'night' : 'day');
-                onToggleSettingsVisibility(false);
-              },
-            }, {
-              title: 'Quit Tweet Tray',
-              action: () => {
-                onToggleSettingsVisibility(false);
-                ipcRenderer.send('quitApplication');
-              },
-            }, {
-              title: 'Log Out',
-              action: () => {
-                onToggleSettingsVisibility(false);
-                shouldLogout();
-              },
-              type: 'warning',
-            }, {
-              title: 'Cancel',
-              action: () => {
-                onToggleSettingsVisibility(false);
-              },
-              type: 'last',
-            }, ]
-          }
-        />
-      </InnerContent>
-    </SettingsStyle>
-  );
-};
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
-Settings.propTypes = {
-  showSettings: PropTypes.bool.isRequired,
-  onToggleSettingsVisibility: PropTypes.func.isRequired,
-  colorTheme: PropTypes.string.isRequired,
-  onToggleColorTheme: PropTypes.func.isRequired,
-  shouldLogout: PropTypes.func.isRequired,
-};
+  render() {
+    const {
+      showSettings,
+      onToggleSettingsVisibility,
+      colorTheme,
+      onToggleColorTheme,
+      shouldLogout,
+    } = this.props;
+
+    return (
+      <SettingsStyle className={`${showSettings ? '' : 'hidden'}`}>
+        <InnerContent
+          style={{
+            position: 'relative',
+            top: '0px',
+            left: '0px',
+            padding: '0px',
+            minHeight: '100%',
+          }}
+        >
+          <ListView
+            dataSource={
+              [{
+                title: `${colorTheme === 'day' ? 'Enable' : 'Disable'} Night Mode`,
+                action: () => {
+                  onToggleColorTheme(colorTheme === 'day' ? 'night' : 'day');
+                  onToggleSettingsVisibility(false);
+                },
+              }, {
+                title: 'Quit Tweet Tray',
+                action: () => {
+                  onToggleSettingsVisibility(false);
+                  ipcRenderer.send('quitApplication');
+                },
+              }, {
+                title: 'Log Out',
+                action: () => {
+                  onToggleSettingsVisibility(false);
+                  this.context.router.history.push('/');
+                  shouldLogout();
+                },
+                type: 'warning',
+              }, {
+                title: 'Cancel',
+                action: () => {
+                  onToggleSettingsVisibility(false);
+                },
+                type: 'last',
+              }, ]
+            }
+          />
+        </InnerContent>
+      </SettingsStyle>
+    );
+  }
+}
 
 export default Settings;
 
diff --git a/app/reducers/index.js b/app/reducers/index.js
@@ -8,14 +8,24 @@ import weightedStatus from './weightedStatus';
 import requestTokenPair from './requestTokenPair';
 import accessTokenPair from './accessTokenPair';
 
-const rootReducer = combineReducers({
-  colorTheme,
-  settingsVisibility,
+import { ON_LOGOUT, } from '../actions';
+
+const appReducer = combineReducers({
+  accessTokenPair,
+  requestTokenPair,
   userCredentials,
   weightedStatus,
-  requestTokenPair,
-  accessTokenPair,
-  router,
+  settingsVisibility,
+  colorTheme,
 });
 
+/* eslint no-param-reassign: 0 */
+const rootReducer = (state, action) => {
+  if (action.type === ON_LOGOUT) {
+    state = undefined;
+  }
+
+  return appReducer(state, action);
+};
+
 export default rootReducer;
diff --git a/app/utils/MainWindowManager.js b/app/utils/MainWindowManager.js
@@ -38,7 +38,6 @@ class MainWindowManager {
       frame: false,
       titleBarStyle: 'hidden',
       show: false,
-      backgroundColor: '#1DA1F2',
       skipTaskbar: true,
       alwaysOnTop: true,
       icon: path.join(__dirname, '../../resources/icon.ico'),
@@ -53,9 +52,9 @@ class MainWindowManager {
       this.window = null;
     });
 
-    window.on('blur', () => {
-      this.hideWindow();
-    });
+    // window.on('blur', () => {
+    //   this.hideWindow();
+    // });
 
     window.once('ready-to-show', () => {
       if (!this.window) {

diff --git a/webpack.config.base.js b/webpack.config.base.js
@@ -4,7 +4,7 @@
 
 import path from 'path';
 import webpack from 'webpack';
-import { dependencies as externals } from './app/package.json';
+import { dependencies as externals, } from './app/package.json';
 
 export default {
   externals: Object.keys(externals || {}),
@@ -16,23 +16,23 @@ export default {
       use: {
         loader: 'babel-loader',
         options: {
-          cacheDirectory: true
-        }
-      }
-    }]
+          cacheDirectory: true,
+        },
+      },
+    }, ],
   },
 
   output: {
     path: path.join(__dirname, 'app'),
     // https://github.com/webpack/webpack/issues/1114
-    libraryTarget: 'commonjs2'
+    libraryTarget: 'commonjs2',
   },
 
   /**
    * Determine the array of extensions that should be used to resolve modules.
    */
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
+    extensions: ['.js', '.jsx', '.json', ],
     modules: [
       path.join(__dirname, 'app'),
       'node_modules',
@@ -41,7 +41,7 @@ export default {
 
   plugins: [
     new webpack.EnvironmentPlugin({
-      NODE_ENV: 'production'
+      NODE_ENV: 'production',
     }),
 
     new webpack.NamedModulesPlugin(),

diff --git a/webpack.config.main.prod.js b/webpack.config.main.prod.js
@@ -5,7 +5,7 @@
 import webpack from 'webpack';
 import merge from 'webpack-merge';
 import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { BundleAnalyzerPlugin, } from 'webpack-bundle-analyzer';
 import baseConfig from './webpack.config.base';
 import CheckNodeEnv from './internals/scripts/CheckNodeEnv';
 
@@ -21,18 +21,18 @@ export default merge.smart(baseConfig, {
   // 'main.js' in root
   output: {
     path: __dirname,
-    filename: './app/main.prod.js'
+    filename: './app/main.prod.js',
   },
 
   plugins: [
     new UglifyJSPlugin({
       parallel: true,
-      sourceMap: true
+      sourceMap: true,
     }),
 
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
+      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
     }),
 
     /**
@@ -46,8 +46,8 @@ export default merge.smart(baseConfig, {
      */
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
-      DEBUG_PROD: 'false'
-    })
+      DEBUG_PROD: 'false',
+    }),
   ],
 
   /**
@@ -57,6 +57,6 @@ export default merge.smart(baseConfig, {
    */
   node: {
     __dirname: false,
-    __filename: false
+    __filename: false,
   },
 });