From a7d5ac1594317eeb4b10b3b8b273e59b5c4f98fd Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 4 Oct 2023 14:59:04 -0700
Subject: [PATCH 1/4] display vue errors and axios errors in top right popover

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/App.vue                                   | 26 +++++++++++
 .../feed-display/FeedItemDisplay.vue          | 10 +----
 src/main.js                                   | 16 ++++++-
 src/store/app.ts                              | 43 +++++++++++++++++++
 src/store/index.ts                            |  4 ++
 templates/part.content.warnings.php           |  2 +-
 6 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100644 src/store/app.ts

diff --git a/src/App.vue b/src/App.vue
index 2179ae8e6..cd1e3e06d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,13 @@
 <template>
 	<NcContent app-name="news">
+		<div v-if="app.error" id="warning-box">
+			<div>
+				{{ app.error }}
+			</div>
+			<div>
+				<span style="cursor: pointer;padding: 10px;font-weight: bold;" @click="removeError()">X</span>
+			</div>
+		</div>
 		<div id="news-app">
 			<div id="content-display" :class="{ playing: playingItem }">
 				<Sidebar />
@@ -30,6 +38,7 @@
 <script lang="ts">
 
 import Vue from 'vue'
+import { mapState } from 'vuex'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
@@ -45,6 +54,7 @@ export default Vue.extend({
 		playingItem() {
 			return this.$store.state.items.playingItem
 		},
+		...mapState(['app']),
 	},
 	async created() {
 		// fetch folders and feeds to build side bar
@@ -64,6 +74,9 @@ export default Vue.extend({
 				videoElements[i].pause()
 			}
 		},
+		removeError() {
+			this.$store.commit(MUTATIONS.SET_ERROR, undefined)
+		},
 	},
 })
 </script>
