moved store to separate file and started using constants for action/mutation names

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

6 files changed, 219 insertions, 124 deletions

diff --git a/src/components/AddFeed.vue b/src/components/AddFeed.vue
index 5d50b7b4e..cd5e60fe2 100644
--- a/src/components/AddFeed.vue
+++ b/src/components/AddFeed.vue
@@ -139,7 +139,7 @@ export default Vue.extend({
 	},
 	data: (): AddFeedState => {
 		return {
-			folder: { name: '' },
+			folder: { name: '' } as any,
 			autoDiscover: true,
 			createNewFolder: false,
 			withBasicAuth: false,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b9c0c8458..95ace9064 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -13,7 +13,7 @@
 
 			<NcAppNavigationItem :title="t('news', 'Unread articles')" icon="icon-rss">
 				<template #actions>
-					<NcActionButton icon="icon-checkmark" @click="alert('Edit')">
+					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark Read')">
 						t('news','Mark read')
 					</NcActionButton>
 				</template>
@@ -23,7 +23,7 @@
 			</NcAppNavigationItem>
 			<NcAppNavigationItem :title="t('news', 'All articles')" icon="icon-rss">
 				<template #actions>
-					<ActionButton icon="icon-checkmark" @click="alert('Edit')">
+					<ActionButton icon="icon-checkmark" @click="alert('TODO: Edit')">
 						t('news','Mark read')
 					</ActionButton>
 				</template>
@@ -34,13 +34,13 @@
 				</template>
 			</NcAppNavigationItem>
 
-			<NcAppNavigationItem v-for="folder in folders"
-				:key="folder.name"
-				:title="folder.name"
+			<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 folder.feeds"
+					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
 						:key="feed.name"
 						:title="feed.title">
 						<template #icon>
@@ -50,64 +50,68 @@
 							<div v-if="!feed.faviconLink" class="icon-rss" />
 						</template>
 						<template #actions>
-							<NcActionButton icon="icon-checkmark" @click="alert('Mark read')">
+							<NcActionButton icon="icon-checkmark"
+								@click="alert('TODO: Mark read')">
 								{{ t("news", "Mark read") }}
 							</NcActionButton>
-							<NcActionButton icon="icon-pinned" @click="alert('Rename')">
+							<NcActionButton icon="icon-pinned"
+								@click="alert('TODO: Unpin from top')">
 								{{ t("news", "Unpin from top") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-caret-dark"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Newest First')">
 								{{ t("news", "Newest first") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-caret-dark"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Oldest first')">
 								{{ t("news", "Oldest first") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-caret-dark"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Default Order')">
 								{{ t("news", "Default order") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-full-text-disabled"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Enable Full Text')">
 								{{ t("news", "Enable full text") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-full-text-enabled"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: DIsable Full Text')">
 								{{ t("news", "Disable full text") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-updatemode-default"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Unread Updated')">
 								{{ t("news", "Unread updated") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-updatemode-unread"
-								@click="deleteFolder(folder)">
+								@click="alert('TOODO: Ignore UPdated')">
 								{{ t("news", "Ignore updated") }}
 							</NcActionButton>
-							<NcActionButton icon="icon-icon-rss">
+							<NcActionButton icon="icon-icon-rss"
+								@click="alert('TODO: Open Feed URL')">
 								{{ t("news", "Open feed URL") }}
 							</NcActionButton>
 							<NcActionButton icon="icon-icon-rename"
-								@click="deleteFolder(folder)">
+								@click="alert('TODO: Rename')">
 								{{ t("news", "Rename") }}
 							</NcActionButton>
-							<NcActionButton icon="icon-delete" @click="deleteFolder(folder)">
+							<NcActionButton icon="icon-delete"
+								@click="alert('TODO: Delete Feed')">
 								{{ t("news", "Delete") }}
 							</NcActionButton>
 						</template>
 					</NcAppNavigationItem>
 				</template>
-				<template v-if="folder.feedCount > 0" #counter>
-					<CounterBubble>{{ folder.feedCount }}</CounterBubble>
+				<template v-if="topLevelItem.feedCount > 0" #counter>
+					<CounterBubble>{{ topLevelItem.feedCount }}</CounterBubble>
 				</template>
 				<template #actions>
-					<NcActionButton icon="icon-checkmark" @click="alert('Mark read')">
+					<NcActionButton icon="icon-checkmark" @click="alert('TODO: Mark read')">
 						{{ t("news", "Mark read") }}
 					</NcActionButton>
-					<NcActionButton icon="icon-rename" @click="alert('Rename')">
+					<NcActionButton icon="icon-rename" @click="alert('TODO: Rename')">
 						{{ t("news", "Rename") }}
 					</NcActionButton>
-					<NcActionButton icon="icon-delete" @click="deleteFolder(folder)">
+					<NcActionButton icon="icon-delete" @click="deleteFolder(topLevelItem)">
 						{{ t("news", "Delete") }}
 					</NcActionButton>
 				</template>
@@ -126,6 +130,7 @@
 
 <script lang="ts">
 
+import Vuex from 'vuex'
 import Vue from 'vue'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
@@ -136,6 +141,21 @@ import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import AddFeed from './AddFeed.vue'
 import { Folder } from '../types/Folder.vue'
+import { Feed } from '../types/Feed.vue'
+
+// import { ROUTES } from '../routes.js'
+import { ACTIONS, AppState } from '../store/index.ts'
+
+const SideBarState: any = {
+	topLevelNav(state: AppState) {
+		const navItems = state.feeds.filter((feed: Feed) => {
+			return feed.folderId === undefined || feed.folderId === null
+		}).concat(state.folders)
+
+		console.log(navItems);
+		return navItems;
+	},
+}
 
 export default Vue.extend({
 	components: {
@@ -151,15 +171,16 @@ export default Vue.extend({
 	data: () => {
 		return {
 			showAddFeed: false,
+			// ROUTES
 		}
 	},
 	computed: {
-		folders() {
-			return this.$store.state.folders
-		},
+		...Vuex.mapState(['feeds', 'folders']),
+		...Vuex.mapState(SideBarState),
 	},
-	created() {
-		// TODO?
+	async created() {
+		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
+		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
 	},
 	methods: {
 		newFolder(value: string) {
diff --git a/src/main.js b/src/main.js
index 815396b79..2289c04de 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,8 @@ import VueRouter from 'vue-router'
 import Explore from './components/Explore.vue'
 import { generateUrl } from '@nextcloud/router'
 import Vuex, { Store } from 'vuex'
-import axios from '@nextcloud/axios'
+
+import mainStore from './store/index.ts'
 
 import { Tooltip } from '@nextcloud/vue'
 
@@ -19,9 +20,6 @@ Vue.use(VueRouter)
 
 Vue.directive('tooltip', Tooltip)
 
-const feedUrl = generateUrl('/apps/news/feeds')
-const folderUrl = generateUrl('/apps/news/folders')
-
 const routes = [
 	{
 		name: 'explore',
@@ -36,97 +34,7 @@ const router = new VueRouter({
 	routes,
 })
 
-const store = new Store({
-	state: {
-		folders: [],
-		feeds: [],
-	},
-	mutations: {
-		addFolders(state, folders) {
-			folders.forEach((it) => {
-				it.feedCount = 0
-				state.folders.push(it)
-			})
-		},
-		addFeeds(state, feeds) {
-			feeds.forEach((it) => {
-				state.feeds.push(it)
-				const folder = state.folders.find(
-					(folder) => folder.id === it.folderId,
-				)
-				if (folder) {
-					folder.feeds.push(it)
-					folder.feedCount += it.unreadCount
-				}
-			})
-		},
-	},
-	actions: {
-		addFolder({ commit }, { folder }) {
-			axios
-				.post(folderUrl, { folderName: folder.name })
-				.then((response) =>
-					commit('addFolders', response.data.folders),
-				)
-		},
-		deleteFolder({ commit }, { folder }) {
-			/**
-            this.getByFolderId(folderId).forEach(function (feed) {
-                promises.push(self.reversiblyDelete(feed.id, false, true));
-            });
-            this.updateUnreadCache();
-			 */
-			axios.delete(folderUrl + '/' + folder.id).then(() => {
-				commit('deleteFolder', folder.id)
-			})
-		},
-		loadFolder({ commit }) {
-			axios.get(folderUrl).then((response) => {
-				commit('addFolders', response.data.folders)
-				axios
-					.get(feedUrl)
-					.then((response) =>
-						commit('addFeeds', response.data.feeds),
-					)
-			})
-		},
-		addFeed({ commit }, { feedReq }) {
-			let url = feedReq.url.trim()
-			if (!url.startsWith('http')) {
-				url = 'https://' + url
-			}
-
-			/**
-            if (title !== undefined) {
-                title = title.trim();
-            }
-			 */
-
-			const feed = {
-				url,
-				folderId: feedReq.folder.id || 0,
-				title: null,
-				unreadCount: 0,
-			}
-
-			// this.add(feed);
-			// this.updateFolderCache();
-
-			axios
-				.post(feedUrl, {
-					url: feed.url,
-					parentFolderId: feed.folderId,
-					title: null,
-					user: null,
-					password: null,
-					fullDiscover: feed.autoDiscover,
-				})
-				.then(() => {
-					commit('addFeed', feed)
-				})
-		},
-	},
-})
+const store = new Store(mainStore)
 
 export default new Vue({
 	router,
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 000000000..3d1c5948c
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,162 @@
+import axios from "@nextcloud/axios";
+import { generateUrl } from "@nextcloud/router";
+import { Commit } from "vuex";
+
+export const MUTATIONS = {
+  SET_FEEDS: 'SET_FEEDS',
+  SET_FOLDERS: 'SET_FOLDERS'
+}
+
+export const ACTIONS = {
+  FETCH_FEEDS: 'FETCH_FEEDS',
+  FETCH_FOLDERS: 'FETCH_FOLDERS'
+}
+
+type Feed = {
+  folderId?: number;
+  unreadCount: number;
+  url: string;
+  title?: string;
+  autoDiscover?: boolean;
+  faviconLink?: string;
+}
+
+type Folder = {
+  feeds: any[];
+  feedCount: number;
+  name: string;
+  id: number;
+}
+
+export type AppState = {
+  feeds: any[];
+  folders: Folder[];
+  items: any[];
+}
+
+const state: AppState = {
+  feeds: [],
+  folders: [],
+  items: []
+} as AppState
+
+const mutations = {
+  [MUTATIONS.SET_FEEDS] (state: AppState, feeds: Feed[]) {
+    feeds.forEach(it => {
+      state.feeds.push(it)
+      const folder = state.folders.find(folder => folder.id === it.folderId)
+      if (folder) {
+        folder.feeds.push(it)
+        folder.feedCount += it.unreadCount
+      }
+    })
+  },
+  [MUTATIONS.SET_FOLDERS] (state: AppState, folders: Folder[]) {
+    folders.forEach(it => {
+      it.feedCount = 0
+      it.feeds = []
+      state.folders.push(it)
+    })
+  },
+}
+
+
+const feedUrl = generateUrl("/apps/news/feeds")
+const folderUrl = generateUrl("/apps/news/folders")
+
+
+type ActionParams = { commit: Commit };
+
+const actions = {
+  async [ACTIONS.FETCH_FEEDS] ({ commit }: ActionParams) {
+    const feeds = await axios.get(
+      generateUrl("/apps/news/feeds")
+    );
+
+    commit(MUTATIONS.SET_FEEDS, feeds.data.feeds);
+  },
+  async [ACTIONS.FETCH_FOLDERS] ({ commit }: ActionParams) {
+    const folders = await axios.get(
+      generateUrl("/apps/news/folders")
+    );
+
+    commit(MUTATIONS.SET_FOLDERS, folders.data.folders);
+  },
+  addFolder({ commit }: ActionParams, { folder }: { folder: Folder}) {
+    console.log(folder)
+    axios.post(folderUrl, {folderName: folder.name}).then(
+        response => commit(MUTATIONS.SET_FOLDERS, response.data.folders)
+    );
+  },
+  deleteFolder({ commit }: ActionParams, { folder }: { folder: Folder}) {
+      /**
+      this.getByFolderId(folderId).forEach(function (feed) {
+          promises.push(self.reversiblyDelete(feed.id, false, true));
+      });
+      this.updateUnreadCache();
+      */
+      axios.delete(folderUrl + '/' + folder.id).then()
+  },
+  // loadFolder({commit}) {
+  //     console.log('loading folders')
+  //     axios.get(folderUrl).then(
+  //         response => {
+  //             commit('addFolders', response.data.folders);
+  //             axios.get(feedUrl).then(
+  //                 response => commit('addFeeds', response.data.feeds)
+  //             )
+  //         }
+  //     )
+  // },
+  addFeed({ commit }: ActionParams, { feedReq }: { feedReq: { url: string; folder?: { id: number } } }) {
+      console.log(feedReq)
+      let url = feedReq.url.trim();
+      if (!url.startsWith('http')) {
+          url = 'https://' + url;
+      }
+
+      /**
+      if (title !== undefined) {
+          title = title.trim();
+      }
+      */
+
+      let feed: Feed = {
+          url: url,
+          folderId: feedReq.folder?.id || 0,
+          title: undefined,
+          unreadCount: 0,
+          autoDiscover: undefined // TODO
+      };
+
+      // this.add(feed);
+      // this.updateFolderCache();
+
+      axios.post(feedUrl, {
+          url: feed.url,
+          parentFolderId: feed.folderId,
+          title: null,
+          user: null,
+          password: null,
+          fullDiscover: feed.autoDiscover
+      }).then(() => {
+        commit('addFeed', feed)
+      });
+  }
+}
+
+const getters = {
+  feeds (state: AppState) {
+    return state.feeds;
+  },
+  folders (state: AppState) {
+    return state.folders;
+  },
+}
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters
+}
\ No newline at end of file
diff --git a/src/types/Feed.vue b/src/types/Feed.vue
index eb2e8a098..ece4a569e 100644
--- a/src/types/Feed.vue
+++ b/src/types/Feed.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 export type Feed = {
 	url?: string;
+	folderId?: number;
 }
 </script>
diff --git a/src/types/Folder.vue b/src/types/Folder.vue
index dd9b5caf3..254b4a20f 100644
--- a/src/types/Folder.vue
+++ b/src/types/Folder.vue
@@ -1,5 +1,8 @@
 <script lang="ts">
 export type Folder = {
+  feeds: any[];
+  feedCount: number;
   name: string;
+  id: number;
 }
 </script>