From ab027ad243e6c7cbf96060ef3c38eae76f8bb1e2 Mon Sep 17 00:00:00 2001
From: mithereal <mithereal@gmail.com>
Date: Tue, 14 Sep 2021 20:56:35 +0000
Subject: [PATCH] add support for web-ide and global ranking

---
 assets/js/components/NavBar.jsx           |  23 +++
 assets/js/components/Options.jsx          |  82 ++++++++-
 assets/js/components/WakaTime.jsx         | 118 ++++++++++++-
 assets/js/config.js                       |  14 +-
 assets/js/helpers/changeExtensionState.js |   4 +
 src/components/Alert.test.tsx             |  26 +--
 src/components/Alert.tsx                  |  11 +-
 src/components/MainList.test.tsx          |  56 +++----
 src/components/MainList.tsx               | 153 ++++++++---------
 src/config/config.test.ts                 |   6 +-
 src/config/config.ts                      | 192 +++++++++++-----------
 src/core/WakaTimeCore.ts                  |  60 +++----
 src/html/WakatimeDevPanel.html            |  20 +--
 src/html/options.html                     |  22 +--
 src/html/popup.html                       |  22 +--
 src/manifests/chrome.json                 |   5 +-
 src/manifests/firefox.json                |   5 +-
 src/popup.tsx                             |  15 +-
 src/reducers/currentUser.ts               |  41 ++---
 src/stores/createStore.ts                 |  48 +++---
 src/types/heartbeats.ts                   |  42 ++---
 src/types/summaries.ts                    |  62 +++----
 src/types/user.ts                         |  74 ++++-----
 src/utils/changeExtensionIcon.ts          |  36 ++--
 src/utils/changeExtensionState.ts         |  50 +++---
 src/utils/changeExtensionTooltip.ts       |  14 +-
 src/utils/checkCurrentUser.ts             |  24 +--
 src/utils/contains.ts                     |  24 +--
 src/utils/getDomainFromUrl.ts             |   4 +-
 src/utils/inArray.ts                      |  10 +-
 30 files changed, 750 insertions(+), 513 deletions(-)

diff --git a/assets/js/components/NavBar.jsx b/assets/js/components/NavBar.jsx
index 790a1733..0c0b1cd0 100644
--- a/assets/js/components/NavBar.jsx
+++ b/assets/js/components/NavBar.jsx
@@ -41,6 +41,27 @@ var NavBar = reactCreateClass({
       }
     };
 