@@ -79,6 +92,19 @@ export default Vue.extend({
 		width: 100%;
 	}
 
+	#warning-box {
+		position: absolute;
+    right: 35px;
+		top: 15px;
+    z-index: 5000;
+		padding: 5px 10px;
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		box-shadow: 0 0 6px 0 var(--color-box-shadow);
+		border-radius: var(--border-radius);
+		display: flex;
+	}
+
 	#content-display {
 		display: flex;
 		flex-direction: row;
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index d1dde278e..8cc23f085 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -150,15 +150,7 @@ export default Vue.extend({
 		formatDate(epoch: number): string {
 			return new Date(epoch).toLocaleString()
 		},
-		/**
-		 * Returns UTC formatted datetime in format recognized by `datetime` property
-		 *
-		 * @param {number} epoch date value in epoch format
-		 * @return {string} UTC formatted datetime string (in format yyyy-MM-ddTHH:mm:ssZ)
-		 */
-		formatDatetime(epoch: number): string {
-			return new Date(epoch).toISOString()
-		},
+
 		/**
 		 * Retrieve the feed by id number
 		 *
diff --git a/src/main.js b/src/main.js
index 571646471..98a56a743 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex, { Store } from 'vuex'
+import axios from '@nextcloud/axios'
 
 import App from './App.vue'
 import router from './routes'
-import mainStore from './store'
+import mainStore, { MUTATIONS } from './store'
 
 import { Tooltip } from '@nextcloud/vue'
 
@@ -20,6 +21,19 @@ Vue.directive('tooltip', Tooltip)
 
 const store = new Store(mainStore)
 
+axios.interceptors.response(undefined /* onSuccessCallback is intentionally undefined */,
+	// Any status codes that falls outside the range of 2xx cause this function to trigger
+	function(error) {
+
+		store.commit(MUTATIONS.SET_ERROR, error)
+		return Promise.reject(error)
+	},
+)
+
+Vue.config.errorHandler = function(err) {
+	store.commit(MUTATIONS.SET_ERROR, err)
+}
+
 export default new Vue({
 	router,
 	store,
diff --git a/src/store/app.ts b/src/store/app.ts
new file mode 100644
index 000000000..928c57c7d
--- /dev/null
+++ b/src/store/app.ts
@@ -0,0 +1,43 @@
+export const APPLICATION_ACTION_TYPES = {
+	SET_ERROR_MESSAGE: 'SET_ERROR_MESSAGE',
+}
+
+export const APPLICATION_MUTATION_TYPES = {
+	SET_ERROR: 'SET_ERROR',
+}
+
+type AppInfoState = {
+	error?: any;
+}
+
+const state: AppInfoState = {
+	error: undefined,
+}
+
+const getters = {
+	error(state: AppInfoState) {
+		return state.error
+	},
+}
+
+export const actions = {
+	// async [APPLICATION_ACTION_TYPES.SET_ERROR_MESSAGE]({ commit }: ActionParams) {
+
+	// },
+}
+
+export const mutations = {
+	[APPLICATION_MUTATION_TYPES.SET_ERROR](
+		state: AppInfoState,
+		error: any,
+	) {
+		state.error = error
+	},
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations,
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index aee0d7441..34fae2831 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,14 +4,17 @@ import feeds, { FEED_ACTION_TYPES } from './feed'
 import folders, { FOLDER_ACTION_TYPES } from './folder'
 import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
 import items, { FEED_ITEM_ACTION_TYPES, ItemState } from './item'
+import app, { APPLICATION_ACTION_TYPES, APPLICATION_MUTATION_TYPES } from './app'
 
 export const MUTATIONS = {
+	...APPLICATION_MUTATION_TYPES,
 	...FEED_MUTATION_TYPES,
 	...FOLDER_MUTATION_TYPES,
 	...FEED_ITEM_MUTATION_TYPES,
 }
 
 export const ACTIONS = {
+	...APPLICATION_ACTION_TYPES,
 	...FEED_ACTION_TYPES,
 	...FOLDER_ACTION_TYPES,
 	...FEED_ITEM_ACTION_TYPES,
@@ -30,5 +33,6 @@ export default {
 		feeds,
 		folders,
 		items,
+		app,
 	},
 }
diff --git a/templates/part.content.warnings.php b/templates/part.content.warnings.php
index b791de024..5ee0d85ce 100644
--- a/templates/part.content.warnings.php
+++ b/templates/part.content.warnings.php
@@ -3,7 +3,7 @@
         #cron-warning {
             position: absolute;
             right: 30px;
-            top: 40px;
+            top: 120px;
             z-index: 5;
             padding: 5px;
             background-color: var(--color-main-background);

From eb773d25c1e360af1396d902d6978c17e503f822 Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 4 Oct 2023 15:16:48 -0700
Subject: [PATCH 2/4] cleanup

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/store/app.ts           | 12 +++++-------
 src/store/index.ts         |  4 ++--
 src/types/MutationTypes.ts |  4 ++++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/store/app.ts b/src/store/app.ts
index 928c57c7d..5b7f4c8dc 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -1,13 +1,11 @@
+import { APPLICATION_MUTATION_TYPES } from '../types/MutationTypes'
+
 export const APPLICATION_ACTION_TYPES = {
 	SET_ERROR_MESSAGE: 'SET_ERROR_MESSAGE',
 }
 
-export const APPLICATION_MUTATION_TYPES = {
-	SET_ERROR: 'SET_ERROR',
-}
-
 type AppInfoState = {
-	error?: any;
+	error?: Error;
 }
 
 const state: AppInfoState = {
@@ -21,7 +19,7 @@ const getters = {
 }
 
 export const actions = {
-	// async [APPLICATION_ACTION_TYPES.SET_ERROR_MESSAGE]({ commit }: ActionParams) {
+	// async [APPLICATION_ACTION_TYPES...]({ commit }: ActionParams) {
 
 	// },
 }
@@ -29,7 +27,7 @@ export const actions = {
 export const mutations = {
 	[APPLICATION_MUTATION_TYPES.SET_ERROR](
 		state: AppInfoState,
-		error: any,
+		error: Error,
 	) {
 		state.error = error
 	},
diff --git a/src/store/index.ts b/src/store/index.ts
index 34fae2831..2eea645d9 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,9 +2,9 @@ import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 import feeds, { FEED_ACTION_TYPES } from './feed'
 import folders, { FOLDER_ACTION_TYPES } from './folder'
-import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
+import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES, APPLICATION_MUTATION_TYPES } from '../types/MutationTypes'
 import items, { FEED_ITEM_ACTION_TYPES, ItemState } from './item'
-import app, { APPLICATION_ACTION_TYPES, APPLICATION_MUTATION_TYPES } from './app'
+import app, { APPLICATION_ACTION_TYPES } from './app'
 
 export const MUTATIONS = {
 	...APPLICATION_MUTATION_TYPES,
diff --git a/src/types/MutationTypes.ts b/src/types/MutationTypes.ts
index b427821cd..a6cf3478e 100644
--- a/src/types/MutationTypes.ts
+++ b/src/types/MutationTypes.ts
@@ -31,3 +31,7 @@ export const FEED_ITEM_MUTATION_TYPES = {
 	SET_ALL_LOADED: 'SET_ALL_LOADED',
 	SET_LAST_ITEM_LOADED: 'SET_LAST_ITEM_LOADED',
 }
+
+export const APPLICATION_MUTATION_TYPES = {
+	SET_ERROR: 'SET_ERROR',
+}

From 0f4cb7d9188b667e9fbb18dd4e5756bc4e35d39c Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Thu, 5 Oct 2023 10:27:26 -0700
Subject: [PATCH 3/4] tests and some cleanup

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/App.vue                                   |  1 -
 src/main.js                                   | 24 ++++++++++-------
 src/store/app.ts                              |  2 +-
 src/store/feed.ts                             |  8 ++++--
 src/store/folder.ts                           |  8 ++++--
 src/store/index.ts                            | 13 +++-------
 tests/javascript/unit/components/App.spec.ts  |  9 +++++++
 .../feed-display/FeedItemDisplay.spec.ts      |  7 -----
 tests/javascript/unit/store/app.spec.ts       | 26 +++++++++++++++++++
 9 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 tests/javascript/unit/store/app.spec.ts

diff --git a/src/App.vue b/src/App.vue
index cd1e3e06d..9f877a6c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,7 +69,6 @@ export default Vue.extend({
 		},
 		stopVideo() {
 			const videoElements = document.getElementsByTagName('video')
-
 			for (let i = 0; i < videoElements.length; i++) {
 				videoElements[i].pause()
 			}
diff --git a/src/main.js b/src/main.js
index 98a56a743..9a70d470f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,19 +21,23 @@ Vue.directive('tooltip', Tooltip)
 
 const store = new Store(mainStore)
 
-axios.interceptors.response(undefined /* onSuccessCallback is intentionally undefined */,
-	// Any status codes that falls outside the range of 2xx cause this function to trigger
-	function(error) {
+/**
+ * Handles errors returned during application runtime
+ *
+ * @param {Error} error Error thrown
+ * @return Promise<Error>
+ */
+const handleErrors = function(error) {
+	store.commit(MUTATIONS.SET_ERROR, error)
+	return Promise.reject(error)
+}
 
-		store.commit(MUTATIONS.SET_ERROR, error)
-		return Promise.reject(error)
-	},
+axios.interceptors.response.use(undefined /* onSuccessCallback is intentionally undefined (triggers on 2xx responses) */,
+	// Any status codes that falls outside the range of 2xx cause this function to trigger
+	handleErrors,
 )
 
-Vue.config.errorHandler = function(err) {
-	store.commit(MUTATIONS.SET_ERROR, err)
-}
-
+Vue.config.errorHandler = handleErrors
 export default new Vue({
 	router,
 	store,
diff --git a/src/store/app.ts b/src/store/app.ts
index 5b7f4c8dc..2b470c946 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -4,7 +4,7 @@ export const APPLICATION_ACTION_TYPES = {
 	SET_ERROR_MESSAGE: 'SET_ERROR_MESSAGE',
 }
 
-type AppInfoState = {
+export type AppInfoState = {
 	error?: Error;
 }
 
diff --git a/src/store/feed.ts b/src/store/feed.ts
index 9fea76a72..2a62ff5fe 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -23,12 +23,16 @@ export const FEED_ACTION_TYPES = {
 	FEED_DELETE: 'FEED_DELETE',
 }
 
-const state = {
+export type FeedState = {
+	feeds: Feed[]
+}
+
+const state: FeedState = {
 	feeds: [],
 }
 
 const getters = {
-	feeds(state: AppState) {
+	feeds(state: FeedState) {
 		return state.feeds
 	},
 }
diff --git a/src/store/folder.ts b/src/store/folder.ts
index 680eab097..d125c5b99 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -14,12 +14,16 @@ export const FOLDER_ACTION_TYPES = {
 	FOLDER_SET_NAME: 'FOLDER_SET_NAME',
 }
 
-const state = {
+export type FolderState = {
+	folders: Folder[]
+}
+
+const state: FolderState = {
 	folders: [],
 }
 
 const getters = {
-	folders(state: AppState) {
+	folders(state: FolderState) {
 		return state.folders
 	},
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 2eea645d9..44f933740 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,8 @@
-import { Folder } from '../types/Folder'
-import { Feed } from '../types/Feed'
-import feeds, { FEED_ACTION_TYPES } from './feed'
-import folders, { FOLDER_ACTION_TYPES } from './folder'
 import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES, APPLICATION_MUTATION_TYPES } from '../types/MutationTypes'
+import feeds, { FEED_ACTION_TYPES, FeedState } from './feed'
+import folders, { FOLDER_ACTION_TYPES, FolderState } from './folder'
 import items, { FEED_ITEM_ACTION_TYPES, ItemState } from './item'
-import app, { APPLICATION_ACTION_TYPES } from './app'
+import app, { APPLICATION_ACTION_TYPES, AppInfoState } from './app'
 
 export const MUTATIONS = {
 	...APPLICATION_MUTATION_TYPES,
@@ -20,10 +18,7 @@ export const ACTIONS = {
 	...FEED_ITEM_ACTION_TYPES,
 }
 
-export type AppState = {
-  feeds: Feed[];
-  folders: Folder[];
-} & ItemState;
+export type AppState = FolderState & FeedState & ItemState & AppInfoState;
 
 type Func = (name: string, value: unknown) => void;
 export type ActionParams = { commit: Func; dispatch: Func; state: AppState };
diff --git a/tests/javascript/unit/components/App.spec.ts b/tests/javascript/unit/components/App.spec.ts
index 135b41d40..f1c4096b9 100644
--- a/tests/javascript/unit/components/App.spec.ts
+++ b/tests/javascript/unit/components/App.spec.ts
@@ -19,6 +19,9 @@ describe('FeedItemDisplay.vue', () => {
 						items: {
 							playingItem: undefined,
 						},
+						app: {
+							error: undefined,
+						},
 					},
 					dispatch: dispatchStub,
 					commit: commitStub,
@@ -46,4 +49,10 @@ describe('FeedItemDisplay.vue', () => {
 
 		expect(pauseStub).toBeCalled()
 	})
+
+	it('should remove app state error with commit and undefined', () => {
+		(wrapper.vm as any).removeError()
+
+		expect(commitStub).toBeCalledWith(MUTATIONS.SET_ERROR, undefined)
+	})
 })
diff --git a/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts b/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
index 7d60d4a01..81c171114 100644
--- a/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
+++ b/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
@@ -59,13 +59,6 @@ describe('FeedItemDisplay.vue', () => {
 		expect(formattedDate).toEqual(new Date(epoch).toLocaleString())
 	})
 
-	it('should format datetime to match international standard', () => {
-		const epoch = Date.now() // Provide an epoch timestamp
-		const formattedDate = (wrapper.vm as any).formatDatetime(epoch)
-
-		expect(formattedDate).toEqual(new Date(epoch).toISOString())
-	})
-
 	it('should retrieve feed by ID', () => {
 		const feed = (wrapper.vm as any).getFeed(mockFeed.id)
 
diff --git a/tests/javascript/unit/store/app.spec.ts b/tests/javascript/unit/store/app.spec.ts
new file mode 100644
index 000000000..a083db3f0
--- /dev/null
+++ b/tests/javascript/unit/store/app.spec.ts
@@ -0,0 +1,26 @@
+import { AppInfoState, mutations } from '../../../../src/store/app'
+import { APPLICATION_MUTATION_TYPES } from '../../../../src/types/MutationTypes'
+
+jest.mock('@nextcloud/router')
+
+describe('app.ts', () => {
+	'use strict'
+
+	// describe('actions', () => {
+
+	// })
+
+	describe('mutations', () => {
+		it('SET_ERROR should update the error in the state', () => {
+			const state = { error: undefined } as AppInfoState
+
+			const error = { message: 'test err' };
+
+			(mutations[APPLICATION_MUTATION_TYPES.SET_ERROR] as any)(state, error)
+			expect(state.error).toEqual(error);
+
+			(mutations[APPLICATION_MUTATION_TYPES.SET_ERROR] as any)(state, undefined)
+			expect(state.error).toEqual(undefined)
+		})
+	})
+})

From c095e2963ac9ac0e6d0e163d6c952749883b857a Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Thu, 5 Oct 2023 10:33:31 -0700
Subject: [PATCH 4/4] make ActionParams generic to make it clear what is
 available in each vuex file

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/store/feed.ts   | 41 +++++++++++++++++++++++------------------
 src/store/folder.ts | 24 ++++++++++++------------
 src/store/index.ts  |  2 +-
 src/store/item.ts   | 34 ++++++++++++++++++++++------------
 4 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/src/store/feed.ts b/src/store/feed.ts
index 2a62ff5fe..d3f1d8975 100644
--- a/src/store/feed.ts
+++ b/src/store/feed.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 
-import { ActionParams, AppState } from '../store'
+import { ActionParams } from '../store'
 import { Feed } from '../types/Feed'
 import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
 import { FolderService } from '../dataservices/folder.service'
@@ -24,11 +24,13 @@ export const FEED_ACTION_TYPES = {
 }
 
 export type FeedState = {
-	feeds: Feed[]
+	feeds: Feed[];
+	unreadCount: number;
 }
 
 const state: FeedState = {
 	feeds: [],
+	unreadCount: 0,
 }
 
 const getters = {
@@ -38,7 +40,7 @@ const getters = {
 }
 
 export const actions = {
-	async [FEED_ACTION_TYPES.FETCH_FEEDS]({ commit }: ActionParams) {
+	async [FEED_ACTION_TYPES.FETCH_FEEDS]({ commit }: ActionParams<FeedState>) {
 		const feeds = await FeedService.fetchAllFeeds()
 
 		commit(FEED_MUTATION_TYPES.SET_FEEDS, feeds.data.feeds)
@@ -48,7 +50,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.ADD_FEED](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feedReq }: {
 			feedReq: {
 				url: string;
@@ -88,7 +90,10 @@ export const actions = {
 		}
 	},
 
-	async [FEED_ACTION_TYPES.FEED_MARK_READ]({ commit }: ActionParams, { feed }: { feed: Feed }) {
+	async [FEED_ACTION_TYPES.FEED_MARK_READ](
+		{ commit }: ActionParams<FeedState>,
+		{ feed }: { feed: Feed },
+	) {
 		// want to fetch feed so that we can retrieve the "highestItemId"
 		const response = await ItemService.fetchFeedItems(feed.id as number)
 		await FeedService.markRead({ feedId: feed.id as number, highestItemId: response.data.items[0].id })
@@ -101,7 +106,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_SET_PINNED](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feed, pinned }: { feed: Feed, pinned: boolean },
 	) {
 		await FeedService.updateFeed({ feedId: feed.id as number, pinned })
@@ -110,7 +115,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_SET_ORDERING](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feed, ordering }: { feed: Feed, ordering: FEED_ORDER },
 	) {
 		await FeedService.updateFeed({ feedId: feed.id as number, ordering })
@@ -119,7 +124,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_SET_FULL_TEXT](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feed, fullTextEnabled }: { feed: Feed, fullTextEnabled: boolean },
 	) {
 		await FeedService.updateFeed({ feedId: feed.id as number, fullTextEnabled })
@@ -128,7 +133,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_SET_UPDATE_MODE](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		 { feed, updateMode }: { feed: Feed, updateMode: FEED_UPDATE_MODE },
 	) {
 		await FeedService.updateFeed({ feedId: feed.id as number, updateMode })
@@ -137,7 +142,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_SET_TITLE](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feed, title }: { feed: Feed, title: string },
 	) {
 		await FeedService.updateFeed({ feedId: feed.id as number, title })
@@ -146,7 +151,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.FEED_DELETE](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feed }: { feed: Feed },
 	) {
 		await FeedService.deleteFeed({ feedId: feed.id as number })
@@ -155,7 +160,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.MODIFY_FEED_UNREAD_COUNT](
-		{ commit, state }: ActionParams,
+		{ commit, state }: ActionParams<FeedState>,
 		 { feedId, delta }: { feedId: number, delta: number },
 	) {
 		commit(FEED_MUTATION_TYPES.MODIFY_FEED_UNREAD_COUNT, { feedId, delta })
@@ -173,7 +178,7 @@ export const actions = {
 
 export const mutations = {
 	[FEED_MUTATION_TYPES.SET_FEEDS](
-		state: AppState,
+		state: FeedState,
 		feeds: Feed[],
 	) {
 		feeds.forEach(it => {
@@ -182,14 +187,14 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.ADD_FEED](
-		state: AppState,
+		state: FeedState,
 		 feed: Feed,
 	) {
 		state.feeds.push(feed)
 	},
 
 	[FEED_MUTATION_TYPES.UPDATE_FEED](
-		state: AppState,
+		state: FeedState,
 		 newFeed: Feed,
 	) {
 		const feed = state.feeds.find((feed: Feed) => {
@@ -199,7 +204,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.SET_FEED_ALL_READ](
-		state: AppState,
+		state: FeedState,
 		feed: Feed,
 	) {
 		const priorFeed = state.feeds.find((stateFeed: Feed) => {
@@ -213,7 +218,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.MODIFY_FEED_UNREAD_COUNT](
-		state: AppState,
+		state: FeedState,
 		{ feedId, delta }: { feedId: number, delta: number },
 	) {
 		const feed = state.feeds.find((feed: Feed) => {
@@ -225,7 +230,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.FEED_DELETE](
-		state: AppState,
+		state: FeedState,
 		feedId: number,
 	) {
 		state.feeds = state.feeds.filter((feed: Feed) => {
diff --git a/src/store/folder.ts b/src/store/folder.ts
index d125c5b99..16c1c7f7c 100644
--- a/src/store/folder.ts
+++ b/src/store/folder.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 
-import { AppState, ActionParams } from '../store'
+import { ActionParams } from '../store'
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES } from '../types/MutationTypes'
@@ -29,27 +29,27 @@ const getters = {
 }
 
 export const actions = {
-	async [FOLDER_ACTION_TYPES.FETCH_FOLDERS]({ commit }: ActionParams) {
+	async [FOLDER_ACTION_TYPES.FETCH_FOLDERS]({ commit }: ActionParams<FolderState>) {
 		const folders = await FolderService.fetchAllFolders()
 
 		commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, folders.data.folders)
 	},
 	async [FOLDER_ACTION_TYPES.ADD_FOLDERS](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FolderState>,
 		{ folder }: { folder: Folder },
 	) {
 		const response = await FolderService.createFolder({ name: folder.name })
 		commit(FOLDER_MUTATION_TYPES.SET_FOLDERS, response.data.folders)
 	},
 	async [FOLDER_ACTION_TYPES.DELETE_FOLDER](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FolderState>,
 		{ folder }: { folder: Folder },
 	) {
 		await FolderService.deleteFolder({ id: folder.id })
 		commit(FOLDER_MUTATION_TYPES.DELETE_FOLDER, folder)
 	},
 	async [FOLDER_ACTION_TYPES.FOLDER_SET_NAME](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FolderState>,
 		{ folder, name }: { folder: Folder, name: string },
 	) {
 		await FolderService.renameFolder({ id: folder.id, name })
@@ -59,7 +59,7 @@ export const actions = {
 
 export const mutations = {
 	[FOLDER_MUTATION_TYPES.SET_FOLDERS](
-		state: AppState,
+		state: FolderState,
 		folders: Folder[],
 	) {
 		folders.forEach(it => {
@@ -70,7 +70,7 @@ export const mutations = {
 	},
 
 	[FOLDER_MUTATION_TYPES.DELETE_FOLDER](
-		state: AppState,
+		state: FolderState,
 		folder: Folder,
 	) {
 		const index = state.folders.indexOf(folder)
@@ -78,7 +78,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.SET_FEEDS](
-		state: AppState,
+		state: FolderState,
 		feeds: Feed[],
 	) {
 		feeds.forEach(it => {
@@ -91,7 +91,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.ADD_FEED](
-		state: AppState,
+		state: FolderState,
 		feed: Feed,
 	) {
 		const folder = state.folders.find((folder: Folder) => { return folder.id === feed.folderId })
@@ -102,7 +102,7 @@ export const mutations = {
 	},
 
 	[FOLDER_MUTATION_TYPES.UPDATE_FOLDER](
-		state: AppState,
+		state: FolderState,
 		newFolder: Folder,
 	) {
 		const folder = state.folders.find((f: Folder) => { return f.id === newFolder.id })
@@ -112,7 +112,7 @@ export const mutations = {
 	},
 
 	[FOLDER_MUTATION_TYPES.MODIFY_FOLDER_UNREAD_COUNT](
-		state: AppState,
+		state: FolderState,
 		{ folderId, delta }: {folderId: number; delta: number },
 	) {
 		const folder = state.folders.find((f: Folder) => { return f.id === folderId })
@@ -122,7 +122,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.SET_FEED_ALL_READ](
-		state: AppState,
+		state: FolderState,
 		feed: Feed,
 	) {
 		const folder = state.folders.find((folder: Folder) => { return folder.id === feed.folderId })
diff --git a/src/store/index.ts b/src/store/index.ts
index 44f933740..26bf4e571 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,7 +21,7 @@ export const ACTIONS = {
 export type AppState = FolderState & FeedState & ItemState & AppInfoState;
 
 type Func = (name: string, value: unknown) => void;
-export type ActionParams = { commit: Func; dispatch: Func; state: AppState };
+export type ActionParams<T> = { commit: Func; dispatch: Func; state: T };
 
 export default {
 	modules: {
diff --git a/src/store/item.ts b/src/store/item.ts
index 508b5c919..4d714305e 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -71,7 +71,7 @@ export const actions = {
 	 * @param param1.start
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_UNREAD](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ start }: { start: number } = { start: 0 },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'unread', fetching: true })
@@ -98,7 +98,7 @@ export const actions = {
 	 * @param param1.start
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_ITEMS](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ start }: { start: number } = { start: 0 },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'all', fetching: true })
@@ -127,7 +127,7 @@ export const actions = {
 	 * @param param1.start
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_STARRED](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ start }: { start: number } = { start: 0 },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'starred', fetching: true })
@@ -158,7 +158,7 @@ export const actions = {
 	 * @param param1.feedId
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_FEED_ITEMS](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ feedId, start }: { feedId: number; start: number },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'feed-' + feedId, fetching: true })
@@ -185,7 +185,7 @@ export const actions = {
 	 * @param param1.folderId
 	 */
 	async [FEED_ITEM_ACTION_TYPES.FETCH_FOLDER_FEED_ITEMS](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ folderId, start }: { folderId: number; start: number },
 	) {
 		commit(FEED_ITEM_MUTATION_TYPES.SET_FETCHING, { key: 'folder-' + folderId, fetching: true })
@@ -212,7 +212,7 @@ export const actions = {
 	 * @param param1.item
 	 */
 	[FEED_ITEM_ACTION_TYPES.MARK_READ](
-		{ commit, dispatch }: ActionParams,
+		{ commit, dispatch }: ActionParams<ItemState>,
 		{ item }: { item: FeedItem },
 	) {
 		ItemService.markRead(item, true)
@@ -236,7 +236,7 @@ export const actions = {
 	 * @param param1.item
 	 */
 	[FEED_ITEM_ACTION_TYPES.MARK_UNREAD](
-		{ commit, dispatch }: ActionParams,
+		{ commit, dispatch }: ActionParams<ItemState>,
 		{ item }: { item: FeedItem},
 	) {
 		ItemService.markRead(item, false)
@@ -259,7 +259,7 @@ export const actions = {
 	 * @param param1.item
 	 */
 	[FEED_ITEM_ACTION_TYPES.STAR_ITEM](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ item }: { item: FeedItem},
 	) {
 		ItemService.markStarred(item, true)
@@ -278,7 +278,7 @@ export const actions = {
 	 * @param param1.item
 	 */
 	[FEED_ITEM_ACTION_TYPES.UNSTAR_ITEM](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<ItemState>,
 		{ item }: { item: FeedItem},
 	) {
 		ItemService.markStarred(item, false)
@@ -290,14 +290,24 @@ export const actions = {
 }
 
 export const mutations = {
-	[FEED_ITEM_MUTATION_TYPES.SET_SELECTED_ITEM](state: ItemState, { id }: { id: string }) {
+	[FEED_ITEM_MUTATION_TYPES.SET_SELECTED_ITEM](
+		state: ItemState,
+		{ id }: { id: string },
+	) {
 		state.selectedId = id
 	},
-	[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state: ItemState, item?: FeedItem) {
+
+	[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](
+		state: ItemState,
+		item?: FeedItem,
+	) {
 		state.playingItem = item
 	},
 
-	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](state: ItemState, items: FeedItem[]) {
+	[FEED_ITEM_MUTATION_TYPES.SET_ITEMS](
+		state: ItemState,
+		items: FeedItem[],
+	) {
 		if (items) {
 			items.forEach(it => {
 				if (state.allItems.find((existing: FeedItem) => existing.id === it.id) === undefined) {