[Vue Rewrite] Basic Error Handling and Display

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
@@ -59,11 +69,13 @@ export default Vue.extend({
 		},
 		stopVideo() {
 			const videoElements = document.getElementsByTagName('video')
-
 			for (let i = 0; i < videoElements.length; i++) {
 				videoElements[i].pause()
 			}
 		},
+		removeError() {
+			this.$store.commit(MUTATIONS.SET_ERROR, undefined)
+		},
 	},
 })
 </script>
@@ -79,6 +91,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;

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
 		 *

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,23 @@ Vue.directive('tooltip', Tooltip)
 
 const store = new Store(mainStore)
 
+/**
+ * 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)
+}
+
+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 = handleErrors
 export default new Vue({
 	router,
 	store,

src/store/app.ts

@@ -0,0 +1,41 @@
+import { APPLICATION_MUTATION_TYPES } from '../types/MutationTypes'
+
+export const APPLICATION_ACTION_TYPES = {
+	SET_ERROR_MESSAGE: 'SET_ERROR_MESSAGE',
+}
+
+export type AppInfoState = {
+	error?: Error;
+}
+
+const state: AppInfoState = {
+	error: undefined,
+}
+
+const getters = {
+	error(state: AppInfoState) {
+		return state.error
+	},
+}
+
+export const actions = {
+	// async [APPLICATION_ACTION_TYPES...]({ commit }: ActionParams) {
+
+	// },
+}
+
+export const mutations = {
+	[APPLICATION_MUTATION_TYPES.SET_ERROR](
+		state: AppInfoState,
+		error: Error,
+	) {
+		state.error = error
+	},
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations,
+}

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'
@@ -23,18 +23,24 @@ export const FEED_ACTION_TYPES = {
 	FEED_DELETE: 'FEED_DELETE',
 }
 
-const state = {
+export type FeedState = {
+	feeds: Feed[];
+	unreadCount: number;
+}
+
+const state: FeedState = {
 	feeds: [],
+	unreadCount: 0,
 }
 
 const getters = {
-	feeds(state: AppState) {
+	feeds(state: FeedState) {
 		return state.feeds
 	},
 }
 
 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)
@@ -44,7 +50,7 @@ export const actions = {
 	},
 
 	async [FEED_ACTION_TYPES.ADD_FEED](
-		{ commit }: ActionParams,
+		{ commit }: ActionParams<FeedState>,
 		{ feedReq }: {
 			feedReq: {
 				url: string;
@@ -84,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 })
@@ -97,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 })
@@ -106,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 })
@@ -115,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 })
@@ -124,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 })
@@ -133,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 })
@@ -142,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 })
@@ -151,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 })
@@ -169,7 +178,7 @@ export const actions = {
 
 export const mutations = {
 	[FEED_MUTATION_TYPES.SET_FEEDS](
-		state: AppState,
+		state: FeedState,
 		feeds: Feed[],
 	) {
 		feeds.forEach(it => {
@@ -178,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) => {
@@ -195,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) => {
@@ -209,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) => {
@@ -221,7 +230,7 @@ export const mutations = {
 	},
 
 	[FEED_MUTATION_TYPES.FEED_DELETE](
-		state: AppState,
+		state: FeedState,
 		feedId: number,
 	) {
 		state.feeds = state.feeds.filter((feed: Feed) => {