From af464668b376d862b95094c30e8cf85783ee60e5 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 5 Oct 2022 14:40:31 +0200
Subject: [PATCH] feat: various formatting and type improvements

---
 src/components/home/TheNavigation.vue  |  3 ++-
 src/components/home/contentAuth.vue    |  3 ++-
 src/constants/lists.ts                 |  3 +++
 src/constants/namespaces.ts            |  5 +++++
 src/helpers/getListTitle.ts            |  4 +++-
 src/helpers/getNamespaceTitle.ts       |  8 ++++---
 src/modelTypes/IList.ts                |  2 +-
 src/router/index.ts                    |  1 -
 src/services/abstractService.ts        | 13 ++++++-----
 src/services/backgroundUnsplash.ts     |  2 +-
 src/services/list.ts                   | 25 ++++++++++-----------
 src/stores/base.ts                     |  2 +-
 src/stores/lists.ts                    | 30 ++++++++++++++------------
 src/stores/namespaces.ts               | 20 ++++++++++++-----
 src/views/list/settings/archive.vue    | 14 ++++++++++--
 src/views/list/settings/background.vue |  3 +--
 src/views/list/settings/edit.vue       | 11 ++++------
 17 files changed, 90 insertions(+), 59 deletions(-)
 create mode 100644 src/constants/lists.ts
 create mode 100644 src/constants/namespaces.ts

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 1bda78d3e..3586772ee 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -21,7 +21,7 @@
 			</BaseButton>
 
 			<list-settings-dropdown
-				v-if="canWriteCurrentList && currentList.id !== -1"
+				v-if="canWriteCurrentList && currentList.id !== LIST_ID.FAVORITES"
 				class="list-title-dropdown"
 				:list="currentList"
 			>
@@ -88,6 +88,7 @@
 import {computed} from 'vue'
 
 import {RIGHTS as Rights} from '@/constants/rights'
+import {LIST_ID} from '@/constants/lists'
 
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 02e05be2f..6583b55ea 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -15,7 +15,8 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"></div>
+				:style="{'background-image': background && `url(${background})`}">
+			</div>
 			<navigation class="d-print-none"/>
 			<main
 				class="app-content"
diff --git a/src/constants/lists.ts b/src/constants/lists.ts
new file mode 100644
index 000000000..c242ff1c9
--- /dev/null
+++ b/src/constants/lists.ts
@@ -0,0 +1,3 @@
+export const LIST_ID = {
+	FAVORITES: -1
+} as const
\ No newline at end of file
diff --git a/src/constants/namespaces.ts b/src/constants/namespaces.ts
new file mode 100644
index 000000000..6b9b3567d
--- /dev/null
+++ b/src/constants/namespaces.ts
@@ -0,0 +1,5 @@
+export const NAMESPACE_ID = {
+	SHARED_LIST: -1,
+	FAVORITES: -2,
+	FILTERS: -3,
+} as const;
diff --git a/src/helpers/getListTitle.ts b/src/helpers/getListTitle.ts
index e0e9c22d7..51a19fdf0 100644
--- a/src/helpers/getListTitle.ts
+++ b/src/helpers/getListTitle.ts
@@ -1,8 +1,10 @@
 import {i18n} from '@/i18n'
 import type {IList} from '@/modelTypes/IList'
 
