Merge pull request #2 from manosim/first-ts-component

Start migrating components to TS
gitify-app · Dec 21, 2019 · b26e5db · b26e5db
2 parents 53f57c1 + 0742188
commit b26e5db
Show file tree

Hide file tree

Showing 39 changed files with 624 additions and 449 deletions.
diff --git a/index.html b/index.html
@@ -2,23 +2,15 @@
 <html>
   <head>
     <title>Gitify</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
   </head>
 
   <body>
-      <div id="gitify"></div>
+    <div id="gitify"></div>
   </body>
 
-  <script src="dist/js/app.js"></script>
-
-  <script>
-    // Disable zoom
-    document.addEventListener('mousewheel', function(e) {
-      if (e.ctrlKey) {
-        e.preventDefault();
-      }
-    });
-  </script>
+  <script src="./dist/js/app.js"></script>
 </html>
diff --git a/main.js b/main.js
@@ -21,7 +21,7 @@ const autoStart = new AutoLaunch({
   isHidden: true,
 });
 
-app.on('ready', function () {
+app.on('ready', function() {
   function createAppIcon() {
     let trayIcon = new Tray(iconIdle);
 
@@ -66,7 +66,7 @@ app.on('ready', function () {
           'There is an update available. Would you like to update Gitify now?',
       },
       response => {
-        console.log('Exit: ' + response); // eslint-disable-line no-console
+        console.log('Exit: ' + response);
 
         if (response === 0) {
           updater.install();
@@ -88,10 +88,8 @@ app.on('ready', function () {
     const updater = new GhReleases(autoUpdateOptions);
 
     updater.on('error', (event, message) => {
-      /* eslint-disable no-console */
       console.log('ERRORED.');
       console.log('Event: ' + JSON.stringify(event) + '. MESSAGE: ' + message);
-      /* eslint-enable no-console */
     });
 
     updater.on('update-downloaded', () => {
@@ -130,15 +128,15 @@ app.on('ready', function () {
       titleBarStyle: 'hiddenInset',
       webPreferences: {
         overlayScrollbars: true,
-        nodeIntegration: true
+        nodeIntegration: true,
       },
     };
 
     appWindow = new BrowserWindow(defaults);
     appWindow.loadURL(`file://${__dirname}/index.html`);
     appWindow.show();
 
-    appWindow.on('close', function (event) {
+    appWindow.on('close', function(event) {
       if (!isQuitting) {
         event.preventDefault();
         appWindow.hide();
@@ -158,7 +156,7 @@ app.on('ready', function () {
   ipcMain.on('startup-disable', () => autoStart.disable());
   ipcMain.on('check-update', () => checkAutoUpdate(true));
   ipcMain.on('set-badge', (_, count) => {
-    app.badgeCount = count
+    app.badgeCount = count;
   });
   ipcMain.on('app-quit', () => app.quit());
 

diff --git a/package.json b/package.json
@@ -9,11 +9,10 @@
     "package": "electron-packager . Gitify --overwrite --platform=darwin --arch=x64 --electron-version=1.6.10 --asar=true --icon=images/app-icon.icns --prune --ignore='src' --ignore='coverage'",
     "codesign": "bash scripts/codesign.bash",
     "dist": "yarn build && yarn package && yarn codesign",
-    "lint-js": "eslint 'src/js/' 'src/js/app.js' 'main.js'",
     "prettier-check": "prettier --check 'src/**/*.{js,ts,tsx}'",
     "prettier": "prettier --single-quote --trailing-comma es5 --write 'src/**/*.{js,ts,tsx}'",
     "jest": "jest",
-    "test": "yarn prettier-check && yarn lint-js && yarn jest -- --coverage",
+    "test": "yarn prettier-check && yarn jest -- --coverage",
     "start": "electron . –enable-logging"
   },
   "repository": {
@@ -76,26 +75,27 @@
     "react-addons-shallow-compare": "=15.5.2",
     "react-addons-test-utils": "=15.5.1",
     "react-dom": "=16.12.0",
-    "react-emojione": "=2.0.0",
+    "react-emojione": "=5.0.1",
     "react-icheck": "=0.3.8",
     "react-modal": "=3.11.1",
-    "react-redux": "=5.0.5",
-    "react-router": "=4.1.1",
-    "react-router-dom": "=4.1.1",
+    "react-redux": "=7.1.3",
+    "react-router-dom": "^5.1.2",
     "react-transition-group": "1.x",
-    "redux": "=3.6.0",
-    "redux-form": "=6.7.0",
+    "redux": "=4.0.4",
+    "redux-form": "=8.2.6",
     "redux-storage": "=4.1.2",
     "redux-storage-decorator-filter": "=1.1.8",
     "redux-storage-engine-localstorage": "=1.1.4",
     "redux-storage-merger-immutablejs": "=1.0.5",
-    "redux-thunk": "=2.2.0",
+    "redux-thunk": "=2.3.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.1",
     "ts-loader": "^6.2.1",
     "typescript": "^3.7.3"
   },
   "devDependencies": {
+    "@types/react": "^16.9.16",
+    "@types/react-redux": "^7.1.5",
     "babel-jest": "=20.0.3",
     "electron": "=7.1.3",
     "electron-packager": "=8.7.0",

diff --git a/src/js/__tests__/app.js b/src/js/__tests__/app.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line
+import React from 'react';
 import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { List, Map } from 'immutable';

diff --git a/src/js/__tests__/components/all-read.js b/src/js/__tests__/components/all-read.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { mount } from 'enzyme';
 
 import AllRead from '../../components/all-read';

diff --git a/src/js/__tests__/components/loading.js b/src/js/__tests__/components/loading.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Map } from 'immutable';
 import NProgress from 'nprogress';

diff --git a/src/js/__tests__/components/logos/dark.js b/src/js/__tests__/components/logos/dark.js
@@ -1,8 +1,8 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
-import LogoDark from '../../../components/logos/dark';
+import { LogoDark } from '../../../components/logos/dark';
 
 describe('components/logos/dark.js', () => {
   it('renders correctly', () => {

diff --git a/src/js/__tests__/components/logos/white.js b/src/js/__tests__/components/logos/white.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 

diff --git a/src/js/__tests__/components/notification.js b/src/js/__tests__/components/notification.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { Map } from 'immutable';
 import { shallow } from 'enzyme';
 

diff --git a/src/js/__tests__/components/notifications.js b/src/js/__tests__/components/notifications.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { List } from 'immutable';
 

diff --git a/src/js/__tests__/components/oops.js b/src/js/__tests__/components/oops.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { shallow } from 'enzyme';
 import Oops from '../../components/oops';
 

diff --git a/src/js/__tests__/components/repository.js b/src/js/__tests__/components/repository.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { shallow } from 'enzyme';
 import renderer from 'react-test-renderer';
 

diff --git a/src/js/__tests__/components/settings-modal.js b/src/js/__tests__/components/settings-modal.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { List, Map } from 'immutable';
 import { shallow } from 'enzyme';
 import renderer from 'react-test-renderer';

diff --git a/src/js/__tests__/components/sidebar.js b/src/js/__tests__/components/sidebar.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { fromJS, List, Map } from 'immutable';
 import { shallow, mount } from 'enzyme';

diff --git a/src/js/__tests__/routes/enterprise-login.js b/src/js/__tests__/routes/enterprise-login.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router';
 import { Provider } from 'react-redux';

diff --git a/src/js/__tests__/routes/login.js b/src/js/__tests__/routes/login.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 import { Map } from 'immutable';

diff --git a/src/js/__tests__/routes/notifications.js b/src/js/__tests__/routes/notifications.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import { List, Map } from 'immutable';
 import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';

diff --git a/src/js/__tests__/store/configureStore.js b/src/js/__tests__/store/configureStore.js
@@ -1,4 +1,4 @@
-import React from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react';
 import configureStore from '../../store/configureStore';
 
 describe('store/configureStore.js', function() {

diff --git a/src/js/actions/index.js → src/js/actions/index.ts b/src/js/actions/index.js → src/js/actions/index.ts
@@ -8,6 +8,10 @@ import {
   generateGitHubAPIUrl,
 } from '../utils/helpers';
 import Constants from '../utils/constants';
+import {
+  ToggleSettingsModalAction,
+  TOGGLE_SETTINGS_MODAL,
+} from '../../types/actions';
 
 export function makeAsyncActionSet(actionName) {
   return {
@@ -246,8 +250,7 @@ export function updateSetting(setting, value) {
   };
 }
 
-export const TOGGLE_SETTINGS_MODAL = 'TOGGLE_SETTINGS_MODAL';
-export function toggleSettingsModal() {
+export function toggleSettingsModal(): ToggleSettingsModalAction {
   return {
     type: TOGGLE_SETTINGS_MODAL,
   };

diff --git a/src/js/app.js b/src/js/app.js
@@ -1,6 +1,6 @@
 import '../scss/app.scss';
 
-import React from 'react'; // eslint-disable-line
+import React from 'react';
 import ReactDOM from 'react-dom';
 import {
   Redirect,
@@ -34,7 +34,6 @@ export class NotFound extends React.Component {
   }
 }
 
-/* eslint-disable react/prop-types */
 export const PrivateRoute = ({ component: Component, ...rest }) => {
   const authReducer = store.getState().auth;
   const isAuthenticated =
@@ -56,7 +55,6 @@ export const PrivateRoute = ({ component: Component, ...rest }) => {
     />
   );
 };
-/* eslint-enable react/prop-types */
 
 ReactDOM.render(
   <Provider store={store}>

diff --git a/src/js/components/loading.js → src/js/components/loading.tsx b/src/js/components/loading.js → src/js/components/loading.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import { connect } from 'react-redux';
 import NProgress from 'nprogress';
 
-export class Loading extends React.PureComponent {
-  static propTypes = {
-    isLoading: PropTypes.bool.isRequired,
-  };
+interface IProps {
+  isLoading: boolean;
+}
+
+export class Loading extends React.PureComponent<IProps> {
+  state = {};
 
   componentDidMount() {
     NProgress.configure({
@@ -18,12 +19,14 @@ export class Loading extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isLoading) {
+  static getDerivedStateFromProps(props, state) {
+    if (props.isLoading) {
       NProgress.start();
     } else {
       NProgress.done();
     }
+
+    return null;
   }
 
   componentWillUnmount() {

diff --git a/src/js/components/logos/dark.js b/src/js/components/logos/dark.js