+var project_name = function () {
+                
+            if(that.props.show_project_editor === false ){
+                    return (
+                        <p className="navbar-text" onClick={that.props.toggleEditor}> Project: <b>{that.props.projectName}</b></p>
+                    );
+                    }else{
+                        return (
+                            <p className="navbar-text" > Project: <input type = "text" defaultValue = {that.props.projectName} onBlur={that.props.toggleEditor} onChange={that.props.updateEditor} onKeyPress={that.props.handleKeyPress} ></input></p>
+                        );
+                    }
+        };
+
+        var ranking = function () {
+
+            if (config.rankingDisplayType == 'global' && that.props.global_rank) {
+                return ( <p className="navbar-text"> Global Ranking: <b>{that.props.global_rank} / 5000 </b></p> );
+            }
+
+        };
+
     return (
       <nav className="navbar navbar-default" role="navigation">
         <div className="container-fluid">
@@ -61,6 +82,8 @@ var NavBar = reactCreateClass({
           </div>
           <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             {signedInAs()}
+{project_name()}
+                        {ranking()}
             <ul className="nav navbar-nav">
               {customRules()}
               {dashboard()}
diff --git a/assets/js/components/Options.jsx b/assets/js/components/Options.jsx
index 62a8c795..113f5e7d 100644
--- a/assets/js/components/Options.jsx
+++ b/assets/js/components/Options.jsx
@@ -22,9 +22,12 @@ var Options = reactCreateClass({
       theme: config.theme,
       blacklist: '',
       whitelist: '',
+idelist: '',
+projectType: 'last',
       loggingType: config.loggingType,
       loggingStyle: config.loggingStyle,
       displayAlert: false,
+defaultProjectName: config.defaultProjectName,
       alertType: config.alert.success.type,
       alertText: config.alert.success.text,
     };
@@ -42,16 +45,22 @@ var Options = reactCreateClass({
         theme: config.theme,
         blacklist: '',
         whitelist: '',
+idelist: '',
+            projectType: 'last',
         loggingType: config.loggingType,
         loggingStyle: config.loggingStyle,
+defaultProjectName: config.defaultProjectName,
       })
       .then(function (items) {
         that.setState({
           theme: items.theme,
           blacklist: items.blacklist,
           whitelist: items.whitelist,
+idelist: items.idelist,
+                projectType: items.projectType,
           loggingType: items.loggingType,
           loggingStyle: items.loggingStyle,
+defaultProjectName: items.defaultProjectName,
         });
 
         that.refs.theme.value = items.theme;
@@ -82,8 +91,11 @@ var Options = reactCreateClass({
         theme: theme,
         blacklist: blacklist,
         whitelist: whitelist,
+idelist: items.idelist,
+                projectType: items.projectType,
         loggingType: loggingType,
         loggingStyle: loggingStyle,
+defaultProjectName: items.defaultProjectName,
       })
       .then(function () {
         // Set state to be newly entered values.
@@ -91,9 +103,12 @@ var Options = reactCreateClass({
           theme: theme,
           blacklist: blacklist,
           whitelist: whitelist,
+idelist: items.idelist,
+                projectType: items.projectType,
           loggingType: loggingType,
           loggingStyle: loggingStyle,
           displayAlert: true,
+defaultProjectName: items.defaultProjectName,
         });
       });
   },
@@ -116,6 +131,24 @@ var Options = reactCreateClass({
     });
   },
 
+_updateDefaultProjectState: function(event){
+        this.setState({
+            defaultProjectName: event.target.value
+        });
+    },
+
+_updateIdelistState: function(sites){
+            this.setState({
+                idelist: sites
+            });
+    },
+       
+    _updateTypeState: function(type){
+            this.setState({
+                projectType: type
+            });
+    },
+
   render: function () {
     var that = this;
 
@@ -158,6 +191,47 @@ var Options = reactCreateClass({
       );
     };
 
+ var ideList = function () {
+            
+            return (
+                <SitesList
+                    handleChange={that._updateIdelistState}
+                    label="Idelist"
+                    sites={that.state.idelist}
+                    helpText="Sites that you want to show in your reports as codeing." />
+            );
+        };
+        
+        var projectType = function () {
+            
+            return (
+                <div className="form-group">
+                <label className="col-lg-2 control-label">Project Selection</label>
+
+                <div className="col-lg-10">
+                    <select className="form-control" ref="projectType" defaultValue="last" onChange={that._updateTypeState}>
+                        <option value="last">The last project reported to Wakatime</option>
+                        <option value="unknown">Unknown/New project</option>
+                    </select>
+                </div>
+            </div>
+            );
+        };
+        
+        var defaultProjectName = function () {
+            
+            return (
+                <div className="form-group">
+                <label className="col-lg-2 control-label">Default Project Name</label>
+
+                <div className="col-lg-10">
+                    <input className="form-control" ref="defaultProjectName" defaultValue="Unknown Project" onChange={that._updateDefaultProjectState} />
+                </div>
+            </div>
+            );
+        };
+
+
     return (
       <div className="container">
         <div className="row">
@@ -187,7 +261,13 @@ var Options = reactCreateClass({
                 </div>
               </div>
 
-              {loggingStyle()}
+                          {(defaultProjectName())}
+
+                            {projectType()}
+
+                            {loggingStyle()}
+
+                            {ideList()}
 
               <div className="form-group">
                 <label className="col-lg-2 control-label">Logging type</label>
diff --git a/assets/js/components/WakaTime.jsx b/assets/js/components/WakaTime.jsx
index d953c0bf..ec0c717e 100644
--- a/assets/js/components/WakaTime.jsx
+++ b/assets/js/components/WakaTime.jsx
@@ -23,10 +23,18 @@ var Wakatime = reactCreateClass({
         full_name: null,
         email: null,
         photo: null,
+display_name: null,
+                last_project: null,
+                username: null
       },
       loggedIn: false,
       loggingEnabled: config.loggingEnabled,
       totalTimeLoggedToday: '0 minutes',
+ projectType: config.projectType,
+            globalRank: null,
+            defaultProjectName: config.defaultProjectName,
+            projectName: config.projectName,
+            show_project_editor: false
     };
   },
 
@@ -40,9 +48,25 @@ var Wakatime = reactCreateClass({
         browser.storage.sync
           .get({
             loggingEnabled: config.loggingEnabled,
+projectType: config.projectType,
+                    projectName: config.projectName,
+                    defaultProjectName: config.defaultProjectName
           })
           .then(function (items) {
-            that.setState({ loggingEnabled: items.loggingEnabled });
+             var projectName = items.projectName;
+
+                    if (items.projectName === null) {
+                        if(items.projectType == 'last')
+                        {
+                            projectName = data.last_project;
+                        }else{
+                            projectName = items.defaultProjectName;
+                        }
+                        
+                    }
+
+                    that.setState({ loggingEnabled: items.loggingEnabled, projectName: projectName});
+
 
             if (items.loggingEnabled === true) {
               changeExtensionState('allGood');
@@ -56,8 +80,12 @@ var Wakatime = reactCreateClass({
             full_name: data.full_name,
             email: data.email,
             photo: data.photo,
+display_name: data.display_name,
+                        last_project: data.last_project,
+                        username: data.username
           },
           loggedIn: true,
+                    globalRank: null
         });
 
         wakatime.getTotalTimeLoggedToday().done(function (grand_total) {
@@ -66,6 +94,12 @@ var Wakatime = reactCreateClass({
           });
         });
 
+              wakatime.getRanking().done(function (rank) {
+                    that.setState({
+                        globalRank: rank.text
+                    });
+                });
+
         wakatime.recordHeartbeat();
       } else {
         changeExtensionState('notSignedIn');
@@ -136,6 +170,72 @@ var Wakatime = reactCreateClass({
     });
   },
 
+  _updateLastProjectState: function (last_project) {
+        this.setState({
+            user: {
+                full_name: this.full_name,
+                email: this.email,
+                photo: this.photo,
+                display_name: this.display_name,
+                last_project: last_project,
+                username: this.username
+            },
+        });
+
+        changeExtensionState('allGood');
+
+        chrome.storage.sync.set({
+            loggingEnabled: true
+        });
+    },
+
+    updateEditor: function (event) {
+        var projectName = event.target.value;
+
+        this.setState({
+            projectName: projectName,
+        });
+ 
+        if(projectName == null || projectName == this.defaultProjectName || projectName == this.state.user.last_project){
+            changeExtensionState('allGood');
+        }else{
+            changeExtensionState('allGoodOverride');
+        }
+        
+    },
+
+     handleKeyPress: function(event) {
+        if(event.charCode==13){
+            var projectName = event.target.value;
+
+            this.setState({
+                projectName: projectName,
+            });
+     
+            if(projectName == null || projectName == this.defaultProjectName || projectName == this.state.user.last_project){
+                changeExtensionState('allGood');
+            }else{
+                changeExtensionState('allGoodOverride');
+            }
+            this.toggleEditor;
+        } 
+      },
+
+
+    toggleEditor: function () {
+        var value = false;
+
+        if (this.state.show_project_editor === false) {
+            value = true;
+           
+        } 
+
+        this.setState({
+            show_project_editor: value
+        });
+
+    },
+
   render: function () {
     return (
       <div>
@@ -144,14 +244,14 @@ var Wakatime = reactCreateClass({
           <div className="row">
             <div className="col-md-12">
               <MainList
-                disableLogging={this._disableLogging}
-                enableLogging={this._enableLogging}
-                loggingEnabled={this.state.loggingEnabled}
-                user={this.state.user}
-                totalTimeLoggedToday={this.state.totalTimeLoggedToday}
-                logoutUser={this._logoutUser}
-                loggedIn={this.state.loggedIn}
-              />
+                                disableLogging={this._disableLogging}
+                                enableLogging={this._enableLogging}
+                                loggingEnabled={this.state.loggingEnabled}
+                                handleKeyPress={this.handleKeyPress}
+                                user={this.state.user}
+                                totalTimeLoggedToday={this.state.totalTimeLoggedToday}
+                                logoutUser={this._logoutUser}
+                                loggedIn={this.state.loggedIn} />
             </div>
           </div>
         </div>
diff --git a/assets/js/config.js b/assets/js/config.js
index 01d9d06c..fa751c95 100644
--- a/assets/js/config.js
+++ b/assets/js/config.js
@@ -25,9 +25,20 @@ var config = {
   logoutUserUrl: 'https://wakatime.com/logout',
   // Gets stats from the WakaTime API
   summariesApiUrl: 'https://wakatime.com/api/v1/users/current/summaries',
+ // Default Project Type
+    projectType: 'last',
+     // Default Project Name if projectname == null
+    defaultProjectName: 'Unknown Project',
+  // Default ranking display type
+    rankingDisplayType: 'global',
+    // Projectname reported to wakatime
+    projectName: null,
+ // The url to rank the user from wakatime
+    rankingUrl: 'https://wakatime.com/api/v1/leaders',
   // Different colors for different states of the extension
   colors: {
     allGood: '',
+allGoodOverride: 'override',
     notLogging: 'gray',
     notSignedIn: 'red',
     lightTheme: 'white',
@@ -35,6 +46,7 @@ var config = {
   // Tooltips for each of the extension states
   tooltips: {
     allGood: '',
+allGoodOverride: 'Project name has been overridden',
     notLogging: 'Not logging',
     notSignedIn: 'Not signed In',
     blacklisted: 'This URL is blacklisted',
@@ -43,7 +55,7 @@ var config = {
   // Default theme
   theme: 'light',
   // Valid extension states
-  states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
+  states: ['allGood', 'allGoodOverride','notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
   // Predefined alert type and text for success and failure.
   alert: {
     success: {
diff --git a/assets/js/helpers/changeExtensionState.js b/assets/js/helpers/changeExtensionState.js
index f881bc94..55977761 100644
--- a/assets/js/helpers/changeExtensionState.js
+++ b/assets/js/helpers/changeExtensionState.js
@@ -20,6 +20,10 @@ function changeExtensionState(state) {
       changeExtensionIcon(config.colors.allGood);
       changeExtensionTooltip(config.tooltips.allGood);
       break;
+case 'allGoodOverride':
+            changeExtensionIcon(config.colors.allGoodOverride);
+            changeExtensionTooltip(config.tooltips.allGoodOverride);
+            break;
     case 'notLogging':
       changeExtensionIcon(config.colors.notLogging);
       changeExtensionTooltip(config.tooltips.notLogging);
diff --git a/src/components/Alert.test.tsx b/src/components/Alert.test.tsx
index 88f0e6eb..15aa5bfd 100644
--- a/src/components/Alert.test.tsx
+++ b/src/components/Alert.test.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import Alert from './Alert';
 
 describe('Alert Component', () => {
-  it('should render with proper text on success type', () => {
-    const text = 'Test Text';
-    const { container } = render(<Alert text={text} type="success" />);
-    expect(screen.getByText(text)).toBeTruthy();
-    expect(container).toMatchInlineSnapshot(`
+    it('should render with proper text on success type', () => {
+        const text = 'Test Text';
+        const {container} = render(<Alert text={text} type="success"/>);
+        expect(screen.getByText(text)).toBeTruthy();
+        expect(container).toMatchInlineSnapshot(`
       <div>
         <div
           class="alert alert-success"
@@ -16,12 +16,12 @@ describe('Alert Component', () => {
         </div>
       </div>
     `);
-  });
-  it('should render wtih proper text on danger type', () => {
-    const text = 'Test Text';
-    const { container } = render(<Alert text={text} type="danger" />);
-    expect(screen.getByText(text)).toBeTruthy();
-    expect(container).toMatchInlineSnapshot(`
+    });
+    it('should render wtih proper text on danger type', () => {
+        const text = 'Test Text';
+        const {container} = render(<Alert text={text} type="danger"/>);
+        expect(screen.getByText(text)).toBeTruthy();
+        expect(container).toMatchInlineSnapshot(`
       <div>
         <div
           class="alert alert-danger"
@@ -30,5 +30,5 @@ describe('Alert Component', () => {
         </div>
       </div>
     `);
-  });
+    });
 });
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 668f8c0c..e29e4ba5 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
-import { SuccessOrFailType } from '../config/config';
+import {SuccessOrFailType} from '../config/config';
+
 interface AlertProps {
-  text: string;
-  type: SuccessOrFailType;
+    text: string;
+    type: SuccessOrFailType;
 }
 
-export default function Alert({ type, text }: AlertProps): JSX.Element {
-  return <div className={classNames('alert', `alert-${type}`)}>{text}</div>;
+export default function Alert({type, text}: AlertProps): JSX.Element {
+    return <div className={classNames('alert', `alert-${type}`)}>{text}</div>;
 }
diff --git a/src/components/MainList.test.tsx b/src/components/MainList.test.tsx
index bbd5d934..e5b0c33d 100644
--- a/src/components/MainList.test.tsx
+++ b/src/components/MainList.test.tsx
@@ -1,35 +1,35 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import {render} from '@testing-library/react';
 import MainList from './MainList';
 
 type onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 describe('MainList', () => {
-  let disableLogging: onClick;
-  let enableLogging: onClick;
-  let loggedIn: boolean;
-  let loggingEnabled: boolean;
-  let logoutUser: onClick;
-  let totalTimeLoggedToday: string;
-  beforeEach(() => {
-    disableLogging = jest.fn();
-    enableLogging = jest.fn();
-    loggingEnabled = false;
-    loggedIn = false;
-    logoutUser = jest.fn();
-    totalTimeLoggedToday = '1/1/1999';
-  });
-  it('should render properly', () => {
-    const { container } = render(
-      <MainList
-        disableLogging={disableLogging}
-        enableLogging={enableLogging}
-        loggingEnabled={loggingEnabled}
-        loggedIn={loggedIn}
-        logoutUser={logoutUser}
-        totalTimeLoggedToday={totalTimeLoggedToday}
-      />,
-    );
-    expect(container).toMatchInlineSnapshot(`
+    let disableLogging: onClick;
+    let enableLogging: onClick;
+    let loggedIn: boolean;
+    let loggingEnabled: boolean;
+    let logoutUser: onClick;
+    let totalTimeLoggedToday: string;
+    beforeEach(() => {
+        disableLogging = jest.fn();
+        enableLogging = jest.fn();
+        loggingEnabled = false;
+        loggedIn = false;
+        logoutUser = jest.fn();
+        totalTimeLoggedToday = '1/1/1999';
+    });
+    it('should render properly', () => {
+        const {container} = render(
+            <MainList
+                disableLogging={disableLogging}
+                enableLogging={enableLogging}
+                loggingEnabled={loggingEnabled}
+                loggedIn={loggedIn}
+                logoutUser={logoutUser}
+                totalTimeLoggedToday={totalTimeLoggedToday}
+            />,
+        );
+        expect(container).toMatchInlineSnapshot(`
       <div>
         <div>
           <div
@@ -59,5 +59,5 @@ describe('MainList', () => {
         </div>
       </div>
     `);
-  });
+    });
 });
diff --git a/src/components/MainList.tsx b/src/components/MainList.tsx
index 87886e36..57a139a6 100644
--- a/src/components/MainList.tsx
+++ b/src/components/MainList.tsx
@@ -1,86 +1,87 @@
 import React from 'react';
 
 export interface MainListProps {
-  disableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  enableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  loggedIn: boolean;
-  loggingEnabled: boolean;
-  logoutUser: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  totalTimeLoggedToday?: string;
+    disableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    enableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    loggedIn: boolean;
+    loggingEnabled: boolean;
+    logoutUser: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    totalTimeLoggedToday?: string;
 }
+
 const openOptionsPage = async (): Promise<void> => {
-  await browser.runtime.openOptionsPage();
+    await browser.runtime.openOptionsPage();
 };
 
 export default function MainList({
-  disableLogging,
-  enableLogging,
-  loggedIn,
-  loggingEnabled,
-  logoutUser,
-  totalTimeLoggedToday,
-}: MainListProps): JSX.Element {
-  return (
-    <div>
-      {loggedIn && (
-        <div className="row">
-          <div className="col-xs-12">
-            <blockquote>
-              <p>{totalTimeLoggedToday}</p>
-              <small>
-                <cite>TOTAL TIME LOGGED TODAY</cite>
-              </small>
-            </blockquote>
-          </div>
-        </div>
-      )}
-      {loggingEnabled && loggedIn && (
-        <div className="row">
-          <div className="col-xs-12">
-            <p>
-              <a href="#" onClick={disableLogging} className="btn btn-danger btn-block">
-                Disable logging
-              </a>
-            </p>
-          </div>
-        </div>
-      )}
-      {!loggingEnabled && loggedIn && (
-        <div className="row">
-          <div className="col-xs-12">
-            <p>
-              <a href="#" onClick={enableLogging} className="btn btn-success btn-block">
-                Enable logging
-              </a>
-            </p>
-          </div>
+                                     disableLogging,
+                                     enableLogging,
+                                     loggedIn,
+                                     loggingEnabled,
+                                     logoutUser,
+                                     totalTimeLoggedToday,
+                                 }: MainListProps): JSX.Element {
+    return (
+        <div>
+            {loggedIn && (
+                <div className="row">
+                    <div className="col-xs-12">
+                        <blockquote>
+                            <p>{totalTimeLoggedToday}</p>
+                            <small>
+                                <cite>TOTAL TIME LOGGED TODAY</cite>
+                            </small>
+                        </blockquote>
+                    </div>
+                </div>
+            )}
+            {loggingEnabled && loggedIn && (
+                <div className="row">
+                    <div className="col-xs-12">
+                        <p>
+                            <a href="#" onClick={disableLogging} className="btn btn-danger btn-block">
+                                Disable logging
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            )}
+            {!loggingEnabled && loggedIn && (
+                <div className="row">
+                    <div className="col-xs-12">
+                        <p>
+                            <a href="#" onClick={enableLogging} className="btn btn-success btn-block">
+                                Enable logging
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            )}
+            <div className="list-group">
+                <a href="#" className="list-group-item" onClick={openOptionsPage}>
+                    <i className="fa fa-fw fa-cogs"></i>
+                    Options
+                </a>
+                {loggedIn && (
+                    <div>
+                        <a href="#" className="list-group-item" onClick={logoutUser}>
+                            <i className="fa fa-fw fa-sign-out"></i>
+                            Logout
+                        </a>
+                    </div>
+                )}
+                {!loggedIn && (
+                    <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href="https://wakatime.com/login"
+                        className="list-group-item"
+                    >
+                        <i className="fa fa-fw fa-sign-in"></i>
+                        Login
+                    </a>
+                )}
+            </div>
         </div>
-      )}
-      <div className="list-group">
-        <a href="#" className="list-group-item" onClick={openOptionsPage}>
-          <i className="fa fa-fw fa-cogs"></i>
-          Options
-        </a>
-        {loggedIn && (
-          <div>
-            <a href="#" className="list-group-item" onClick={logoutUser}>
-              <i className="fa fa-fw fa-sign-out"></i>
-              Logout
-            </a>
-          </div>
-        )}
-        {!loggedIn && (
-          <a
-            target="_blank"
-            rel="noreferrer"
-            href="https://wakatime.com/login"
-            className="list-group-item"
-          >
-            <i className="fa fa-fw fa-sign-in"></i>
-            Login
-          </a>
-        )}
-      </div>
-    </div>
-  );
+    );
 }
diff --git a/src/config/config.test.ts b/src/config/config.test.ts
index 8c5c62b1..77b7e6e7 100644
--- a/src/config/config.test.ts
+++ b/src/config/config.test.ts
@@ -1,8 +1,8 @@
 import config from './config';
 
 describe('wakatime config', () => {
-  it('snapshot of config', () => {
-    expect(config).toMatchInlineSnapshot(`
+    it('snapshot of config', () => {
+        expect(config).toMatchInlineSnapshot(`
       Object {
         "alert": Object {
           "failure": Object {
@@ -47,5 +47,5 @@ describe('wakatime config', () => {
         "version": "test-version",
       }
     `);
-  });
+    });
 });
diff --git a/src/config/config.ts b/src/config/config.ts
index 1660de37..6f78f5c1 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -11,140 +11,144 @@ export type LoggingStyle = 'whitelist' | 'blacklist';
  */
 export type LoggingType = 'domain' | 'url';
 export type SuccessOrFailType = 'success' | 'danger';
+
 /**
  * Predefined alert type and text for success and failure.
  */
 interface Alert {
-  failure: SuccessOrFailAlert;
-  success: SuccessOrFailAlert;
+    failure: SuccessOrFailAlert;
+    success: SuccessOrFailAlert;
 }
+
 /**
  * Define what a sucess or failure shape looks like
  */
 interface SuccessOrFailAlert {
-  text: string;
-  type: SuccessOrFailType;
+    text: string;
+    type: SuccessOrFailType;
 }
+
 /**
  *  Different colors for different states of the extension
  */
 interface Colors {
-  allGood: '';
-  lightTheme: 'white';
-  notLogging: 'gray';
-  notSignedIn: 'red';
+    allGood: '';
+    lightTheme: 'white';
+    notLogging: 'gray';
+    notSignedIn: 'red';
 }
+
 /**
  * Tooltip messages
  */
 interface Tooltips {
-  allGood: string;
-  blacklisted: string;
-  notLogging: string;
-  notSignedIn: string;
-  whitelisted: string;
+    allGood: string;
+    blacklisted: string;
+    notLogging: string;
+    notSignedIn: string;
+    whitelisted: string;
 }
 
 export interface Config {
-  alert: Alert;
-  colors: Colors;
-  /**
-   * Url from which to detect if the user is logged in
-   */
-  currentUserApiUrl: string;
-  /**
-   * Time for idle state of the browser
-   * The user is considered idle if there was
-   * no activity in the browser for x second
-   */
-  detectionIntervalInSeconds: number;
-  /**
-   * Url to which to send the heartbeat
-   */
-  heartbeatApiUrl: string;
-  /**
-   * Is logging enabled
-   */
-  loggingEnabled: boolean;
-  loggingStyle: LoggingStyle;
-  loggingType: LoggingType;
-  /**
-   * Url to logout out of wakatime
-   */
-  logoutUserUrl: string;
-  /**
-   * Extension name
-   */
-  name: string;
-  states: ApiStates[];
-  /**
-   * Get stats from the wakatime api
-   */
-  summariesApiUrl: string;
-  /**
-   * Options for theme
-   */
-  theme: 'light';
-  tooltips: Tooltips;
-  /**
-   * Version of the extension
-   */
-  version: string;
+    alert: Alert;
+    colors: Colors;
+    /**
+     * Url from which to detect if the user is logged in
+     */
+    currentUserApiUrl: string;
+    /**
+     * Time for idle state of the browser
+     * The user is considered idle if there was
+     * no activity in the browser for x second
+     */
+    detectionIntervalInSeconds: number;
+    /**
+     * Url to which to send the heartbeat
+     */
+    heartbeatApiUrl: string;
+    /**
+     * Is logging enabled
+     */
+    loggingEnabled: boolean;
+    loggingStyle: LoggingStyle;
+    loggingType: LoggingType;
+    /**
+     * Url to logout out of wakatime
+     */
+    logoutUserUrl: string;
+    /**
+     * Extension name
+     */
+    name: string;
+    states: ApiStates[];
+    /**
+     * Get stats from the wakatime api
+     */
+    summariesApiUrl: string;
+    /**
+     * Options for theme
+     */
+    theme: 'light';
+    tooltips: Tooltips;
+    /**
+     * Version of the extension
+     */
+    version: string;
 }
 
 const config: Config = {
-  alert: {
-    failure: {
-      text: 'There was an error while saving the options!',
-      type: 'danger',
+    alert: {
+        failure: {
+            text: 'There was an error while saving the options!',
+            type: 'danger',
+        },
+        success: {
+            text: 'Options have been saved!',
+            type: 'success',
+        },
     },
-    success: {
-      text: 'Options have been saved!',
-      type: 'success',
-    },
-  },
 
-  colors: {
-    allGood: '',
-    lightTheme: 'white',
-    notLogging: 'gray',
-    notSignedIn: 'red',
-  },
+    colors: {
+        allGood: '',
+        lightTheme: 'white',
+        notLogging: 'gray',
+        notSignedIn: 'red',
+    },
 
-  currentUserApiUrl:
-    process.env.CURRENT_USER_API_URL ?? 'https://wakatime.com/api/v1/users/current',
+    currentUserApiUrl:
+        process.env.CURRENT_USER_API_URL ?? 'https://wakatime.com/api/v1/users/current',
 
-  detectionIntervalInSeconds: 60,
+    detectionIntervalInSeconds: 60,
 
-  heartbeatApiUrl:
-    process.env.HEART_BEAT_API_URL ?? 'https://wakatime.com/api/v1/users/current/heartbeats',
+    heartbeatApiUrl:
+        process.env.HEART_BEAT_API_URL ?? 'https://wakatime.com/api/v1/users/current/heartbeats',
 
-  loggingEnabled: true,
+    loggingEnabled: true,
 
-  loggingStyle: 'blacklist',
+    loggingStyle: 'blacklist',
 
-  loggingType: 'domain',
+    loggingType: 'domain',
 
-  logoutUserUrl: process.env.LOGOUT_USER_URL ?? 'https://wakatime.com/logout',
+    logoutUserUrl: process.env.LOGOUT_USER_URL ?? 'https://wakatime.com/logout',
 
-  name: 'WakaTime',
+    name: 'WakaTime',
 
-  states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
+    states: ['allGood', 'notLogging', 'notSignedIn', 'blacklisted', 'whitelisted'],
 
-  summariesApiUrl:
-    process.env.SUMMARIES_API_URL ?? 'https://wakatime.com/api/v1/users/current/summaries',
+    summariesApiUrl:
+        process.env.SUMMARIES_API_URL ?? 'https://wakatime.com/api/v1/users/current/summaries',
 
-  theme: 'light',
+    theme: 'light',
 
-  tooltips: {
-    allGood: '',
-    blacklisted: 'This URL is blacklisted',
-    notLogging: 'Not logging',
-    notSignedIn: 'Not signed In',
-    whitelisted: 'This URL is not on your whitelist',
-  },
+    tooltips: {
+        allGood: '',
+        blacklisted: 'This URL is blacklisted',
+        notLogging: 'Not logging',
+        notSignedIn: 'Not signed In',
+        whitelisted: 'This URL is not on your whitelist',
+    },
 
-  version: browser.runtime.getManifest().version,
+    version: browser.runtime.getManifest().version,
 };
 
 export default config;
diff --git a/src/core/WakaTimeCore.ts b/src/core/WakaTimeCore.ts
index 371a667b..8a1f03a0 100644
--- a/src/core/WakaTimeCore.ts
+++ b/src/core/WakaTimeCore.ts
@@ -1,35 +1,39 @@
-import axios, { AxiosResponse } from 'axios';
+import axios, {AxiosResponse} from 'axios';
 import moment from 'moment';
-import { Tabs } from 'webextension-polyfill-ts';
-import { User } from '../types/user';
+import {Tabs} from 'webextension-polyfill-ts';
+import {User} from '../types/user';
 import config from '../config/config';
-import { SummariesPayload, GrandTotal } from '../types/summaries';
+import {SummariesPayload, GrandTotal} from '../types/summaries';
 
 class WakaTimeCore {
-  tabsWithDevtoolsOpen: Tabs.Tab[];
-  constructor() {
-    this.tabsWithDevtoolsOpen = [];
-  }
-  setTabsWithDevtoolsOpen(tabs: Tabs.Tab[]): void {
-    this.tabsWithDevtoolsOpen = tabs;
-  }
-  async getTotalTimeLoggedToday(): Promise<GrandTotal> {
-    const today = moment().format('YYYY-MM-DD');
-    const summariesAxiosPayload: AxiosResponse<SummariesPayload> = await axios.get(
-      config.summariesApiUrl,
-      {
-        data: {
-          end: today,
-          start: today,
-        },
-      },
-    );
-    return summariesAxiosPayload.data.data[0].grand_total;
-  }
-  async checkAuth(): Promise<User> {
-    const userPayload: AxiosResponse<User> = await axios.get(config.currentUserApiUrl);
-    return userPayload.data;
-  }
+    tabsWithDevtoolsOpen: Tabs.Tab[];
+
+    constructor() {
+        this.tabsWithDevtoolsOpen = [];
+    }
+
+    setTabsWithDevtoolsOpen(tabs: Tabs.Tab[]): void {
+        this.tabsWithDevtoolsOpen = tabs;
+    }
+
+    async getTotalTimeLoggedToday(): Promise<GrandTotal> {
+        const today = moment().format('YYYY-MM-DD');
+        const summariesAxiosPayload: AxiosResponse<SummariesPayload> = await axios.get(
+            config.summariesApiUrl,
+            {
+                data: {
+                    end: today,
+                    start: today,
+                },
+            },
+        );
+        return summariesAxiosPayload.data.data[0].grand_total;
+    }
+
+    async checkAuth(): Promise<User> {
+        const userPayload: AxiosResponse<User> = await axios.get(config.currentUserApiUrl);
+        return userPayload.data;
+    }
 }
 
 export default new WakaTimeCore();
diff --git a/src/html/WakatimeDevPanel.html b/src/html/WakatimeDevPanel.html
index fa08ffcf..d5e6acfd 100644
--- a/src/html/WakatimeDevPanel.html
+++ b/src/html/WakatimeDevPanel.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>WakaTime options</title>
 
-    <link href="public/css/app.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="wakatime-devtools"></div>
-    <script src="public/js/browser-polyfill.min.js"></script>
-  </body>
+    <link href="public/css/app.css" rel="stylesheet"/>
+</head>
+<body>
+<div id="wakatime-devtools"></div>
+<script src="public/js/browser-polyfill.min.js"></script>
+</body>
 </html>
diff --git a/src/html/options.html b/src/html/options.html
index 81043e67..e09b4087 100644
--- a/src/html/options.html
+++ b/src/html/options.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>WakaTime options</title>
 
-    <link href="public/css/app.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="wakatime-options"></div>
-    <script src="public/js/browser-polyfill.min.js"></script>
-    <script src="options.js"></script>
-  </body>
+    <link href="public/css/app.css" rel="stylesheet"/>
+</head>
+<body>
+<div id="wakatime-options"></div>
+<script src="public/js/browser-polyfill.min.js"></script>
+<script src="options.js"></script>
+</body>
 </html>
diff --git a/src/html/popup.html b/src/html/popup.html
index 6f221dea..bb5f87e9 100644
--- a/src/html/popup.html
+++ b/src/html/popup.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <title>WakaTime</title>
 
-    <link href="public/css/app.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div id="wakatime"></div>
-    <script src="public/js/browser-polyfill.min.js"></script>
-    <script src="popup.js"></script>
-  </body>
+    <link href="public/css/app.css" rel="stylesheet"/>
+</head>
+<body>
+<div id="wakatime"></div>
+<script src="public/js/browser-polyfill.min.js"></script>
+<script src="popup.js"></script>
+</body>
 </html>
diff --git a/src/manifests/chrome.json b/src/manifests/chrome.json
index 447e6bd6..af8c6058 100644
--- a/src/manifests/chrome.json
+++ b/src/manifests/chrome.json
@@ -1,7 +1,10 @@
 {
   "background": {
     "persistent": false,
-    "scripts": ["public/js/browser-polyfill.min.js", "background.js"]
+    "scripts": [
+      "public/js/browser-polyfill.min.js",
+      "background.js"
+    ]
   },
   "browser_action": {
     "default_icon": {
diff --git a/src/manifests/firefox.json b/src/manifests/firefox.json
index bb526602..5a999f8b 100644
--- a/src/manifests/firefox.json
+++ b/src/manifests/firefox.json
@@ -1,7 +1,10 @@
 {
   "background": {
     "persistent": false,
-    "scripts": ["public/js/browser-polyfill.min.js", "background.js"]
+    "scripts": [
+      "public/js/browser-polyfill.min.js",
+      "background.js"
+    ]
   },
   "browser_action": {
     "default_icon": {
diff --git a/src/popup.tsx b/src/popup.tsx
index 82ce8313..a042858e 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import {Provider} from 'react-redux';
 import createStore from './stores/createStore';
 import checkCurrentUser from './utils/checkCurrentUser';
+
 const container = document.getElementById('wakatime');
 
 const store = createStore('WakaTime-Options');
 checkCurrentUser(store)(30 * 1000);
 
 const openOptions = async (): Promise<void> => {
-  await browser.runtime.openOptionsPage();
+    await browser.runtime.openOptionsPage();
 };
 
 ReactDOM.render(
-  <Provider store={store}>
-    <h1>POPUP GO HERE</h1>
-    <div onClick={openOptions}>Open options</div>
-  </Provider>,
-  container,
+    <Provider store={store}>
+        <h1>POPUP GO HERE</h1>
+        <div onClick={openOptions}>Open options</div>
+    </Provider>,
+    container,
 );
diff --git a/src/reducers/currentUser.ts b/src/reducers/currentUser.ts
index 6d3a1e00..f10d8406 100644
--- a/src/reducers/currentUser.ts
+++ b/src/reducers/currentUser.ts
@@ -1,36 +1,37 @@
-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import axios, { AxiosResponse } from 'axios';
-import { User, UserPayload } from '../types/user';
+import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';
+import axios, {AxiosResponse} from 'axios';
+import {User, UserPayload} from '../types/user';
 import config from '../config/config';
 
 type NameType = 'currentUser';
 export const name: NameType = 'currentUser';
 
 export const fetchCurrentUser = createAsyncThunk<User, undefined>(`[${name}]`, async () => {
-  const userPayload: AxiosResponse<UserPayload> = await axios.get(config.currentUserApiUrl);
-  return userPayload.data.data;
+    const userPayload: AxiosResponse<UserPayload> = await axios.get(config.currentUserApiUrl);
+    return userPayload.data.data;
 });
 
 export interface CurrentUser {
-  error?: unknown;
-  pending?: boolean;
-  user?: User;
+    error?: unknown;
+    pending?: boolean;
+    user?: User;
 }
+
 export const initialState: CurrentUser = {};
 
 const currentUser = createSlice({
-  extraReducers: (builder) => {
-    builder.addCase(fetchCurrentUser.fulfilled, (state, { payload }) => {
-      state.user = payload;
-    });
-    builder.addCase(fetchCurrentUser.rejected, (state, { error }) => {
-      state.user = undefined;
-      state.error = error;
-    });
-  },
-  initialState,
-  name,
-  reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchCurrentUser.fulfilled, (state, {payload}) => {
+            state.user = payload;
+        });
+        builder.addCase(fetchCurrentUser.rejected, (state, {error}) => {
+            state.user = undefined;
+            state.error = error;
+        });
+    },
+    initialState,
+    name,
+    reducers: {},
 });
 
 export const actions = currentUser.actions;
diff --git a/src/stores/createStore.ts b/src/stores/createStore.ts
index 204941d4..06801c57 100644
--- a/src/stores/createStore.ts
+++ b/src/stores/createStore.ts
@@ -1,40 +1,40 @@
-import { EHOSTUNREACH } from 'constants';
-import { configureStore, Store } from '@reduxjs/toolkit';
+import {EHOSTUNREACH} from 'constants';
+import {configureStore, Store} from '@reduxjs/toolkit';
 import logger from 'redux-logger';
-import { reduxBatch } from '@manaflair/redux-batch';
+import {reduxBatch} from '@manaflair/redux-batch';
 import devToolsEnhancer from 'remote-redux-devtools';
 import currentUserReducer, {
-  initialState as InitalCurrentUser,
-  CurrentUser,
+    initialState as InitalCurrentUser,
+    CurrentUser,
 } from '../reducers/currentUser';
 import isProd from '../utils/isProd';
 
 export interface RootState {
-  currentUser: CurrentUser;
+    currentUser: CurrentUser;
 }
 
 const preloadedState: RootState = {
-  currentUser: InitalCurrentUser,
+    currentUser: InitalCurrentUser,
 };
 
 export type RootStore = Store<RootState>;
 export default (appName: string): RootStore => {
-  const enhancers = [];
-  enhancers.push(reduxBatch);
-  if (!isProd()) {
-    enhancers.push(
-      devToolsEnhancer({ hostname: 'localhost', name: appName, port: 8000, realtime: true }),
-    );
-  }
-  const store = configureStore({
-    devTools: true,
-    enhancers,
-    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
-    preloadedState,
-    reducer: {
-      currentUser: currentUserReducer,
-    },
-  });
+    const enhancers = [];
+    enhancers.push(reduxBatch);
+    if (!isProd()) {
+        enhancers.push(
+            devToolsEnhancer({hostname: 'localhost', name: appName, port: 8000, realtime: true}),
+        );
+    }
+    const store = configureStore({
+        devTools: true,
+        enhancers,
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
+        preloadedState,
+        reducer: {
+            currentUser: currentUserReducer,
+        },
+    });
 
-  return store;
+    return store;
 };
diff --git a/src/types/heartbeats.ts b/src/types/heartbeats.ts
index e1782667..548d885d 100644
--- a/src/types/heartbeats.ts
+++ b/src/types/heartbeats.ts
@@ -1,28 +1,28 @@
 // Generated by https://quicktype.io
 
 export interface HeartBeatsPayload {
-  data: Datum[];
-  end: string;
-  start: string;
-  timezone: string;
+    data: Datum[];
+    end: string;
+    start: string;
+    timezone: string;
 }
 
 export interface Datum {
-  branch: string;
-  category: string;
-  created_at: string;
-  cursorpos: null;
-  dependencies: string;
-  entity: string;
-  id: string;
-  is_write: boolean;
-  language: string;
-  lineno: null;
-  lines: number;
-  machine_name_id: string;
-  project: string;
-  time: number;
-  type: string;
-  user_agent_id: string;
-  user_id: string;
+    branch: string;
+    category: string;
+    created_at: string;
+    cursorpos: null;
+    dependencies: string;
+    entity: string;
+    id: string;
+    is_write: boolean;
+    language: string;
+    lineno: null;
+    lines: number;
+    machine_name_id: string;
+    project: string;
+    time: number;
+    type: string;
+    user_agent_id: string;
+    user_id: string;
 }
diff --git a/src/types/summaries.ts b/src/types/summaries.ts
index 100569fa..9c3881f6 100644
--- a/src/types/summaries.ts
+++ b/src/types/summaries.ts
@@ -1,47 +1,47 @@
 // Generated by https://quicktype.io
 
 export interface SummariesPayload {
-  data: Datum[];
-  end: string;
-  start: string;
+    data: Datum[];
+    end: string;
+    start: string;
 }
 
 export interface Datum {
-  categories: Category[];
-  dependencies: Category[];
-  editors: Category[];
-  grand_total: GrandTotal;
-  languages: Category[];
-  machines: Category[];
-  operating_systems: Category[];
-  projects: Category[];
-  range: Range;
+    categories: Category[];
+    dependencies: Category[];
+    editors: Category[];
+    grand_total: GrandTotal;
+    languages: Category[];
+    machines: Category[];
+    operating_systems: Category[];
+    projects: Category[];
+    range: Range;
 }
 
 export interface Category {
-  digital: string;
-  hours: number;
-  machine_name_id?: string;
-  minutes: number;
-  name: string;
-  percent: number;
-  seconds: number;
-  text: string;
-  total_seconds: number;
+    digital: string;
+    hours: number;
+    machine_name_id?: string;
+    minutes: number;
+    name: string;
+    percent: number;
+    seconds: number;
+    text: string;
+    total_seconds: number;
 }
 
 export interface GrandTotal {
-  digital: string;
-  hours: number;
-  minutes: number;
-  text: string;
-  total_seconds: number;
+    digital: string;
+    hours: number;
+    minutes: number;
+    text: string;
+    total_seconds: number;
 }
 
 export interface Range {
-  date: string;
-  end: string;
-  start: string;
-  text: string;
-  timezone: string;
+    date: string;
+    end: string;
+    start: string;
+    text: string;
+    timezone: string;
 }
diff --git a/src/types/user.ts b/src/types/user.ts
index 4fd0abc1..162c1665 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,44 +1,44 @@
 // Generated by https://quicktype.io
 
 export interface UserPayload {
-  data: User;
+    data: User;
 }
 
 export interface User {
-  bio: null;
-  color_scheme: string;
-  created_at: string;
-  date_format: string;
-  default_dashboard_range: string;
-  display_name: string;
-  email: string;
-  full_name: string;
-  has_premium_features: boolean;
-  human_readable_website: string;
-  id: string;
-  is_email_confirmed: boolean;
-  is_email_public: boolean;
-  is_hireable: boolean;
-  is_onboarding_finished: boolean;
-  languages_used_public: boolean;
-  last_heartbeat_at: string;
-  last_plugin: string;
-  last_plugin_name: string;
-  last_project: string;
-  location: string;
-  logged_time_public: boolean;
-  modified_at: string;
-  needs_payment_method: boolean;
-  photo: string;
-  photo_public: boolean;
-  plan: string;
-  public_email: string;
-  show_machine_name_ip: boolean;
-  time_format_24hr: boolean;
-  timeout: number;
-  timezone: string;
-  username: string;
-  website: string;
-  weekday_start: number;
-  writes_only: boolean;
+    bio: null;
+    color_scheme: string;
+    created_at: string;
+    date_format: string;
+    default_dashboard_range: string;
+    display_name: string;
+    email: string;
+    full_name: string;
+    has_premium_features: boolean;
+    human_readable_website: string;
+    id: string;
+    is_email_confirmed: boolean;
+    is_email_public: boolean;
+    is_hireable: boolean;
+    is_onboarding_finished: boolean;
+    languages_used_public: boolean;
+    last_heartbeat_at: string;
+    last_plugin: string;
+    last_plugin_name: string;
+    last_project: string;
+    location: string;
+    logged_time_public: boolean;
+    modified_at: string;
+    needs_payment_method: boolean;
+    photo: string;
+    photo_public: boolean;
+    plan: string;
+    public_email: string;
+    show_machine_name_ip: boolean;
+    time_format_24hr: boolean;
+    timeout: number;
+    timezone: string;
+    username: string;
+    website: string;
+    weekday_start: number;
+    writes_only: boolean;
 }
diff --git a/src/utils/changeExtensionIcon.ts b/src/utils/changeExtensionIcon.ts
index 0ea34c2e..a884ef1f 100644
--- a/src/utils/changeExtensionIcon.ts
+++ b/src/utils/changeExtensionIcon.ts
@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import {browser} from 'webextension-polyfill-ts';
 import config from '../config/config';
 
 type ColorIconTypes = 'gray' | 'red' | 'white' | '';
@@ -7,22 +7,22 @@ type ColorIconTypes = 'gray' | 'red' | 'white' | '';
  * It changes the extension icon color.
  */
 export default async function changeExtensionIcon(color?: ColorIconTypes): Promise<void> {
-  if (color) {
-    const path = `./graphics/wakatime-logo-38-${color}.png`;
+    if (color) {
+        const path = `./graphics/wakatime-logo-38-${color}.png`;
 
-    await browser.browserAction.setIcon({
-      path: path,
-    });
-  } else {
-    const { theme } = await browser.storage.sync.get({
-      theme: config.theme,
-    });
-    const path =
-      theme === config.theme
-        ? './graphics/wakatime-logo-38.png'
-        : './graphics/wakatime-logo-38-white.png';
-    await browser.browserAction.setIcon({
-      path: path,
-    });
-  }
+        await browser.browserAction.setIcon({
+            path: path,
+        });
+    } else {
+        const {theme} = await browser.storage.sync.get({
+            theme: config.theme,
+        });
+        const path =
+            theme === config.theme
+                ? './graphics/wakatime-logo-38.png'
+                : './graphics/wakatime-logo-38-white.png';
+        await browser.browserAction.setIcon({
+            path: path,
+        });
+    }
 }
diff --git a/src/utils/changeExtensionState.ts b/src/utils/changeExtensionState.ts
index b4148225..a354d4d0 100644
--- a/src/utils/changeExtensionState.ts
+++ b/src/utils/changeExtensionState.ts
@@ -1,4 +1,4 @@
-import config, { ApiStates } from '../config/config';
+import config, {ApiStates} from '../config/config';
 
 import changeExtensionIcon from './changeExtensionIcon';
 import changeExtensionTooltip from './changeExtensionTooltip';
@@ -7,28 +7,28 @@ import changeExtensionTooltip from './changeExtensionTooltip';
  * Sets the current state of the extension.
  */
 export default async function changeExtensionState(state: ApiStates): Promise<void> {
-  switch (state) {
-    case 'allGood':
-      await changeExtensionIcon(config.colors.allGood);
-      await changeExtensionTooltip(config.tooltips.allGood);
-      break;
-    case 'notLogging':
-      await changeExtensionIcon(config.colors.notLogging);
-      await changeExtensionTooltip(config.tooltips.notLogging);
-      break;
-    case 'notSignedIn':
-      await changeExtensionIcon(config.colors.notSignedIn);
-      await changeExtensionTooltip(config.tooltips.notSignedIn);
-      break;
-    case 'blacklisted':
-      await changeExtensionIcon(config.colors.notLogging);
-      await changeExtensionTooltip(config.tooltips.blacklisted);
-      break;
-    case 'whitelisted':
-      await changeExtensionIcon(config.colors.notLogging);
-      await changeExtensionTooltip(config.tooltips.whitelisted);
-      break;
-    default:
-      break;
-  }
+    switch (state) {
+        case 'allGood':
+            await changeExtensionIcon(config.colors.allGood);
+            await changeExtensionTooltip(config.tooltips.allGood);
+            break;
+        case 'notLogging':
+            await changeExtensionIcon(config.colors.notLogging);
+            await changeExtensionTooltip(config.tooltips.notLogging);
+            break;
+        case 'notSignedIn':
+            await changeExtensionIcon(config.colors.notSignedIn);
+            await changeExtensionTooltip(config.tooltips.notSignedIn);
+            break;
+        case 'blacklisted':
+            await changeExtensionIcon(config.colors.notLogging);
+            await changeExtensionTooltip(config.tooltips.blacklisted);
+            break;
+        case 'whitelisted':
+            await changeExtensionIcon(config.colors.notLogging);
+            await changeExtensionTooltip(config.tooltips.whitelisted);
+            break;
+        default:
+            break;
+    }
 }
diff --git a/src/utils/changeExtensionTooltip.ts b/src/utils/changeExtensionTooltip.ts
index a01798ee..409f324a 100644
--- a/src/utils/changeExtensionTooltip.ts
+++ b/src/utils/changeExtensionTooltip.ts
@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import {browser} from 'webextension-polyfill-ts';
 import config from '../config/config';
 
 /**
@@ -6,11 +6,11 @@ import config from '../config/config';
  *
  */
 export default async function changeExtensionTooltip(text: string): Promise<void> {
-  if (text === '') {
-    text = config.name;
-  } else {
-    text = `${config.name} - ${text}`;
-  }
+    if (text === '') {
+        text = config.name;
+    } else {
+        text = `${config.name} - ${text}`;
+    }
 
-  await browser.browserAction.setTitle({ title: text });
+    await browser.browserAction.setTitle({title: text});
 }
diff --git a/src/utils/checkCurrentUser.ts b/src/utils/checkCurrentUser.ts
index 48212157..75ea0c43 100644
--- a/src/utils/checkCurrentUser.ts
+++ b/src/utils/checkCurrentUser.ts
@@ -1,16 +1,16 @@
-import { RootStore } from '../stores/createStore';
-import { fetchCurrentUser } from '../reducers/currentUser';
+import {RootStore} from '../stores/createStore';
+import {fetchCurrentUser} from '../reducers/currentUser';
 
 type unsub = () => void;
 export default (store: RootStore) => (time: number): unsub => {
-  const fetchUser = () => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    store.dispatch(fetchCurrentUser());
-  };
-  fetchUser();
-  const timeout = setInterval(fetchUser, time);
-  return () => {
-    clearInterval(timeout);
-  };
+    const fetchUser = () => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        store.dispatch(fetchCurrentUser());
+    };
+    fetchUser();
+    const timeout = setInterval(fetchUser, time);
+    return () => {
+        clearInterval(timeout);
+    };
 };
diff --git a/src/utils/contains.ts b/src/utils/contains.ts
index fe625018..93aab946 100644
--- a/src/utils/contains.ts
+++ b/src/utils/contains.ts
@@ -3,22 +3,22 @@
  * and checks if any element in list is contained in the url.
  */
 export default function contains(url: string, list: string): boolean {
-  const lines = list.split('\n');
+    const lines = list.split('\n');
 
-  for (let i = 0; i < lines.length; i++) {
-    // Trim all lines from the list one by one
-    const cleanLine = lines[i].trim();
+    for (let i = 0; i < lines.length; i++) {
+        // Trim all lines from the list one by one
+        const cleanLine = lines[i].trim();
 
-    // If by any chance one line in the list is empty, ignore it
-    if (cleanLine === '') continue;
+        // If by any chance one line in the list is empty, ignore it
+        if (cleanLine === '') continue;
 
-    const lineRe = new RegExp(cleanLine.replace('.', '.').replace('*', '.*'));
+        const lineRe = new RegExp(cleanLine.replace('.', '.').replace('*', '.*'));
 
-    // If url matches the current line return true
-    if (lineRe.test(url)) {
-      return true;
+        // If url matches the current line return true
+        if (lineRe.test(url)) {
+            return true;
+        }
     }
-  }
 
-  return false;
+    return false;
 }
diff --git a/src/utils/getDomainFromUrl.ts b/src/utils/getDomainFromUrl.ts
index 4c456202..826b3e3d 100644
--- a/src/utils/getDomainFromUrl.ts
+++ b/src/utils/getDomainFromUrl.ts
@@ -2,7 +2,7 @@
  * Returns domain from given URL.
  */
 export default function getDomainFromUrl(url: string): string {
-  const parts = url.split('/');
+    const parts = url.split('/');
 
-  return parts[0] + '//' + parts[2];
+    return parts[0] + '//' + parts[2];
 }
diff --git a/src/utils/inArray.ts b/src/utils/inArray.ts
index d9d914cd..4a0d12a8 100644
--- a/src/utils/inArray.ts
+++ b/src/utils/inArray.ts
@@ -2,11 +2,11 @@
  * Returns boolean if needle is found in haystack or not.
  */
 export default function in_array<T>(needle: T, haystack: T[]): boolean {
-  for (let i = 0; i < haystack.length; i++) {
-    if (needle == haystack[i]) {
-      return true;
+    for (let i = 0; i < haystack.length; i++) {
+        if (needle == haystack[i]) {
+            return true;
+        }
     }
-  }
 
-  return false;
+    return false;
 }