summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.vue6
-rw-r--r--src/components/AddFeed.vue3
-rw-r--r--src/components/Sidebar.vue248
-rw-r--r--src/main.js2
-rw-r--r--src/store/feed.ts21
-rw-r--r--src/store/folder.ts23
-rw-r--r--src/store/index.ts40
-rw-r--r--tests/javascript/unit/components/AddFeed.spec.ts15
-rw-r--r--tests/javascript/unit/components/Explore.spec.ts26
-rw-r--r--tests/javascript/unit/components/Sidebar.spec.ts29
-rw-r--r--tests/javascript/unit/setupStore.ts12
11 files changed, 234 insertions, 191 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
diff --git a/tests/javascript/unit/components/AddFeed.spec.ts b/tests/javascript/unit/components/AddFeed.spec.ts
index a549ffb30..a426f2785 100644
--- a/tests/javascript/unit/components/AddFeed.spec.ts
+++ b/tests/javascript/unit/components/AddFeed.spec.ts
@@ -1,5 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
-import { store, localVue } from '../setupStore'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import AddFeed from 'Components/AddFeed.vue'
@@ -7,7 +6,17 @@ describe('AddFeed.vue', () => {
'use strict'
it('should initialize without showing createNewFolder', () => {
- const wrapper = shallowMount(AddFeed, { localVue, store })
+ const localVue = createLocalVue()
+ const wrapper = shallowMount(AddFeed, {
+ localVue,
+ mocks: {
+ $store: {
+ state: {
+ folders: []
+ }
+ }
+ }
+ })
expect(wrapper.vm.$data.createNewFolder).toBeFalsy
});
diff --git a/tests/javascript/unit/components/Explore.spec.ts b/tests/javascript/unit/components/Explore.spec.ts
index fe547792e..3e24f2890 100644
--- a/tests/javascript/unit/components/Explore.spec.ts
+++ b/tests/javascript/unit/components/Explore.spec.ts
@@ -1,6 +1,5 @@
-import axios from '@nextcloud/axios';
-import { shallowMount } from '@vue/test-utils';
-import { store, localVue } from '../setupStore';
+import axios from '@nextcloud/axios'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
import * as router from '@nextcloud/router';
@@ -9,11 +8,26 @@ import Explore from 'Components/Explore.vue';
jest.mock('@nextcloud/axios');
describe('Explore.vue', () => {
- 'use strict';
+ 'use strict'
+ const localVue = createLocalVue()
+
+
it('should initialize without showing AddFeed Component', () => {
- (axios as any).get.mockResolvedValue({ data: {} });
- (router as any).generateUrl = jest.fn().mockReturnValue('');
+ (axios as any).get.mockResolvedValue({ data: { } })
+ (router as any).generateUrl = jest.fn().mockReturnValue('');
+
+ const wrapper = shallowMount(Explore, {
+ localVue,
+ mocks: {
+ $store: {
+ state: {
+ feeds: [],
+ folders: []
+ }
+ }
+ }
+ })
const wrapper = shallowMount(Explore, { localVue, store });
diff --git a/tests/javascript/unit/components/Sidebar.spec.ts b/tests/javascript/unit/components/Sidebar.spec.ts
index 63b490f0e..5690aac08 100644
--- a/tests/javascript/unit/components/Sidebar.spec.ts
+++ b/tests/javascript/unit/components/Sidebar.spec.ts
@@ -1,5 +1,5 @@
-import { Wrapper, shallowMount } from '@vue/test-utils'
-import { store, localVue } from '../setupStore'
+import { ACTIONS } from '@/store';
+import { Wrapper, shallowMount, createLocalVue } from '@vue/test-utils'
import AppSidebar from 'Components/Sidebar.vue'
@@ -9,7 +9,18 @@ describe('Sidebar.vue', () => {
let wrapper: Wrapper<AppSidebar>;
beforeAll(() => {
- wrapper = shallowMount(AppSidebar, { localVue, store })
+ const localVue = createLocalVue()
+ wrapper = shallowMount(AppSidebar, {
+ localVue,
+ mocks: {
+ $store: {
+ state: {
+ feeds: [],
+ folders: []
+ }
+ }
+ }
+ })
wrapper.vm.$store.dispatch = jest.fn();
})
@@ -20,14 +31,14 @@ describe('Sidebar.vue', () => {
it('should dispatch message to store with folder name to create new folder', () => {
(wrapper.vm as any).newFolder('abc')
- expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('addFolder', { folder: { name: 'abc'} })
+ expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(ACTIONS.ADD_FOLDERS, { folder: { name: 'abc'} })
});
it('should dispatch message to store with folder object on delete folder', () => {
const folder = {};
(wrapper.vm as any).deleteFolder(folder)
- expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('deleteFolder', { folder })
+ expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(ACTIONS.DELETE_FOLDER, { folder })
})
it('should set showAddFeed to true', () => {
@@ -43,4 +54,12 @@ describe('Sidebar.vue', () => {
afterEach(() => {
jest.clearAllMocks();
});
+
+ describe('SideBar State', () => {
+ // it('should return top level nav (folders and feeds without folders)', () => {
+ // const navItems = (wrapper.vm.$options?.computed?.topLevelNav as any)({ feeds: [], folders: [] });
+
+ // console.log(navItems)
+ // })
+ })
})
diff --git a/tests/javascript/unit/setupStore.ts b/tests/javascript/unit/setupStore.ts
deleted file mode 100644
index 074d591ef..000000000
--- a/tests/javascript/unit/setupStore.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// NOTE: This was copied from nextcloud/tasks repo
-import { createLocalVue } from '@vue/test-utils'
-import Vuex from 'vuex'
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-
-const store = new Vuex.Store({
- modules: {
- },
-})
-export { store, localVue }
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-19 01:29:29 +0000