Add typescript support for helper functions (#598)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/598
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/quick-actions/quick-actions.vue

@@ -63,7 +63,7 @@ import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/sto
 import ListModel from '@/models/list'
 import createTask from '@/components/tasks/mixins/createTask'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic'
-import {getHistory} from '@/modules/listHistory'
+import {getHistory} from '../../modules/listHistory'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'

src/main.ts

@@ -2,10 +2,18 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+declare global {
+	interface Window {
+		API_URL: string;
+	}
+}
+
 import {formatDate, formatDateSince} from '@/helpers/time/formatDate'
+// @ts-ignore
 import {VERSION} from './version.json'
 
 // Register the modal
+// @ts-ignore
 import Modal from './components/modal/modal'
 // Add CSS
 import './styles/vikunja.scss'
@@ -80,6 +88,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 import './registerServiceWorker'
 
 // Shortcuts
+// @ts-ignore - no types available
 import vueShortkey from 'vue-shortkey'
 // Mixins
 import message from './message'
@@ -90,6 +99,7 @@ import {getListTitle} from './helpers/getListTitle'
 // Vuex
 import {store} from './store'
 // i18n
+import VueI18n from 'vue-i18n' // types
 import {i18n} from './i18n/setup'
 
 console.info(`Vikunja frontend version ${VERSION}`)
@@ -180,12 +190,15 @@ Vue.directive('focus', focus)
 
 import tooltip from '@/directives/tooltip'
 
+// @ts-ignore
 Vue.directive('tooltip', tooltip)
 
+// @ts-ignore
 import Button from '@/components/input/button'
 
 Vue.component('x-button', Button)
 
+// @ts-ignore
 import Card from '@/components/misc/card'
 
 Vue.component('card', Card)
@@ -193,7 +206,7 @@ Vue.component('card', Card)
 Vue.mixin({
 	methods: {
 		formatDateSince(date) {
-			return formatDateSince(date, (p, params) => this.$t(p, params))
+			return formatDateSince(date, (p: VueI18n.Path, params?: VueI18n.Values) => this.$t(p, params))
 		},
 		formatDate(date) {
 			return formatDate(date, 'PPPPpppp', this.$t('date.locale'))
@@ -202,16 +215,16 @@ Vue.mixin({
 			return formatDate(date, 'PPpp', this.$t('date.locale'))
 		},
 		getNamespaceTitle(n) {
-			return getNamespaceTitle(n, p => this.$t(p))
+			return getNamespaceTitle(n, (p: VueI18n.Path) => this.$t(p))
 		},
 		getListTitle(l) {
-			return getListTitle(l, p => this.$t(p))
+			return getListTitle(l, (p: VueI18n.Path) => this.$t(p))
 		},
 		error(e, actions = []) {
-			return message.error(e, this, p => this.$t(p), actions)
+			return message.error(e, this, (p: VueI18n.Path) => this.$t(p), actions)
 		},
 		success(s, actions = []) {
-			return message.success(s, this, p => this.$t(p), actions)
+			return message.success(s, this, (p: VueI18n.Path) => this.$t(p), actions)
 		},
 		colorIsDark: colorIsDark,
 		setTitle: setTitle,

src/modules/listHistory.test.ts

@@ -26,9 +26,9 @@ test('store list in history', () => {
 })
 
 test('store only the last 5 lists in history', () => {
-	let saved = null
+	let saved: string | null = null
 	Storage.prototype.getItem = jest.fn(() => saved)
-	Storage.prototype.setItem = jest.fn((key, lists) => {
+	Storage.prototype.setItem = jest.fn((key: string, lists: string) => {
 		saved = lists
 	})
 
@@ -42,9 +42,9 @@ test('store only the last 5 lists in history', () => {
 })
 
 test('don\'t store the same list twice', () => {
-	let saved = null
+	let saved: string | null = null
 	Storage.prototype.getItem = jest.fn(() => saved)
-	Storage.prototype.setItem = jest.fn((key, lists) => {
+	Storage.prototype.setItem = jest.fn((key: string, lists: string) => {
 		saved = lists
 	})
 
@@ -53,22 +53,10 @@ test('don\'t store the same list twice', () => {
 	expect(saved).toBe('[{"id":1}]')
 })
 
-test('don\'t store the same list twice with different id types', () => {
-	let saved = null
-	Storage.prototype.getItem = jest.fn(() => saved)
-	Storage.prototype.setItem = jest.fn((key, lists) => {
-		saved = lists
-	})
-
-	saveListToHistory({id: 1})
-	saveListToHistory({id: '1'})
-	expect(saved).toBe('[{"id":1}]')
-})
-
 test('move a list to the beginning when storing it multiple times', () => {
-	let saved = null
+	let saved: string | null = null
 	Storage.prototype.getItem = jest.fn(() => saved)
-	Storage.prototype.setItem = jest.fn((key, lists) => {
+	Storage.prototype.setItem = jest.fn((key: string, lists: string) => {
 		saved = lists
 	})
 

src/modules/listHistory.ts

@@ -1,4 +1,8 @@
-export const getHistory = () => {
+interface ListHistory {
+	id: number;
+}
+
+export function getHistory(): ListHistory[] {
 	const savedHistory = localStorage.getItem('listHistory')
 	if (savedHistory === null) {
 		return []
@@ -7,17 +11,17 @@ export const getHistory = () => {
 	return JSON.parse(savedHistory)
 }
 
-export function saveListToHistory(list) {
+export function saveListToHistory(list: ListHistory) {
 	const history = getHistory()
 
-	list.id = parseInt(list.id)
+	// list.id = parseInt(list.id)
 
 	// Remove the element if it already exists in history, preventing duplicates and essentially moving it to the beginning
-	for (const i in history) {
-		if (history[i].id === list.id) {
+	history.forEach((l, i) => {
+		if (l.id === list.id) {
 			history.splice(i, 1)
 		}
-	}
+	})
 
 	// Add the new list to the beginning of the list
 	history.unshift(list)

src/types/shims-tsx.d.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/types/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

src/views/Home.vue

@@ -46,7 +46,7 @@
 <script>
 import {mapState} from 'vuex'
 import ShowTasks from './tasks/ShowTasks'
-import {getHistory} from '@/modules/listHistory'
+import {getHistory} from '../modules/listHistory'
 import ListCard from '@/components/list/partials/list-card'
 import AddTask from '../components/tasks/add-task'
 

src/views/list/ShowList.vue

@@ -44,7 +44,7 @@ import ListModel from '../../models/list'
 import ListService from '../../services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import {getListView} from '@/helpers/saveListView'
-import {saveListToHistory} from '@/modules/listHistory'
+import {saveListToHistory} from '../../modules/listHistory'
 
 export default {
 	data() {
@@ -93,7 +93,7 @@ export default {
 				return
 			}
 
-			const listData = {id: this.$route.params.listId}
+			const listData = {id: parseInt(this.$route.params.listId)}
 
 			saveListToHistory(listData)