Update dependencies & apply new prettier rules

package.json

@@ -83,21 +83,21 @@
     }
   },
   "dependencies": {
-    "@primer/octicons-react": "^9.4.0",
+    "@primer/octicons-react": "^9.6.0",
     "auto-launch": "=5.0.5",
     "axios": "=0.19.2",
-    "date-fns": "^2.9.0",
-    "electron-updater": "^4.2.0",
+    "date-fns": "^2.11.1",
+    "electron-updater": "^4.2.5",
     "final-form": "^4.18.7",
     "lodash": "^4.17.15",
-    "menubar": "^8.0.0",
+    "menubar": "^8.0.1",
     "nprogress": "=0.2.0",
-    "react": "=16.12.0",
-    "react-dom": "=16.12.0",
+    "react": "=16.13.1",
+    "react-dom": "=16.13.1",
     "react-emojione": "=5.0.1",
     "react-final-form": "^6.3.5",
-    "react-is": "^16.12.0",
-    "react-redux": "=7.1.3",
+    "react-is": "^16.13.1",
+    "react-redux": "=7.2.0",
     "react-router-dom": "^5.1.2",
     "react-transition-group": "^4.3.0",
     "react-typist": "^2.0.5",
@@ -107,29 +107,29 @@
     "redux-storage-engine-localstorage": "=1.1.4",
     "redux-thunk": "=2.3.0",
     "styled-components": "^5.0.1",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.7.5"
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3"
   },
   "devDependencies": {
-    "@testing-library/react": "^9.4.0",
-    "@types/jest": "^25.1.2",
+    "@testing-library/react": "^10.0.1",
+    "@types/jest": "^25.1.4",
     "@types/lodash": "^4.14.149",
-    "@types/node": "^12.12.21",
-    "@types/react": "^16.9.19",
+    "@types/node": "^13.9.5",
+    "@types/react": "^16.9.26",
     "@types/react-redux": "^7.1.7",
-    "@types/react-transition-group": "^4.2.3",
-    "@types/styled-components": "^4.4.2",
-    "electron": "^8.0.0",
-    "electron-builder": "^22.3.2",
-    "jest": "^25.1.0",
-    "nock": "^11.8.2",
-    "prettier": "=1.19.1",
-    "react-test-renderer": "=16.12.0",
+    "@types/react-transition-group": "^4.2.4",
+    "@types/styled-components": "^5.0.1",
+    "electron": "^8.2.0",
+    "electron-builder": "^22.4.1",
+    "jest": "^25.2.3",
+    "nock": "^12.0.3",
+    "prettier": "=2.0.2",
+    "react-test-renderer": "=16.13.1",
     "redux-logger": "=3.0.6",
     "redux-mock-store": "=1.5.4",
-    "ts-jest": "^25.2.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
+    "ts-jest": "^25.2.1",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
     "webpack-merge": "^4.2.2"
   }
 }

src/js/__mocks__/electron.js

