From 8216502eeb192aa5f2c9d32ce31a98c92cacb1bb Mon Sep 17 00:00:00 2001 From: Kevin Midboe Date: Tue, 26 Jul 2022 23:00:58 +0200 Subject: [PATCH] Convert store to typescript w/ matching interfaces --- src/interfaces/IStateDarkmode.ts | 4 ++ src/interfaces/IStateDocumentTitle.ts | 5 ++ src/interfaces/IStateHamburger.ts | 3 ++ src/interfaces/IStatePopup.ts | 16 +++++++ src/interfaces/IStateTorrent.ts | 6 +++ src/interfaces/ITorrent.ts | 11 +++++ src/modules/darkmodeModule.js | 23 --------- src/modules/darkmodeModule.ts | 31 ++++++++++++ .../{documentTitle.js => documentTitle.ts} | 28 ++++++----- src/modules/{hamburger.js => hamburger.ts} | 10 ++-- src/modules/{popup.js => popup.ts} | 27 +++++------ src/modules/torrentModule.js | 40 ---------------- src/modules/torrentModule.ts | 47 +++++++++++++++++++ src/{routes.js => routes.ts} | 32 ++++++++----- src/{store.js => store.ts} | 0 15 files changed, 178 insertions(+), 105 deletions(-) create mode 100644 src/interfaces/IStateDarkmode.ts create mode 100644 src/interfaces/IStateDocumentTitle.ts create mode 100644 src/interfaces/IStateHamburger.ts create mode 100644 src/interfaces/IStatePopup.ts create mode 100644 src/interfaces/IStateTorrent.ts create mode 100644 src/interfaces/ITorrent.ts delete mode 100644 src/modules/darkmodeModule.js create mode 100644 src/modules/darkmodeModule.ts rename src/modules/{documentTitle.js => documentTitle.ts} (54%) rename src/modules/{hamburger.js => hamburger.ts} (76%) rename src/modules/{popup.js => popup.ts} (80%) delete mode 100644 src/modules/torrentModule.js create mode 100644 src/modules/torrentModule.ts rename src/{routes.js => routes.ts} (72%) rename src/{store.js => store.ts} (100%) diff --git a/src/interfaces/IStateDarkmode.ts b/src/interfaces/IStateDarkmode.ts new file mode 100644 index 0000000..d667ce5 --- /dev/null +++ b/src/interfaces/IStateDarkmode.ts @@ -0,0 +1,4 @@ +export default interface IStateDarkmode { + darkmodeSupported: boolean; + userChoice: string | undefined; +} diff --git a/src/interfaces/IStateDocumentTitle.ts b/src/interfaces/IStateDocumentTitle.ts new file mode 100644 index 0000000..0c87875 --- /dev/null +++ b/src/interfaces/IStateDocumentTitle.ts @@ -0,0 +1,5 @@ +export default interface IStateDocumentTitle { + emoji: string; + titlePrefix: string; + title: string | undefined; +} diff --git a/src/interfaces/IStateHamburger.ts b/src/interfaces/IStateHamburger.ts new file mode 100644 index 0000000..0dd9375 --- /dev/null +++ b/src/interfaces/IStateHamburger.ts @@ -0,0 +1,3 @@ +export default interface IStateHamburger { + open: boolean; +} diff --git a/src/interfaces/IStatePopup.ts b/src/interfaces/IStatePopup.ts new file mode 100644 index 0000000..cdc01a8 --- /dev/null +++ b/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; +} diff --git a/src/interfaces/IStateTorrent.ts b/src/interfaces/IStateTorrent.ts new file mode 100644 index 0000000..d16f4df --- /dev/null +++ b/src/interfaces/IStateTorrent.ts @@ -0,0 +1,6 @@ +import type ITorrent from "./ITorrent"; + +export default interface IStateTorrent { + results: Array; + resultCount: number | null; +} diff --git a/src/interfaces/ITorrent.ts b/src/interfaces/ITorrent.ts new file mode 100644 index 0000000..e51c2a4 --- /dev/null +++ b/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; +} diff --git a/src/modules/darkmodeModule.js b/src/modules/darkmodeModule.js deleted file mode 100644 index c5a600e..0000000 --- a/src/modules/darkmodeModule.js +++ /dev/null @@ -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) - } - } -} diff --git a/src/modules/darkmodeModule.ts b/src/modules/darkmodeModule.ts new file mode 100644 index 0000000..575cf03 --- /dev/null +++ b/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); + } + } +}; diff --git a/src/modules/documentTitle.js b/src/modules/documentTitle.ts similarity index 54% rename from src/modules/documentTitle.js rename to src/modules/documentTitle.ts index 35a782e..37bb5ef 100644 --- a/src/modules/documentTitle.js +++ b/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); } } diff --git a/src/modules/hamburger.js b/src/modules/hamburger.ts similarity index 76% rename from src/modules/hamburger.js rename to src/modules/hamburger.ts index 2c44546..6a67072 100644 --- a/src/modules/hamburger.js +++ b/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 }, diff --git a/src/modules/popup.js b/src/modules/popup.ts similarity index 80% rename from src/modules/popup.js rename to src/modules/popup.ts index a40b7b9..5d3ddde 100644 --- a/src/modules/popup.js +++ b/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, diff --git a/src/modules/torrentModule.js b/src/modules/torrentModule.js deleted file mode 100644 index dbfbd5c..0000000 --- a/src/modules/torrentModule.js +++ /dev/null @@ -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') - } - } -} diff --git a/src/modules/torrentModule.ts b/src/modules/torrentModule.ts new file mode 100644 index 0000000..2f82eac --- /dev/null +++ b/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) => { + 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) { + commit("SET_RESULTS", results); + }, + setResultCount({ commit }, count: number) { + commit("SET_RESULT_COUNT", count); + }, + reset({ commit }) { + commit("RESET"); + } + } +}; diff --git a/src/routes.js b/src/routes.ts similarity index 72% rename from src/routes.js rename to src/routes.ts index 161db6f..4004eaf 100644 --- a/src/routes.js +++ b/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) => { store.dispatch("documentTitle/updateTitle", to.name); const { movie, show, person } = to.query; diff --git a/src/store.js b/src/store.ts similarity index 100% rename from src/store.js rename to src/store.ts