diff options
author | Devlin Junker <devlin.junker@gmail.com> | 2022-11-28 23:52:31 -1000 |
---|---|---|
committer | Benjamin Brahmer <info@b-brahmer.de> | 2022-12-06 14:57:20 +0100 |
commit | 28ead9da95449ad220b137c98e6e19a62e83f184 (patch) | |
tree | 33cda9f1d9dae008073059d6ebbeb558c44469c1 /src | |
parent | c0bc5ecd51f2a9538f30122554319fe47e0c4eaa (diff) |
modularize store files and fix unit tests
Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 6 | ||||
-rw-r--r-- | src/components/AddFeed.vue | 3 | ||||
-rw-r--r-- | src/components/Sidebar.vue | 248 | ||||
-rw-r--r-- | src/main.js | 2 | ||||
-rw-r--r-- | src/store/feed.ts | 21 | ||||
-rw-r--r-- | src/store/folder.ts | 23 | ||||
-rw-r--r-- | src/store/index.ts | 40 |
7 files changed, 178 insertions, 165 deletions
diff --git a/src/App.vue b/src/App.vue index ff6bf6c43..076fed19c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,6 +13,7 @@ import Vue from 'vue' import NcContent from '@nextcloud/vue/dist/Components/NcContent.js' import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import Sidebar from './components/Sidebar.vue' +import { ACTIONS } from './store' export default Vue.extend({ components: { @@ -20,8 +21,9 @@ export default Vue.extend({ Sidebar, NcAppContent, }, - created() { - this.$store.dispatch('loadFolder') + async created() { + await this.$store.dispatch(ACTIONS.FETCH_FOLDERS) + await this.$store.dispatch(ACTIONS.FETCH_FEEDS) }, }) </script> diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue index 757a3a56a..462ab77d1 100644 --- a/src/components/AddFeed.vue +++ b/src/components/AddFeed.vue @@ -115,6 +115,7 @@ import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js' import { Folder } from '../types/Folder' import { Feed } from '../types/Feed' +import { ACTIONS, AppState } from '../store' type AddFeedState = { folder: Folder; @@ -160,7 +161,7 @@ export default Vue.extend({ this.createNewFolder = false }, addFeed() { - this.$store.dispatch('addFeed', { + this.$store.dispatch(ACTIONS.ADD_FEED, { feedReq: { url: this.feed, folder: this.folder, diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index b2e40cd29..cd88369ee 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -5,124 +5,125 @@ button-id="new-feed-button" button-class="icon-add" @click="showShowAddFeed()" /> + <template #list> + <NcAppNavigationNewItem :title="t('news', 'New folder')" + icon="icon-add-folder" + @new-item="newFolder" /> - <NcAppNavigationNewItem :title="t('news', 'New folder')" - icon="icon-add-folder" - @new-item="newFolder" /> + <NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss"> + <template #actions> + <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')"> + t('news','Mark read') + </NcActionButton> + </template> + <template #counter> + <NcCounterBubble>5</NcCounterBubble> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss"> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')"> + t('news','Mark read') + </ActionButton> + </template> + </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> + <template #counter> + <NcCounterBubble>35</NcCounterBubble> + </template> + </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss"> - <template #actions> - <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')"> - t('news','Mark read') - </NcActionButton> - </template> - <template #counter> - <CounterBubble>5</CounterBubble> - </template> - </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss"> - <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')"> - t('news','Mark read') - </ActionButton> - </template> - </NcAppNavigationItem> - <NcAppNavigationItem :title="t('news', 'Starred')" icon="icon-starred"> - <template #counter> - <NcCounterBubble>35</NcCounterBubble> - </template> - </NcAppNavigationItem> + <NcAppNavigationItem v-for="topLevelItem in topLevelNav" + :key="topLevelItem.name" + :title="topLevelItem.name" + icon="icon-folder" + :allow-collapse="true"> + <template #default> + <NcAppNavigationItem v-for="feed in topLevelItem.feeds" + :key="feed.name" + :title="feed.title"> + <template #icon> + <img v-if="feed.faviconLink" + :src="feed.faviconLink" + alt="feedIcon"> + <div v-if="!feed.faviconLink" class="icon-rss" /> + </template> + <template #actions> + <NcActionButton icon="icon-checkmark" + @click="alert('TODO: Mark read')"> + {{ t("news", "Mark read") }} + </NcActionButton> + <NcActionButton icon="icon-pinned" + @click="alert('TODO: Unpin from top')"> + {{ t("news", "Unpin from top") }} + </NcActionButton> + <NcActionButton icon="icon-caret-dark" + @click="alert('TODO: Newest First')"> + {{ t("news", "Newest first") }} + </NcActionButton> + <NcActionButton icon="icon-caret-dark" + @click="alert('TODO: Oldest first')"> + {{ t("news", "Oldest first") }} + </NcActionButton> + <NcActionButton icon="icon-caret-dark" + @click="alert('TODO: Default Order')"> + {{ t("news", "Default order") }} + </NcActionButton> + <NcActionButton icon="icon-full-text-disabled" + @click="alert('TODO: Enable Full Text')"> + {{ t("news", "Enable full text") }} + </NcActionButton> + <NcActionButton icon="icon-full-text-enabled" + @click="alert('TODO: DIsable Full Text')"> + {{ t("news", "Disable full text") }} + </NcActionButton> + <NcActionButton icon="icon-updatemode-default" + @click="alert('TODO: Unread Updated')"> + {{ t("news", "Unread updated") }} + </NcActionButton> + <NcActionButton icon="icon-updatemode-unread" + @click="alert('TOODO: Ignore UPdated')"> + {{ t("news", "Ignore updated") }} + </NcActionButton> + <NcActionButton icon="icon-icon-rss" + @click="alert('TODO: Open Feed URL')"> + {{ t("news", "Open feed URL") }} + </NcActionButton> + <NcActionButton icon="icon-icon-rename" + @click="alert('TODO: Rename')"> + {{ t("news", "Rename") }} + </NcActionButton> + <NcActionButton icon="icon-delete" + @click="alert('TODO: Delete Feed')"> + {{ t("news", "Delete") }} + </NcActionButton> + </template> + </NcAppNavigationItem> + </template> + <template v-if="topLevelItem.feedCount > 0" #counter> + <CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble> + </template> + <template #actions> + <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')"> + {{ t("news", "Mark read") }} + </NcActionButton> + <NcActionButton icon="icon-rename" @click="alert('TODO: Rename')"> + {{ t("news", "Rename") }} + </NcActionButton> + <NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)"> + {{ t("news", "Delete") }} + </NcActionButton> + </template> + </NcAppNavigationItem> - <NcAppNavigationItem v-for="topLevelItem in topLevelNav" - :key="topLevelItem.name" - :title="topLevelItem.name" - icon="icon-folder" - :allow-collapse="true"> - <template #default> - <NcAppNavigationItem v-for="feed in topLevelItem.feeds" - :key="feed.name" - :title="feed.title"> - <template #icon> - <img v-if="feed.faviconLink" - :src="feed.faviconLink" - alt="feedIcon"> - <div v-if="!feed.faviconLink" class="icon-rss" /> - </template> - <template #actions> - <NcActionButton icon="icon-checkmark" - @click="alert('TODO: Mark read')"> - {{ t("news", "Mark read") }} - </NcActionButton> - <NcActionButton icon="icon-pinned" - @click="alert('TODO: Unpin from top')"> - {{ t("news", "Unpin from top") }} - </NcActionButton> - <NcActionButton icon="icon-caret-dark" - @click="alert('TODO: Newest First')"> - {{ t("news", "Newest first") }} - </NcActionButton> - <NcActionButton icon="icon-caret-dark" - @click="alert('TODO: Oldest first')"> - {{ t("news", "Oldest first") }} - </NcActionButton> - <NcActionButton icon="icon-caret-dark" - @click="alert('TODO: Default Order')"> - {{ t("news", "Default order") }} - </NcActionButton> - <NcActionButton icon="icon-full-text-disabled" - @click="alert('TODO: Enable Full Text')"> - {{ t("news", "Enable full text") }} - </NcActionButton> - <NcActionButton icon="icon-full-text-enabled" - @click="alert('TODO: DIsable Full Text')"> - {{ t("news", "Disable full text") }} - </NcActionButton> - <NcActionButton icon="icon-updatemode-default" - @click="alert('TODO: Unread Updated')"> - {{ t("news", "Unread updated") }} - </NcActionButton> - <NcActionButton icon="icon-updatemode-unread" - @click="alert('TOODO: Ignore UPdated')"> - {{ t("news", "Ignore updated") }} - </NcActionButton> - <NcActionButton icon="icon-icon-rss" - @click="alert('TODO: Open Feed URL')"> - {{ t("news", "Open feed URL") }} - </NcActionButton> - <NcActionButton icon="icon-icon-rename" - @click="alert('TODO: Rename')"> - {{ t("news", "Rename") }} - </NcActionButton> - <NcActionButton icon="icon-delete" - @click="alert('TODO: Delete Feed')"> - {{ t("news", "Delete") }} - </NcActionButton> - </template> - </NcAppNavigationItem> - </template> - <template v-if="topLevelItem.feedCount > 0" #counter> - <CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble> - </template> - <template #actions> - <NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')"> - {{ t("news", "Mark read") }} - </NcActionButton> - <NcActionButton icon="icon-rename" @click="alert('TODO: Rename')"> - {{ t("news", "Rename") }} - </NcActionButton> - <NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)"> - {{ t("news", "Delete") }} - </NcActionButton> - </template> - </NcAppNavigationItem> - - <NcAppNavigationItem :title="t('news', 'Explore')" - icon="icon-link" - :to="{ name: 'explore' }"> - <template #counter> - <NcCounterBubble>35</NcCounterBubble> - </template> - </NcAppNavigationItem> + <NcAppNavigationItem :title="t('news', 'Explore')" + icon="icon-link" + :to="{ name: 'explore' }"> + <template #counter> + <NcCounterBubble>35</NcCounterBubble> + </template> + </NcAppNavigationItem> + </template> </NcAppNavigation> </template> @@ -140,7 +141,7 @@ import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' // import { ROUTES } from '../routes.js' -import { ACTIONS, AppState } from '../store/index' +import { ACTIONS, AppState } from '../store' import AddFeed from './AddFeed.vue' @@ -148,11 +149,11 @@ import { Folder } from '../types/Folder' import { Feed } from '../types/Feed' const SideBarState: any = { - topLevelNav(state: AppState): any[] { - const navItems: any[] = state.feeds.filter((feed: Feed) => { + topLevelNav(localState: any, state: AppState): any[] { + let navItems: any[] = state.feeds.filter((feed: Feed) => { return feed.folderId === undefined || feed.folderId === null }) - navItems.concat(state.folders) + navItems = navItems.concat(state.folders) return navItems }, @@ -179,18 +180,17 @@ export default Vue.extend({ ...Vuex.mapState(['feeds', 'folders']), ...Vuex.mapState(SideBarState), }, - async created() { - await this.$store.dispatch(ACTIONS.FETCH_FOLDERS) - await this.$store.dispatch(ACTIONS.FETCH_FEEDS) + created() { + // TODO: ? }, methods: { newFolder(value: string) { const folderName = value.trim() const folder = { name: folderName } - this.$store.dispatch('addFolder', { folder }) + this.$store.dispatch(ACTIONS.ADD_FOLDERS, { folder }) }, deleteFolder(folder: Folder) { - this.$store.dispatch('deleteFolder', { folder }) + this.$store.dispatch(ACTIONS.DELETE_FOLDER, { folder }) // TODO: Reload }, showShowAddFeed() { diff --git a/src/main.js b/src/main.js index 6a3ea3520..6dac8fd5a 100644 --- a/src/main.js +++ b/src/main.js @@ -6,7 +6,7 @@ import Explore from './components/Explore.vue' import { generateUrl } from '@nextcloud/router' import Vuex, { Store } from 'vuex' -import mainStore from './store/index' +import mainStore from './store' import { Tooltip } from '@nextcloud/vue' diff --git a/src/store/feed.ts b/src/store/feed.ts index aaf9a96f0..4269879f9 100644 --- a/src/store/feed.ts +++ b/src/store/feed.ts @@ -13,9 +13,19 @@ export const FEED_ACTION_TYPES = { FETCH_FEEDS: 'FETCH_FEEDS', } +const state = { + feeds: [] +} + +const getters = { + feeds (state: AppState) { + return state.feeds; + }, +} + const feedUrl = generateUrl("/apps/news/feeds") -export const FEED_ACTIONS = { +export const actions = { async [FEED_ACTION_TYPES.FETCH_FEEDS] ({ commit }: ActionParams) { const feeds = await axios.get( generateUrl("/apps/news/feeds") @@ -60,7 +70,7 @@ export const FEED_ACTIONS = { } } -export const FEED_MUTATIONS = { +export const mutations = { [FEED_MUTATION_TYPES.SET_FEEDS] (state: AppState, feeds: Feed[]) { feeds.forEach(it => { state.feeds.push(it) @@ -71,4 +81,11 @@ export const FEED_MUTATIONS = { } }) }, +} + +export default { + state, + getters, + actions, + mutations }
\ No newline at end of file diff --git a/src/store/folder.ts b/src/store/folder.ts index 735676ea0..c7ae93341 100644 --- a/src/store/folder.ts +++ b/src/store/folder.ts @@ -15,10 +15,19 @@ export const FOLDER_ACTION_TYPES = { DELETE_FOLDER: 'DELETE_FOLDER' } +const state = { + folders: [] +} + +const getters = { + folders (state: AppState) { + return state.folders; + }, +} + const folderUrl = generateUrl("/apps/news/folders") -export const FOLDER_ACTIONS = { - +export const actions = { async [FOLDER_ACTION_TYPES.FETCH_FOLDERS] ({ commit }: ActionParams) { const folders = await axios.get( generateUrl("/apps/news/folders") @@ -55,8 +64,9 @@ export const FOLDER_ACTIONS = { } -export const FOLDER_MUTATIONS = { +export const mutations = { [FOLDER_MUTATION_TYPES.SET_FOLDERS] (state: AppState, folders: Folder[]) { + console.log(folders); folders.forEach(it => { it.feedCount = 0 it.feeds = [] @@ -67,4 +77,11 @@ export const FOLDER_MUTATIONS = { const index = state.folders.indexOf(folder); state.folders.splice(index, 1); } +} + +export default { + state, + getters, + actions, + mutations }
\ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index 177e23a94..5d599449b 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,9 +1,9 @@ -import { Commit } from "vuex"; +import { Commit, Store } from "vuex"; import { Folder } from '../types/Folder' import { Feed } from '../types/Feed' -import { FEED_MUTATION_TYPES, FEED_ACTION_TYPES, FEED_MUTATIONS, FEED_ACTIONS } from "./feed"; -import { FOLDER_MUTATION_TYPES, FOLDER_ACTION_TYPES, FOLDER_MUTATIONS, FOLDER_ACTIONS } from "./folder"; +import feeds, { FEED_MUTATION_TYPES, FEED_ACTION_TYPES } from "./feed"; +import folders, { FOLDER_MUTATION_TYPES, FOLDER_ACTION_TYPES } from "./folder"; export const MUTATIONS = { ... FEED_MUTATION_TYPES, @@ -23,34 +23,10 @@ export type AppState = { items: any[]; } -const state: AppState = { - feeds: [], - folders: [], - items: [] -} as AppState - -const getters = { - feeds (state: AppState) { - return state.feeds; - }, - folders (state: AppState) { - return state.folders; - }, -} - -const mutations = { - ... FEED_MUTATIONS, - ... FOLDER_MUTATIONS -} - -const actions = { - ... FEED_ACTIONS, - ... FOLDER_ACTIONS -} export default { - state, - mutations, - actions, - getters -}
\ No newline at end of file + modules: { + feeds, + folders + } +};
\ No newline at end of file |