chore: convert various files to TS (#2246)

* convert various files to TS
* removed outdated docs/example-feature folder
* turn off unicorn/no-empty-file
* update eslint config

19 files changed, 169 insertions, 240 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
index b18927381..f7ca7b620 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -83,6 +83,7 @@ module.exports = {
         'react/state-in-constructor': 0,
         'react/static-property-placement': 0,
         'react/function-component-definition': 0,
+        'react/jsx-no-useless-fragment': 0,
         //  eslint-plugin-jsx-a11y
         'jsx-a11y/click-events-have-key-events': 1,
         'jsx-a11y/mouse-events-have-key-events': 1,
@@ -116,6 +117,8 @@ module.exports = {
           },
         ],
         'unicorn/consistent-destructuring': 0,
+        // INFO: Turned off due to src/internal-server/database/factory.js
+        'unicorn/no-empty-file': 0,
         // eslint-plugin-prettier
         'prettier/prettier': 1,
       },
@@ -167,6 +170,7 @@ module.exports = {
     'react/state-in-constructor': 1,
     'react/sort-comp': 0,
     'react/function-component-definition': 0,
+    'react/jsx-no-useless-fragment': 0,
     //  eslint-plugin-jsx-a11y
     'jsx-a11y/click-events-have-key-events': 1,
     'jsx-a11y/no-static-element-interactions': 1,
@@ -189,6 +193,8 @@ module.exports = {
       },
     ],
     'unicorn/consistent-destructuring': 0,
+    // INFO: Turned off due to src/internal-server/database/factory.js
+    'unicorn/no-empty-file': 0,
     // eslint-plugin-prettier
     'prettier/prettier': 1,
   },
diff --git a/docs/example-feature/actions.js b/docs/example-feature/actions.js
deleted file mode 100644
index c4d49b708..000000000
--- a/docs/example-feature/actions.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import { createActionsFromDefinitions } from '../../src/actions/lib/actions';
-
-export const exampleFeatureActions = createActionsFromDefinitions({
-  greet: {
-    name: PropTypes.string.isRequired,
-  },
-}, PropTypes.checkPropTypes);
-
-export default exampleFeatureActions;
diff --git a/docs/example-feature/api.js b/docs/example-feature/api.js
deleted file mode 100644
index d9c769c91..000000000
--- a/docs/example-feature/api.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  async getName() {
-    return Promise.resolve('Ferdi');
-  },
-};
diff --git a/docs/example-feature/state.js b/docs/example-feature/state.js
deleted file mode 100644
index 676717da7..000000000
--- a/docs/example-feature/state.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { observable } from 'mobx';
-
-const defaultState = {
-  name: null,
-  isFeatureActive: false,
-};
-
-export const exampleFeatureState = observable(defaultState);
-
-export function resetState() {
-  Object.assign(exampleFeatureState, defaultState);
-}
-
-export default exampleFeatureState;
diff --git a/docs/example-feature/store.js b/docs/example-feature/store.js
deleted file mode 100644
index 9fc86de36..000000000
--- a/docs/example-feature/store.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { action, observable, reaction } from 'mobx';
-import Store from '../../src/stores/lib/Store';
-import Request from '../../src/stores/lib/Request';
-
-const debug = require('debug')('Ferdi:feature:EXAMPLE_FEATURE:store');
-
-export class ExampleFeatureStore extends Store {
-  @observable getNameRequest = new Request(this.api, 'getName');
-
-  constructor(stores, api, actions, state) {
-    super(stores, api, actions);
-    this.state = state;
-  }
-
-  setup() {
-    debug('fetching name from api');
-    this.getNameRequest.execute();
-
-    // Update the name on the state when the request resolved
-    reaction(
-      () => (
-        this.getNameRequest.result
-      ),
-      (name) => {
-        this._setName(name);
-      },
-    );
-  }
-
-  @action _setName = (name) => {
-    debug('setting name', name);
-    this.state.name = name;
-  };
-}
-
-export default ExampleFeatureStore;
diff --git a/src/I18n.js b/src/I18n.tsx
index b10c5a94b..39b5273c1 100644
--- a/src/I18n.js
+++ b/src/I18n.tsx
@@ -1,16 +1,24 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, ReactNode } from 'react';
 import { inject, observer } from 'mobx-react';
 import { IntlProvider } from 'react-intl';
 
