Convert store to typescript w/ matching interfaces

src/interfaces/IStateDarkmode.ts

@@ -0,0 +1,4 @@
+export default interface IStateDarkmode {
+  darkmodeSupported: boolean;
+  userChoice: string | undefined;
+}

src/interfaces/IStateDocumentTitle.ts

@@ -0,0 +1,5 @@
+export default interface IStateDocumentTitle {
+  emoji: string;
+  titlePrefix: string;
+  title: string | undefined;
+}

src/interfaces/IStateHamburger.ts

@@ -0,0 +1,3 @@
+export default interface IStateHamburger {
+  open: boolean;
+}

src/interfaces/IStatePopup.ts

@@ -0,0 +1,16 @@
+export enum PopupTypes {
+  Movie = "movie",
+  Show = "show",
+  Person = "person"
+}
+
+// export interface IPopupOpen {
+//   id: string | number;
+//   type: PopupTypes;
+// }
+
+export interface IStatePopup {
+  id: number | null;
+  type: PopupTypes | null;
+  open: boolean;
+}

src/interfaces/IStateTorrent.ts

@@ -0,0 +1,6 @@
+import type ITorrent from "./ITorrent";
+
+export default interface IStateTorrent {
+  results: Array<ITorrent>;
+  resultCount: number | null;
+}

src/interfaces/ITorrent.ts

@@ -0,0 +1,11 @@
+export default interface ITorrent {
+  name: string;
+  magnet: string;
+  uploader: string | null;
+  size: string;
+  date: string | Date;
+  seed: string;
+  leech: string;
+  url: string | null;
+  release_type: Array<string>;
+}

src/modules/darkmodeModule.js

@@ -1,23 +0,0 @@
-export default {
-  namespaced: true,
-  state: {
-    darkmodeSupported: undefined,
-    userChoice: undefined
-  },
-  getters: {
-    darkmodeSupported: (state) => {
-      return state.darkmodeSupported
-    }
-  },
-  mutations: {
-    SET_DARKMODE_SUPPORT: (state, browserSupported) => {
-      state.darkmodeSupported = browserSupported
-    }
-  },
-  actions: {
-    findAndSetDarkmodeSupported({ commit }) {
-      const browserSupported = window.matchMedia('(prefers-color-scheme)').media !== 'not all'
-      commit('SET_DARKMODE_SUPPORT', browserSupported)
-    }
-  }
-}

src/modules/darkmodeModule.ts

@@ -0,0 +1,31 @@
+import IStateDarkmode from "../interfaces/IStateDarkmode";
+
+const state: IStateDarkmode = {
+  darkmodeSupported: false,
+  userChoice: undefined
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters: {
+    darkmodeSupported: (state: IStateDarkmode) => {
+      return state.darkmodeSupported;
+    }
+  },
+  mutations: {
+    SET_DARKMODE_SUPPORT: (
+      state: IStateDarkmode,
+      browserSupported: boolean
+    ) => {
+      state.darkmodeSupported = browserSupported;
+    }
+  },
+  actions: {
+    findAndSetDarkmodeSupported({ commit }) {
+      const browserSupported =
+        window.matchMedia("(prefers-color-scheme)").media !== "not all";
+      commit("SET_DARKMODE_SUPPORT", browserSupported);
+    }
+  }
+};

src/modules/documentTitle.ts