@@ -1,4 +1,4 @@
-window.Notification = function(title) {
+window.Notification = function (title) {
   this.title = title;
 
   return {
@@ -16,10 +16,10 @@ window.Audio = class Audio {
 
 window.localStorage = {
   store: {},
-  getItem: function(key) {
+  getItem: function (key) {
     return this.store[key];
   },
-  setItem: function(key, item) {
+  setItem: function (key, item) {
     this.store[key] = item;
   },
   removeItem: jest.fn(),

src/js/__mocks__/redux-logger.js

@@ -1,5 +1,5 @@
 export function createLogger() {
-  return () => next => action => {
+  return () => (next) => (action) => {
     return next(action);
   };
 }

src/js/__mocks__/redux-storage.js

@@ -1,6 +1,6 @@
 export function createMiddleware() {
   return () => {
-    return next => action => {
+    return (next) => (action) => {
       return next(action);
     };
   };
@@ -13,7 +13,7 @@ export function createLoader() {
     },
   };
 
-  return () => new Promise(resolve => resolve(state));
+  return () => new Promise((resolve) => resolve(state));
 }
 
 export function reducer(clb) {

src/js/actions/index.test.ts

@@ -30,11 +30,9 @@ describe('actions/index.js', () => {
     const authOptions = Constants.DEFAULT_AUTH_OPTIONS;
     const code = 'THISISACODE';
 
-    nock('https://github.com/')
-      .post('/login/oauth/access_token')
-      .reply(200, {
-        access_token: 'THISISATOKEN',
-      });
+    nock('https://github.com/').post('/login/oauth/access_token').reply(200, {
+      access_token: 'THISISATOKEN',
+    });
 
     const expectedActions = [
       { type: actions.LOGIN.REQUEST },

src/js/actions/index.ts

@@ -25,7 +25,7 @@ export function loginUser(authOptions, code) {
   const { hostname } = authOptions;
   const isEnterprise = hostname !== Constants.DEFAULT_AUTH_OPTIONS.hostname;
 
-  return dispatch => {
+  return (dispatch) => {
     const url = `https://${hostname}/login/oauth/access_token`;
     const method = 'POST';
     const data = {
@@ -37,15 +37,15 @@ export function loginUser(authOptions, code) {
     dispatch({ type: LOGIN.REQUEST });
 
     return apiRequest(url, method, data)
-      .then(function(response) {
+      .then(function (response) {
         dispatch({
           type: LOGIN.SUCCESS,
           payload: response.data,
           isEnterprise,
           hostname,
         });
       })
-      .catch(function(error) {
+      .catch(function (error) {
         dispatch({ type: LOGIN.FAILURE, payload: error.response.data });
       });
   };
@@ -77,7 +77,7 @@ export function fetchNotifications() {
 
     function getEnterpriseNotifications() {
       const enterpriseAccounts = getState().auth.enterpriseAccounts;
-      return enterpriseAccounts.map(account => {
+      return enterpriseAccounts.map((account) => {
         const hostname = account.hostname;
         const token = account.token;
         const url = `https://${hostname}/api/v3/${endpointSuffix}`;
@@ -92,7 +92,7 @@ export function fetchNotifications() {
       .then(
         axios.spread((gitHubNotifications, ...entAccNotifications) => {
           const notifications = entAccNotifications.map(
-            accountNotifications => {
+            (accountNotifications) => {
               const { hostname } = parse(accountNotifications.config.url);
 
               return {
@@ -118,7 +118,7 @@ export function fetchNotifications() {
           });
         })
       )
-      .catch(error =>
+      .catch((error) =>
         dispatch({ type: NOTIFICATIONS.FAILURE, payload: error.response.data })
       );
   };
@@ -141,13 +141,13 @@ export function markNotification(id, hostname) {
     dispatch({ type: MARK_NOTIFICATION.REQUEST });
 
     return apiRequestAuth(url, method, token, {})
-      .then(function(response) {
+      .then(function (response) {
         dispatch({
           type: MARK_NOTIFICATION.SUCCESS,
           meta: { id, hostname },
         });
       })
-      .catch(function(error) {
+      .catch(function (error) {
         dispatch({
           type: MARK_NOTIFICATION.FAILURE,
           payload: error.response.data,
@@ -177,14 +177,14 @@ export function markRepoNotifications(repoSlug, hostname) {
     dispatch({ type: MARK_REPO_NOTIFICATION.REQUEST });
 
     return apiRequestAuth(url, method, token, {})
-      .then(function(response) {
+      .then(function (response) {
         dispatch({
           type: MARK_REPO_NOTIFICATION.SUCCESS,
           payload: response.data,
           meta: { hostname, repoSlug },
         });
       })
-      .catch(function(error) {
+      .catch(function (error) {
         dispatch({
           type: MARK_REPO_NOTIFICATION.FAILURE,
           payload: error.response.data,

src/js/app.tsx

@@ -33,7 +33,7 @@ export const PrivateRoute = ({ component: Component, ...rest }) => {
   return (
     <Route
       {...rest}
-      render={props =>
+      render={(props) =>
         isAuthenticated ? (
           <Component {...props} />
         ) : (
@@ -96,7 +96,7 @@ const GlobalStyle = createGlobalStyle`
       top: 0;
       left: ${SIDEBAR_WIDTH};
       z-index: 1031;
-      background: ${props => props.theme.primary};
+      background: ${(props) => props.theme.primary};
 
       width: 100%;
       height: 2px;

src/js/components/__snapshots__/sidebar.test.tsx.snap

@@ -67,8 +67,8 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             "verticalAlign": "text-bottom",
           }
         }
-        viewBox="0 0 14 16"
-        width={10.5}
+        viewBox="0 0 15 16"
+        width={11.25}
       >
         <path
           d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"
@@ -233,8 +233,8 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             "verticalAlign": "text-bottom",
           }
         }
-        viewBox="0 0 14 16"
-        width={10.5}
+        viewBox="0 0 15 16"
+        width={11.25}
       >
         <path
           d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"

src/js/components/account-notifications.tsx

@@ -11,7 +11,7 @@ const Account = styled.div`
   justify-content: flex-end;
   align-items: center;
   padding: 0.5rem 1rem;
-  background-color: ${props => props.theme.primaryDark};
+  background-color: ${(props) => props.theme.primaryDark};
   color: white;
   font-size: 0.9rem;
 
@@ -30,7 +30,7 @@ export const AccountNotifications = (props: IProps) => {
   const { hostname, showAccountHostname, notifications } = props;
 
   const groupedNotifications = _(notifications)
-    .groupBy(obj => obj.repository.full_name)
+    .groupBy((obj) => obj.repository.full_name)
     .sortBy((_, key) => key)
     .value();
 
@@ -47,7 +47,7 @@ export const AccountNotifications = (props: IProps) => {
         </Account>
       )}
 
-      {Object.values(groupedNotifications).map(repoNotifications => {
+      {Object.values(groupedNotifications).map((repoNotifications) => {
         const repoSlug = repoNotifications[0].repository.full_name;
 
         return (

src/js/components/all-read.test.tsx

@@ -6,8 +6,8 @@ import { AllRead } from './all-read';
 
 jest.mock('react-typist');
 
-describe('components/all-read.tsx', function() {
-  it('should render itself & its children', function() {
+describe('components/all-read.tsx', function () {
+  it('should render itself & its children', function () {
     spyOn(Constants, 'ALLREAD_EMOJIS');
     spyOn(Constants, 'ALLREAD_MESSAGES');
 

src/js/components/fields/input.tsx

@@ -31,7 +31,7 @@ const Input = styled.input`
 const ErrorMessage = styled.div`
   margin-top: 0.5rem;
   font-size: 90%;
-  color: ${props => props.theme.danger};
+  color: ${(props) => props.theme.danger};
 `;
 
 export interface IProps {

src/js/components/loading.test.tsx

@@ -14,7 +14,7 @@ jest.mock('nprogress', () => {
   };
 });
 
-describe('components/loading.js', function() {
+describe('components/loading.js', function () {
   beforeEach(() => {
     NProgress.configure.mockReset();
     NProgress.start.mockReset();
@@ -34,23 +34,23 @@ describe('components/loading.js', function() {
     expect(mappedProps.isLoading).toBeFalsy();
   });
 
-  it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', function() {
+  it('should check that NProgress is getting called in getDerivedStateFromProps (loading)', function () {
     const { container } = render(<Loading isLoading={true} />);
 
     expect(container.innerHTML).toBe('');
     expect(NProgress.configure).toHaveBeenCalledTimes(1);
     expect(NProgress.start).toHaveBeenCalledTimes(1);
   });
 
-  it('should check that NProgress is getting called in getDerivedStateFromProps (not loading)', function() {
+  it('should check that NProgress is getting called in getDerivedStateFromProps (not loading)', function () {
     const { container } = render(<Loading isLoading={false} />);
 
     expect(container.innerHTML).toBe('');
     expect(NProgress.configure).toHaveBeenCalledTimes(1);
     expect(NProgress.done).toHaveBeenCalledTimes(1);
   });
 
-  it('should remove NProgress on unmount', function() {
+  it('should remove NProgress on unmount', function () {
     const { unmount } = render(<Loading isLoading={false} />);
     expect(NProgress.remove).toHaveBeenCalledTimes(0);
     unmount();

src/js/components/notification.tsx

@@ -16,10 +16,10 @@ const Wrapper = styled.div`
   display: flex;
   margin: 0;
   padding: 0.5rem 0.5rem;
-  border-bottom: 1px solid ${props => props.theme.grayLight};
+  border-bottom: 1px solid ${(props) => props.theme.grayLight};
 
   &:hover {
-    background-color: ${props => props.theme.grayLighter};
+    background-color: ${(props) => props.theme.grayLighter};
   }
 `;
 
@@ -57,7 +57,7 @@ const Button = styled.button`
   border: none;
 
   .octicon:hover {
-    color: ${props => props.theme.success};
+    color: ${(props) => props.theme.success};
     cursor: pointer;
   }
 `;
@@ -69,7 +69,7 @@ interface IProps {
   markNotification: (id: string, hostname: string) => void;
 }
 
-export const NotificationItem: React.FC<IProps> = props => {
+export const NotificationItem: React.FC<IProps> = (props) => {
   const pressTitle = () => {
     openBrowser();
 

src/js/components/oops.test.tsx

@@ -4,8 +4,8 @@ import * as TestRenderer from 'react-test-renderer';
 import Constants from '../utils/constants';
 import { Oops } from './oops';
 
-describe('components/oops.tsx', function() {
-  it('should render itself & its children', function() {
+describe('components/oops.tsx', function () {
+  it('should render itself & its children', function () {
     spyOn(Constants, 'ERROR_EMOJIS');
 
     const tree = TestRenderer.create(<Oops />);