-import { oneOrManyChildElements } from './prop-types';
-import translations from './i18n/translations';
+import { generatedTranslations } from './i18n/translations';
 import UserStore from './stores/UserStore';
 import AppStore from './stores/AppStore';
 
+const translations = generatedTranslations();
+
+type Props = {
+  stores: {
+    app: typeof AppStore;
+    user: typeof UserStore;
+  };
+  children: ReactNode;
+};
+
 @inject('stores')
 @observer
-class I18N extends Component {
+class I18N extends Component<Props> {
   componentDidUpdate() {
     window['ferdi'].menu.rebuild();
   }
@@ -31,12 +39,4 @@ class I18N extends Component {
   }
 }
 
-I18N.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    app: PropTypes.instanceOf(AppStore).isRequired,
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-  children: oneOrManyChildElements.isRequired,
-};
-
 export default I18N;
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.ts
index bcc72ffdc..2fd1a8d0d 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.ts
@@ -11,6 +11,7 @@ import {
   pathExistsSync,
   readJsonSync,
   removeSync,
+  PathOrFileDescriptor,
 } from 'fs-extra';
 import fetch from 'electron-fetch';
 
@@ -40,12 +41,12 @@ const debug = require('debug')('Ferdi:ServerApi');
 module.paths.unshift(getDevRecipeDirectory(), getRecipeDirectory());
 
 export default class ServerApi {
-  recipePreviews = [];
+  recipePreviews: any[] = [];
 
-  recipes = [];
+  recipes: any[] = [];
 
   // User
-  async login(email, passwordHash) {
+  async login(email: string, passwordHash: string) {
     const request = await sendAuthRequest(
       `${apiBase()}/auth/login`,
       {
@@ -57,7 +58,7 @@ export default class ServerApi {
       false,
     );
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const u = await request.json();
 
@@ -65,7 +66,7 @@ export default class ServerApi {
     return u.token;
   }
 
-  async signup(data) {
+  async signup(data: any) {
     const request = await sendAuthRequest(
       `${apiBase()}/auth/signup`,
       {
@@ -75,7 +76,7 @@ export default class ServerApi {
       false,
     );
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const u = await request.json();
 
@@ -83,20 +84,20 @@ export default class ServerApi {
     return u.token;
   }
 
-  async inviteUser(data) {
+  async inviteUser(data: any) {
     const request = await sendAuthRequest(`${apiBase()}/invite`, {
       method: 'POST',
       body: JSON.stringify(data),
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
 
     debug('ServerApi::inviteUser');
     return true;
   }
 
-  async retrievePassword(email) {
+  async retrievePassword(email: string) {
     const request = await sendAuthRequest(
       `${apiBase()}/auth/password`,
       {
@@ -108,7 +109,7 @@ export default class ServerApi {
       false,
     );
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const r = await request.json();
 
@@ -123,7 +124,7 @@ export default class ServerApi {
 
     const request = await sendAuthRequest(`${apiBase()}/me`);
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -133,13 +134,13 @@ export default class ServerApi {
     return user;
   }
 
-  async updateUserInfo(data) {
+  async updateUserInfo(data: any) {
     const request = await sendAuthRequest(`${apiBase()}/me`, {
       method: 'PUT',
       body: JSON.stringify(data),
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const updatedData = await request.json();
 
@@ -155,7 +156,7 @@ export default class ServerApi {
       method: 'DELETE',
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -171,7 +172,7 @@ export default class ServerApi {
 
     const request = await sendAuthRequest(`${apiBase()}/me/services`);
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -181,13 +182,13 @@ export default class ServerApi {
     return filteredServices;
   }
 
-  async createService(recipeId, data) {
+  async createService(recipeId: string, data: { iconFile: any }) {
     const request = await sendAuthRequest(`${apiBase()}/service`, {
       method: 'POST',
       body: JSON.stringify({ recipeId, ...data }),
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const serviceData = await request.json();
 
@@ -208,7 +209,7 @@ export default class ServerApi {
     return service;
   }
 
-  async updateService(serviceId, rawData) {
+  async updateService(serviceId: string, rawData: any) {
     const data = rawData;
 
     if (data.iconFile) {
@@ -221,7 +222,7 @@ export default class ServerApi {
     });
 
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
 
     const serviceData = await request.json();
@@ -234,12 +235,13 @@ export default class ServerApi {
     return service;
   }
 
-  async uploadServiceIcon(serviceId, icon) {
+  async uploadServiceIcon(serviceId: string, icon: string | Blob) {
     const formData = new FormData();
     formData.append('icon', icon);
 
     const requestData = prepareAuthRequest({
       method: 'PUT',
+      // @ts-expect-error Argument of type '{ method: string; body: FormData; }' is not assignable to parameter of type '{ method: string; }'.
       body: formData,
     });
 
@@ -247,11 +249,12 @@ export default class ServerApi {
 
     const request = await window.fetch(
       `${apiBase()}/service/${serviceId}`,
+      // @ts-expect-error Argument of type '{ method: string; } & { mode: string; headers: any; }' is not assignable to parameter of type 'RequestInit | undefined'.
       requestData,
     );
 
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
 
     const serviceData = await request.json();
@@ -259,25 +262,25 @@ export default class ServerApi {
     return serviceData.data;
   }
 
-  async reorderService(data) {
+  async reorderService(data: any) {
     const request = await sendAuthRequest(`${apiBase()}/service/reorder`, {
       method: 'PUT',
       body: JSON.stringify(data),
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const serviceData = await request.json();
     debug('ServerApi::reorderService resolves', serviceData);
     return serviceData;
   }
 
-  async deleteService(id) {
+  async deleteService(id: string) {
     const request = await sendAuthRequest(`${apiBase()}/service/${id}`, {
       method: 'DELETE',
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -291,7 +294,7 @@ export default class ServerApi {
   async getDefaultFeatures() {
     const request = await sendAuthRequest(`${apiBase()}/features/default`);
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -307,7 +310,7 @@ export default class ServerApi {
 
     const request = await sendAuthRequest(`${apiBase()}/features`);
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const data = await request.json();
 
@@ -341,13 +344,13 @@ export default class ServerApi {
     return this.recipes;
   }
 
-  async getRecipeUpdates(recipeVersions) {
+  async getRecipeUpdates(recipeVersions: any) {
     const request = await sendAuthRequest(`${apiBase()}/recipes/update`, {
       method: 'POST',
       body: JSON.stringify(recipeVersions),
     });
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     const recipes = await request.json();
     debug('ServerApi::getRecipeUpdates resolves', recipes);
@@ -357,7 +360,7 @@ export default class ServerApi {
   // Recipes Previews
   async getRecipePreviews() {
     const request = await sendAuthRequest(`${apiBase()}/recipes`);
-    if (!request.ok) throw request;
+    if (!request.ok) throw new Error(request.statusText);
     const data = await request.json();
     const recipePreviews = this._mapRecipePreviewModel(data);
     debug('ServerApi::getRecipes resolves', recipePreviews);
@@ -367,7 +370,7 @@ export default class ServerApi {
   async getFeaturedRecipePreviews() {
     // TODO: If we are hitting the internal-server, we need to return an empty list, else we can hit the remote server and get the data
     const request = await sendAuthRequest(`${apiBase()}/recipes/popular`);
-    if (!request.ok) throw request;
+    if (!request.ok) throw new Error(request.statusText);
 
     const data = await request.json();
     const recipePreviews = this._mapRecipePreviewModel(data);
@@ -375,10 +378,10 @@ export default class ServerApi {
     return recipePreviews;
   }
 
-  async searchRecipePreviews(needle) {
+  async searchRecipePreviews(needle: string) {
     const url = `${apiBase()}/recipes/search?needle=${needle}`;
     const request = await sendAuthRequest(url);
-    if (!request.ok) throw request;
+    if (!request.ok) throw new Error(request.statusText);
 
     const data = await request.json();
     const recipePreviews = this._mapRecipePreviewModel(data);
@@ -386,7 +389,7 @@ export default class ServerApi {
     return recipePreviews;
   }
 
-  async getRecipePackage(recipeId) {
+  async getRecipePackage(recipeId: string) {
     try {
       const recipesDirectory = userDataRecipesPath();
       const recipeTempDirectory = join(recipesDirectory, 'temp', recipeId);
@@ -396,7 +399,7 @@ export default class ServerApi {
 
       ensureDirSync(recipeTempDirectory);
 
-      let archivePath;
+      let archivePath: PathOrFileDescriptor;
 
       if (pathExistsSync(internalRecipeFile)) {
         debug('[ServerApi::getRecipePackage] Using internal recipe file');
@@ -416,6 +419,7 @@ export default class ServerApi {
 
       await sleep(10);
 
+      // @ts-expect-error No overload matches this call.
       await tar.x({
         file: archivePath,
         cwd: recipeTempDirectory,
@@ -455,7 +459,7 @@ export default class ServerApi {
       false,
     );
     if (!request.ok) {
-      throw request;
+      throw new Error(request.statusText);
     }
     debug('ServerApi::healthCheck resolves');
   }
@@ -468,7 +472,7 @@ export default class ServerApi {
 
       if (Object.prototype.hasOwnProperty.call(config, 'services')) {
         const services = await Promise.all(
-          config.services.map(async s => {
+          config.services.map(async (s: { service: any }) => {
             const service = s;
             const request = await sendAuthRequest(
               `${apiBase()}/recipes/${s.service}`,
@@ -476,6 +480,7 @@ export default class ServerApi {
 
             if (request.status === 200) {
               const data = await request.json();
+              // @ts-expect-error Property 'recipe' does not exist on type '{ service: any; }'.
               service.recipe = new RecipePreviewModel(data);
             }
 
@@ -494,18 +499,18 @@ export default class ServerApi {
   }
 
   // Helper
-  async _mapServiceModels(services) {
-    const recipes = services.map(s => s.recipeId);
+  async _mapServiceModels(services: any[]) {
+    const recipes = services.map((s: { recipeId: string }) => s.recipeId);
     await this._bulkRecipeCheck(recipes);
     /* eslint-disable no-return-await */
     return Promise.all(
-      services.map(async service => await this._prepareServiceModel(service)),
+      services.map(async (service: any) => this._prepareServiceModel(service)),
     );
     /* eslint-enable no-return-await */
   }
 
-  async _prepareServiceModel(service) {
-    let recipe;
+  async _prepareServiceModel(service: { recipeId: string }) {
+    let recipe: undefined;
     try {
       recipe = this.recipes.find(r => r.id === service.recipeId);
 
@@ -521,14 +526,15 @@ export default class ServerApi {
     }
   }
 
-  async _bulkRecipeCheck(unfilteredRecipes) {
+  async _bulkRecipeCheck(unfilteredRecipes: any[]) {
     // Filter recipe duplicates as we don't need to download 3 Slack recipes
     const recipes = unfilteredRecipes.filter(
-      (elem, pos, arr) => arr.indexOf(elem) === pos,
+      (elem: any, pos: number, arr: string | any[]) =>
+        arr.indexOf(elem) === pos,
     );
 
     return Promise.all(
-      recipes.map(async recipeId => {
+      recipes.map(async (recipeId: string) => {
         let recipe = this.recipes.find(r => r.id === recipeId);
 
         if (!recipe) {
@@ -554,7 +560,7 @@ export default class ServerApi {
     ).catch(error => console.error("Can't load recipe", error));
   }
 
-  _mapRecipePreviewModel(recipes) {
+  _mapRecipePreviewModel(recipes: any[]) {
     return recipes
       .map(recipe => {
         try {
diff --git a/src/api/utils/auth.ts b/src/api/utils/auth.ts
index 98295d1a4..899881e88 100644
--- a/src/api/utils/auth.ts
+++ b/src/api/utils/auth.ts
@@ -31,7 +31,7 @@ export const prepareAuthRequest = (
 
 export const sendAuthRequest = (
   url: RequestInfo,
-  options: { method: string } | undefined,
+  options?: { method: string; headers?: any; body?: any },
   auth?: boolean,
 ) =>
   // @ts-expect-error Argument of type '{ method: string; } & { mode: string; headers: any; }' is not assignable to parameter of type 'RequestInit | undefined'.
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 187785f82..c70494edd 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -31,11 +31,13 @@ class ServiceWebview extends Component {
             debug('Service logged a message:', e.message);
           });
           this.webview.view.addEventListener('did-navigate', () => {
-            document.title = `Ferdi - ${this.props.service.name} ${
-              this.props.service.dialogTitle
-                ? ` - ${this.props.service.dialogTitle}`
-                : ''
-            } ${`- ${this.props.service._webview.getTitle()}`}`;
+            if (this.props.service._webview) {
+              document.title = `Ferdi - ${this.props.service.name} ${
+                this.props.service.dialogTitle
+                  ? ` - ${this.props.service.dialogTitle}`
+                  : ''
+              } ${`- ${this.props.service._webview.getTitle()}`}`;
+            }
           });
         }
       },
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index 81ea0ea2b..9fcc3c41e 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1,3 +1 @@
-export const TabItem = ({ children }) => {
-  children;
-};
+export const TabItem = ({ children }) => <>{children}</>;
diff --git a/src/features/communityRecipes/store.ts b/src/features/communityRecipes/store.ts
index a8d358ba0..c7a51c311 100644
--- a/src/features/communityRecipes/store.ts
+++ b/src/features/communityRecipes/store.ts
@@ -26,7 +26,7 @@ export class CommunityRecipesStore extends FeatureStore {
       (recipePreview: { isDevRecipe: boolean; author: any[] }) => {
         // TODO: Need to figure out if this is even necessary/used
         recipePreview.isDevRecipe = !!recipePreview.author.some(
-          (author: { email: any }) =>
+          (author: { email: string }) =>
             author.email === this.stores.user.data.email,
         );
 
diff --git a/src/features/publishDebugInfo/index.js b/src/features/publishDebugInfo/index.ts
index 43841b530..43841b530 100644
--- a/src/features/publishDebugInfo/index.js
+++ b/src/features/publishDebugInfo/index.ts
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index cc5ecf83a..9b23497e1 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -1,16 +1,16 @@
-/* eslint-disable import/no-import-module-exports */
 /* eslint-disable global-require */
 import { APP_LOCALES } from './languages';
 
-const translations = [];
-for (const key of Object.keys(APP_LOCALES)) {
-  try {
-    // eslint-disable-next-line import/no-dynamic-require
-    const translation = require(`./locales/${key}.json`);
-    translations[key] = translation;
-  } catch {
-    console.warn(`Can't find translations for ${key}`);
+export const generatedTranslations = () => {
+  const translations = [];
+  for (const key of Object.keys(APP_LOCALES)) {
+    try {
+      // eslint-disable-next-line import/no-dynamic-require
+      const translation = require(`./locales/${key}.json`);
+      translations[key] = translation;
+    } catch {
+      console.warn(`Can't find translations for ${key}`);
+    }
   }
-}
-
-module.exports = translations;
+  return translations;
+};
diff --git a/src/internal-server/database/factory.js b/src/internal-server/database/factory.js
index 8cd45a80d..8534fc20a 100644
--- a/src/internal-server/database/factory.js
+++ b/src/internal-server/database/factory.js
@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/no-empty-file */
 /*
 |--------------------------------------------------------------------------
 | Factory
diff --git a/src/routes.js b/src/routes.tsx
index 9891e5d43..569da06a7 100644
--- a/src/routes.js
+++ b/src/routes.tsx
@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { Router, Route, IndexRedirect } from 'react-router';
 
@@ -30,9 +29,16 @@ import { WORKSPACES_ROUTES } from './features/workspaces/constants';
 
 import SettingsStore from './stores/SettingsStore';
 
+type Props = {
+  stores: {
+    settings: typeof SettingsStore;
+  };
+  history: any;
+};
+
 @inject('stores', 'actions')
 @observer
-class Routes extends Component {
+class Routes extends Component<Props> {
   render() {
     const { locked } = this.props.stores.settings.app;
 
@@ -88,11 +94,4 @@ class Routes extends Component {
   }
 }
 
-Routes.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    settings: PropTypes.instanceOf(SettingsStore).isRequired,
-  }).isRequired,
-  history: PropTypes.any.isRequired,
-};
-
 export default Routes;
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index d652276ea..5881e37a4 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -19,7 +19,7 @@ import Request from './lib/Request';
 import { CHECK_INTERVAL, DEFAULT_APP_SETTINGS } from '../config';
 import { isMac, electronVersion, osRelease } from '../environment';
 import { ferdiVersion, userDataPath, ferdiLocale } from '../environment-remote';
-import locales from '../i18n/translations';
+import { generatedTranslations } from '../i18n/translations';
 import { getLocale } from '../helpers/i18n-helpers';
 
 import {
@@ -42,6 +42,8 @@ const autoLauncher = new AutoLaunch({
 const CATALINA_NOTIFICATION_HACK_KEY =
   '_temp_askedForCatalinaNotificationPermissions';
 
+const locales = generatedTranslations();
+
 export default class AppStore extends Store {
   updateStatusTypes = {
     CHECKING: 'CHECKING',
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 16deb91c5..3d418c4c5 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -655,20 +655,20 @@ export default class ServicesStore extends Store {
 
   @action _setWebviewReference({ serviceId, webview }) {
     const service = this.one(serviceId);
-
-    service.webview = webview;
-
-    if (!service.isAttached) {
-      debug('Webview is not attached, initializing');
-      service.initializeWebViewEvents({
-        handleIPCMessage: this.actions.service.handleIPCMessage,
-        openWindow: this.actions.service.openWindow,
-        stores: this.stores,
-      });
-      service.initializeWebViewListener();
+    if (service) {
+      service.webview = webview;
+
+      if (!service.isAttached) {
+        debug('Webview is not attached, initializing');
+        service.initializeWebViewEvents({
+          handleIPCMessage: this.actions.service.handleIPCMessage,
+          openWindow: this.actions.service.openWindow,
+          stores: this.stores,
+        });
+        service.initializeWebViewListener();
+      }
+      service.isAttached = true;
     }
-
-    service.isAttached = true;
   }
 
   @action _detachService({ service }) {
@@ -690,20 +690,22 @@ export default class ServicesStore extends Store {
       // TODO: add checks to not focus service when router path is /settings or /auth
       const service = this.active;
       if (service) {
-        document.title = `Ferdi - ${service.name} ${
-          service.dialogTitle ? ` - ${service.dialogTitle}` : ''
-        } ${service._webview ? `- ${service._webview.getTitle()}` : ''}`;
-        this._focusService({ serviceId: service.id });
-        if (this.stores.settings.app.splitMode && !focusEvent) {
-          setTimeout(() => {
-            document
-              .querySelector('.services__webview-wrapper.is-active')
-              .scrollIntoView({
-                behavior: 'smooth',
-                block: 'end',
-                inline: 'nearest',
-              });
-          }, 10);
+        if (service._webview) {
+          document.title = `Ferdi - ${service.name} ${
+            service.dialogTitle ? ` - ${service.dialogTitle}` : ''
+          } ${service._webview ? `- ${service._webview.getTitle()}` : ''}`;
+          this._focusService({ serviceId: service.id });
+          if (this.stores.settings.app.splitMode && !focusEvent) {
+            setTimeout(() => {
+              document
+                .querySelector('.services__webview-wrapper.is-active')
+                .scrollIntoView({
+                  behavior: 'smooth',
+                  block: 'end',
+                  inline: 'nearest',
+                });
+            }, 10);
+          }
         }
       } else {
         debug('No service is active');
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.ts
index ebe88ed85..09dc462ed 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.ts
@@ -5,6 +5,14 @@ import { pathExistsSync, readFileSync, existsSync } from 'fs-extra';
 const debug = require('debug')('Ferdi:Plugin:RecipeWebview');
 
 class RecipeWebview {
+  badgeHandler: any;
+
+  dialogTitleHandler: any;
+
+  notificationsHandler: any;
+
+  sessionHandler: any;
+
   constructor(
     badgeHandler,
     dialogTitleHandler,
@@ -97,9 +105,12 @@ class RecipeWebview {
         const styles = document.createElement('style');
         styles.innerHTML = readFileSync(file, 'utf8');
 
-        document.querySelector('head').append(styles);
+        const head = document.querySelector('head');
 
-        debug('Append styles', styles);
+        if (head) {
+          head.append(styles);
+          debug('Append styles', styles);
+        }
       }
     });
   }
diff --git a/src/webview/lib/Userscript.js b/src/webview/lib/Userscript.ts
index f7bb99206..c50941dc7 100644
--- a/src/webview/lib/Userscript.js
+++ b/src/webview/lib/Userscript.ts
@@ -1,8 +1,12 @@
-import { ipcRenderer } from 'electron';
+type Recipe = {
+  setBadge: (direct: number, indirect: number) => void;
+  setDialogTitle: (title: string) => void;
+  injectCSS: (css: string | string[]) => void;
+};
 
 export default class Userscript {
   // Current ./lib/RecipeWebview instance
-  recipe = null;
+  recipe: Recipe | null = null;
 
   // Current ./recipe.js instance
   controller = null;
@@ -13,8 +17,6 @@ export default class Userscript {
   // Ferdi and service settings
   settings = {};
 
-  settingsUpdateHandler = null;
-
   constructor(recipe, controller, config) {
     this.recipe = recipe;
     this.controller = controller;
@@ -29,31 +31,18 @@ export default class Userscript {
    * @param {*} settings
    */
   // eslint-disable-next-line camelcase
-  internal_setSettings(settings) {
+  internal_setSettings(settings: any) {
     // This is needed to get a clean JS object from the settings itself to provide better accessibility
     // Otherwise this will be a mobX instance
     this.settings = JSON.parse(JSON.stringify(settings));
-
-    if (typeof this.settingsUpdateHandler === 'function') {
-      this.settingsUpdateHandler();
-    }
-  }
-
-  /**
-   * Register a settings handler to be executed when the settings change
-   *
-   * @param {function} handler
-   */
-  onSettingsUpdate(handler) {
-    this.settingsUpdateHandler = handler;
   }
 
   /**
    * Set badge count for the current service
-   * @param {*} direct Direct messages
-   * @param {*} indirect Indirect messages
+   * @param {number} direct Direct messages
+   * @param {number} indirect Indirect messages
    */
-  setBadge(direct = 0, indirect = 0) {
+  setBadge(direct: number = 0, indirect: number = 0) {
     if (this.recipe && this.recipe.setBadge) {
       this.recipe.setBadge(direct, indirect);
     }
@@ -63,7 +52,7 @@ export default class Userscript {
    * Set active dialog title to the app title
    * @param {*} title Dialog title
    */
-  setDialogTitle(title) {
+  setDialogTitle(title: string) {
     if (this.recipe && this.recipe.setDialogTitle) {
       this.recipe.setDialogTitle(title);
     }
@@ -74,8 +63,9 @@ export default class Userscript {
    *
    * @param  {...string} files
    */
-  injectCSSFiles(...files) {
+  injectCSSFiles(...files: string[]) {
     if (this.recipe && this.recipe.injectCSS) {
+      // @ts-expect-error A spread argument must either have a tuple type or be passed to a rest parameter.
       this.recipe.injectCSS(...files);
     }
   }
@@ -85,54 +75,33 @@ export default class Userscript {
    *
    * @param {string} css
    */
-  injectCSS(css) {
+  injectCSS(css: string) {
     const style = document.createElement('style');
     style.textContent = css;
     document.head.append(style);
   }
 
   /**
-   * Open "Find in Page" popup
-   */
-  openFindInPage() {
-    this.controller.openFindInPage();
-  }
-
-  /**
    * Set or update value in storage
    *
-   * @param {*} key
-   * @param {*} value
+   * @param {string} key
+   * @param {any} value
    */
-  set(key, value) {
+  set(key: string, value: string) {
     window.localStorage.setItem(`ferdi-user-${key}`, JSON.stringify(value));
   }
 
   /**
    * Get value from storage
    *
-   * @param {*} key
+   * @param {string} key
    * @return Value of the key
    */
-  get(key) {
-    return JSON.parse(window.localStorage.getItem(`ferdi-user-${key}`));
-  }
+  get(key: string) {
+    const ferdiUserKey = window.localStorage.getItem(`ferdi-user-${key}`);
 
-  /**
-   * Open a URL in an external browser
-   *
-   * @param {*} url
-   */
-  externalOpen(url) {
-    ipcRenderer.sendToHost('new-window', url);
-  }
-
-  /**
-   * Open a URL in the current service
-   *
-   * @param {*} url
-   */
-  internalOpen(url) {
-    window.location.href = url;
+    if (ferdiUserKey) {
+      return JSON.parse(ferdiUserKey);
+    }
   }
 }