@@ -1,4 +1,6 @@
-const capitalize = string => {
+import type IStateDocumentTitle from "../interfaces/IStateDocumentTitle";
+
+const capitalize = (string: string) => {
   if (!string) return;
 
   return string.includes(" ")
@@ -11,37 +13,39 @@ const capitalize = string => {
     : string.charAt(0).toUpperCase() + string.slice(1);
 };
 
-const setDocumentTitle = state => {
+const setDocumentTitle = (state: IStateDocumentTitle) => {
   document.title = `${state.emoji} ${state.titlePrefix} | ${capitalize(
     state.title
   )}`;
 };
 
+const state: IStateDocumentTitle = {
+  emoji: "",
+  titlePrefix: "seasoned",
+  title: undefined
+};
+
 export default {
   namespaced: true,
-  state: {
-    emoji: "",
-    titlePrefix: "seasoned",
-    title: undefined
-  },
+  state,
   getters: {
-    title: state => state.title
+    title: (state: IStateDocumentTitle) => state.title
   },
   mutations: {
-    SET_EMOJI: (state, emoji) => {
+    SET_EMOJI: (state: IStateDocumentTitle, emoji: string) => {
       state.emoji = emoji;
       setDocumentTitle(state);
     },
-    SET_TITLE: (state, title) => {
+    SET_TITLE: (state: IStateDocumentTitle, title: string) => {
       state.title = title;
       setDocumentTitle(state);
     }
   },
   actions: {
-    updateEmoji({ commit }, emoji) {
+    updateEmoji({ commit }, emoji: String) {
       commit("SET_EMOJI", emoji);
     },
-    updateTitle({ commit }, title) {
+    updateTitle({ commit }, title: String) {
       commit("SET_TITLE", title);
     }
   }

src/modules/hamburger.ts

@@ -1,8 +1,12 @@
+import type IStateHamburger from "../interfaces/IStateHamburger";
+
+const state: IStateHamburger = {
+  open: false
+};
+
 export default {
   namespaced: true,
-  state: {
-    open: false
-  },
+  state,
   getters: {
     isOpen: state => state.open
   },

src/modules/popup.ts

@@ -1,22 +1,19 @@
+import { PopupTypes } from "../interfaces/IStatePopup";
+import type { IStatePopup } from "../interfaces/IStatePopup";
+
 const removeIncludedQueryParams = (params, key) => {
   if (params.has(key)) params.delete(key);
   return params;
 };
 
-const updateQueryParams = (id = null, type = null) => {
+const updateQueryParams = (id: number | null = null, type: string = "") => {
   let params = new URLSearchParams(window.location.search);
   params = removeIncludedQueryParams(params, "movie");
   params = removeIncludedQueryParams(params, "show");
   params = removeIncludedQueryParams(params, "person");
 
-  if (id && type === "movie") {
-    params.append("movie", id);
-  }
-  if (id && type === "show") {
-    params.append("show", id);
-  }
-  if (id && type === "person") {
-    params.append("person", id);
+  if (id && type in PopupTypes) {
+    params.append(type, id.toString());
   }
 
   let url = `${window.location.protocol}//${window.location.hostname}${
@@ -31,13 +28,15 @@ const updateQueryParams = (id = null, type = null) => {
   }
 };
 
+const state: IStatePopup = {
+  id: null,
+  type: null,
+  open: false
+};
+
 export default {
   namespaced: true,
-  state: {
-    id: null,
-    type: null,
-    open: false
-  },
+  state,
   getters: {
     isOpen: state => state.open,
     id: state => state.id,

src/modules/torrentModule.js

@@ -1,40 +0,0 @@
-
-export default {
-  namespaced: true,
-  state: {
-    results: [],
-    resultCount: null
-  },
-  getters: {
-    results: (state) => {
-      return state.results
-    },
-    resultCount: (state) => {
-      return state.resultCount
-    }
-  },
-
-  mutations: {
-    SET_RESULTS: (state, results) => {
-      state.results = results;
-    },
-    SET_RESULT_COUNT: (state, count) => {
-      state.resultCount = count;
-    },
-    RESET: (state) => {
-      state.results = []
-      state.resultCount = null
-    }
-  },
-  actions: {
-    setResults({ commit }, results) {
-      commit('SET_RESULTS', results)
-    },
-    setResultCount({ commit }, count) {
-      commit('SET_RESULT_COUNT', count)
-    },
-    reset({ commit }) {
-      commit('RESET')
-    }
-  }
-}

src/modules/torrentModule.ts

@@ -0,0 +1,47 @@
+import type ITorrent from "../interfaces/ITorrent";
+import type IStateTorrent from "../interfaces/IStateTorrent";
+
+const state: IStateTorrent = {
+  results: [],
+  resultCount: null
+};
+
+export default {
+  namespaced: true,
+  state: {
+    results: [],
+    resultCount: null
+  },
+  getters: {
+    results: (state: IStateTorrent) => {
+      return state.results;
+    },
+    resultCount: (state: IStateTorrent) => {
+      return state.resultCount;
+    }
+  },
+
+  mutations: {
+    SET_RESULTS: (state: IStateTorrent, results: Array<ITorrent>) => {
+      state.results = results;
+    },
+    SET_RESULT_COUNT: (state: IStateTorrent, count: number) => {
+      state.resultCount = count;
+    },
+    RESET: (state: IStateTorrent) => {
+      state.results = [];
+      state.resultCount = null;
+    }
+  },
+  actions: {
+    setResults({ commit }, results: Array<ITorrent>) {
+      commit("SET_RESULTS", results);
+    },
+    setResultCount({ commit }, count: number) {
+      commit("SET_RESULT_COUNT", count);
+    },
+    reset({ commit }) {
+      commit("RESET");
+    }
+  }
+};

src/routes.ts

@@ -1,6 +1,12 @@
 import Vue from "vue";
-import VueRouter from "vue-router";
-import store from "@/store";
+import VueRouter, { NavigationGuardNext, Route, RouteConfig } from "vue-router";
+import store from "./store";
+
+declare global {
+  interface Window {
+    preventPushState: boolean;
+  }
+}
 
 Vue.use(VueRouter);
 
@@ -8,51 +14,51 @@ let routes = [
   {
     name: "home",
     path: "/",
-    component: resolve => require(["./pages/Home.vue"], resolve)
+    component: resolve => resolve("./pages/Home.vue")
   },
   {
     name: "activity",
     path: "/activity",
     meta: { requiresAuth: true },
-    component: resolve => require(["./pages/ActivityPage.vue"], resolve)
+    component: resolve => resolve("./pages/ActivityPage.vue")
   },
   {
     name: "profile",
     path: "/profile",
     meta: { requiresAuth: true },
-    component: resolve => require(["./pages/ProfilePage.vue"], resolve)
+    component: resolve => resolve("./pages/ProfilePage.vue")
   },
   {
     name: "list",
     path: "/list/requests",
-    component: resolve => require(["./pages/RequestPage.vue"], resolve)
+    component: resolve => resolve("./pages/RequestPage.vue")
   },
   {
     name: "list",
     path: "/list/:name",
-    component: resolve => require(["./pages/ListPage.vue"], resolve)
+    component: resolve => resolve("./pages/ListPage.vue")
   },
   {
     name: "search",
     path: "/search",
-    component: resolve => require(["./pages/SearchPage.vue"], resolve)
+    component: resolve => resolve("./pages/SearchPage.vue")
   },
   {
     name: "register",
     path: "/register",
-    component: resolve => require(["./pages/RegisterPage.vue"], resolve)
+    component: resolve => resolve("./pages/RegisterPage.vue")
   },
   {
     name: "settings",
     path: "/settings",
     meta: { requiresAuth: true },
-    component: resolve => require(["./pages/SettingsPage.vue"], resolve)
+    component: resolve => resolve("./pages/SettingsPage.vue")
   },
   {
     name: "signin",
     path: "/signin",
     alias: "/login",
-    component: resolve => require(["./pages/SigninPage.vue"], resolve)
+    component: resolve => resolve("./pages/SigninPage.vue")
   },
   // {
   //   name: 'user-requests',
@@ -64,7 +70,7 @@ let routes = [
   {
     name: "404",
     path: "/404",
-    component: resolve => require(["./pages/404.vue"], resolve)
+    component: resolve => resolve("./pages/404.vue")
   },
   {
     path: "*",
@@ -90,7 +96,7 @@ const hamburgerIsOpen = () => store.getters["hamburger/isOpen"];
 window.preventPushState = false;
 window.onpopstate = () => (window.preventPushState = true);
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to: Route, from: Route, next: NavigationGuardNext<Vue>) => {
   store.dispatch("documentTitle/updateTitle", to.name);
   const { movie, show, person } = to.query;