diff options
author | Devlin Junker <devlin.junker@gmail.com> | 2023-10-10 13:46:40 -0700 |
---|---|---|
committer | Devlin Junker <devlin.junker@gmail.com> | 2023-10-10 13:46:40 -0700 |
commit | dff06a4225a72ab4e926c56413ee8f883261fe2d (patch) | |
tree | 19437dc57af76090fa683ad7777b01e8e668f7a9 /src | |
parent | f576eb4e5445b5908125ec49b2327c9cdb1ab45d (diff) | |
parent | 60f319fe8aec339a26fb287fff94d6ab4a544795 (diff) |
Merge branch 'vue-rewrite' into mobile-friendly-styles
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 27 | ||||
-rw-r--r-- | src/components/feed-display/FeedItemDisplay.vue | 10 | ||||
-rw-r--r-- | src/main.js | 20 | ||||
-rw-r--r-- | src/store/app.ts | 41 | ||||
-rw-r--r-- | src/store/feed.ts | 47 | ||||
-rw-r--r-- | src/store/folder.ts | 32 | ||||
-rw-r--r-- | src/store/index.ts | 19 | ||||
-rw-r--r-- | src/store/item.ts | 34 | ||||
-rw-r--r-- | src/types/MutationTypes.ts | 4 |
9 files changed, 168 insertions, 66 deletions
diff --git a/src/App.vue b/src/App.vue index 641ddc8fe..c78609414 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 @@ -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; + } + .route-container { height: 100%; } diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue index efe14a3b4..244bf7919 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..9a70d470f 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,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, diff --git a/src/store/app.ts b/src/store/app.ts new file mode 100644 index 000000000..2b470c946 --- /dev/null +++ b/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, +} diff --git a/src/store/feed.ts b/src/store/feed.ts index 9fea76a72..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' @@ -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) => { diff --git a/src/store/folder.ts b/src/store/folder.ts index 680eab097..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' @@ -14,38 +14,42 @@ 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 }, } 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 }) @@ -55,7 +59,7 @@ export const actions = { export const mutations = { [FOLDER_MUTATION_TYPES.SET_FOLDERS]( - state: AppState, + state: FolderState, folders: Folder[], ) { folders.forEach(it => { @@ -66,7 +70,7 @@ export const mutations = { }, [FOLDER_MUTATION_TYPES.DELETE_FOLDER]( - state: AppState, + state: FolderState, folder: Folder, ) { const index = state.folders.indexOf(folder) @@ -74,7 +78,7 @@ export const mutations = { }, [FEED_MUTATION_TYPES.SET_FEEDS]( - state: AppState, + state: FolderState, feeds: Feed[], ) { feeds.forEach(it => { @@ -87,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 }) @@ -98,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 }) @@ -108,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 }) @@ -118,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 aee0d7441..26bf4e571 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,34 +1,33 @@ -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 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, AppInfoState } 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, } -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 }; +export type ActionParams<T> = { commit: Func; dispatch: Func; state: T }; export default { modules: { feeds, folders, items, + app, }, } 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) { 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', +} |