+import {LIST_ID} from '@/constants/lists'
+
 export function getListTitle(l: IList) {
-	if (l.id === -1) {
+	if (l.id === LIST_ID.FAVORITES) {
 		return i18n.global.t('list.pseudo.favorites.title')
 	}
 	return l.title
diff --git a/src/helpers/getNamespaceTitle.ts b/src/helpers/getNamespaceTitle.ts
index 0e31647a4..aab824f5d 100644
--- a/src/helpers/getNamespaceTitle.ts
+++ b/src/helpers/getNamespaceTitle.ts
@@ -1,14 +1,16 @@
 import {i18n} from '@/i18n'
 import type {INamespace} from '@/modelTypes/INamespace'
 
+import {NAMESPACE_ID} from "@/constants/namespaces"
+
 export const getNamespaceTitle = (n: INamespace) => {
-	if (n.id === -1) {
+	if (n.id === NAMESPACE_ID.SHARED_LIST) {
 		return i18n.global.t('namespace.pseudo.sharedLists.title')
 	}
-	if (n.id === -2) {
+	if (n.id === NAMESPACE_ID.FAVORITES) {
 		return i18n.global.t('namespace.pseudo.favorites.title')
 	}
-	if (n.id === -3) {
+	if (n.id === NAMESPACE_ID.FILTERS) {
 		return i18n.global.t('namespace.pseudo.savedFilters.title')
 	}
 	return n.title
diff --git a/src/modelTypes/IList.ts b/src/modelTypes/IList.ts
index 9e0c84e91..dfafb7718 100644
--- a/src/modelTypes/IList.ts
+++ b/src/modelTypes/IList.ts
@@ -16,10 +16,10 @@ export interface IList extends IAbstract {
 	hexColor: string
 	identifier: string
 	backgroundInformation: unknown | null // FIXME: improve type
+	backgroundBlurHash: string
 	isFavorite: boolean
 	subscription: ISubscription
 	position: number
-	backgroundBlurHash: string
 	
 	created: Date
 	updated: Date
diff --git a/src/router/index.ts b/src/router/index.ts
index 1fa329511..d031f34b5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -300,7 +300,6 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
-			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/share',
diff --git a/src/services/abstractService.ts b/src/services/abstractService.ts
index 41d789433..713361362 100644
--- a/src/services/abstractService.ts
+++ b/src/services/abstractService.ts
@@ -2,7 +2,6 @@ import {AuthenticatedHTTPFactory} from '@/helpers/fetcher'
 import type {Method} from 'axios'
 
 import {objectToSnakeCase} from '@/helpers/case'
-import AbstractModel from '@/models/abstractModel'
 import type {IAbstract} from '@/modelTypes/IAbstract'
 import type {Right} from '@/constants/rights'
 
@@ -185,14 +184,14 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
 	 * The modelFactory returns a model from an object.
 	 * This one here is the default one, usually the service definitions for a model will override this.
 	 */
-	modelFactory(data : Partial<Model>) {
-		return data as Model
+	modelFactory(data : Partial<Model> = {}) {
+		return {...data} as Model
 	}
 
 	/**
 	 * This is the model factory for get requests.
 	 */
-	modelGetFactory(data : Partial<Model>) {
+	modelGetFactory(data : Partial<Model> = {}) {
 		return this.modelFactory(data)
 	}
 
@@ -270,7 +269,7 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
 	 * This is a more abstract implementation which only does a get request.
 	 * Services which need more flexibility can use this.
 	 */
-	async getM(url : string, model : Model = new AbstractModel({}), params: Record<string, unknown> = {}) {
+	async getM(url : string, model : Model = this.modelGetFactory(), params: Record<string, unknown> = {}) {
 		const cancel = this.setLoading()
 
 		model = this.beforeGet(model)
@@ -293,7 +292,7 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
 			responseType: 'blob',
 			data,
 		})
-		return window.URL.createObjectURL(new Blob([response.data]))
+		return URL.createObjectURL(new Blob([response.data]))
 	}
 
 	/**
@@ -303,7 +302,7 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
 	 * @param params Optional query parameters
 	 * @param page The page to get
 	 */
-	async getAll(model : Model = new AbstractModel({}), params = {}, page = 1) {
+	async getAll(model : Model = this.modelFactory(), params = {}, page = 1) {
 		if (this.paths.getAll === '') {
 			throw new Error('This model is not able to get data.')
 		}
diff --git a/src/services/backgroundUnsplash.ts b/src/services/backgroundUnsplash.ts
index a39e79637..0378fe0c9 100644
--- a/src/services/backgroundUnsplash.ts
+++ b/src/services/backgroundUnsplash.ts
@@ -25,6 +25,6 @@ export default class BackgroundUnsplashService extends AbstractService<IBackgrou
 			method: 'GET',
 			responseType: 'blob',
 		})
-		return window.URL.createObjectURL(new Blob([response.data]))
+		return URL.createObjectURL(new Blob([response.data]))
 	}
 }
\ No newline at end of file
diff --git a/src/services/list.ts b/src/services/list.ts
index 46f110399..a0f8d45d0 100644
--- a/src/services/list.ts
+++ b/src/services/list.ts
@@ -3,20 +3,21 @@ import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
 
-import {success} from '@/message'
-
-import AbstractService from './abstractService'
-import ListModel from '@/models/list'
-import TaskService from './task'
-import {colorFromHex} from '@/helpers/color/colorFromHex'
-import ListDuplicateModel from '@/models/listDuplicateModel'
-import ListDuplicateService from './listDuplicateService'
+import type {IList} from '@/modelTypes/IList'
+import type {INamespace} from '@/modelTypes/INamespace'
 
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 
-import type {IList} from '@/modelTypes/IList'
-import type {INamespace} from '@/modelTypes/INamespace'
+import AbstractService from '@/services/abstractService'
+import TaskService from '@/services/task'
+import ListDuplicateService from '@/services/listDuplicateService'
+
+import ListModel from '@/models/list'
+import ListDuplicateModel from '@/models/listDuplicateModel'
+
+import {colorFromHex} from '@/helpers/color/colorFromHex'
+import {success} from '@/message'
 
 export default class ListService extends AbstractService<IList> {
 	constructor() {
@@ -48,7 +49,7 @@ export default class ListService extends AbstractService<IList> {
 		return model
 	}
 
-	beforeCreate(list) {
+	beforeCreate(list: IList) {
 		list.hexColor = colorFromHex(list.hexColor)
 		return list
 	}
@@ -70,7 +71,7 @@ export default class ListService extends AbstractService<IList> {
 		const cancel = this.setLoading()
 
 		try {
-			const response = await this.http.delete(`/lists/${list.id}/background`, list)
+			const response = await this.http.delete<IList>(`/lists/${list.id}/background`)
 			return response.data
 		} finally {
 			cancel()
diff --git a/src/stores/base.ts b/src/stores/base.ts
index e59ad45e7..9474cb659 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -4,7 +4,7 @@ import {defineStore, acceptHMRUpdate} from 'pinia'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import ListModel from '@/models/list'
-import ListService from '../services/list'
+import ListService from '@/services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import {useMenuActive} from '@/composables/useMenuActive'
diff --git a/src/stores/lists.ts b/src/stores/lists.ts
index 17db4debf..c7213cbdb 100644
--- a/src/stores/lists.ts
+++ b/src/stores/lists.ts
@@ -1,24 +1,24 @@
 import {watch, reactive, shallowReactive, unref, toRefs, readonly, ref, computed} from 'vue'
+import type {MaybeRef} from '@vueuse/core'
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useI18n} from 'vue-i18n'
 
-import ListService from '@/services/list'
-import {setModuleLoading} from '@/stores/helper'
-import {removeListFromHistory} from '@/modules/listHistory'
-import {createNewIndexer} from '@/indexes'
-import {useNamespaceStore} from './namespaces'
-
 import type {IList} from '@/modelTypes/IList'
 
-import type {MaybeRef} from '@vueuse/core'
+import {LIST_ID} from '@/constants/lists'
+import {NAMESPACE_ID} from "@/constants/namespaces"
 
-import ListModel from '@/models/list'
-import {success} from '@/message'
+import {useNamespaceStore} from '@/stores/namespaces'
 import {useBaseStore} from '@/stores/base'
 
-const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])
+import ListModel from '@/models/list'
+import {removeListFromHistory} from '@/modules/listHistory'
+import ListService from '@/services/list'
+import {setModuleLoading} from '@/stores/helper'
+import {createNewIndexer} from '@/indexes'
+import {success} from '@/message'
 
-const FavoriteListsNamespace = -2
+const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])
 
 export interface ListState {
 	[id: IList['id']]: IList
@@ -35,7 +35,9 @@ export const useListStore = defineStore('list', () => {
 
 
 	const getListById = computed(() => {
-		return (id: IList['id']) => typeof lists.value[id] !== 'undefined' ? lists.value[id] : null
+		return (id: IList['id']) => typeof lists.value[id] !== 'undefined'
+			? lists.value[id]
+			: null
 	})
 
 	const findListByExactname = computed(() => {
@@ -85,7 +87,7 @@ export const useListStore = defineStore('list', () => {
 	function toggleListFavorite(list: IList) {
 		// The favorites pseudo list is always favorite
 		// Archived lists cannot be marked favorite
-		if (list.id === -1 || list.isArchived) {
+		if (list.id === LIST_ID.FAVORITES || list.isArchived) {
 			return
 		}
 		return updateList({
@@ -122,7 +124,7 @@ export const useListStore = defineStore('list', () => {
 			// in order to not create a manipulation in pinia store we have to create a new copy
 			const newList = {
 				...list,
-				namespaceId: FavoriteListsNamespace,
+				namespaceId: NAMESPACE_ID.FAVORITES,
 			}
 			
 			namespaceStore.removeListFromNamespaceById(newList)
diff --git a/src/stores/namespaces.ts b/src/stores/namespaces.ts
index aa35f1606..3d5070f96 100644
--- a/src/stores/namespaces.ts
+++ b/src/stores/namespaces.ts
@@ -1,13 +1,17 @@
 import {computed, readonly, ref} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 
-import NamespaceService from '../services/namespace'
-import {setModuleLoading} from '@/stores/helper'
-import {createNewIndexer} from '@/indexes'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {IList} from '@/modelTypes/IList'
+
+import {NAMESPACE_ID} from "@/constants/namespaces"
+
+import {setModuleLoading} from '@/stores/helper'
 import {useListStore} from '@/stores/lists'
 
+import {createNewIndexer} from '@/indexes'
+import NamespaceService from '@/services/namespace'
+
 const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description'])
 
 export const useNamespaceStore = defineStore('namespace', () => {
@@ -169,14 +173,20 @@ export const useNamespaceStore = defineStore('namespace', () => {
 
 	function loadNamespacesIfFavoritesDontExist() {
 		// The first or second namespace should be the one holding all favorites
-		if (namespaces.value[0].id === -2 || namespaces.value[1]?.id === -2) {
+		if (
+			namespaces.value[0].id === NAMESPACE_ID.FAVORITES ||
+			namespaces.value[1]?.id === NAMESPACE_ID.FAVORITES
+		) {
 			return
 		}
 		return loadNamespaces()
 	}
 
 	function removeFavoritesNamespaceIfEmpty() {
-		if (namespaces.value[0].id === -2 && namespaces.value[0].lists.length === 0) {
+		if (
+			namespaces.value[0].id === NAMESPACE_ID.FAVORITES &&
+			namespaces.value[0].lists.length === 0
+		) {
 			namespaces.value.splice(0, 1)
 		}
 	}
diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index 5295f9641..ce8ed9e71 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -3,10 +3,20 @@
 		@close="$router.back()"
 		@submit="archiveList()"
 	>
-		<template #header><span>{{ list.isArchived ? $t('list.archive.unarchive') : $t('list.archive.archive') }}</span></template>
+		<template #header>
+			<span>{{
+				list.isArchived
+					? $t('list.archive.unarchive')
+					: $t('list.archive.archive')
+			}}</span>
+		</template>
 		
 		<template #text>
-			<p>{{ list.isArchived ? $t('list.archive.unarchiveText') : $t('list.archive.archiveText') }}</p>
+			<p>{{
+				list.isArchived
+					? $t('list.archive.unarchiveText')
+					: $t('list.archive.archiveText')
+			}}</p>
 		</template>
 	</modal>
 </template>
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index b74e037fb..68bb8a4b4 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -183,8 +183,7 @@ async function searchBackgrounds(page = 1) {
 	})
 }
 
-
-async function setBackground(backgroundId: string) {
+async function setBackground(backgroundId: IBackgroundImage['id']) {
 	// Don't set a background if we're in the process of setting one
 	if (backgroundService.loading) {
 		return
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index 6284c5e38..eb3227b8d 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -70,7 +70,7 @@ export default { name: 'list-setting-edit' }
 </script>
 
 <script setup lang="ts">
-import {toRefs, type PropType} from 'vue'
+import type {PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -85,21 +85,18 @@ import {useList} from '@/stores/lists'
 
 import {useTitle} from '@/composables/useTitle'
 
-const props = defineProps<{
-	listId: IList['id']
-}>()
-const {listId} = toRefs(props)
 
 const router = useRouter()
+const baseStore = useBaseStore()
+
 const {t} = useI18n({useScope: 'global'})
 
-const {list, save: saveList, isLoading} = useList(listId)
 
 useTitle(() => list?.title ? t('list.edit.title', {list: list.title}) : '')
 
 async function save() {
 	await saveList()
-	await useBaseStore().handleSetCurrentList({list: list.value})
+	await baseStore.handleSetCurrentList({list})
 	router.back()
 }
 </script>